@nocoo/basalt 2.0.3 → 2.1.0

package/dist/components/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","names":[],"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { Check, ChevronDown, X } from \"lucide-react\";\nimport { type ReactNode, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface MultiSelectOption {\n\t/** Stable identifier, independent of the display label. */\n\tvalue: string;\n\t/** Searchable and accessible display name. */\n\tlabel: string;\n\t/** Optional secondary searchable text. */\n\tdescription?: string;\n\t/** Caller-provided icon or avatar. */\n\tleading?: ReactNode;\n\t/** Prevent adding or removing this option. */\n\tdisabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n\t/** Accessible field and popup name. */\n\tlabel: string;\n\t/** Available options; retain selected options to preserve their display labels. */\n\toptions: readonly MultiSelectOption[];\n\t/** Controlled selected identifiers. */\n\tvalue?: readonly string[];\n\t/** Initial uncontrolled selection. @default [] */\n\tdefaultValue?: readonly string[];\n\t/** Selection requests; controlled values change only when accepted by the caller. */\n\tonValueChange?: (value: string[]) => void;\n\t/** Controlled search text; asynchronous requests belong to the caller. */\n\tquery?: string;\n\t/** Initial uncontrolled search text. @default \"\" */\n\tdefaultQuery?: string;\n\t/** Search text requests. */\n\tonQueryChange?: (query: string) => void;\n\t/** Controlled popup visibility. */\n\topen?: boolean;\n\t/** Initial uncontrolled popup visibility. @default false */\n\tdefaultOpen?: boolean;\n\t/** Popup visibility requests. */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Use local label/description filtering; disable for server-filtered options. @default true */\n\tfilterOptions?: boolean;\n\t/** Loading content replaces the option list. @default false */\n\tloading?: boolean;\n\t/** Disables the trigger, chips, and native form entries. @default false */\n\tdisabled?: boolean;\n\t/** Repeated native form entry name, one entry per selected identifier. */\n\tname?: string;\n\t/** Optional external native form owner. Uncontrolled state respects uncancelled form resets. */\n\tform?: string;\n\t/** Empty selection prompt. @default \"Select options\" */\n\tplaceholder?: string;\n\t/** Search input prompt. @default \"Search options…\" */\n\tsearchPlaceholder?: string;\n\t/** Empty search result text. @default \"No options found.\" */\n\temptyLabel?: string;\n\t/** Loading announcement. @default \"Loading options…\" */\n\tloadingLabel?: string;\n\t/** Chip removal label prefix. @default \"Remove\" */\n\tremoveLabel?: string;\n\t/** Show removable selection chips; disable when a FilterBar renders its own chips. @default true */\n\tshowChips?: boolean;\n\t/** Selection count formatter, including localization. */\n\tformatSelectionCount?: (count: number) => string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function MultiSelect({\n\tlabel,\n\toptions,\n\tvalue,\n\tdefaultValue = [],\n\tonValueChange,\n\tquery,\n\tdefaultQuery = \"\",\n\tonQueryChange,\n\topen,\n\tdefaultOpen = false,\n\tonOpenChange,\n\tfilterOptions = true,\n\tloading = false,\n\tdisabled = false,\n\tname,\n\tform,\n\tplaceholder = \"Select options\",\n\tsearchPlaceholder = \"Search options…\",\n\temptyLabel = \"No options found.\",\n\tloadingLabel = \"Loading options…\",\n\tremoveLabel = \"Remove\",\n\tshowChips = true,\n\tformatSelectionCount,\n\tclassName,\n}: MultiSelectProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst [localQuery, setLocalQuery] = useState(defaultQuery);\n\tconst [localOpen, setLocalOpen] = useState(defaultOpen);\n\tconst [active, setActive] = useState<string | null>(null);\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst trigger = useRef<HTMLButtonElement>(null);\n\tconst list = useRef<HTMLDivElement>(null);\n\tconst pointer = useRef<{ x: number; y: number } | null>(null);\n\tconst resetConfig = useRef({ value, defaultValue, query, defaultQuery, open });\n\tuseEffect(() => {\n\t\tresetConfig.current = { value, defaultValue, query, defaultQuery, open };\n\t});\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: form changes the native owner of the same trigger and requires rebinding its reset listener.\n\tuseEffect(() => {\n\t\tconst owner = trigger.current?.form;\n\t\tif (!owner) return;\n\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\tfunction reset(event: Event) {\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\ttimers.delete(timer);\n\t\t\t\tif (event.defaultPrevented) return;\n\t\t\t\tconst config = resetConfig.current;\n\t\t\t\tif (config.value === undefined) setLocalValue(config.defaultValue);\n\t\t\t\tif (config.query === undefined) setLocalQuery(config.defaultQuery);\n\t\t\t\tif (config.open === undefined) setLocalOpen(false);\n\t\t\t\tsetActive(null);\n\t\t\t}, 0);\n\t\t\ttimers.add(timer);\n\t\t}\n\t\towner.addEventListener(\"reset\", reset);\n\t\treturn () => {\n\t\t\tfor (const timer of timers) clearTimeout(timer);\n\t\t\towner.removeEventListener(\"reset\", reset);\n\t\t};\n\t}, [form]);\n\tconst id = useId();\n\tconst selected = value ?? localValue;\n\tconst search = query ?? localQuery;\n\tconst expanded = (open ?? localOpen) && !disabled;\n\tconst visible = options.filter(\n\t\t(option) =>\n\t\t\t!filterOptions ||\n\t\t\t`${option.label} ${option.description ?? \"\"}`\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.includes(search.trim().toLocaleLowerCase()),\n\t);\n\tconst enabled = visible.filter((option) => !option.disabled);\n\tconst activeValue = enabled.some((option) => option.value === active)\n\t\t? active\n\t\t: enabled[0]?.value;\n\tconst activeIndex = visible.findIndex((option) => option.value === activeValue);\n\tconst countText = formatSelectionCount\n\t\t? formatSelectionCount(selected.length)\n\t\t: `${selected.length} selected`;\n\n\tfunction changeOpen(next: boolean) {\n\t\tif (disabled) return;\n\t\tif (open === undefined) setLocalOpen(next);\n\t\tonOpenChange?.(next);\n\t}\n\tfunction changeValue(next: string[]) {\n\t\tif (disabled) return;\n\t\tif (value === undefined) setLocalValue(next);\n\t\tonValueChange?.(next);\n\t}\n\tfunction toggle(option: MultiSelectOption) {\n\t\tif (option.disabled) return;\n\t\tchangeValue(\n\t\t\tselected.includes(option.value)\n\t\t\t\t? selected.filter((item) => item !== option.value)\n\t\t\t\t: [...selected, option.value],\n\t\t);\n\t}\n\tfunction removeLast() {\n\t\tif (search) return;\n\t\tconst item = [...selected]\n\t\t\t.reverse()\n\t\t\t.find((value) => !options.find((option) => option.value === value)?.disabled);\n\t\tif (item !== undefined) changeValue(selected.filter((value) => value !== item));\n\t}\n\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"min-w-0 space-y-2\", className)}>\n\t\t\t{showChips && selected.length > 0 && (\n\t\t\t\t<div role=\"group\" className=\"flex flex-wrap gap-1.5\" aria-label={`${label}: ${countText}`}>\n\t\t\t\t\t{selected.map((item) => {\n\t\t\t\t\t\tconst option = options.find((option) => option.value === item);\n\t\t\t\t\t\tconst text = option?.label ?? item;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tclassName=\"inline-flex max-w-full items-center gap-1 rounded-basalt-md border border-basalt-border bg-basalt-accent py-0.5 pl-2 text-xs\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"min-w-0 break-words\">{text}</span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled || option?.disabled}\n\t\t\t\t\t\t\t\t\taria-label={`${removeLabel} ${text}`}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t\t\t\t\t\t\tonClick={() => changeValue(selected.filter((value) => value !== item))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<X className=\"size-3\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!disabled &&\n\t\t\t\tname &&\n\t\t\t\tselected.map((item) => (\n\t\t\t\t\t<input key={item} type=\"hidden\" name={name} form={form} value={item} />\n\t\t\t\t))}\n\t\t\t<Popover open={expanded} onOpenChange={changeOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={trigger}\n\t\t\t\t\t\tform={form}\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-describedby={`${id}-count`}\n\t\t\t\t\t\tclassName=\"w-full justify-between\"\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tchangeOpen(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Backspace\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"truncate\">{selected.length ? countText : placeholder}</span>\n\t\t\t\t\t\t<ChevronDown aria-hidden=\"true\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"w-72 max-w-[calc(100vw-2rem)] p-2\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={input}\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\taria-label={`${label}: search`}\n\t\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\t\t\taria-controls={`${id}-list`}\n\t\t\t\t\t\taria-activedescendant={\n\t\t\t\t\t\t\t!loading && activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tif (query === undefined) setLocalQuery(event.target.value);\n\t\t\t\t\t\t\tonQueryChange?.(event.target.value);\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading && enabled.length) {\n\t\t\t\t\t\t\t\t\tconst index = enabled.findIndex((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\t\tconst next =\n\t\t\t\t\t\t\t\t\t\tenabled[\n\t\t\t\t\t\t\t\t\t\t\t(index + (event.key === \"ArrowDown\" ? 1 : -1) + enabled.length) %\n\t\t\t\t\t\t\t\t\t\t\t\tenabled.length\n\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tsetActive(next.value);\n\t\t\t\t\t\t\t\t\tlist.current\n\t\t\t\t\t\t\t\t\t\t?.querySelector<HTMLElement>(`[data-option-index=\"${visible.indexOf(next)}\"]`)\n\t\t\t\t\t\t\t\t\t\t?.scrollIntoView({ block: \"nearest\" });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tconst option = enabled.find((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\tif (!loading && option) toggle(option);\n\t\t\t\t\t\t\t} else if (event.key === \"Backspace\" && !search) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={list}\n\t\t\t\t\t\tid={`${id}-list`}\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-multiselectable=\"true\"\n\t\t\t\t\t\taria-busy={loading}\n\t\t\t\t\t\tclassName=\"mt-2 max-h-60 overflow-y-auto\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{!loading &&\n\t\t\t\t\t\t\tvisible.map((option, index) => (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tid={`${id}-option-${index}`}\n\t\t\t\t\t\t\t\t\tdata-option-index={index}\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\taria-selected={selected.includes(option.value)}\n\t\t\t\t\t\t\t\t\taria-disabled={option.disabled || undefined}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex w-full items-center gap-2 rounded-basalt-md px-2 py-2 text-left text-sm disabled:opacity-40\",\n\t\t\t\t\t\t\t\t\t\tactiveValue === option.value && \"bg-basalt-accent\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\t\t\t\t\tconst previous = pointer.current;\n\t\t\t\t\t\t\t\t\t\tif (previous?.x === event.clientX && previous.y === event.clientY) return;\n\t\t\t\t\t\t\t\t\t\tpointer.current = { x: event.clientX, y: event.clientY };\n\t\t\t\t\t\t\t\t\t\tif (!option.disabled) setActive(option.value);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttoggle(option);\n\t\t\t\t\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.leading}\n\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"block break-words\">{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"block text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{option.description}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{selected.includes(option.value) && (\n\t\t\t\t\t\t\t\t\t\t<Check className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(loading || visible.length === 0) && (\n\t\t\t\t\t\t<p role=\"status\" className=\"px-2 py-4 text-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{loading ? loadingLabel : emptyLabel}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t\t<span id={`${id}-count`} className=\"sr-only\" aria-live=\"polite\">\n\t\t\t\t{countText}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/navigation-menu.d.ts

@@ -1,6 +1,89 @@
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import type { ComponentProps } from "react";
-export declare const NavigationMenu: import("react").ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuProps & import("react").RefAttributes<HTMLElement>>;
-export declare const NavigationMenuList: import("react").ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>;
-export declare const NavigationMenuItem: import("react").ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
-export declare function NavigationMenuLink({ className, ...props }: ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react").JSX.Element;
+import type * as React from "react";
+type RadixNavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root>;
+type RadixNavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>;
+type RadixNavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;
+type RadixNavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;
+export interface NavigationMenuProps extends Omit<RadixNavigationMenuProps, "value" | "defaultValue" | "onValueChange" | "dir" | "orientation" | "delayDuration" | "skipDelayDuration" | "asChild"> {
+    /**
+     * Controlled value of the currently active navigation item.
+     */
+    value?: RadixNavigationMenuProps["value"];
+    /**
+     * Uncontrolled initial active navigation item value.
+     */
+    defaultValue?: RadixNavigationMenuProps["defaultValue"];
+    /**
+     * Callback invoked when active navigation item value changes.
+     */
+    onValueChange?: RadixNavigationMenuProps["onValueChange"];
+    /**
+     * Reading direction of the navigation menu. Inherits from nearest DirectionProvider or ltr.
+     * @default "ltr"
+     */
+    dir?: RadixNavigationMenuProps["dir"];
+    /**
+     * Orientation of the navigation menu items and keyboard navigation axis.
+     * @default "horizontal"
+     */
+    orientation?: RadixNavigationMenuProps["orientation"];
+    /**
+     * Duration in milliseconds from pointer entering trigger until menu opens.
+     * @default 200
+     */
+    delayDuration?: RadixNavigationMenuProps["delayDuration"];
+    /**
+     * Duration in milliseconds to move between triggers without re-triggering delay.
+     * @default 300
+     */
+    skipDelayDuration?: RadixNavigationMenuProps["skipDelayDuration"];
+    /**
+     * Change the default rendered nav element to the child element, merging props and behavior.
+     * NavigationMenu forwards ref to HTMLElement and inherits native nav attributes.
+     * @default false
+     */
+    asChild?: RadixNavigationMenuProps["asChild"];
+}
+export declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+export interface NavigationMenuListProps extends Omit<RadixNavigationMenuListProps, "asChild"> {
+    /**
+     * Change the default rendered ul element to the child element, merging props and behavior.
+     * NavigationMenuList forwards ref to HTMLUListElement and inherits native ul attributes.
+     * @default false
+     */
+    asChild?: RadixNavigationMenuListProps["asChild"];
+}
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+export interface NavigationMenuItemProps extends Omit<RadixNavigationMenuItemProps, "value" | "asChild"> {
+    /**
+     * Unique value that associates the item with sub-navigation state.
+     */
+    value?: RadixNavigationMenuItemProps["value"];
+    /**
+     * Change the default rendered li element to the child element, merging props and behavior.
+     * NavigationMenuItem forwards ref to HTMLLIElement and inherits native li attributes.
+     * @default false
+     */
+    asChild?: RadixNavigationMenuItemProps["asChild"];
+}
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface NavigationMenuLinkProps extends Omit<RadixNavigationMenuLinkProps, "active" | "onSelect" | "asChild"> {
+    /**
+     * Whether the link represents the currently active destination.
+     * Adds data-active attribute for styling.
+     * @default false
+     */
+    active?: RadixNavigationMenuLinkProps["active"];
+    /**
+     * Event handler called when the navigation link is selected via pointer or keyboard.
+     */
+    onSelect?: RadixNavigationMenuLinkProps["onSelect"];
+    /**
+     * Change the default rendered anchor element to the child element, merging props and behavior.
+     * NavigationMenuLink forwards ref to HTMLAnchorElement and inherits native anchor attributes.
+     * @default false
+     */
+    asChild?: RadixNavigationMenuLinkProps["asChild"];
+}
+export declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): React.JSX.Element;
+export {};

package/dist/components/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport const NavigationMenu = NavigationMenuPrimitive.Root;\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\n\nexport function NavigationMenuLink({\n\tclassName,\n\t...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Link\n\t\t\tclassName={cn(\"rounded-basalt-md px-3 py-2 text-sm hover:bg-basalt-accent\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AAIA,IAAa,IAAiB,EAAwB,MACzC,IAAqB,EAAwB,MAC7C,IAAqB,EAAwB;AAE1D,SAAgB,EAAmB,EAClC,cACA,GAAG,KACoD;CACvD,OACC,kBAAC,EAAwB,MAAzB;EACC,WAAW,EAAG,8DAA8D,CAAS;EACrF,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\ntype RadixNavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root>;\ntype RadixNavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>;\ntype RadixNavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;\ntype RadixNavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;\n\nexport interface NavigationMenuProps\n\textends Omit<\n\t\tRadixNavigationMenuProps,\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"dir\"\n\t\t| \"orientation\"\n\t\t| \"delayDuration\"\n\t\t| \"skipDelayDuration\"\n\t\t| \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently active navigation item.\n\t */\n\tvalue?: RadixNavigationMenuProps[\"value\"];\n\t/**\n\t * Uncontrolled initial active navigation item value.\n\t */\n\tdefaultValue?: RadixNavigationMenuProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when active navigation item value changes.\n\t */\n\tonValueChange?: RadixNavigationMenuProps[\"onValueChange\"];\n\t/**\n\t * Reading direction of the navigation menu. Inherits from nearest DirectionProvider or ltr.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixNavigationMenuProps[\"dir\"];\n\t/**\n\t * Orientation of the navigation menu items and keyboard navigation axis.\n\t * @default \"horizontal\"\n\t */\n\torientation?: RadixNavigationMenuProps[\"orientation\"];\n\t/**\n\t * Duration in milliseconds from pointer entering trigger until menu opens.\n\t * @default 200\n\t */\n\tdelayDuration?: RadixNavigationMenuProps[\"delayDuration\"];\n\t/**\n\t * Duration in milliseconds to move between triggers without re-triggering delay.\n\t * @default 300\n\t */\n\tskipDelayDuration?: RadixNavigationMenuProps[\"skipDelayDuration\"];\n\t/**\n\t * Change the default rendered nav element to the child element, merging props and behavior.\n\t * NavigationMenu forwards ref to HTMLElement and inherits native nav attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuProps[\"asChild\"];\n}\n\nexport const NavigationMenu = NavigationMenuPrimitive.Root;\n\nexport interface NavigationMenuListProps extends Omit<RadixNavigationMenuListProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered ul element to the child element, merging props and behavior.\n\t * NavigationMenuList forwards ref to HTMLUListElement and inherits native ul attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuListProps[\"asChild\"];\n}\n\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\n\nexport interface NavigationMenuItemProps\n\textends Omit<RadixNavigationMenuItemProps, \"value\" | \"asChild\"> {\n\t/**\n\t * Unique value that associates the item with sub-navigation state.\n\t */\n\tvalue?: RadixNavigationMenuItemProps[\"value\"];\n\t/**\n\t * Change the default rendered li element to the child element, merging props and behavior.\n\t * NavigationMenuItem forwards ref to HTMLLIElement and inherits native li attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuItemProps[\"asChild\"];\n}\n\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\n\nexport interface NavigationMenuLinkProps\n\textends Omit<RadixNavigationMenuLinkProps, \"active\" | \"onSelect\" | \"asChild\"> {\n\t/**\n\t * Whether the link represents the currently active destination.\n\t * Adds data-active attribute for styling.\n\t * @default false\n\t */\n\tactive?: RadixNavigationMenuLinkProps[\"active\"];\n\t/**\n\t * Event handler called when the navigation link is selected via pointer or keyboard.\n\t */\n\tonSelect?: RadixNavigationMenuLinkProps[\"onSelect\"];\n\t/**\n\t * Change the default rendered anchor element to the child element, merging props and behavior.\n\t * NavigationMenuLink forwards ref to HTMLAnchorElement and inherits native anchor attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuLinkProps[\"asChild\"];\n}\n\nexport function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Link\n\t\t\tclassName={cn(\"rounded-basalt-md px-3 py-2 text-sm hover:bg-basalt-accent\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AA6DA,IAAa,IAAiB,EAAwB,MAWzC,IAAqB,EAAwB,MAgB7C,IAAqB,EAAwB;AAsB1D,SAAgB,EAAmB,EAAE,cAAW,GAAG,KAAkC;CACpF,OACC,kBAAC,EAAwB,MAAzB;EACC,WAAW,EAAG,8DAA8D,CAAS;EACrF,GAAI;CACJ,CAAA;AAEH"}

package/dist/components/overlay.js

@@ -1,14 +1,15 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 //#region src/components/overlay.ts
-var t = 4, n = 8, r = "z-50", i = "motion-reduce:animate-none motion-reduce:transition-none", a = "outline-hidden focus-visible:border-basalt-ring", o = "outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring", s = "outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background";
-function c(t) {
-	return e(r, "overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md", i, t);
+var n = 4, r = 8, i = "z-50", a = "motion-reduce:animate-none motion-reduce:transition-none", o = "outline-hidden focus-visible:border-basalt-ring", s = "outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring", c = "outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background";
+function l(n) {
+	return e(t, i, "overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md", a, n);
 }
-function l(t) {
+function u(t) {
 	return e("mx-1.5 flex w-[calc(100%-0.75rem)] cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-left text-sm outline-hidden select-none", t);
 }
 //#endregion
-export { a as FOCUS_BORDER, o as FOCUS_INSET, s as FOCUS_RING, n as MENU_GAP, t as OVERLAY_GAP, r as OVERLAY_LAYER, i as OVERLAY_MOTION, l as overlayItemClass, c as overlayPanelClass };
+export { o as FOCUS_BORDER, s as FOCUS_INSET, c as FOCUS_RING, r as MENU_GAP, n as OVERLAY_GAP, i as OVERLAY_LAYER, a as OVERLAY_MOTION, u as overlayItemClass, l as overlayPanelClass };
 
 //# sourceMappingURL=overlay.js.map

package/dist/components/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/components/overlay.ts"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\n/** Gap between a field trigger and its list. Matches Kumo Select/Combobox. */\nexport const OVERLAY_GAP = 4;\n/** Gap between a menu trigger and its panel. Matches Kumo Dropdown/Popover. */\nexport const MENU_GAP = 8;\n/** Shared stacking layer for portals, menus, and chrome overlays. */\nexport const OVERLAY_LAYER = \"z-50\";\n/** Kill CSS animation and transition when the user prefers reduced motion. */\nexport const OVERLAY_MOTION = \"motion-reduce:animate-none motion-reduce:transition-none\";\n\n/** Recolor the existing 1px border. No extra ring, no layout shift. */\nexport const FOCUS_BORDER = \"outline-hidden focus-visible:border-basalt-ring\";\n/** Inset 1px theme ring for borderless controls. Outer size stays put. */\nexport const FOCUS_INSET =\n\t\"outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\";\n/** Offset ring stays visible on primary fills (ring token equals primary). */\nexport const FOCUS_RING =\n\t\"outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\";\n\nexport function overlayPanelClass(className?: string) {\n\treturn cn(\n\t\tOVERLAY_LAYER,\n\t\t\"overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function overlayItemClass(className?: string) {\n\treturn cn(\n\t\t\"mx-1.5 flex w-[calc(100%-0.75rem)] cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-left text-sm outline-hidden select-none\",\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;AAGA,IAAa,IAAc,GAEd,IAAW,GAEX,IAAgB,QAEhB,IAAiB,4DAGjB,IAAe,mDAEf,IACZ,+FAEY,IACZ;AAED,SAAgB,EAAkB,GAAoB;CACrD,OAAO,EACN,GACA,2IACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,GAAoB;CACpD,OAAO,EACN,6IACA,CACD;AACD"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/components/overlay.ts"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Gap between a field trigger and its list. Matches Kumo Select/Combobox. */\nexport const OVERLAY_GAP = 4;\n/** Gap between a menu trigger and its panel. Matches Kumo Dropdown/Popover. */\nexport const MENU_GAP = 8;\n/** Shared stacking layer for portals, menus, and chrome overlays. */\nexport const OVERLAY_LAYER = \"z-50\";\n/** Kill CSS animation and transition when the user prefers reduced motion. */\nexport const OVERLAY_MOTION = \"motion-reduce:animate-none motion-reduce:transition-none\";\n\n/** Recolor the existing 1px border. No extra ring, no layout shift. */\nexport const FOCUS_BORDER = \"outline-hidden focus-visible:border-basalt-ring\";\n/** Inset 1px theme ring for borderless controls. Outer size stays put. */\nexport const FOCUS_INSET =\n\t\"outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\";\n/** Offset ring stays visible on primary fills (ring token equals primary). */\nexport const FOCUS_RING =\n\t\"outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\";\n\nexport function overlayPanelClass(className?: string) {\n\treturn cn(\n\t\tBASALT_UI_CLASS,\n\t\tOVERLAY_LAYER,\n\t\t\"overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function overlayItemClass(className?: string) {\n\treturn cn(\n\t\t\"mx-1.5 flex w-[calc(100%-0.75rem)] cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-left text-sm outline-hidden select-none\",\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;;AAIA,IAAa,IAAc,GAEd,IAAW,GAEX,IAAgB,QAEhB,IAAiB,4DAGjB,IAAe,mDAEf,IACZ,+FAEY,IACZ;AAED,SAAgB,EAAkB,GAAoB;CACrD,OAAO,EACN,GACA,GACA,2IACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,GAAoB;CACpD,OAAO,EACN,6IACA,CACD;AACD"}

package/dist/components/page-header.js

@@ -1,40 +1,42 @@
 "use client";
-import { Breadcrumbs as e } from "./breadcrumbs.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Breadcrumbs as n } from "./breadcrumbs.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/page-header.tsx
-function i({ actions: i, breadcrumbs: a, description: o, filters: s, title: c }) {
-	let l = t.useId();
-	return /* @__PURE__ */ r("header", {
-		"aria-labelledby": l,
-		className: "space-y-4",
+function o({ actions: o, breadcrumbs: s, description: c, filters: l, title: u }) {
+	let d = r.useId();
+	return /* @__PURE__ */ a("header", {
+		"aria-labelledby": d,
+		className: e(t, "space-y-4"),
 		children: [
-			a && a.length > 0 ? /* @__PURE__ */ n(e, { items: [...a] }) : null,
-			/* @__PURE__ */ r("div", {
+			s && s.length > 0 ? /* @__PURE__ */ i(n, { items: [...s] }) : null,
+			/* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ a("div", {
 					className: "min-w-0 flex-1 space-y-1",
-					children: [/* @__PURE__ */ n("h1", {
-						id: l,
+					children: [/* @__PURE__ */ i("h1", {
+						id: d,
 						className: "text-2xl font-semibold tracking-tight text-basalt-foreground",
-						children: c
-					}), o ? /* @__PURE__ */ n("p", {
+						children: u
+					}), c ? /* @__PURE__ */ i("p", {
 						className: "text-sm text-basalt-muted-foreground",
-						children: o
+						children: c
 					}) : null]
-				}), i ? /* @__PURE__ */ n("div", {
+				}), o ? /* @__PURE__ */ i("div", {
 					className: "flex flex-wrap items-center justify-end gap-2",
-					children: i
+					children: o
 				}) : null]
 			}),
-			s ? /* @__PURE__ */ n("div", {
+			l ? /* @__PURE__ */ i("div", {
 				className: "flex flex-wrap items-center gap-2",
-				children: s
+				children: l
 			}) : null
 		]
 	});
 }
 //#endregion
-export { i as PageHeader };
+export { o as PageHeader };
 
 //# sourceMappingURL=page-header.js.map

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Right-side title-row actions. Put the create button last. */\n\tactions?: React.ReactNode;\n\t/** Own-row filters. Keep short filters in actions. */\n\tfilters?: React.ReactNode;\n}\n\nexport function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header aria-labelledby={titleId} className=\"space-y-4\">\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? <Breadcrumbs items={[...breadcrumbs]} /> : null}\n\t\t\t<div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t\t<h1 id={titleId} className=\"text-2xl font-semibold tracking-tight text-basalt-foreground\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">{description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-end gap-2\">{actions}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{filters ? <div className=\"flex flex-wrap items-center gap-2\">{filters}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAW,EAAE,YAAS,gBAAa,gBAAa,YAAS,YAA0B;CAClG,IAAM,IAAU,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EAAQ,mBAAiB;EAAS,WAAU;EAA5C,UAAA;GACE,KAAe,EAAY,SAAS,IAAI,kBAAC,GAAD,EAAa,OAAO,CAAC,GAAG,CAAW,EAAI,CAAA,IAAI;GACpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACzB,UAAA;KACE,CAAA,GACH,IACA,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAe,CAAA,IACjE,IACA;IACJ,CAAA,GAAA,IACA,kBAAC,OAAD;KAAK,WAAU;KAAiD,UAAA;IAAa,CAAA,IAC1E,IACA;;GACJ,IAAU,kBAAC,OAAD;IAAK,WAAU;IAAqC,UAAA;GAAa,CAAA,IAAI;EACzE;;AAEV"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport interface PageHeaderBreadcrumb {\n\thref?: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n}\n\nexport interface PageHeaderProps {\n\t/** The page title, rendered as the only heading. */\n\ttitle: React.ReactNode;\n\t/** Supporting text below the title. */\n\tdescription?: React.ReactNode;\n\t/** Trail of parent pages. */\n\tbreadcrumbs?: readonly PageHeaderBreadcrumb[];\n\t/** Right-side title-row actions. Put the create button last. */\n\tactions?: React.ReactNode;\n\t/** Own-row filters. Keep short filters in actions. */\n\tfilters?: React.ReactNode;\n}\n\nexport function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps) {\n\tconst titleId = React.useId();\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the title heading names this header\n\t\t<header aria-labelledby={titleId} className={cn(BASALT_UI_CLASS, \"space-y-4\")}>\n\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? <Breadcrumbs items={[...breadcrumbs]} /> : null}\n\t\t\t<div className=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t\t<h1 id={titleId} className=\"text-2xl font-semibold tracking-tight text-basalt-foreground\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h1>\n\t\t\t\t\t{description ? (\n\t\t\t\t\t\t<p className=\"text-sm text-basalt-muted-foreground\">{description}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions ? (\n\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-end gap-2\">{actions}</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{filters ? <div className=\"flex flex-wrap items-center gap-2\">{filters}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AAwBA,SAAgB,EAAW,EAAE,YAAS,gBAAa,gBAAa,YAAS,YAA0B;CAClG,IAAM,IAAU,EAAM,MAAM;CAE5B,OAEC,kBAAC,UAAD;EAAQ,mBAAiB;EAAS,WAAW,EAAG,GAAiB,WAAW;EAA5E,UAAA;GACE,KAAe,EAAY,SAAS,IAAI,kBAAC,GAAD,EAAa,OAAO,CAAC,GAAG,CAAW,EAAI,CAAA,IAAI;GACpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACzB,UAAA;KACE,CAAA,GACH,IACA,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAe,CAAA,IACjE,IACA;IACJ,CAAA,GAAA,IACA,kBAAC,OAAD;KAAK,WAAU;KAAiD,UAAA;IAAa,CAAA,IAC1E,IACA;;GACJ,IAAU,kBAAC,OAAD;IAAK,WAAU;IAAqC,UAAA;GAAa,CAAA,IAAI;EACzE;;AAEV"}

package/dist/components/pagination.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Button as t } from "./button.js";
-import { controlSurfaceClass as n } from "../utils/control-surface.js";
+import { controlSurfaceClass as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
 import { useState as r } from "react";
 import { ChevronLeft as i, ChevronRight as a, ChevronsLeft as o, ChevronsRight as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -15,9 +15,9 @@ function d({ page: d, defaultPage: f = 1, pageCount: p = 10, onPageChange: m, si
 		"aria-label": "Pagination",
 		className: _,
 		children: /* @__PURE__ */ l("div", {
-			className: n(e("inline-flex h-9 items-stretch", "[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md")),
+			className: t(e("inline-flex h-9 items-stretch", "[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border", "[&>:first-child]:rounded-l-basalt-md [&>:last-child]:rounded-r-basalt-md")),
 			children: [
-				h ? null : /* @__PURE__ */ c(t, {
+				h ? null : /* @__PURE__ */ c(n, {
 					variant: "ghost",
 					size: "icon",
 					icon: /* @__PURE__ */ c(o, {}),
@@ -26,7 +26,7 @@ function d({ page: d, defaultPage: f = 1, pageCount: p = 10, onPageChange: m, si
 					disabled: T,
 					onClick: () => S(1)
 				}),
-				/* @__PURE__ */ c(t, {
+				/* @__PURE__ */ c(n, {
 					variant: "ghost",
 					size: "icon",
 					icon: /* @__PURE__ */ c(i, {}),
@@ -40,7 +40,7 @@ function d({ page: d, defaultPage: f = 1, pageCount: p = 10, onPageChange: m, si
 					className: "flex h-full min-w-9 items-center justify-center px-3 text-sm font-medium tabular-nums text-basalt-foreground",
 					children: x
 				}),
-				/* @__PURE__ */ c(t, {
+				/* @__PURE__ */ c(n, {
 					variant: "ghost",
 					size: "icon",
 					icon: /* @__PURE__ */ c(a, {}),
@@ -49,7 +49,7 @@ function d({ page: d, defaultPage: f = 1, pageCount: p = 10, onPageChange: m, si
 					disabled: E,
 					onClick: () => S(Math.min(b, x + 1))
 				}),
-				h ? null : /* @__PURE__ */ c(t, {
+				h ? null : /* @__PURE__ */ c(n, {
 					variant: "ghost",
 					size: "icon",
 					icon: /* @__PURE__ */ c(s, {}),

package/dist/components/popover.d.ts

@@ -2,37 +2,157 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 export declare const POPOVER_SIDES: readonly ["top", "bottom", "left", "right"];
 export type PopoverSide = (typeof POPOVER_SIDES)[number];
-export type PopoverProps = Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
+type RadixPopoverProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
+type RadixPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+type RadixPopoverCloseProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+type RadixPopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+export interface PopoverProps extends Omit<RadixPopoverProps, "children" | "open" | "defaultOpen" | "onOpenChange" | "modal"> {
     /**
-     * The controlled open state.
+     * Popover structure elements, typically PopoverTrigger and PopoverContent.
      */
-    open?: boolean;
+    children?: React.ReactNode;
     /**
-     * The uncontrolled initial open state.
+     * Controlled open state of the popover.
+     */
+    open?: RadixPopoverProps["open"];
+    /**
+     * Uncontrolled initial open state of the popover.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: RadixPopoverProps["defaultOpen"];
     /**
-     * Called when the open state changes.
+     * Callback called when the open state changes.
      */
-    onOpenChange?: (open: boolean) => void;
-};
+    onOpenChange?: RadixPopoverProps["onOpenChange"];
+    /**
+     * Whether the popover renders modally, preventing outside interaction and hiding background content from screen readers.
+     * @default false
+     */
+    modal?: RadixPopoverProps["modal"];
+}
 export declare const Popover: React.FC<PopoverProps>;
+export interface PopoverTriggerProps extends Omit<RadixPopoverTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * PopoverTrigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixPopoverTriggerProps["asChild"];
+}
 export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverCloseProps extends Omit<RadixPopoverCloseProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * PopoverClose forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixPopoverCloseProps["asChild"];
+}
 export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
-export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+export interface PopoverContentProps extends Omit<RadixPopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "updatePositionStrategy" | "forceMount" | "asChild" | "onOpenAutoFocus" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
     /**
-     * Show the pointing arrow.
+     * Preferred placement side relative to trigger.
+     * @default "bottom"
+     */
+    side?: RadixPopoverContentProps["side"];
+    /**
+     * Distance in pixels between trigger and floating content panel.
+     * @default 8
+     */
+    sideOffset?: RadixPopoverContentProps["sideOffset"];
+    /**
+     * Preferred alignment along the side axis.
+     * @default "center"
+     */
+    align?: RadixPopoverContentProps["align"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixPopoverContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
      * @default true
      */
-    arrow?: boolean;
-};
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    avoidCollisions?: RadixPopoverContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixPopoverContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixPopoverContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixPopoverContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixPopoverContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
+     * @default false
+     */
+    hideWhenDetached?: RadixPopoverContentProps["hideWhenDetached"];
+    /**
+     * Strategy used to calculate and update popper position.
+     * @default "optimized"
+     */
+    updatePositionStrategy?: RadixPopoverContentProps["updatePositionStrategy"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * When forceMount is true, the content remains mounted even when closed.
+     * The caller is responsible for visibility transitions and unmounting after animation completes.
+     * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.
+     */
+    forceMount?: true;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * PopoverContent forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixPopoverContentProps["asChild"];
+    /**
+     * Callback fired when auto-focusing on open. Can be prevented.
+     */
+    onOpenAutoFocus?: RadixPopoverContentProps["onOpenAutoFocus"];
+    /**
+     * Callback fired when auto-focusing on close. Can be prevented.
+     */
+    onCloseAutoFocus?: RadixPopoverContentProps["onCloseAutoFocus"];
+    /**
+     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixPopoverContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onPointerDownOutside?: RadixPopoverContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onFocusOutside?: RadixPopoverContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onInteractOutside?: RadixPopoverContentProps["onInteractOutside"];
     /**
      * Show the pointing arrow.
      * @default true
      */
     arrow?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const PopoverTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const PopoverDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+}
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+export declare const PopoverTitle: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+export declare const PopoverDescription: React.ForwardRefExoticComponent<PopoverDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/dist/components/popover.js

@@ -2,57 +2,61 @@
 import { cn as e } from "../utils/cn.js";
 import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
 import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
+import { Slottable as i } from "@radix-ui/react-slot";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-popover";
 //#region src/components/popover.tsx
-var s = [
+var c = [
 	"top",
 	"bottom",
 	"left",
 	"right"
-], c = o.Root, l = o.Trigger, u = o.Close, d = r.forwardRef(({ className: r, align: s = "center", side: c = "bottom", sideOffset: l = 8, arrow: u = !0, children: d, ...f }, p) => /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ a(o.Content, {
-	ref: p,
-	align: s,
-	side: c,
-	sideOffset: l,
-	className: e(t, n, "rounded-basalt-md border border-basalt-border bg-basalt-popover px-4 py-3 text-sm text-basalt-popover-foreground shadow-md outline-hidden", r),
-	...f,
-	children: [d, u ? /* @__PURE__ */ i(o.Arrow, {
-		asChild: !0,
-		width: 20,
-		height: 10,
-		children: /* @__PURE__ */ i(m, {})
-	}) : null]
-}) }));
-d.displayName = o.Content.displayName;
-var f = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("h2", {
+], l = s.Root, u = s.Trigger, d = s.Close, f = r.forwardRef(({ className: r, align: c = "center", side: l = "bottom", sideOffset: u = 8, arrow: d = !0, children: f, ...p }, m) => /* @__PURE__ */ a(s.Portal, {
+	forceMount: p.forceMount,
+	children: /* @__PURE__ */ o(s.Content, {
+		ref: m,
+		align: c,
+		side: l,
+		sideOffset: u,
+		className: e(t, n, "rounded-basalt-md border border-basalt-border bg-basalt-popover px-4 py-3 text-sm text-basalt-popover-foreground shadow-md outline-hidden", r),
+		...p,
+		children: [/* @__PURE__ */ a(i, { children: f }), d ? /* @__PURE__ */ a(s.Arrow, {
+			asChild: !0,
+			width: 20,
+			height: 10,
+			children: /* @__PURE__ */ a(h, {})
+		}) : null]
+	})
+}));
+f.displayName = s.Content.displayName;
+var p = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a("h2", {
 	ref: r,
 	className: e("m-0 text-base font-medium leading-6 text-basalt-foreground", t),
 	...n
 }));
-f.displayName = "PopoverTitle";
-var p = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("p", {
+p.displayName = "PopoverTitle";
+var m = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a("p", {
 	ref: r,
 	className: e("m-0 text-base leading-6 text-basalt-muted-foreground", t),
 	...n
 }));
-p.displayName = "PopoverDescription";
-function m(e) {
-	return /* @__PURE__ */ i("svg", {
+m.displayName = "PopoverDescription";
+function h(e) {
+	return /* @__PURE__ */ a("svg", {
 		width: 20,
 		height: 10,
 		"aria-hidden": !0,
 		...e,
-		children: /* @__PURE__ */ a("svg", {
+		children: /* @__PURE__ */ o("svg", {
 			width: "100%",
 			height: "100%",
 			viewBox: "0 0 20 10",
 			preserveAspectRatio: "none",
 			"aria-hidden": !0,
-			children: [/* @__PURE__ */ i("path", {
+			children: [/* @__PURE__ */ a("path", {
 				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
 				className: "fill-basalt-popover"
-			}), /* @__PURE__ */ i("path", {
+			}), /* @__PURE__ */ a("path", {
 				d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
 				className: "fill-basalt-border"
 			})]
@@ -60,6 +64,6 @@ function m(e) {
 	});
 }
 //#endregion
-export { s as POPOVER_SIDES, c as Popover, u as PopoverClose, d as PopoverContent, p as PopoverDescription, f as PopoverTitle, l as PopoverTrigger };
+export { c as POPOVER_SIDES, l as Popover, d as PopoverClose, f as PopoverContent, m as PopoverDescription, p as PopoverTitle, u as PopoverTrigger };
 
 //# sourceMappingURL=popover.js.map