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:T1886,"use client"; import { spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { LayoutGroup, motion, useReducedMotion } from "motion/react"; import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"; import { type ComponentProps, createContext, type Ref, useContext, useId, useLayoutEffect, useRef, useState, } from "react"; /* * Switcher: one choice from a few, like Day / Week / Month (a segmented control). Owner, 2026-10-14: split * from Toggle Group, which switches several options on and off; Lab only until it's approved, so no meta * yet. * - A pill slides to the active option (layoutId on spring.snappy, .agents/rules/motion.md), scoped to each * Switcher, so two never trade a pill. * - There's always a choice: clicking the active option keeps it. * - A radiogroup of radio items (Radix Toggle Group, single). Arrow keys move between options; Home and End * jump to the ends. * - Flat. The pill takes the page's own colour, dark in dark mode and light in light mode (owner, * 2026-10-14). Default: a muted track. Outline: a bordered track, and the pill gets a hairline too, so it * shows on any surface. No shadows and no * scale. Inactive options are muted and brighten on hover. * - The pill's corners follow the option's own radius (read from it), so they stay true while it changes * width between options of different sizes. */ const switcherVariants = cva("relative isolate inline-flex w-fit items-center gap-0.5 rounded-lg p-0.5", { variants: { variant: { default: "bg-muted", outline: "border border-input", }, }, defaultVariants: { variant: "default" }, }); // The options sit 2px inside the track, so the track is a control height (32, 36 or 40px) const switcherItemVariants = cva( [ "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-md text-sm font-medium whitespace-nowrap", "text-muted-foreground transition-colors duration-(--duration-base) ease-out data-[state=off]:hover:text-foreground data-[state=on]:text-foreground", "outline-ring focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset)", "disabled:pointer-events-none disabled:opacity-(--opacity-disabled)", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--size-icon-md)", ], { variants: { size: { sm: "h-7 px-2.5", md: "h-8 px-3", lg: "h-9 px-4", }, }, defaultVariants: { size: "md" }, }, ); const SwitcherContext = createContext<{ value: string; variant: "default" | "outline"; size: "sm" | "md" | "lg"; reduce: boolean; } | null>(null); type RootProps = Omit< Extract, { type: "single" }>, "type" | "value" | "defaultValue" | "onValueChange" >; export type SwitcherProps = RootProps & VariantProps & VariantProps & { /** The chosen option, when you control it */ value?: string; /** The option chosen at first */ defaultValue?: string; /** Called with the new option when the choice changes */ onValueChange?: (value: string) => void; }; function Switcher({ value, defaultValue, onValueChange, variant, size, className, children, ...props }: SwitcherProps) { const groupId = useId(); const reduce = useReducedMotion() ?? false; // Mirror the value, controlled or not, so options know whether they're on const [internal, setInternal] = useState(defaultValue ?? ""); const current = value ?? internal; return ( { // There's always a choice: Radix sends "" when the active option is clicked again if (!next) return; setInternal(next); onValueChange?.(next); }} className={cn(switcherVariants({ variant }), className)} {...props} > {children} ); } /** Hands the option's node to our ref and to the caller's */ function useMergedRef(own: { current: T | null }, theirs?: Ref) { return (node: T | null) => { own.current = node; if (typeof theirs === "function") theirs(node); else if (theirs) (theirs as { current: T | null }).current = node; }; } function SwitcherItem({ className, children, value, ref, ...props }: ComponentProps) { const switcher = useContext(SwitcherContext); const node = useRef(null); const setRef = useMergedRef(node, ref); const [radius, setRadius] = useState(0); // A numeric radius lets motion keep the pill's corners true while it changes width useLayoutEffect(() => { if (node.current) setRadius(Number.parseFloat(getComputedStyle(node.current).borderTopLeftRadius) || 0); }, []); return ( {switcher?.value === value ? ( // Options aren't stacking contexts: the pill joins the Switcher's layer (it's `isolate`), so it passes // behind every option's label as it slides ) : null} {children} ); } export { Switcher, SwitcherItem, switcherItemVariants, switcherVariants }; 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","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority@^0.7.1"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"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@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/switcher.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]