50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T436,"use client"; import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps, } from "react"; import "./checkbox.css"; export type CheckboxProps = Omit, "type"> & { indeterminate?: boolean; }; export function Checkbox({ ref, indeterminate = false, ...props }: CheckboxProps) { const input = useRef(null); useImperativeHandle(ref, () => input.current!, []); // Native activation clears mixed state. Derive this prop from the group's // selection; synchronize again whenever the caller renders that state. useLayoutEffect(() => { if (input.current) input.current.indeterminate = indeterminate; }); return ( ); } 53:T10bf,/* checkbox.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* The native input fills the target; the smaller indicator is decorative. */ [data-slot="checkbox-root"] { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-height); height: var(--control-height); vertical-align: middle; } [data-slot="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; border: 0; background: transparent; outline: none; cursor: pointer; touch-action: manipulation; } /* Choice marks: one 18px recessed mark for checkbox and radio. Checked marks fill with ink; the check stroke draws itself and the radio dot settles in. The switch thumb stretches while pressed, then settles. */ [data-slot="checkbox-indicator"] { box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: none; background: var(--field); box-shadow: var(--shadow-field); transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } [data-slot="checkbox-indicator"] { width: 18px; height: 18px; } [data-slot="checkbox-indicator"] { border-radius: var(--radius-mark); color: var(--accent-foreground); } [data-slot="checkbox-indicator"] svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-slot="checkbox-indicator"] path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 200ms var(--ease-out); } [data-slot="checkbox"]:checked:not(:indeterminate) + [data-slot="checkbox-indicator"] [data-mark="check"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] [data-mark="mixed"] { stroke-dashoffset: 0; } [data-slot="checkbox"]:checked + [data-slot="checkbox-indicator"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] { background: var(--accent); box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / 14%); } @media (hover: hover) { [data-slot="checkbox"]:hover:not(:disabled):not(:checked) + [data-slot="checkbox-indicator"] { box-shadow: var(--shadow-field-hover); } } [data-slot="checkbox"]:focus-visible + [data-slot="checkbox-indicator"] { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="checkbox"][aria-invalid="true"] + [data-slot="checkbox-indicator"] { box-shadow: var(--shadow-field-invalid); outline-color: var(--destructive); } [data-slot="checkbox"]:disabled { cursor: not-allowed; } [data-slot="checkbox"]:disabled + [data-slot="checkbox-indicator"] { background: var(--sunken); box-shadow: var(--shadow-field-quiet); color: var(--muted-foreground); } [data-slot="checkbox"]:disabled:is(:checked, :indeterminate) + [data-slot="checkbox-indicator"] { background: var(--border); box-shadow: none; } @media (forced-colors: active) { [data-slot="checkbox-indicator"] { forced-color-adjust: none; background: Canvas; border-color: CanvasText; } [data-slot="checkbox"]:checked + [data-slot="checkbox-indicator"], [data-slot="checkbox"]:indeterminate + [data-slot="checkbox-indicator"] { background: Highlight; border-color: Highlight; } [data-slot="checkbox"]:is(:checked, :indeterminate) + [data-slot="checkbox-indicator"] { color: HighlightText; } [data-slot="checkbox-indicator"] { border: 1px solid CanvasText; box-shadow: none; } [data-slot="checkbox"]:hover:not(:disabled) + [data-slot="checkbox-indicator"] { border-color: CanvasText; } [data-slot="checkbox"]:focus-visible + [data-slot="checkbox-indicator"] { outline-color: Highlight; } } @media (prefers-reduced-motion: reduce) { [data-slot="checkbox-indicator"], [data-slot="checkbox-indicator"] path { transition: none; } } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/checkbox.tsx","content":"$52","type":"registry:ui","target":"components/ui/checkbox.tsx"},{"path":"ui/checkbox.css","content":"$53","type":"registry:file","target":"components/ui/checkbox.css"}],"className":"h-[70svh] min-h-80"}]]}]