@nocoo/basalt 2.0.3 → 2.1.0

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

@@ -1,8 +1,176 @@
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as React from "react";
-export declare function MenuBar(props: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
-export declare function MenuBarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
-export declare const MenuBarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const MenuBarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const MenuBarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare function MenuBarRoot({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
+type RadixMenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>;
+type RadixMenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;
+type RadixMenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;
+type RadixMenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;
+type RadixMenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>;
+export interface MenuBarProps extends Omit<RadixMenubarProps, "value" | "defaultValue" | "onValueChange" | "loop" | "dir" | "asChild"> {
+    /**
+     * Controlled value of the currently open menu.
+     */
+    value?: RadixMenubarProps["value"];
+    /**
+     * Uncontrolled initial value of the open menu.
+     * @default ""
+     */
+    defaultValue?: RadixMenubarProps["defaultValue"];
+    /**
+     * Callback invoked when the open menu value changes.
+     */
+    onValueChange?: RadixMenubarProps["onValueChange"];
+    /**
+     * Whether keyboard navigation loops around when reaching ends.
+     * @default true
+     */
+    loop?: RadixMenubarProps["loop"];
+    /**
+     * Reading direction of the menubar.
+     * @default "ltr"
+     */
+    dir?: RadixMenubarProps["dir"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * MenuBar forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixMenubarProps["asChild"];
+}
+export declare function MenuBar(props: MenuBarProps): React.JSX.Element;
+export interface MenuBarMenuProps extends Omit<RadixMenubarMenuProps, "value"> {
+    /**
+     * Unique identifier value for this menu within the menubar.
+     */
+    value?: RadixMenubarMenuProps["value"];
+}
+export declare function MenuBarMenu(props: MenuBarMenuProps): React.JSX.Element;
+export interface MenuBarTriggerProps extends Omit<RadixMenubarTriggerProps, "disabled" | "asChild"> {
+    /**
+     * Disable the menubar trigger button.
+     * @default false
+     */
+    disabled?: RadixMenubarTriggerProps["disabled"];
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixMenubarTriggerProps["asChild"];
+}
+export declare const MenuBarTrigger: React.ForwardRefExoticComponent<MenuBarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface MenuBarContentProps extends Omit<RadixMenubarContentProps, "loop" | "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "forceMount" | "asChild" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
+    /**
+     * Whether keyboard navigation loops around when reaching the start or end item.
+     * @default false
+     */
+    loop?: RadixMenubarContentProps["loop"];
+    /**
+     * Preferred placement side relative to the menu trigger.
+     * @default "bottom"
+     */
+    side?: RadixMenubarContentProps["side"];
+    /**
+     * Distance in pixels between trigger and floating content panel.
+     * @default 4
+     */
+    sideOffset?: RadixMenubarContentProps["sideOffset"];
+    /**
+     * Preferred alignment along the side axis.
+     * @default "start"
+     */
+    align?: RadixMenubarContentProps["align"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixMenubarContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
+     * @default true
+     */
+    avoidCollisions?: RadixMenubarContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixMenubarContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixMenubarContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixMenubarContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixMenubarContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
+     * @default false
+     */
+    hideWhenDetached?: RadixMenubarContentProps["hideWhenDetached"];
+    /**
+     * 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.
+     */
+    forceMount?: true;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixMenubarContentProps["asChild"];
+    /**
+     * Callback fired when auto-focusing on close. Can be prevented.
+     */
+    onCloseAutoFocus?: RadixMenubarContentProps["onCloseAutoFocus"];
+    /**
+     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixMenubarContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onPointerDownOutside?: RadixMenubarContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onFocusOutside?: RadixMenubarContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onInteractOutside?: RadixMenubarContentProps["onInteractOutside"];
+}
+export declare const MenuBarContent: React.ForwardRefExoticComponent<MenuBarContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenuBarItemProps extends Omit<RadixMenubarItemProps, "disabled" | "onSelect" | "textValue" | "asChild"> {
+    /**
+     * Disable the menubar item.
+     * @default false
+     */
+    disabled?: RadixMenubarItemProps["disabled"];
+    /**
+     * Event handler called when the menubar item is selected (via click or keyboard).
+     */
+    onSelect?: RadixMenubarItemProps["onSelect"];
+    /**
+     * Optional text used for typeahead navigation. By default typeahead uses item text content.
+     */
+    textValue?: RadixMenubarItemProps["textValue"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Item forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixMenubarItemProps["asChild"];
+}
+export declare const MenuBarItem: React.ForwardRefExoticComponent<MenuBarItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenuBarRootProps extends MenuBarProps {
+}
+export declare function MenuBarRoot({ className, ...props }: MenuBarRootProps): React.JSX.Element;
+export {};

package/dist/components/menu-bar.js

@@ -1,42 +1,46 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { overlayItemClass as t, overlayPanelClass as n } from "./overlay.js";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-menubar";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { overlayItemClass as n, overlayPanelClass as r } from "./overlay.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-menubar";
 //#region src/components/menu-bar.tsx
-function o(e) {
-	return /* @__PURE__ */ i(d, { ...e });
-}
 function s(e) {
-	return /* @__PURE__ */ i(a.Menu, { ...e });
+	return /* @__PURE__ */ a(f, { ...e });
+}
+function c(e) {
+	return /* @__PURE__ */ a(o.Menu, { ...e });
 }
-var c = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(a.Trigger, {
-	ref: r,
-	className: e("inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent", t),
-	...n
+var l = i.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ a(o.Trigger, {
+	ref: i,
+	className: e(t, "inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent", n),
+	...r
+}));
+l.displayName = o.Trigger.displayName;
+var u = i.forwardRef(({ className: t, sideOffset: n = 8, ...i }, s) => /* @__PURE__ */ a(o.Portal, {
+	forceMount: i.forceMount,
+	children: /* @__PURE__ */ a(o.Content, {
+		ref: s,
+		sideOffset: n,
+		className: r(e("min-w-40", t)),
+		...i
+	})
 }));
-c.displayName = a.Trigger.displayName;
-var l = r.forwardRef(({ className: t, sideOffset: r = 8, ...o }, s) => /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
-	ref: s,
-	sideOffset: r,
-	className: n(e("min-w-40", t)),
-	...o
-}) }));
-l.displayName = a.Content.displayName;
-var u = r.forwardRef(({ className: n, ...r }, o) => /* @__PURE__ */ i(a.Item, {
-	ref: o,
-	className: t(e("relative outline-hidden focus:bg-basalt-accent", n)),
+u.displayName = o.Content.displayName;
+var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ a(o.Item, {
+	ref: i,
+	className: n(e("relative outline-hidden focus:bg-basalt-accent", t)),
 	...r
 }));
-u.displayName = a.Item.displayName;
-function d({ className: t, ...n }) {
-	return /* @__PURE__ */ i(a.Root, {
-		className: e("flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1", t),
-		...n
+d.displayName = o.Item.displayName;
+function f({ className: n, ...r }) {
+	return /* @__PURE__ */ a(o.Root, {
+		className: e(t, "flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1", n),
+		...r
 	});
 }
 //#endregion
-export { o as MenuBar, l as MenuBarContent, u as MenuBarItem, s as MenuBarMenu, d as MenuBarRoot, c as MenuBarTrigger };
+export { s as MenuBar, u as MenuBarContent, d as MenuBarItem, c as MenuBarMenu, f as MenuBarRoot, l as MenuBarTrigger };
 
 //# sourceMappingURL=menu-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.js","names":[],"sources":["../../src/components/menu-bar.tsx"],"sourcesContent":["import * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { MENU_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport function MenuBar(props: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n\treturn <MenuBarRoot {...props} />;\n}\n\nexport function MenuBarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n\treturn <MenubarPrimitive.Menu {...props} />;\n}\n\nexport const MenuBarTrigger = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Trigger>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenuBarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\n\nexport const MenuBarContent = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<MenubarPrimitive.Portal>\n\t\t<MenubarPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t{...props}\n\t\t/>\n\t</MenubarPrimitive.Portal>\n));\nMenuBarContent.displayName = MenubarPrimitive.Content.displayName;\n\nexport const MenuBarItem = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative outline-hidden focus:bg-basalt-accent\", className))}\n\t\t{...props}\n\t/>\n));\nMenuBarItem.displayName = MenubarPrimitive.Item.displayName;\n\nexport function MenuBarRoot({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n\treturn (\n\t\t<MenubarPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,EAAQ,GAA2D;CAClF,OAAO,kBAAC,GAAD,EAAa,GAAI,EAAQ,CAAA;AACjC;AAEA,SAAgB,EAAY,GAA2D;CACtF,OAAO,kBAAC,EAAiB,MAAlB,EAAuB,GAAI,EAAQ,CAAA;AAC3C;AAEA,IAAa,IAAiB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,SAAlB;CACM;CACL,WAAW,EACV,oJACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAe,cAAc,EAAiB,QAAQ;AAEtD,IAAa,IAAiB,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAiB,QAAlB,EAAA,UACC,kBAAC,EAAiB,SAAlB;CACM;CACO;CACZ,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;CACtD,GAAI;AACJ,CAAA,EACuB,CAAA,CACzB;AACD,EAAe,cAAc,EAAiB,QAAQ;AAEtD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EAAiB,EAAG,kDAAkD,CAAS,CAAC;CAC3F,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAEhD,SAAgB,EAAY,EAC3B,cACA,GAAG,KACmD;CACtD,OACC,kBAAC,EAAiB,MAAlB;EACC,WAAW,EACV,sGACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"menu-bar.js","names":[],"sources":["../../src/components/menu-bar.tsx"],"sourcesContent":["import * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { MENU_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\ntype RadixMenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>;\ntype RadixMenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;\ntype RadixMenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;\ntype RadixMenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;\ntype RadixMenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>;\n\nexport interface MenuBarProps\n\textends Omit<\n\t\tRadixMenubarProps,\n\t\t\"value\" | \"defaultValue\" | \"onValueChange\" | \"loop\" | \"dir\" | \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently open menu.\n\t */\n\tvalue?: RadixMenubarProps[\"value\"];\n\t/**\n\t * Uncontrolled initial value of the open menu.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixMenubarProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when the open menu value changes.\n\t */\n\tonValueChange?: RadixMenubarProps[\"onValueChange\"];\n\t/**\n\t * Whether keyboard navigation loops around when reaching ends.\n\t * @default true\n\t */\n\tloop?: RadixMenubarProps[\"loop\"];\n\t/**\n\t * Reading direction of the menubar.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixMenubarProps[\"dir\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * MenuBar forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarProps[\"asChild\"];\n}\n\nexport function MenuBar(props: MenuBarProps) {\n\treturn <MenuBarRoot {...props} />;\n}\n\nexport interface MenuBarMenuProps extends Omit<RadixMenubarMenuProps, \"value\"> {\n\t/**\n\t * Unique identifier value for this menu within the menubar.\n\t */\n\tvalue?: RadixMenubarMenuProps[\"value\"];\n}\n\nexport function MenuBarMenu(props: MenuBarMenuProps) {\n\treturn <MenubarPrimitive.Menu {...props} />;\n}\n\nexport interface MenuBarTriggerProps\n\textends Omit<RadixMenubarTriggerProps, \"disabled\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar trigger button.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarTriggerProps[\"disabled\"];\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarTriggerProps[\"asChild\"];\n}\n\nexport const MenuBarTrigger = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Trigger>,\n\tMenuBarTriggerProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"inline-flex h-8 items-center rounded-basalt-sm px-3 text-sm font-medium outline-hidden hover:bg-basalt-accent data-[state=open]:bg-basalt-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenuBarTrigger.displayName = MenubarPrimitive.Trigger.displayName;\n\nexport interface MenuBarContentProps\n\textends Omit<\n\t\tRadixMenubarContentProps,\n\t\t| \"loop\"\n\t\t| \"side\"\n\t\t| \"sideOffset\"\n\t\t| \"align\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"onFocusOutside\"\n\t\t| \"onInteractOutside\"\n\t> {\n\t/**\n\t * Whether keyboard navigation loops around when reaching the start or end item.\n\t * @default false\n\t */\n\tloop?: RadixMenubarContentProps[\"loop\"];\n\t/**\n\t * Preferred placement side relative to the menu trigger.\n\t * @default \"bottom\"\n\t */\n\tside?: RadixMenubarContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 4\n\t */\n\tsideOffset?: RadixMenubarContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"start\"\n\t */\n\talign?: RadixMenubarContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixMenubarContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixMenubarContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixMenubarContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixMenubarContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixMenubarContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixMenubarContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixMenubarContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarContentProps[\"asChild\"];\n\t/**\n\t * Callback fired when auto-focusing on close. Can be prevented.\n\t */\n\tonCloseAutoFocus?: RadixMenubarContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixMenubarContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixMenubarContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonFocusOutside?: RadixMenubarContentProps[\"onFocusOutside\"];\n\t/**\n\t * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.\n\t */\n\tonInteractOutside?: RadixMenubarContentProps[\"onInteractOutside\"];\n}\n\nexport const MenuBarContent = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Content>,\n\tMenuBarContentProps\n>(({ className, sideOffset = MENU_GAP, ...props }, ref) => (\n\t<MenubarPrimitive.Portal forceMount={props.forceMount}>\n\t\t<MenubarPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(cn(\"min-w-40\", className))}\n\t\t\t{...props}\n\t\t/>\n\t</MenubarPrimitive.Portal>\n));\nMenuBarContent.displayName = MenubarPrimitive.Content.displayName;\n\nexport interface MenuBarItemProps\n\textends Omit<RadixMenubarItemProps, \"disabled\" | \"onSelect\" | \"textValue\" | \"asChild\"> {\n\t/**\n\t * Disable the menubar item.\n\t * @default false\n\t */\n\tdisabled?: RadixMenubarItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when the menubar item is selected (via click or keyboard).\n\t */\n\tonSelect?: RadixMenubarItemProps[\"onSelect\"];\n\t/**\n\t * Optional text used for typeahead navigation. By default typeahead uses item text content.\n\t */\n\ttextValue?: RadixMenubarItemProps[\"textValue\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Item forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixMenubarItemProps[\"asChild\"];\n}\n\nexport const MenuBarItem = React.forwardRef<\n\tReact.ElementRef<typeof MenubarPrimitive.Item>,\n\tMenuBarItemProps\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative outline-hidden focus:bg-basalt-accent\", className))}\n\t\t{...props}\n\t/>\n));\nMenuBarItem.displayName = MenubarPrimitive.Item.displayName;\n\nexport interface MenuBarRootProps extends MenuBarProps {}\n\nexport function MenuBarRoot({ className, ...props }: MenuBarRootProps) {\n\treturn (\n\t\t<MenubarPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-9 items-center gap-0.5 rounded-basalt-md border border-basalt-border bg-basalt-popover px-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAgDA,SAAgB,EAAQ,GAAqB;CAC5C,OAAO,kBAAC,GAAD,EAAa,GAAI,EAAQ,CAAA;AACjC;AASA,SAAgB,EAAY,GAAyB;CACpD,OAAO,kBAAC,EAAiB,MAAlB,EAAuB,GAAI,EAAQ,CAAA;AAC3C;AAiBA,IAAa,IAAiB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,SAAlB;CACM;CACL,WAAW,EACV,GACA,oJACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAe,cAAc,EAAiB,QAAQ;AAiHtD,IAAa,IAAiB,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAG,KAAS,MAClD,kBAAC,EAAiB,QAAlB;CAAyB,YAAY,EAAM;CAC1C,UAAA,kBAAC,EAAiB,SAAlB;EACM;EACO;EACZ,WAAW,EAAkB,EAAG,YAAY,CAAS,CAAC;EACtD,GAAI;CACJ,CAAA;AACuB,CAAA,CACzB;AACD,EAAe,cAAc,EAAiB,QAAQ;AAyBtD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EAAiB,EAAG,kDAAkD,CAAS,CAAC;CAC3F,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAIhD,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA2B;CACtE,OACC,kBAAC,EAAiB,MAAlB;EACC,WAAW,EACV,GACA,sGACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH"}

package/dist/components/meter.d.ts

@@ -1,8 +1,33 @@
-export declare function Meter({ value, label, customValue, hideValue, className, "aria-label": ariaLabel, }: {
+export interface MeterProps {
+    /**
+     * Percentage value representing current meter progress (0..100).
+     *
+     * Note: Rendered bar width is clamped to [0, 100]%; callers should provide 0..100,
+     * while underlying Radix validates and manages accessible value attributes.
+     * Does not support arbitrary native HTML props, ref forwarding, min/max, or change callbacks.
+     * @default 0
+     */
     value?: number;
+    /**
+     * Text label displayed above the meter bar and used as accessible name fallback.
+     */
     label?: string;
+    /**
+     * Custom text overriding the displayed percentage value text next to the label.
+     */
     customValue?: string;
+    /**
+     * Whether to hide the displayed value text next to the label.
+     * @default false
+     */
     hideValue?: boolean;
+    /**
+     * Additional CSS classes applied to the root container.
+     */
     className?: string;
+    /**
+     * Accessible label announced for assistive technologies. Takes precedence over `label`.
+     */
     "aria-label"?: string;
-}): import("react").JSX.Element;
+}
+export declare function Meter({ value, label, customValue, hideValue, className, "aria-label": ariaLabel, }: MeterProps): import("react").JSX.Element;

package/dist/components/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","names":[],"sources":["../../src/components/meter.tsx"],"sourcesContent":["import * as Progress from \"@radix-ui/react-progress\";\nimport { cn } from \"../utils/cn\";\n\nexport function Meter({\n\tvalue = 0,\n\tlabel,\n\tcustomValue,\n\thideValue = false,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n}: {\n\tvalue?: number;\n\tlabel?: string;\n\tcustomValue?: string;\n\thideValue?: boolean;\n\tclassName?: string;\n\t\"aria-label\"?: string;\n}) {\n\treturn (\n\t\t<div className={cn(\"w-full space-y-1\", className)}>\n\t\t\t{label || (!hideValue && customValue) ? (\n\t\t\t\t<div className=\"flex justify-between text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{hideValue ? null : <span>{customValue ?? `${value}%`}</span>}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<Progress.Root\n\t\t\t\tvalue={value}\n\t\t\t\taria-label={ariaLabel ?? label}\n\t\t\t\tclassName=\"relative h-2 overflow-hidden rounded-full bg-basalt-muted\"\n\t\t\t>\n\t\t\t\t<Progress.Indicator\n\t\t\t\t\tclassName=\"h-full bg-basalt-primary transition-[width]\"\n\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, value))}%` }}\n\t\t\t\t/>\n\t\t\t</Progress.Root>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAGA,SAAgB,EAAM,EACrB,WAAQ,GACR,UACA,gBACA,eAAY,IACZ,cACA,cAAc,KAQZ;CACF,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,oBAAoB,CAAS;EAAhD,UAAA,CACE,KAAU,CAAC,KAAa,IACxB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,IAAY,OAAO,kBAAC,QAAD,EAAA,UAAO,KAAe,GAAG,EAAM,GAAS,CAAA,CACxD;EACF,CAAA,IAAA,MACJ,kBAAC,EAAS,MAAV;GACQ;GACP,cAAY,KAAa;GACzB,WAAU;GAEV,UAAA,kBAAC,EAAS,WAAV;IACC,WAAU;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAK,CAAC,EAAE,GAAG;GACxD,CAAA;EACa,CAAA,CACX;;AAEP"}
+{"version":3,"file":"meter.js","names":[],"sources":["../../src/components/meter.tsx"],"sourcesContent":["import * as Progress from \"@radix-ui/react-progress\";\nimport { cn } from \"../utils/cn\";\n\nexport interface MeterProps {\n\t/**\n\t * Percentage value representing current meter progress (0..100).\n\t *\n\t * Note: Rendered bar width is clamped to [0, 100]%; callers should provide 0..100,\n\t * while underlying Radix validates and manages accessible value attributes.\n\t * Does not support arbitrary native HTML props, ref forwarding, min/max, or change callbacks.\n\t * @default 0\n\t */\n\tvalue?: number;\n\t/**\n\t * Text label displayed above the meter bar and used as accessible name fallback.\n\t */\n\tlabel?: string;\n\t/**\n\t * Custom text overriding the displayed percentage value text next to the label.\n\t */\n\tcustomValue?: string;\n\t/**\n\t * Whether to hide the displayed value text next to the label.\n\t * @default false\n\t */\n\thideValue?: boolean;\n\t/**\n\t * Additional CSS classes applied to the root container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Accessible label announced for assistive technologies. Takes precedence over `label`.\n\t */\n\t\"aria-label\"?: string;\n}\n\nexport function Meter({\n\tvalue = 0,\n\tlabel,\n\tcustomValue,\n\thideValue = false,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n}: MeterProps) {\n\treturn (\n\t\t<div className={cn(\"w-full space-y-1\", className)}>\n\t\t\t{label || (!hideValue && customValue) ? (\n\t\t\t\t<div className=\"flex justify-between text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{hideValue ? null : <span>{customValue ?? `${value}%`}</span>}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<Progress.Root\n\t\t\t\tvalue={value}\n\t\t\t\taria-label={ariaLabel ?? label}\n\t\t\t\tclassName=\"relative h-2 overflow-hidden rounded-full bg-basalt-muted\"\n\t\t\t>\n\t\t\t\t<Progress.Indicator\n\t\t\t\t\tclassName=\"h-full bg-basalt-primary transition-[width]\"\n\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, value))}%` }}\n\t\t\t\t/>\n\t\t\t</Progress.Root>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAoCA,SAAgB,EAAM,EACrB,WAAQ,GACR,UACA,gBACA,eAAY,IACZ,cACA,cAAc,KACA;CACd,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,oBAAoB,CAAS;EAAhD,UAAA,CACE,KAAU,CAAC,KAAa,IACxB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD,EAAA,UAAO,EAAY,CAAA,GAClB,IAAY,OAAO,kBAAC,QAAD,EAAA,UAAO,KAAe,GAAG,EAAM,GAAS,CAAA,CACxD;EACF,CAAA,IAAA,MACJ,kBAAC,EAAS,MAAV;GACQ;GACP,cAAY,KAAa;GACzB,WAAU;GAEV,UAAA,kBAAC,EAAS,WAAV;IACC,WAAU;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,CAAK,CAAC,EAAE,GAAG;GACxD,CAAA;EACa,CAAA,CACX;;AAEP"}

package/dist/components/multi-select.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from "react";
+export interface MultiSelectOption {
+    /** Stable identifier, independent of the display label. */
+    value: string;
+    /** Searchable and accessible display name. */
+    label: string;
+    /** Optional secondary searchable text. */
+    description?: string;
+    /** Caller-provided icon or avatar. */
+    leading?: ReactNode;
+    /** Prevent adding or removing this option. */
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    /** Accessible field and popup name. */
+    label: string;
+    /** Available options; retain selected options to preserve their display labels. */
+    options: readonly MultiSelectOption[];
+    /** Controlled selected identifiers. */
+    value?: readonly string[];
+    /** Initial uncontrolled selection. @default [] */
+    defaultValue?: readonly string[];
+    /** Selection requests; controlled values change only when accepted by the caller. */
+    onValueChange?: (value: string[]) => void;
+    /** Controlled search text; asynchronous requests belong to the caller. */
+    query?: string;
+    /** Initial uncontrolled search text. @default "" */
+    defaultQuery?: string;
+    /** Search text requests. */
+    onQueryChange?: (query: string) => void;
+    /** Controlled popup visibility. */
+    open?: boolean;
+    /** Initial uncontrolled popup visibility. @default false */
+    defaultOpen?: boolean;
+    /** Popup visibility requests. */
+    onOpenChange?: (open: boolean) => void;
+    /** Use local label/description filtering; disable for server-filtered options. @default true */
+    filterOptions?: boolean;
+    /** Loading content replaces the option list. @default false */
+    loading?: boolean;
+    /** Disables the trigger, chips, and native form entries. @default false */
+    disabled?: boolean;
+    /** Repeated native form entry name, one entry per selected identifier. */
+    name?: string;
+    /** Optional external native form owner. Uncontrolled state respects uncancelled form resets. */
+    form?: string;
+    /** Empty selection prompt. @default "Select options" */
+    placeholder?: string;
+    /** Search input prompt. @default "Search options…" */
+    searchPlaceholder?: string;
+    /** Empty search result text. @default "No options found." */
+    emptyLabel?: string;
+    /** Loading announcement. @default "Loading options…" */
+    loadingLabel?: string;
+    /** Chip removal label prefix. @default "Remove" */
+    removeLabel?: string;
+    /** Show removable selection chips; disable when a FilterBar renders its own chips. @default true */
+    showChips?: boolean;
+    /** Selection count formatter, including localization. */
+    formatSelectionCount?: (count: number) => string;
+    /** Additional root classes. */
+    className?: string;
+}
+export declare function MultiSelect({ label, options, value, defaultValue, onValueChange, query, defaultQuery, onQueryChange, open, defaultOpen, onOpenChange, filterOptions, loading, disabled, name, form, placeholder, searchPlaceholder, emptyLabel, loadingLabel, removeLabel, showChips, formatSelectionCount, className, }: MultiSelectProps): import("react").JSX.Element;

package/dist/components/multi-select.js

@@ -0,0 +1,218 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
+import { Button as n } from "./button.js";
+import { Input as r } from "./input.js";
+import { Popover as ee, PopoverContent as te, PopoverTrigger as ne } from "./popover.js";
+import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { Check as c, ChevronDown as l, X as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/multi-select.tsx
+function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange: _, query: v, defaultQuery: y = "", onQueryChange: re, open: b, defaultOpen: ie = !1, onOpenChange: ae, filterOptions: oe = !0, loading: x = !1, disabled: S = !1, name: C, form: w, placeholder: se = "Select options", searchPlaceholder: ce = "Search options…", emptyLabel: T = "No options found.", loadingLabel: E = "Loading options…", removeLabel: D = "Remove", showChips: O = !0, formatSelectionCount: k, className: A }) {
+	let [le, j] = s(g), [ue, M] = s(y), [de, N] = s(ie), [P, F] = s(null), I = o(null), L = o(null), R = o(null), z = o(null), B = o({
+		value: h,
+		defaultValue: g,
+		query: v,
+		defaultQuery: y,
+		open: b
+	});
+	i(() => {
+		B.current = {
+			value: h,
+			defaultValue: g,
+			query: v,
+			defaultQuery: y,
+			open: b
+		};
+	}), i(() => {
+		let e = L.current?.form;
+		if (!e) return;
+		let t = /* @__PURE__ */ new Set();
+		function n(e) {
+			let n = setTimeout(() => {
+				if (t.delete(n), e.defaultPrevented) return;
+				let r = B.current;
+				r.value === void 0 && j(r.defaultValue), r.query === void 0 && M(r.defaultQuery), r.open === void 0 && N(!1), F(null);
+			}, 0);
+			t.add(n);
+		}
+		return e.addEventListener("reset", n), () => {
+			for (let e of t) clearTimeout(e);
+			e.removeEventListener("reset", n);
+		};
+	}, [w]);
+	let V = a(), H = h ?? le, U = v ?? ue, W = (b ?? de) && !S, G = m.filter((e) => !oe || `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(U.trim().toLocaleLowerCase())), K = G.filter((e) => !e.disabled), q = K.some((e) => e.value === P) ? P : K[0]?.value, J = G.findIndex((e) => e.value === q), Y = k ? k(H.length) : `${H.length} selected`;
+	function X(e) {
+		S || (b === void 0 && N(e), ae?.(e));
+	}
+	function Z(e) {
+		S || (h === void 0 && j(e), _?.(e));
+	}
+	function Q(e) {
+		e.disabled || Z(H.includes(e.value) ? H.filter((t) => t !== e.value) : [...H, e.value]);
+	}
+	function $() {
+		if (U) return;
+		let e = [...H].reverse().find((e) => !m.find((t) => t.value === e)?.disabled);
+		e !== void 0 && Z(H.filter((t) => t !== e));
+	}
+	return /* @__PURE__ */ f("div", {
+		className: e(t, "min-w-0 space-y-2", A),
+		children: [
+			O && H.length > 0 && /* @__PURE__ */ d("div", {
+				role: "group",
+				className: "flex flex-wrap gap-1.5",
+				"aria-label": `${p}: ${Y}`,
+				children: H.map((e) => {
+					let t = m.find((t) => t.value === e), n = t?.label ?? e;
+					return /* @__PURE__ */ f("span", {
+						className: "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",
+						children: [/* @__PURE__ */ d("span", {
+							className: "min-w-0 break-words",
+							children: n
+						}), /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: S || t?.disabled,
+							"aria-label": `${D} ${n}`,
+							className: "rounded p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
+							onClick: () => Z(H.filter((t) => t !== e)),
+							children: /* @__PURE__ */ d(u, {
+								className: "size-3",
+								"aria-hidden": "true"
+							})
+						})]
+					}, e);
+				})
+			}),
+			!S && C && H.map((e) => /* @__PURE__ */ d("input", {
+				type: "hidden",
+				name: C,
+				form: w,
+				value: e
+			}, e)),
+			/* @__PURE__ */ f(ee, {
+				open: W,
+				onOpenChange: X,
+				children: [/* @__PURE__ */ d(ne, {
+					asChild: !0,
+					children: /* @__PURE__ */ f(n, {
+						ref: L,
+						form: w,
+						variant: "outline",
+						disabled: S,
+						"aria-label": p,
+						"aria-describedby": `${V}-count`,
+						className: "w-full justify-between",
+						onKeyDown: (e) => {
+							e.nativeEvent.isComposing || ((e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), X(!0)), e.key === "Backspace" && (e.preventDefault(), $()));
+						},
+						children: [/* @__PURE__ */ d("span", {
+							className: "truncate",
+							children: H.length ? Y : se
+						}), /* @__PURE__ */ d(l, { "aria-hidden": "true" })]
+					})
+				}), /* @__PURE__ */ f(te, {
+					align: "start",
+					className: "w-72 max-w-[calc(100vw-2rem)] p-2",
+					"aria-label": p,
+					onOpenAutoFocus: (e) => {
+						e.preventDefault(), I.current?.focus();
+					},
+					children: [
+						/* @__PURE__ */ d(r, {
+							ref: I,
+							role: "combobox",
+							"aria-label": `${p}: search`,
+							"aria-expanded": W,
+							"aria-autocomplete": "list",
+							"aria-controls": `${V}-list`,
+							"aria-activedescendant": !x && J >= 0 ? `${V}-option-${J}` : void 0,
+							placeholder: ce,
+							value: U,
+							onChange: (e) => {
+								v === void 0 && M(e.target.value), re?.(e.target.value), F(null);
+							},
+							onKeyDown: (e) => {
+								if (!e.nativeEvent.isComposing) {
+									if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+										if (e.preventDefault(), !x && K.length) {
+											let t = K.findIndex((e) => e.value === q), n = K[(t + (e.key === "ArrowDown" ? 1 : -1) + K.length) % K.length];
+											F(n.value), R.current?.querySelector(`[data-option-index="${G.indexOf(n)}"]`)?.scrollIntoView({ block: "nearest" });
+										}
+									} else if (e.key === "Enter") {
+										e.preventDefault();
+										let t = K.find((e) => e.value === q);
+										!x && t && Q(t);
+									} else e.key === "Backspace" && !U && (e.preventDefault(), $());
+								}
+							}
+						}),
+						/* @__PURE__ */ d("div", {
+							ref: R,
+							id: `${V}-list`,
+							role: "listbox",
+							"aria-label": p,
+							"aria-multiselectable": "true",
+							"aria-busy": x,
+							className: "mt-2 max-h-60 overflow-y-auto",
+							children: !x && G.map((t, n) => /* @__PURE__ */ f("button", {
+								type: "button",
+								role: "option",
+								id: `${V}-option-${n}`,
+								"data-option-index": n,
+								tabIndex: -1,
+								"aria-selected": H.includes(t.value),
+								"aria-disabled": t.disabled || void 0,
+								disabled: t.disabled,
+								className: e("flex w-full items-center gap-2 rounded-basalt-md px-2 py-2 text-left text-sm disabled:opacity-40", q === t.value && "bg-basalt-accent"),
+								onPointerMove: (e) => {
+									let n = z.current;
+									(n?.x !== e.clientX || n.y !== e.clientY) && (z.current = {
+										x: e.clientX,
+										y: e.clientY
+									}, t.disabled || F(t.value));
+								},
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => {
+									Q(t), I.current?.focus();
+								},
+								children: [
+									t.leading,
+									/* @__PURE__ */ f("span", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ d("span", {
+											className: "block break-words",
+											children: t.label
+										}), t.description && /* @__PURE__ */ d("span", {
+											className: "block text-xs text-basalt-muted-foreground",
+											children: t.description
+										})]
+									}),
+									H.includes(t.value) && /* @__PURE__ */ d(c, {
+										className: "size-4 shrink-0",
+										"aria-hidden": "true"
+									})
+								]
+							}, t.value))
+						}),
+						(x || G.length === 0) && /* @__PURE__ */ d("p", {
+							role: "status",
+							className: "px-2 py-4 text-sm text-basalt-muted-foreground",
+							children: x ? E : T
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ d("span", {
+				id: `${V}-count`,
+				className: "sr-only",
+				"aria-live": "polite",
+				children: Y
+			})
+		]
+	});
+}
+//#endregion
+export { p as MultiSelect };
+
+//# sourceMappingURL=multi-select.js.map