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:T82a0,"use client"; import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; import { Check, ChevronDown } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const dropdownItemHighlightBeforeClassName = "before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:bg-transparent before:transition-colors before:rounded-[inherit] before:supports-[corner-shape:squircle]:[corner-shape:inherit]"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; export type DropdownVariant = "select" | "action"; type DropdownAlign = "center" | "end" | "start"; type DropdownFocusStrategy = "first" | "last" | "selected"; const SOFT_EASE = [0.22, 1, 0.36, 1] as const; const MAX_CONTENT_HEIGHT = 384; const dropdownListScrollbarClassName = "z-10 my-1.5 mr-0.5 w-1 shrink-0 touch-none select-none opacity-0 transition-opacity duration-150 before:absolute before:left-1/2 before:h-full before:w-5 before:-translate-x-1/2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"; const dropdownListThumbClassName = "relative rounded-full bg-muted-foreground/50"; const TYPEAHEAD_RESET_MS = 500; const VIEWPORT_MARGIN = 12; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function getContentMotion() { return { animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, initial: { opacity: 0, y: -4 }, transition: { duration: 0.25, ease: SOFT_EASE, }, }; } function getHorizontalOrigin(align: DropdownAlign) { if (align === "center") { return "center"; } if (align === "end") { return "right"; } return "left"; } function getResolvedPlacement( contentHeight: number, triggerRect: DOMRect, viewportHeight: number, sideOffset: number ) { const availableBelow = Math.max( viewportHeight - triggerRect.bottom - sideOffset - VIEWPORT_MARGIN, 0 ); const maxHeight = availableBelow > 0 ? Math.min(MAX_CONTENT_HEIGHT, Math.min(contentHeight, availableBelow)) : null; return { maxHeight }; } function getInnerContentMotion() { return { animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -2 }, initial: { opacity: 0, y: 3 }, transition: { delay: 0.03, duration: 0.18, ease: SOFT_EASE, }, }; } function normalizeTypeaheadValue(value: string) { return value .normalize("NFKD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/\s+/g, " ") .trim(); } type DropdownContextValue = { activeItemId: string | null; contentId: string; containerRef: React.RefObject; labels: Record; open: boolean; setActiveItemId: (id: string | null) => void; setFocusStrategy: (strategy: DropdownFocusStrategy) => void; setOpen: (open: boolean) => void; setValue: (value: string | undefined) => void; triggerRef: React.RefObject; value: string | undefined; variant: DropdownVariant; }; const DropdownContext = React.createContext(null); function useDropdownContext(componentName: string) { const context = React.useContext(DropdownContext); if (!context) { throw new Error(`${componentName} must be used within Dropdown.`); } return context; } function setRefValue( ref: React.ForwardedRef | undefined, value: T | null ) { if (typeof ref === "function") { ref(value); return; } if (ref) { ref.current = value; } } function getTextContent(node: React.ReactNode): string { if (typeof node === "string" || typeof node === "number") { return String(node); } if (Array.isArray(node)) { return node.map(getTextContent).join(""); } if (React.isValidElement(node)) { const element = node as React.ReactElement<{ children?: React.ReactNode }>; return getTextContent(element.props.children); } return ""; } function getResolvedHorizontalPosition({ align, containerRect, contentWidth, triggerRect, viewportWidth, }: { align: DropdownAlign; containerRect: DOMRect; contentWidth: number; triggerRect: DOMRect; viewportWidth: number; }) { const desiredLeft = align === "center" ? triggerRect.left + (triggerRect.width - contentWidth) / 2 : align === "end" ? triggerRect.right - contentWidth : triggerRect.left; const maxLeft = Math.max( VIEWPORT_MARGIN, viewportWidth - contentWidth - VIEWPORT_MARGIN ); const clampedLeft = clamp(desiredLeft, VIEWPORT_MARGIN, maxLeft); const horizontalOrigin: "center" | "left" | "right" = Math.abs(clampedLeft - VIEWPORT_MARGIN) < 0.5 ? "left" : Math.abs(clampedLeft - maxLeft) < 0.5 ? "right" : getHorizontalOrigin(align); return { horizontalOrigin, left: clampedLeft - containerRect.left, }; } function collectDropdownLabels(node: React.ReactNode): Record { const labels: Record = {}; const visit = (childNode: React.ReactNode) => { if (!React.isValidElement(childNode)) { if (Array.isArray(childNode)) { childNode.forEach(visit); } return; } const element = childNode as React.ReactElement<{ children?: React.ReactNode; textValue?: string; value?: string; }>; const displayName = typeof element.type === "string" ? element.type : (element.type as { displayName?: string }).displayName; if (displayName === "DropdownItem" && element.props.value) { labels[element.props.value] = ( element.props.textValue ?? getTextContent(element.props.children) ).trim(); } if (element.props.children) { React.Children.forEach(element.props.children, visit); } }; React.Children.forEach(node, visit); return labels; } function useControllableState({ defaultProp, onChange, prop, }: { defaultProp: T; onChange?: (value: T) => void; prop?: T; }) { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultProp); const isControlled = prop !== undefined; const value = isControlled ? prop : uncontrolledValue; const setValue = React.useCallback( (nextValue: T) => { if (!isControlled) { setUncontrolledValue(nextValue); } onChange?.(nextValue); }, [isControlled, onChange] ); return [value, setValue] as const; } export interface DropdownProps { children: React.ReactNode; className?: string; defaultOpen?: boolean; defaultValue?: string; onOpenChange?: (open: boolean) => void; onValueChange?: (value: string | undefined) => void; open?: boolean; value?: string; variant?: DropdownVariant; } export function Dropdown({ children, className, defaultOpen = false, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, variant = "select", }: DropdownProps) { const containerRef = React.useRef(null); const triggerRef = React.useRef(null); const contentId = React.useId(); const focusStrategyRef = React.useRef("selected"); const typeaheadRef = React.useRef(""); const typeaheadTimeoutRef = React.useRef(null); const [open, setOpen] = useControllableState({ defaultProp: defaultOpen, onChange: onOpenChange, prop: openProp, }); const [activeItemId, setActiveItemId] = React.useState(null); const [value, setValue] = useControllableState({ defaultProp: defaultValue, onChange: onValueChange, prop: valueProp, }); const labels = React.useMemo( () => collectDropdownLabels(children), [children] ); const clearTypeahead = React.useCallback(() => { if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); typeaheadTimeoutRef.current = null; } typeaheadRef.current = ""; }, []); const getEnabledItems = React.useCallback(() => { if (!containerRef.current) { return []; } return Array.from( containerRef.current.querySelectorAll( "[data-dropdown-item]:not([data-disabled])" ) ); }, []); const focusItem = React.useCallback( (index: number) => { const items = getEnabledItems(); if (!items.length) { return; } const nextIndex = Math.min(Math.max(index, 0), items.length - 1); const nextItem = items[nextIndex]; nextItem?.focus(); nextItem?.scrollIntoView({ block: "nearest" }); }, [getEnabledItems] ); const getActiveDropdownElement = React.useCallback(() => { const activeElement = document.activeElement; if ( !( containerRef.current && activeElement && containerRef.current.contains(activeElement) ) ) { return null; } return activeElement; }, []); const findMatchingItemIndex = React.useCallback( (query: string) => { const normalizedQuery = normalizeTypeaheadValue(query); if (!normalizedQuery) { return null; } const items = getEnabledItems(); if (!items.length) { return null; } const activeElement = getActiveDropdownElement(); const currentIndex = items.indexOf(activeElement as HTMLElement); const startIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length; for (let offset = 0; offset < items.length; offset += 1) { const index = (startIndex + offset) % items.length; const candidate = items[index]; const textValue = normalizeTypeaheadValue( candidate?.dataset.textValue ?? candidate?.textContent ?? "" ); if (textValue.startsWith(normalizedQuery)) { return index; } } return null; }, [getActiveDropdownElement, getEnabledItems] ); const handleMenuNavigation = React.useCallback( (key: "ArrowDown" | "ArrowUp" | "Home" | "End") => { const activeElement = getActiveDropdownElement(); if (!activeElement) { return false; } const items = getEnabledItems(); if (!items.length) { return false; } if (key === "Home") { focusItem(0); return true; } if (key === "End") { focusItem(items.length - 1); return true; } const currentIndex = items.indexOf(activeElement as HTMLElement); if (currentIndex === -1) { focusItem(key === "ArrowUp" ? items.length - 1 : 0); return true; } const nextIndex = key === "ArrowUp" ? (currentIndex - 1 + items.length) % items.length : (currentIndex + 1) % items.length; focusItem(nextIndex); return true; }, [focusItem, getActiveDropdownElement, getEnabledItems] ); const handleTypeaheadKey = React.useCallback( (key: string) => { const normalizedKey = normalizeTypeaheadValue(key); if (!normalizedKey) { return false; } const nextQuery = typeaheadRef.current === normalizedKey ? normalizedKey : `${typeaheadRef.current}${normalizedKey}`; const matchIndex = findMatchingItemIndex(nextQuery); typeaheadRef.current = nextQuery; if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); } typeaheadTimeoutRef.current = window.setTimeout(() => { typeaheadRef.current = ""; typeaheadTimeoutRef.current = null; }, TYPEAHEAD_RESET_MS); if (matchIndex !== null) { focusItem(matchIndex); return true; } if (nextQuery !== normalizedKey) { typeaheadRef.current = normalizedKey; const fallbackMatchIndex = findMatchingItemIndex(normalizedKey); if (fallbackMatchIndex !== null) { focusItem(fallbackMatchIndex); return true; } } return false; }, [findMatchingItemIndex, focusItem] ); React.useEffect(() => { if (open) { return; } setActiveItemId(null); clearTypeahead(); }, [clearTypeahead, open]); React.useEffect(() => clearTypeahead, [clearTypeahead]); React.useEffect(() => { if (!open) { return; } const handlePointerDown = (event: MouseEvent) => { if ( containerRef.current && !containerRef.current.contains(event.target as Node) ) { setOpen(false); } }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { setOpen(false); triggerRef.current?.focus(); return; } if (event.key === "Tab") { setOpen(false); return; } if ( event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey && event.key.trim() && handleTypeaheadKey(event.key) ) { event.preventDefault(); return; } if ( (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") && handleMenuNavigation(event.key) ) { event.preventDefault(); } }; document.addEventListener("mousedown", handlePointerDown); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("mousedown", handlePointerDown); document.removeEventListener("keydown", handleKeyDown); }; }, [handleMenuNavigation, handleTypeaheadKey, open, setOpen]); React.useEffect(() => { if (!open) { return; } const frame = window.requestAnimationFrame(() => { const items = getEnabledItems(); if (!items.length) { return; } const selectedIndex = value === undefined ? -1 : items.findIndex((item) => item.dataset.value === value); if (focusStrategyRef.current === "first") { focusItem(0); return; } if (focusStrategyRef.current === "last") { focusItem(items.length - 1); return; } focusItem(selectedIndex >= 0 ? selectedIndex : 0); }); return () => { window.cancelAnimationFrame(frame); }; }, [focusItem, getEnabledItems, open, value]); const contextValue = React.useMemo( () => ({ activeItemId, contentId, containerRef, labels, open, setActiveItemId, setFocusStrategy: (strategy: DropdownFocusStrategy) => { focusStrategyRef.current = strategy; }, setOpen, setValue, triggerRef, value, variant, }), [activeItemId, contentId, labels, open, setOpen, setValue, value, variant] ); return (

{children}

); } const dropdownTriggerBaseClassName = "flex min-h-11 w-full items-center justify-between gap-2 border border-border bg-card px-4 py-3 text-left font-medium text-foreground text-sm transition-colors hover:bg-accent/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"; export interface DropdownTriggerProps extends Omit< React.ComponentPropsWithoutRef, "children" > { children?: React.ReactNode; showChevron?: boolean; /** Keep circular avatar triggers unchanged — skips squircle corner styling. */ triggerShape?: "default" | "avatar"; } export const DropdownTrigger = React.forwardRef< HTMLButtonElement, DropdownTriggerProps >( ( { children, className, disabled, onClick, onKeyDown, showChevron = true, triggerShape = "default", ...props }, ref ) => { const { contentId, open, setFocusStrategy, setOpen, triggerRef, variant } = useDropdownContext("DropdownTrigger"); return ( { onClick?.(event); if (event.defaultPrevented || disabled) { return; } setFocusStrategy("selected"); setOpen(!open); }} onKeyDown={(event) => { onKeyDown?.(event); if (event.defaultPrevented || disabled) { return; } if (event.key === "ArrowDown") { event.preventDefault(); setFocusStrategy("first"); setOpen(true); return; } if (event.key === "ArrowUp") { event.preventDefault(); setFocusStrategy("last"); setOpen(true); return; } if (event.key === "Enter" || event.key === " ") { event.preventDefault(); setFocusStrategy("selected"); setOpen(!open); } }} ref={(node) => { triggerRef.current = node; setRefValue(ref, node); }} type="button" whileTap={disabled ? undefined : { scale: 0.96 }} {...props} > {children} {showChevron ? ( ) : null} ); } ); DropdownTrigger.displayName = "DropdownTrigger"; export interface DropdownValueProps extends React.HTMLAttributes { placeholder?: string; } export const DropdownValue = React.forwardRef< HTMLSpanElement, DropdownValueProps >(({ className, placeholder = "Select an option", ...props }, ref) => { const { labels, value } = useDropdownContext("DropdownValue"); const label = value ? (labels[value] ?? value) : undefined; return ( {label ?? placeholder} ); }); DropdownValue.displayName = "DropdownValue"; export interface DropdownContentProps extends React.ComponentPropsWithoutRef { align?: DropdownAlign; sideOffset?: number; } export const DropdownContent = React.forwardRef< HTMLDivElement, DropdownContentProps >( ( { align = "start", children, className, sideOffset = 8, style, ...props }, ref ) => { const { containerRef, contentId, open, triggerRef, variant } = useDropdownContext("DropdownContent"); const shellRef = React.useRef(null); const [position, setPosition] = React.useState<{ horizontalOrigin: "center" | "left" | "right"; left: number; maxHeight: number | null; }>({ horizontalOrigin: getHorizontalOrigin(align), left: 0, maxHeight: null, }); const setContentRef = React.useCallback( (node: HTMLDivElement | null) => { shellRef.current = node; setRefValue(ref, node); }, [ref] ); const updatePosition = React.useCallback(() => { const container = containerRef.current; const shell = shellRef.current; const trigger = triggerRef.current; if (!(container && shell && trigger)) { return; } const containerRect = container.getBoundingClientRect(); const shellRect = shell.getBoundingClientRect(); const triggerRect = trigger.getBoundingClientRect(); const contentWidth = shellRect.width || triggerRect.width; const { maxHeight } = getResolvedPlacement( shellRect.height || Math.min(MAX_CONTENT_HEIGHT, 240), triggerRect, window.innerHeight, sideOffset ); const { horizontalOrigin, left } = getResolvedHorizontalPosition({ align, containerRect, contentWidth, triggerRect, viewportWidth: window.innerWidth, }); setPosition({ horizontalOrigin, left, maxHeight, }); }, [align, containerRef, sideOffset, triggerRef]); React.useEffect(() => { if (!open) { return; } const frame = window.requestAnimationFrame(updatePosition); const handleViewportChange = () => updatePosition(); window.addEventListener("resize", handleViewportChange); window.addEventListener("scroll", handleViewportChange, true); const observer = new ResizeObserver(() => updatePosition()); const observedNodes = [ containerRef.current, shellRef.current, triggerRef.current, ].filter(Boolean); observedNodes.forEach((node) => { observer.observe(node as Element); }); return () => { window.cancelAnimationFrame(frame); window.removeEventListener("resize", handleViewportChange); window.removeEventListener("scroll", handleViewportChange, true); observer.disconnect(); }; }, [containerRef, open, triggerRef, updatePosition]); const contentMotion = getContentMotion(); const innerContentMotion = getInnerContentMotion(); return ( {open ? ( {children as React.ReactNode} ) : null} ); } ); DropdownContent.displayName = "DropdownContent"; export interface DropdownItemProps extends React.HTMLAttributes { disabled?: boolean; textValue?: string; value?: string; } export const DropdownItem = React.forwardRef( ( { children, className, disabled, onClick, onKeyDown, textValue, value, ...props }, ref ) => { const { activeItemId, setActiveItemId, setOpen, setValue, value: currentValue, variant, } = useDropdownContext("DropdownItem"); const itemId = React.useId(); const isActive = activeItemId === itemId && !disabled; const isSelected = variant === "select" && value !== undefined && currentValue === value; const resolvedTextValue = React.useMemo( () => (textValue ?? getTextContent(children)).trim(), [children, textValue] ); const handleClick = (event: React.MouseEvent) => { onClick?.(event); if (event.defaultPrevented || disabled) { return; } if (variant === "select" && value !== undefined) { setValue(value); } setOpen(false); }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || disabled) { return; } if (event.key === "Enter" || event.key === " ") { event.preventDefault(); event.currentTarget.click(); } }; const itemContent = ( <> {children} {isSelected ? ( ) : null} ); const sharedProps = { ...props, "aria-disabled": disabled || undefined, className: cn( controlCornerClassName, "group relative isolate flex min-h-11 w-full scroll-m-1 items-center justify-between gap-3 px-3 py-2.5 text-left text-foreground text-sm transition-colors", dropdownItemHighlightBeforeClassName, "hover:before:bg-accent/65 focus-visible:text-foreground focus-visible:outline-none focus-visible:before:bg-accent/65", isActive && "before:bg-accent/65", isSelected && variant === "select" && "text-foreground before:bg-accent/45", isSelected && isActive && variant === "select" && "before:bg-accent/75", disabled && "pointer-events-none opacity-50", className ), "data-disabled": disabled ? "" : undefined, "data-dropdown-item": "", "data-state": isSelected ? "checked" : "unchecked", "data-text-value": resolvedTextValue, "data-value": value, id: itemId, onBlur: () => setActiveItemId(null), onClick: handleClick, onFocus: () => setActiveItemId(itemId), onKeyDown: handleKeyDown, onMouseEnter: () => setActiveItemId(itemId), onMouseLeave: () => setActiveItemId(null), ref, }; if (variant === "select") { return ( ); } return (

{itemContent}

); } ); DropdownItem.displayName = "DropdownItem"; export interface DropdownGroupProps extends React.HTMLAttributes { label?: React.ReactNode; labelClassName?: string; } export const DropdownGroup = React.forwardRef< HTMLDivElement, DropdownGroupProps >( ( { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, label, labelClassName, ...props }, ref ) => { const generatedLabelId = React.useId(); const groupLabelId = label ? generatedLabelId : ariaLabelledby; const hasAccessibleLabel = Boolean(label || ariaLabel || groupLabelId); return (

{label ? ( {label} ) : null} {children}

); } ); DropdownGroup.displayName = "DropdownGroup"; export const DropdownLabel = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); DropdownLabel.displayName = "DropdownLabel"; export const DropdownSeparator = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)); DropdownSeparator.displayName = "DropdownSeparator"; 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","motion",{"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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"dropdown.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]