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:T1533,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "cn"; import { Direction as DirectionPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import { Input } from "@/registry/bases/radix/ui/input"; const ROOT_NAME = "SegmentedInput"; const ITEM_NAME = "SegmentedInputItem"; type Direction = "ltr" | "rtl"; type Orientation = "horizontal" | "vertical"; type Size = "default" | "sm" | "lg"; type Position = "isolated" | "first" | "middle" | "last"; interface SegmentedInputContextValue { dir?: Direction; orientation?: Orientation; size?: Size; disabled?: boolean; invalid?: boolean; required?: boolean; } const SegmentedInputContext = React.createContext(null); function useSegmentedInputContext(consumerName: string) { const context = React.useContext(SegmentedInputContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface SegmentedInputProps extends React.ComponentProps<"div"> { dir?: Direction; orientation?: Orientation; size?: Size; asChild?: boolean; disabled?: boolean; invalid?: boolean; required?: boolean; } function SegmentedInput(props: SegmentedInputProps) { const { size = "default", dir: dirProp, orientation = "horizontal", children, className, asChild, disabled, invalid, required, ...rootProps } = props; const dir = DirectionPrimitive.useDirection(dirProp); const contextValue = React.useMemo( () => ({ dir, orientation, size, disabled, invalid, required, }), [dir, orientation, size, disabled, invalid, required], ); const childrenArray = React.Children.toArray(children); const childrenCount = childrenArray.length; const segmentedInputItems = React.Children.map(children, (child, index) => { if (React.isValidElement(child)) { if (!child.props.position) { let position: Position; if (childrenCount === 1) { position = "isolated"; } else if (index === 0) { position = "first"; } else if (index === childrenCount - 1) { position = "last"; } else { position = "middle"; } return React.cloneElement(child, { position }); } } return child; }); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {segmentedInputItems} ); } const segmentedInputItemVariants = cva("", { variants: { position: { isolated: "", first: "rounded-e-none", middle: "-ms-px rounded-none border-l-0", last: "-ms-px rounded-s-none border-l-0", }, orientation: { horizontal: "", vertical: "", }, size: { sm: "h-8 px-2 text-xs", default: "h-9 px-3", lg: "h-11 px-4", }, }, compoundVariants: [ { position: "first", orientation: "vertical", class: "ms-0 rounded-e-md rounded-b-none border-l", }, { position: "middle", orientation: "vertical", class: "ms-0 -mt-px rounded-none border-t-0 border-l", }, { position: "last", orientation: "vertical", class: "ms-0 -mt-px rounded-s-md rounded-t-none border-t-0 border-l", }, ], defaultVariants: { position: "isolated", orientation: "horizontal", size: "default", }, }); interface SegmentedInputItemProps extends React.ComponentProps<"input">, Omit, "size"> { asChild?: boolean; } function SegmentedInputItem(props: SegmentedInputItemProps) { const { asChild, className, position, disabled, required, ...inputProps } = props; const context = useSegmentedInputContext(ITEM_NAME); const isDisabled = disabled ?? context.disabled; const isRequired = required ?? context.required; const ItemPrimitive = asChild ? SlotPrimitive.Slot : Input; return ( ); } export { SegmentedInput, SegmentedInputItem, type SegmentedInputProps }; 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","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"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["input"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/segmented-input.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]