51: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"] 52: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"] 53:T1848,"use client"; import { duration, ease, spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"; import { type ComponentProps, createContext, type Ref, useContext, useLayoutEffect, useRef, useState, } from "react"; /* * Toggle Group: buttons you switch on and off independently, like Bold / Italic / Underline (owner, * 2026-10-14: split from Switcher, which is for one choice; Lab only until it's approved, so no meta yet). * - Each pressed option fades its own pill in (opacity, plus a small scale on spring.snappy) and out quickly. * - A toolbar of aria-pressed buttons (Radix Toggle Group, multiple). 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 on the buttons. Inactive options are muted and brighten on hover. * - The pill's corners follow the option's own radius (read from it). */ const toggleGroupVariants = 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 toggleGroupItemVariants = 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 GroupContext = createContext<{ value: string[]; variant: "default" | "outline"; size: "sm" | "md" | "lg"; reduce: boolean; } | null>(null); type RootProps = Omit< Extract, { type: "multiple" }>, "type" | "value" | "defaultValue" | "onValueChange" >; export type ToggleGroupProps = RootProps & VariantProps & VariantProps & { /** The options switched on, when you control them */ value?: string[]; /** The options switched on at first */ defaultValue?: string[]; /** Called with every option that's on, after each change */ onValueChange?: (value: string[]) => void; }; function ToggleGroup({ value, defaultValue, onValueChange, variant, size, className, ...props }: ToggleGroupProps) { 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 ( { setInternal(next); onValueChange?.(next); }} className={cn(toggleGroupVariants({ variant }), className)} {...props} /> ); } /** 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 ToggleGroupItem({ className, children, value, ref, ...props }: ComponentProps) { const group = useContext(GroupContext); const node = useRef(null); const setRef = useMergedRef(node, ref); const [radius, setRadius] = useState(0); // The pill takes the option's corner radius, whatever the user's --radius is useLayoutEffect(() => { if (node.current) setRadius(Number.parseFloat(getComputedStyle(node.current).borderTopLeftRadius) || 0); }, []); const on = group?.value.includes(value) ?? false; const reduce = group?.reduce ?? false; return ( {on ? ( ) : null} {children} ); } export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants, toggleGroupVariants }; 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/fewtone/ui/toggle-group.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]