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:T1caa,"use client" import { createContext, use } from "react" import { twMerge } from "cn" import { composeRenderProps } from "react-aria-components/composeRenderProps" import type { GridListItemProps, GridListProps, TextProps, } from "react-aria-components/GridList" import { GridList, GridListItem, Text } from "react-aria-components/GridList" import type { VariantProps } from "tailwind-variants" import { tv } from "tailwind-variants" import { cx } from "@/lib/primitive" import { Checkbox } from "./checkbox" const choiceBoxStyles = tv({ base: "grid [--gutter:--spacing(4)]", variants: { columns: { 1: "col-span-full grid-cols-[auto_1fr]", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4", 5: "sm:grid-cols-5", 6: "sm:grid-cols-6", }, gap: { 0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5", 6: "gap-6", }, }, defaultVariants: { columns: 1, gap: 0, }, compoundVariants: [ { gap: 0, columns: 1, className: "rounded-lg *:data-[slot=choice-box-item]:-mt-px *:data-[slot=choice-box-item]:rounded-none *:data-[slot=choice-box-item]:inset-ring *:data-[slot=choice-box-item]:first:rounded-t-[calc(var(--radius-lg)-1px)] *:data-[slot=choice-box-item]:last:rounded-b-[calc(var(--radius-lg)-1px)]", }, ], }) const ChoiceBoxContext = createContext<{ columns?: number gap?: number isReadOnly?: boolean }>({}) const useChoiceBoxContext = () => use(ChoiceBoxContext) interface ChoiceBoxProps extends GridListProps, VariantProps { isReadOnly?: boolean } const ChoiceBox = ({ columns = 1, gap = 0, className, selectionMode = "single", isReadOnly, ...props }: ChoiceBoxProps) => { return ( ) } const choiceBoxItemStyles = tv({ base: [ "group outline-hidden", "[--choice-box-foreground:var(--color-primary)] [--choice-box:var(--color-primary)]/5", "[--choice-box-selected-hovered:var(--color-primary)]/4", "rounded-lg p-(--gutter) inset-ring inset-ring-border **:data-[slot=label]:font-medium", "**:data-[slot=avatar]:row-span-2 **:data-[slot=avatar]:mt-0.5 **:data-[slot=avatar]:shrink-0", "**:data-[slot=icon]:row-span-2 **:data-[slot=icon]:h-[1.1lh] **:data-[slot=icon]:w-5 **:data-[slot=icon]:shrink-0", "has-data-[slot=avatar]:grid-cols-[auto_1fr_auto] has-data-[slot=icon]:grid-cols-[auto_1fr_auto]", "grid grid-cols-[1fr_auto] content-start items-start gap-x-[calc(var(--gutter)-(--spacing(1)))] gap-y-1", "[--choice-box-active-ring:var(--color-ring)]/70 [--choice-box-ring:var(--color-ring)]/20", "has-[[slot=description]]:**:data-[slot=label]:font-medium", ], variants: { isLink: { true: "cursor-pointer", false: "cursor-default", }, isHovered: { true: "not-data-readonly:not-data-focus-visible:not-selected:inset-ring-muted-foreground/30", }, isFocused: { true: "invalid:ring-danger-subtle-foreground/20 ring-3 ring-(--choice-box-ring) inset-ring-(--choice-box-active-ring)", }, isInvalid: { true: "ring-danger-subtle-foreground/20 ring-3" }, isOneColumn: { true: "col-span-full", }, isActive: { true: [ "bg-(--choice-box) text-(--choice-box-foreground)", "z-20 inset-ring-(--choice-box-active-ring) hover:bg-(--choice-box-selected-hovered)", "**:data-[slot=label]:text-(--choice-box-foreground)", "**:[[slot=description]]:text-(--choice-box-foreground)", ], }, isDisabled: { true: "z-10 opacity-50 **:data-[slot=label]:text-muted-foreground forced-colors:text-[GrayText] **:[[slot=description]]:text-muted-foreground/70", }, }, }) interface ChoiceBoxItemProps extends GridListItemProps, VariantProps { label?: string description?: string } const ChoiceBoxItem = ({ className, label, description, children, ...props }: ChoiceBoxItemProps) => { const textValue = typeof children === "string" ? children : undefined const { columns, isReadOnly } = useChoiceBoxContext() return ( choiceBoxItemStyles({ ...renderProps, isOneColumn: columns === 1, isLink: "href" in props, isFocused: !isReadOnly && renderProps.isFocused, isActive: (!isReadOnly && isSelected) || isFocusVisible, className, }) )} > {composeRenderProps(children, (children, { selectionMode }) => { const isStringChild = typeof children === "string" const hasCustomChildren = typeof children !== "undefined" const content = hasCustomChildren ? ( isStringChild ? ( {children} ) : ( children ) ) : ( <> {label && {label}} {description && ( {description} )} ) return ( <> {content} {selectionMode === "multiple" && ( )} ) })} ) } interface ChoiceBoxLabelProps extends TextProps { ref?: React.Ref } const ChoiceBoxLabel = ({ className, ref, ...props }: ChoiceBoxLabelProps) => { return ( ) } type ChoiceBoxDescriptionProps = ChoiceBoxLabelProps const ChoiceBoxDescription = ({ className, ref, ...props }: ChoiceBoxDescriptionProps) => { return ( ) } export { ChoiceBox, ChoiceBoxDescription, ChoiceBoxItem, ChoiceBoxLabel } export type { ChoiceBoxItemProps, ChoiceBoxProps } 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","react-aria-components",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-aria-components","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":"react-aria-components"}]]}]}],["$","li","cn@^0.2.4",{"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@^0.2.4"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@preskok","registryDependencies":["https://ui-three-mu.vercel.app/r/checkbox.json","https://ui-three-mu.vercel.app/r/primitive.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/choice-box.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]