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:T37b5,"use client"; import { Select as SelectPrimitive } from "@base-ui/react/select"; import { ArrowDown01Icon, ArrowUp01Icon, Tick02Icon, UnfoldMoreIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import * as stylex from "@stylexjs/stylex"; import { createContext, use, useContext } from "react"; import { useSkipMotion } from "@/lib/constella/motion"; import type { Sx } from "@/lib/constella/styles"; import { controlIconSize, joinStyles, stateStyles, typeStyles, } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, layers, media, motion, offsets, opacities, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; const selectSizes = ["sm", "default", "lg"] as const; type SelectSize = (typeof selectSizes)[number]; type Styled = Omit & { sx?: Sx; }; type SelectTriggerProps = Styled & { size?: SelectSize; }; type SelectContentProps = Styled & Pick< SelectPrimitive.Positioner.Props, "align" | "alignItemWithTrigger" | "alignOffset" | "side" | "sideOffset" > & { size?: SelectSize }; const invalid = ":is([aria-invalid='true'], [data-invalid])"; const disabled = ":is(:disabled, [data-disabled])"; const offstage = ":is([data-starting-style], [data-ending-style])"; // Over the trigger, the popup opens in place, so it doesn't travel. const aligned = ":is([data-side='none'])"; const closing = ":is([data-ending-style]):not([data-side='none'], [data-skip-motion])"; const instant = ":is([data-skip-motion])"; // Base UI grows an aligned popup as it scrolls, up to the popup's `max-height`. const maxHeight = `min(var(--available-height), ${sizes.menuHeight})`; const styles = stylex.create({ // An input's surface, so a select and an input in one form read as one family. trigger: { alignItems: "center", backgroundClip: "padding-box", borderBlockColor: { default: colors.border, [invalid]: colors.dangerBorder, }, borderInlineColor: { default: colors.border, [invalid]: colors.dangerBorder, }, borderBlockEndWidth: strokes.border, borderBlockStartWidth: strokes.border, borderInlineEndWidth: strokes.border, borderInlineStartWidth: strokes.border, borderBlockStyle: "solid", borderInlineStyle: "solid", boxShadow: { default: shadows.default, [`:is([data-popup-open]):not(${invalid})`]: shadows.defaultHover, // Repeated inside the media block, which StyleX ranks above the bare conditions. [media.hover]: { default: shadows.default, [`:is([data-popup-open]):not(${invalid})`]: shadows.defaultHover, [`:hover:not(:disabled, :active):not(${invalid})`]: shadows.defaultHover, [`:active:not(:disabled):not(${invalid})`]: shadows.defaultPressed, [invalid]: shadows.defaultInvalid, }, [`:active:not(:disabled):not(${invalid})`]: shadows.defaultPressed, [invalid]: shadows.defaultInvalid, }, color: colors.textPrimary, cursor: { default: "pointer", [disabled]: "not-allowed" }, display: "flex", gap: space.row, height: sizes.controlMd, justifyContent: "space-between", marginBlock: 0, marginInline: 0, maxWidth: "100%", minWidth: 0, opacity: { default: 1, [disabled]: opacities.disabled }, paddingInlineEnd: space.xs, paddingInlineStart: space.popup, transitionDuration: durations.hover, transitionProperty: "background-color, border-color, box-shadow", transitionTimingFunction: "ease", userSelect: "none", whiteSpace: "nowrap", width: "fit-content", // In a ButtonGroup, the focused item's ring stays above its neighbors. zIndex: { default: null, ":focus-visible": 1 }, }, sm: { height: sizes.controlSm, }, lg: { height: sizes.controlLg }, // A block, not a flex box: an ellipsis only ends text in a block. value: { color: { default: null, ":is([data-placeholder] *)": colors.textMuted }, display: "block", flex: 1, minWidth: 0, overflow: "hidden", textAlign: "start", textOverflow: "ellipsis", }, icon: { color: colors.textMuted, display: "flex", flexShrink: 0, }, positioner: { zIndex: layers.popover, }, popup: { backgroundColor: colors.raised, borderStartStartRadius: radii.lg, borderStartEndRadius: radii.lg, borderEndStartRadius: radii.lg, borderEndEndRadius: radii.lg, boxShadow: shadows.lg, color: colors.textPrimary, maxHeight, maxWidth: "var(--available-width)", minWidth: sizes.menu, opacity: { default: 1, [offstage]: 0 }, transform: { default: "none", [offstage]: `scale(${motion.popoverScale})` }, // Holds the scroll arrows, which Base UI positions absolutely. position: "relative", transformOrigin: "var(--transform-origin)", transitionDuration: { default: durations.popover, [closing]: durations.popoverExit, [aligned]: "0s", [instant]: "0s", }, transitionProperty: { default: "opacity, transform", [media.reducedMotion]: "opacity", }, transitionTimingFunction: easings.out, width: "var(--anchor-width)", }, list: { maxHeight, overflowX: "hidden", overflowY: "auto", paddingBlock: space.xxs, paddingInlineEnd: space.xxs, paddingInlineStart: space.xxs, position: "relative", scrollPaddingBlock: sizes.controlXs, }, item: { alignItems: "center", backgroundColor: { default: "transparent", ":is([data-highlighted])": colors.fillSubtle, }, borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, cursor: { default: "pointer", ":is([data-disabled])": "not-allowed" }, display: "flex", gap: space.row, minHeight: sizes.controlMd, opacity: { default: 1, ":is([data-disabled])": opacities.disabled }, paddingInlineEnd: `calc(${sizes.icon} + ${space.sm})`, paddingInlineStart: space.sm, position: "relative", userSelect: "none", }, itemSm: { minHeight: sizes.controlSm, paddingInlineEnd: `calc(${sizes.icon} + ${space.row} * 2)`, paddingInlineStart: space.row, }, itemLg: { minHeight: sizes.controlLg, paddingInlineEnd: `calc(${sizes.icon} + ${space.md})`, paddingInlineStart: space.md, }, // Wraps rather than truncating, so options that differ only at the end stay apart. itemText: { alignItems: "center", display: "flex", flex: 1, gap: space.xs, minWidth: 0, overflowWrap: "anywhere", }, indicator: { alignItems: "center", display: "flex", insetInlineEnd: space.sm, justifyContent: "center", position: "absolute", }, indicatorSm: { insetInlineEnd: space.row }, indicatorLg: { insetInlineEnd: space.md }, label: { color: colors.textMuted, fontWeight: fontWeights.medium, paddingBlock: space.xxs, paddingInlineEnd: space.sm, paddingInlineStart: space.sm, }, labelSm: { paddingInlineEnd: space.row, paddingInlineStart: space.row }, labelLg: { paddingInlineEnd: space.md, paddingInlineStart: space.md }, // In line with the rows' text. separator: { backgroundColor: colors.borderSubtle, height: strokes.border, marginBlock: space.xxs, marginInline: space.sm, }, separatorSm: { marginInline: space.row }, separatorLg: { marginInline: space.md }, scrollArrow: { alignItems: "center", backgroundColor: colors.raised, borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, insetBlockEnd: { default: null, ":is([data-direction='down'])": 0 }, insetBlockStart: { default: null, ":is([data-direction='up'])": 0 }, color: colors.textMuted, cursor: "default", display: "flex", height: sizes.controlXs, justifyContent: "center", width: "100%", zIndex: 1, }, }); const sizeStyles = { default: null, lg: styles.lg, sm: [typeStyles.captionLg, styles.sm], } satisfies Record; function Glyph({ icon, size = "default", }: { icon: typeof Tick02Icon; size?: SelectSize; }) { return ( ); } // The popup's rows by `SelectContent`'s size; the base styles are `default`'s. const contentSizeStyles = { default: { indicator: null, item: null, label: null, separator: null, text: typeStyles.textMd, }, lg: { indicator: styles.indicatorLg, item: styles.itemLg, label: styles.labelLg, separator: styles.separatorLg, text: typeStyles.textBase, }, sm: { indicator: styles.indicatorSm, item: styles.itemSm, label: styles.labelSm, separator: styles.separatorSm, text: typeStyles.textSm, }, } satisfies Record< SelectSize, Record< "indicator" | "item" | "label" | "separator" | "text", stylex.StyleXStyles | null > >; const SkipMotion = createContext(false); const Size = createContext("default"); function Select({ onOpenChange, ...props }: SelectPrimitive.Root.Props) { const [skip, handleOpenChange] = useSkipMotion(onOpenChange); return ( ); } function SelectGroup({ sx, ...props }: Styled) { return ( ); } function SelectValue({ sx, ...props }: Styled) { return ( ); } function SelectTrigger({ children, size = "default", sx, ...props }: SelectTriggerProps) { return ( {children} ); } function SelectScrollUpButton({ sx, ...props }: Styled) { return ( ); } function SelectScrollDownButton({ sx, ...props }: Styled) { return ( ); } /** Renders the portal, the positioner and the popup. Placement props go to the positioner. */ function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, children, side = "bottom", sideOffset = Number(offsets.popover), size = "default", sx, ...props }: SelectContentProps) { const skip = useContext(SkipMotion); return ( {children} ); } function SelectLabel({ sx, ...props }: Styled) { return ( ); } function SelectItem({ children, sx, ...props }: Styled) { const size = use(Size); const sized = contentSizeStyles[size]; return ( {children} ); } function SelectSeparator({ sx, ...props }: Styled) { return ( ); } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, selectSizes, SelectTrigger, SelectValue, }; export type { SelectContentProps, SelectSize, SelectTriggerProps }; 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","@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","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%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":"@hugeicons/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"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/primitives/select.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]