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/1o6_421saitt-.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/1o6_421saitt-.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:T2392,"use client"; import { Checkbox as CheckboxPrimitive } from "@base-ui/react"; import { cn } from "cn"; import React, { createContext, useContext, useState } from "react"; import { tv } from "tailwind-variants"; // Styles for invalid animation shake const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; const checkboxRootStyles = tv({ base: [ `group size-7 relative inline-flex items-center justify-center shrink-0 shadow-xs outline-0 outline-offset-0 outline-transparent outline-solid cursor-pointer transition-[outline-width,outline-offset,outline-color] duration-100 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/50 forced-colors:focus-visible:outline-[Highlight] aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-destructive/50 data-invalid:outline-2 data-invalid:outline-offset-2 data-invalid:outline-destructive/50`, `data-disabled:cursor-not-allowed data-disabled:grayscale data-disabled:scale-100 data-disabled:opacity-50`, `before:content-[''] before:absolute before:border-1 before:inset-0 before:border-border aria-invalid:before:border-destructive data-invalid:before:border-destructive not-data-disabled:hover:before:bg-secondary/60`, `after:content-[''] after:pointer-events-none after:absolute after:inset-0 after:z-0 after:origin-center after:rounded-[inherit] after:bg-linear-to-b after:from-primary after:to-[color-mix(in_oklch,var(--primary),black_10%)] dark:after:from-[color-mix(in_oklch,var(--primary),white_35%)] dark:after:to-[color-mix(in_oklch,var(--primary),white_5%)] after:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--primary),black_16%),inset_0_2px_0_0_rgb(255_255_255_/_0.25)] dark:after:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--primary),white_12%),inset_0_2px_0_0_rgb(255_255_255_/_0.55)] data-unchecked:after:scale-50 data-unchecked:after:opacity-0 data-checked:after:scale-100 data-checked:after:opacity-100`, ], variants: { size: { sm: "size-4.5", default: "size-5", lg: "size-6", }, radius: { none: "rounded-none before:rounded-none", sm: "rounded-[6px] before:rounded-[6px]", default: "rounded-[7.2px] before:rounded-[7.2px]", lg: "rounded-[8.4px] before:rounded-[8.4px]", full: "rounded-full before:rounded-full", }, reduceMotion: { true: "transition-none before:transition-none after:transition-none", false: "before:transition-colors transition-transform after:duration-100 after:ease-linear after:[transition-property:opacity,scale,transform] motion-reduce:transition-none motion-reduce:transform-none motion-reduce:before:transition-none motion-reduce:after:transition-none", }, }, defaultVariants: { size: "default", radius: "default", reduceMotion: false, }, }); const checkboxIndicatorStyles = tv({ base: [ `relative z-10 flex items-center justify-center data-unchecked:opacity-0 data-checked:opacity-100 text-primary-foreground transition-opacity pointer-events-none`, ], variants: { size: { sm: "w-2.5 h-2.5", default: "w-3 h-3", lg: "w-4 h-4", }, reduceMotion: { true: "transition-none", false: "transition-opacity motion-reduce:transition-none", }, }, defaultVariants: { size: "default", reduceMotion: false, }, }); type CheckboxRootProps = { reduceMotion?: boolean; radius?: "none" | "sm" | "default" | "lg" | "full"; size?: "sm" | "default" | "lg"; } & React.ComponentProps; type CheckboxContextType = { checked: boolean; onCheckedChange: CheckboxRootProps["onCheckedChange"]; indeterminate: boolean | undefined; size: NonNullable; reduceMotion?: boolean; }; const CheckboxContext = createContext( undefined ); const useCheckbox = () => { const context = useContext(CheckboxContext); if (!context) { throw new Error("useCheckbox must be used within a CheckboxProvider"); } return context; }; function CheckboxRoot({ checked, children, defaultChecked, onCheckedChange, indeterminate, className, reduceMotion = false, size = "default", radius = "default", ...rest }: CheckboxRootProps) { const [internalChecked, setInternalChecked] = useState( defaultChecked ?? false ); const isChecked = checked ?? internalChecked; const handleCheckedChange: CheckboxRootProps["onCheckedChange"] = ( checked, eventDetails ) => { if (indeterminate && !onCheckedChange) { return; } setInternalChecked(checked); onCheckedChange?.(checked, eventDetails); }; return ( <> ); } type CheckboxIconProps = { checked: boolean; indeterminate: boolean | undefined; reduceMotion?: boolean; } & React.ComponentProps<"svg">; function CheckboxIcon(props: CheckboxIconProps) { const { checked, indeterminate, reduceMotion, ...rest } = props; if (indeterminate) { return ( ); } return ( ); } type CheckboxIndicatorProps = { icon?: React.ReactNode | ((props: CheckboxIconProps) => React.ReactNode); } & React.ComponentProps; function CheckboxIndicator({ className, children, ...rest }: CheckboxIndicatorProps) { const { checked, indeterminate, size, reduceMotion = false } = useCheckbox(); return ( {children ?? ( )} ); } type CheckboxProps = { reduceMotion?: boolean; radius?: "none" | "sm" | "default" | "lg" | "full"; size?: "sm" | "default" | "lg"; } & React.ComponentProps; function Checkbox({ className, reduceMotion, children, ...rest }: CheckboxProps) { return ( {children} ); } export { Checkbox, CheckboxRoot, CheckboxIndicator }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","tailwind-variants",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-variants","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-variants"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/checkbox.tsx","content":"$52","type":"registry:ui","target":"components/ui/checkbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]