52: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"] 53: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"] 54:T13c0,"use client"; import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"; import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"; import * as stylex from "@stylexjs/stylex"; import { useLayoutEffect, useRef, useState } from "react"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, media, opacities, radii, sizes, space, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; type SegmentedControlProps = Styled< Omit< ToggleGroupPrimitive.Props, "multiple" | "onValueChange" | "value" > > & { value: Value; onValueChange: (value: Value) => void; }; interface Place { x: number; width: number; } const styles = stylex.create({ root: { display: "flex", position: "relative", width: "fit-content", }, // Reads like a tab: the pill behind it, not its own fill, marks the pick. item: { alignItems: "center", backgroundColor: { default: "transparent", ":is([data-pressed]):not([data-placed] *)": colors.fill, }, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, borderBlockEndWidth: 0, borderBlockStartWidth: 0, borderInlineEndWidth: 0, borderInlineStartWidth: 0, color: { default: colors.textSecondary, ":is([data-pressed])": colors.textPrimary, [media.hover]: { default: colors.textSecondary, ":hover:not(:disabled)": colors.textPrimary, ":is([data-pressed])": colors.textPrimary, }, }, cursor: { default: "pointer", ":disabled": "not-allowed" }, display: "inline-flex", fontWeight: fontWeights.semimedium, height: sizes.controlSm, opacity: { default: 1, ":disabled": opacities.disabled }, paddingInline: space.sm, position: "relative", transitionDuration: durations.hover, transitionProperty: "color", transitionTimingFunction: "ease", userSelect: "none", whiteSpace: "nowrap", zIndex: 1, }, indicator: { backgroundColor: colors.fill, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, height: sizes.controlSm, left: 0, position: "absolute", top: 0, // Arrow keys move focus visibly and a click doesn't, so only the pointer slides it. transitionDuration: { default: durations.move, ":is([data-slot='segmented-control']:has(:focus-visible) > *)": "0s", [media.reducedMotion]: "0s", }, transitionProperty: "transform, width", transitionTimingFunction: easings.inOut, }, place: (x: number, width: number) => ({ transform: `translateX(${x}px)`, width, }), }); /** One pick among a few, marked by a pill that slides to it, as a tab's does. */ function SegmentedControl({ children, onValueChange, sx, value, ...props }: SegmentedControlProps) { const root = useRef(null); const [place, setPlace] = useState(null); useLayoutEffect(() => { const element = root.current; const measure = () => { const pressed = element?.querySelector("[data-pressed]"); setPlace( pressed === null || pressed === undefined ? null : { x: pressed.offsetLeft, width: pressed.offsetWidth } ); }; measure(); // A new pick moves the pill; webfonts and container changes move the items. const picks = new MutationObserver(measure); const resizes = new ResizeObserver(measure); if (element !== null) { picks.observe(element, { attributeFilter: ["data-pressed"], subtree: true, }); resizes.observe(element); } return () => { picks.disconnect(); resizes.disconnect(); }; }, []); return ( { const [picked] = next; if (picked !== undefined) { onValueChange(picked); } }} ref={root} value={[value]} {...props} {...stylex.props([typeStyles.textSm, styles.root], sx)} > {place === null ? null : ( )} {children} ); } function SegmentedControlItem({ sx, ...props }: Styled) { return ( ); } export { SegmentedControl, SegmentedControlItem }; export type { SegmentedControlProps }; 51:["$","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","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","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":"@stylexjs/stylex"}]]}]}]]}],["$","$L52",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/primitives/segmented-control.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]