@nocoo/basalt 3.2.0 → 3.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.js","names":["React","MenubarPrimitive","MenuBar","MenuBarRoot","props","MenuBarMenu","MenuBarTrigger","cn","BASALT_UI_CLASS","className","MenuBarContent","highlightRef","useHoverHighlight","ref","overlayPanelClass","MenuBarItem","overlayItemClass"],"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 { useHoverHighlight } from \"../utils/use-hover-highlight\";\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 min-h-basalt-control items-center rounded-basalt-sm px-basalt-space-lg text-basalt-base font-medium outline-hidden hover:bg-basalt-hover data-[state=open]:bg-basalt-selected\",\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\tconst highlightRef = useHoverHighlight(ref);\n\treturn (\n\t\t<MenubarPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<MenubarPrimitive.Content\n\t\t\t\tref={highlightRef}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(cn(\"basalt-hover-list min-w-basalt-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</MenubarPrimitive.Portal>\n\t);\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\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative outline-hidden\", 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 min-h-basalt-control items-center gap-basalt-space-xs rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-sm py-basalt-space-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;AAiDA,SAAgBE,EAAQ,GAAqB;CAC5C,OAAO,kBAACC,GAAD,EAAa,GAAIC,EAAQ,CAAA;AACjC;AASA,SAAgBC,EAAY,GAAyB;CACpD,OAAO,kBAACJ,EAAiB,MAAlB,EAAuB,GAAIG,EAAQ,CAAA;AAC3C;AAiBA,IAAaE,IAAiBN,EAAM,YAGjC,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,SAAlB;CACM;CACL,WAAWM,EACVC,GACA,6LACAC,CACD;CACA,GAAIL;AACJ,CAAA,CACD;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAiHtD,IAAaS,IAAiBV,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAGI,KAAS,MAAQ;CAC1D,IAAMO,IAAeC,EAAkBC,CAAG;CAC1C,OACC,kBAACZ,EAAiB,QAAlB;EAAyB,YAAYG,EAAM;EAC1C,UAAA,kBAACH,EAAiB,SAAlB;GACC,KAAKU;GACO;GACZ,WAAWG,EAAkBP,EAAG,qCAAqCE,CAAS,CAAC;GAC/E,GAAIL;EACJ,CAAA;CACuB,CAAA;AAE3B,CAAC;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAyBtD,IAAac,IAAcf,EAAM,YAG9B,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,MAAlB;CACC,0BAAuB;CAClB;CACL,WAAWe,EAAiBT,EAAG,2BAA2BE,CAAS,CAAC;CACpE,GAAIL;AACJ,CAAA,CACD;AACD,EAAY,cAAcH,EAAiB,KAAK;AAIhD,SAAgBE,EAAY,EAAE,cAAW,GAAGC,KAA2B;CACtE,OACC,kBAACH,EAAiB,MAAlB;EACC,WAAWM,EACVC,GACA,oKACAC,CACD;EACA,GAAIL;CACJ,CAAA;AAEH"}
+{"version":3,"file":"menu-bar.js","names":["React","MenubarPrimitive","MenuBar","MenuBarRoot","props","MenuBarMenu","MenuBarTrigger","cn","BASALT_UI_CLASS","className","MenuBarContent","highlightRef","useHoverHighlight","ref","overlayPanelClass","MenuBarItem","overlayItemClass"],"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 { useHoverHighlight } from \"../utils/use-hover-highlight\";\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\"basalt-focus basalt-focus-inset inline-flex min-h-basalt-control items-center rounded-basalt-sm px-basalt-space-lg text-basalt-base font-medium hover:bg-basalt-hover data-[state=open]:bg-basalt-selected\",\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\tconst highlightRef = useHoverHighlight(ref);\n\treturn (\n\t\t<MenubarPrimitive.Portal forceMount={props.forceMount}>\n\t\t\t<MenubarPrimitive.Content\n\t\t\t\tref={highlightRef}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(cn(\"basalt-hover-list min-w-basalt-40\", className))}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</MenubarPrimitive.Portal>\n\t);\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\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(cn(\"relative\", 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 min-h-basalt-control items-center gap-basalt-space-xs rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-sm py-basalt-space-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;;AAiDA,SAAgBE,EAAQ,GAAqB;CAC5C,OAAO,kBAACC,GAAD,EAAa,GAAIC,EAAQ,CAAA;AACjC;AASA,SAAgBC,EAAY,GAAyB;CACpD,OAAO,kBAACJ,EAAiB,MAAlB,EAAuB,GAAIG,EAAQ,CAAA;AAC3C;AAiBA,IAAaE,IAAiBN,EAAM,YAGjC,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,SAAlB;CACM;CACL,WAAWM,EACVC,GACA,8MACAC,CACD;CACA,GAAIL;AACJ,CAAA,CACD;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAiHtD,IAAaS,IAAiBV,EAAM,YAGjC,EAAE,cAAW,gBAAA,GAAuB,GAAGI,KAAS,MAAQ;CAC1D,IAAMO,IAAeC,EAAkBC,CAAG;CAC1C,OACC,kBAACZ,EAAiB,QAAlB;EAAyB,YAAYG,EAAM;EAC1C,UAAA,kBAACH,EAAiB,SAAlB;GACC,KAAKU;GACO;GACZ,WAAWG,EAAkBP,EAAG,qCAAqCE,CAAS,CAAC;GAC/E,GAAIL;EACJ,CAAA;CACuB,CAAA;AAE3B,CAAC;AACD,EAAe,cAAcH,EAAiB,QAAQ;AAyBtD,IAAac,IAAcf,EAAM,YAG9B,EAAE,cAAW,GAAGI,KAAS,MAC3B,kBAACH,EAAiB,MAAlB;CACC,0BAAuB;CAClB;CACL,WAAWe,EAAiBT,EAAG,YAAYE,CAAS,CAAC;CACrD,GAAIL;AACJ,CAAA,CACD;AACD,EAAY,cAAcH,EAAiB,KAAK;AAIhD,SAAgBE,EAAY,EAAE,cAAW,GAAGC,KAA2B;CACtE,OACC,kBAACH,EAAiB,MAAlB;EACC,WAAWM,EACVC,GACA,oKACAC,CACD;EACA,GAAIL;CACJ,CAAA;AAEH"}

package/dist/components/multi-select.js

@@ -75,7 +75,7 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 							type: "button",
 							disabled: x || t?.disabled,
 							"aria-label": `${E} ${n}`,
-							className: "rounded-basalt-sm p-basalt-space-sm focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
+							className: "basalt-focus basalt-focus-inset rounded-basalt-sm p-basalt-space-sm disabled:opacity-50",
 							onClick: () => Z(H.filter((t) => t !== e)),
 							children: /* @__PURE__ */ d(re, {
 								className: "size-basalt-icon-sm",

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["MultiSelect","localValue","setLocalValue","useState","defaultValue","localQuery","setLocalQuery","defaultQuery","localOpen","setLocalOpen","defaultOpen","active","setActive","input","useRef","trigger","list","highlightRef","useHoverHighlight","pointer","resetConfig","useEffect","owner","timers","reset","timer","event","config","form","id","useId","selected","value","search","query","expanded","open","disabled","visible","options","filterOptions","option","enabled","activeValue","activeIndex","countText","formatSelectionCount","changeOpen","next","onOpenChange","changeValue","onValueChange","toggle","item","removeLast","cn","BASALT_UI_CLASS","className","showChips","label","text","removeLabel","X","name","Popover","PopoverTrigger","Button","placeholder","ChevronDown","PopoverContent","Input","loading","searchPlaceholder","onQueryChange","index","previous","Check","loadingLabel","emptyLabel"],"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 { useHoverHighlight } from \"../utils/use-hover-highlight\";\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 highlightRef = useHoverHighlight(list);\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-basalt-space-lg\", className)}>\n\t\t\t{showChips && selected.length > 0 && (\n\t\t\t\t<div\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tclassName=\"flex flex-wrap gap-basalt-space-md\"\n\t\t\t\t\taria-label={`${label}: ${countText}`}\n\t\t\t\t>\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-basalt-space-sm rounded-basalt-md border border-basalt-border bg-basalt-selected py-basalt-space-xs pl-basalt-space-lg text-basalt-sm\"\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-basalt-sm p-basalt-space-sm 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-basalt-icon-sm\" 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-basalt-72 max-w-[calc(100vw-2rem)] p-basalt-space-lg\"\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={highlightRef}\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=\"basalt-hover-list mt-basalt-space-lg max-h-basalt-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\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\t\tdata-hover-active={activeValue === option.value}\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\tdata-hover-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-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-lg text-left text-basalt-base disabled:opacity-40\",\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-basalt-sm 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-basalt-icon-lg 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\n\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\tclassName=\"px-basalt-space-lg py-basalt-space-lg text-basalt-base text-basalt-muted-foreground\"\n\t\t\t\t\t\t>\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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"}
+{"version":3,"file":"multi-select.js","names":["MultiSelect","localValue","setLocalValue","useState","defaultValue","localQuery","setLocalQuery","defaultQuery","localOpen","setLocalOpen","defaultOpen","active","setActive","input","useRef","trigger","list","highlightRef","useHoverHighlight","pointer","resetConfig","useEffect","owner","timers","reset","timer","event","config","form","id","useId","selected","value","search","query","expanded","open","disabled","visible","options","filterOptions","option","enabled","activeValue","activeIndex","countText","formatSelectionCount","changeOpen","next","onOpenChange","changeValue","onValueChange","toggle","item","removeLast","cn","BASALT_UI_CLASS","className","showChips","label","text","removeLabel","X","name","Popover","PopoverTrigger","Button","placeholder","ChevronDown","PopoverContent","Input","loading","searchPlaceholder","onQueryChange","index","previous","Check","loadingLabel","emptyLabel"],"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 { useHoverHighlight } from \"../utils/use-hover-highlight\";\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 highlightRef = useHoverHighlight(list);\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-basalt-space-lg\", className)}>\n\t\t\t{showChips && selected.length > 0 && (\n\t\t\t\t<div\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tclassName=\"flex flex-wrap gap-basalt-space-md\"\n\t\t\t\t\taria-label={`${label}: ${countText}`}\n\t\t\t\t>\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-basalt-space-sm rounded-basalt-md border border-basalt-border bg-basalt-selected py-basalt-space-xs pl-basalt-space-lg text-basalt-sm\"\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=\"basalt-focus basalt-focus-inset rounded-basalt-sm p-basalt-space-sm 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-basalt-icon-sm\" 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-basalt-72 max-w-[calc(100vw-2rem)] p-basalt-space-lg\"\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={highlightRef}\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=\"basalt-hover-list mt-basalt-space-lg max-h-basalt-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\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\t\tdata-hover-active={activeValue === option.value}\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\tdata-hover-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-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-lg text-left text-basalt-base disabled:opacity-40\",\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-basalt-sm 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-basalt-icon-lg 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\n\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\tclassName=\"px-basalt-space-lg py-basalt-space-lg text-basalt-base text-basalt-muted-foreground\"\n\t\t\t\t\t\t>\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":";;;;;;;;;;;AAyEA,SAAgBA,EAAY,EAC3B,UACA,YACA,UACA,kBAAe,CAAC,GAChB,mBACA,UACA,kBAAe,IACf,mBACA,SACA,kBAAc,IACd,kBACA,oBAAgB,IAChB,aAAU,IACV,cAAW,IACX,SACA,SACA,kBAAc,kBACd,wBAAoB,mBACpB,gBAAa,qBACb,kBAAe,oBACf,iBAAc,UACd,eAAY,IACZ,yBACA,iBACoB;CACpB,IAAM,CAACC,IAAYC,KAAiBC,EAASC,CAAY,GACnD,CAACC,IAAYC,KAAiBH,EAASI,CAAY,GACnD,CAACC,GAAWC,KAAgBN,EAASO,EAAW,GAChD,CAACC,GAAQC,KAAaT,EAAwB,IAAI,GAClDU,IAAQC,EAAyB,IAAI,GACrCC,IAAUD,EAA0B,IAAI,GACxCE,IAAOF,EAAuB,IAAI,GAClCG,IAAeC,EAAkBF,CAAI,GACrCG,IAAUL,EAAwC,IAAI,GACtDM,IAAcN,EAAO;EAAE;EAAO;EAAc;EAAO;EAAc;CAAK,CAAC;CAK7E,AAJAO,QAAgB;EACf,EAAY,UAAU;GAAE;GAAO;GAAc;GAAO;GAAc;EAAK;CACxE,CAAC,GAEDA,QAAgB;EACf,IAAMC,IAAQP,EAAQ,SAAS;EAC/B,IAAI,CAACO,GAAO;EACZ,IAAMC,oBAAS,IAAI,IAAmC;EACtD,SAASC,EAAM,GAAc;GAC5B,IAAMC,IAAQ,iBAAiB;IAE9B,IADAF,EAAO,OAAOE,CAAK,GACfC,EAAM,kBAAkB;IAC5B,IAAMC,IAASP,EAAY;IAI3B,AAHIO,EAAO,UAAU,KAAA,KAAWzB,EAAcyB,EAAO,YAAY,GAC7DA,EAAO,UAAU,KAAA,KAAWrB,EAAcqB,EAAO,YAAY,GAC7DA,EAAO,SAAS,KAAA,KAAWlB,EAAa,EAAK,GACjDG,EAAU,IAAI;GACf,GAAG,CAAC;GACJ,EAAO,IAAIa,CAAK;EACjB;EAEA,OADAH,EAAM,iBAAiB,SAASE,CAAK,SACxB;GACZ,KAAK,IAAMC,KAASF,GAAQ,aAAaE,CAAK;GAC9C,EAAM,oBAAoB,SAASD,CAAK;EACzC;CACD,GAAG,CAACI,CAAI,CAAC;CACT,IAAMC,IAAKC,EAAM,GACXC,IAAWC,KAAS/B,IACpBgC,IAASC,KAAS7B,IAClB8B,KAAYC,KAAQ5B,MAAc,CAAC6B,GACnCC,IAAUC,EAAQ,QACtB,MACA,CAACC,MACD,GAAGC,EAAO,MAAM,GAAGA,EAAO,eAAe,KACvC,kBAAkB,CAAC,CACnB,SAASR,EAAO,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC9C,GACMS,IAAUJ,EAAQ,QAAQ,MAAW,CAACG,EAAO,QAAQ,GACrDE,IAAcD,EAAQ,MAAM,MAAWD,EAAO,UAAU9B,CAAM,IACjEA,IACA+B,EAAQ,EAAE,EAAE,OACTE,IAAcN,EAAQ,WAAW,MAAWG,EAAO,UAAUE,CAAW,GACxEE,IAAYC,IACfA,EAAqBf,EAAS,MAAM,IACpC,GAAGA,EAAS,OAAO;CAEtB,SAASgB,EAAW,GAAe;EAClC,AAAIV,MACAD,MAAS,KAAA,KAAW3B,EAAauC,CAAI,GACzCC,KAAeD,CAAI;CACpB;CACA,SAASE,EAAY,GAAgB;EACpC,AAAIb,MACAL,MAAU,KAAA,KAAW9B,EAAc8C,CAAI,GAC3CG,KAAgBH,CAAI;CACrB;CACA,SAASI,EAAO,GAA2B;EAC1C,AAAIX,EAAO,YACXS,EACCnB,EAAS,SAASU,EAAO,KAAK,IAC3BV,EAAS,QAAQ,MAASsB,MAASZ,EAAO,KAAK,IAC/C,CAAC,GAAGV,GAAUU,EAAO,KAAK,CAC9B;CACD;CACA,SAASa,IAAa;EACrB,IAAIrB,GAAQ;EACZ,IAAMoB,IAAO,CAAC,GAAGtB,CAAQ,CAAC,CACxB,QAAQ,CAAC,CACT,MAAM,MAAU,CAACQ,EAAQ,MAAM,MAAWE,EAAO,UAAUT,CAAK,CAAC,EAAE,QAAQ;EAC7E,AAAIqB,MAAS,KAAA,KAAWH,EAAYnB,EAAS,QAAQ,MAAUC,MAAUqB,CAAI,CAAC;CAC/E;CAEA,OACC,kBAAC,OAAD;EAAK,WAAWE,EAAGC,GAAiB,mCAAmCC,EAAS;EAAhF,UAAA;GACEC,KAAa3B,EAAS,SAAS,KAC/B,kBAAC,OAAD;IACC,MAAK;IACL,WAAU;IACV,cAAY,GAAG4B,EAAM,IAAId;IAExB,UAAAd,EAAS,KAAK,MAAS;KACvB,IAAMU,IAASF,EAAQ,MAAM,MAAWE,EAAO,UAAUY,CAAI,GACvDO,IAAOnB,GAAQ,SAASY;KAC9B,OACC,kBAAC,QAAD;MAEC,WAAU;MAFX,UAAA,CAIC,kBAAC,QAAD;OAAM,WAAU;OAAuB,UAAAO;MAAW,CAAA,GAClD,kBAAC,UAAD;OACC,MAAK;OACL,UAAUvB,KAAYI,GAAQ;OAC9B,cAAY,GAAGoB,EAAY,GAAGD;OAC9B,WAAU;OACV,eAAeV,EAAYnB,EAAS,QAAQ,MAAUC,MAAUqB,CAAI,CAAC;OAErE,UAAA,kBAACS,IAAD;QAAG,WAAU;QAAsB,eAAY;OAAQ,CAAA;MAChD,CAAA,CACH;KAbA,GAAAT,CAaA;IAER,CAAC;GACG,CAAA;GAEL,CAAChB,KACD0B,KACAhC,EAAS,KAAK,MACb,kBAAC,SAAD;IAAkB,MAAK;IAAe;IAAY;IAAM,OAAOsB;GAAO,GAA1DA,CAA0D,CACtE;GACF,kBAACW,GAAD;IAAS,MAAM7B;IAAU,cAAcY;IAAvC,UAAA,CACC,kBAACkB,GAAD;KAAgB,SAAA;KACf,UAAA,kBAACC,GAAD;MACC,KAAKnD;MACC;MACN,SAAQ;MACE;MACV,cAAY4C;MACZ,oBAAkB,GAAG9B,EAAG;MACxB,WAAU;MACV,YAAY,MAAU;OACrB,AAAIH,EAAM,YAAY,iBAClBA,EAAM,QAAQ,eAAeA,EAAM,QAAQ,eAC9CA,EAAM,eAAe,GACrBqB,EAAW,EAAI,IAEZrB,EAAM,QAAQ,gBACjBA,EAAM,eAAe,GACrB4B,EAAW;MAEb;MAlBD,UAAA,CAoBC,kBAAC,QAAD;OAAM,WAAU;OAAY,UAAAvB,EAAS,SAASc,IAAYsB;MAAkB,CAAA,GAC5E,kBAACC,IAAD,EAAa,eAAY,OAAQ,CAAA,CAC1B;;IACO,CAAA,GAChB,kBAACC,IAAD;KACC,OAAM;KACN,WAAU;KACV,cAAYV;KACZ,kBAAkB,MAAU;MAE3B,AADAjC,EAAM,eAAe,GACrBb,EAAM,SAAS,MAAM;KACtB;KAPD,UAAA;MASC,kBAACyD,GAAD;OACC,KAAKzD;OACL,MAAK;OACL,cAAY,GAAG8C,EAAM;OACrB,iBAAexB;OACf,qBAAkB;OAClB,iBAAe,GAAGN,EAAG;OACrB,yBACC,CAAC0C,KAAW3B,KAAe,IAAI,GAAGf,EAAG,UAAUe,MAAgB,KAAA;OAEhE,aAAa4B;OACb,OAAOvC;OACP,WAAW,MAAU;QAGpB,AAFIC,MAAU,KAAA,KAAW5B,EAAcoB,EAAM,OAAO,KAAK,GACzD+C,KAAgB/C,EAAM,OAAO,KAAK,GAClCd,EAAU,IAAI;OACf;OACA,YAAY,MAAU;QACrB,IAAI,GAAM,YAAY,aACtB;aAAIc,EAAM,QAAQ,eAAeA,EAAM,QAAQ,WAE9C;cADAA,EAAM,eAAe,GACjB,CAAC6C,KAAW7B,EAAQ,QAAQ;WAC/B,IAAMgC,IAAQhC,EAAQ,WAAW,MAAWD,EAAO,UAAUE,CAAW,GAClEK,IACLN,GACEgC,KAAShD,EAAM,QAAQ,cAAc,IAAI,MAAMgB,EAAQ,UACvDA,EAAQ;WAGX,AADA9B,EAAUoC,EAAK,KAAK,GACpBhC,EAAK,SACF,cAA2B,uBAAuBsB,EAAQ,QAAQU,CAAI,EAAE,GAAG,CAAC,EAC5E,eAAe,EAAE,OAAO,UAAU,CAAC;UACvC;gBACM,IAAItB,EAAM,QAAQ,SAAS;UACjC,EAAM,eAAe;UACrB,IAAMe,IAASC,EAAQ,MAAM,MAAWD,EAAO,UAAUE,CAAW;UACpE,AAAI,CAAC4B,KAAW9B,KAAQW,EAAOX,CAAM;SACtC,OAAO,AAAIf,EAAM,QAAQ,eAAe,CAACO,MACxCP,EAAM,eAAe,GACrB4B,EAAW;QACZ;OACD;MACA,CAAA;MACD,kBAAC,OAAD;OACC,KAAKrC;OACL,IAAI,GAAGY,EAAG;OACV,MAAK;OACL,cAAY8B;OACZ,wBAAqB;OACrB,aAAWY;OACX,WAAU;OAET,UAAA,CAACA,KACDjC,EAAQ,KAAK,GAAQ,MACpB,kBAAC,UAAD;QACC,MAAK;QACL,MAAK;QACL,0BAAuB;QACvB,qBAAmBK,MAAgBF,EAAO;QAC1C,IAAI,GAAGZ,EAAG,UAAU6C;QACpB,qBAAmBA;QAEnB,UAAU;QACV,iBAAe3C,EAAS,SAASU,EAAO,KAAK;QAC7C,uBAAqBV,EAAS,SAASU,EAAO,KAAK;QACnD,iBAAeA,EAAO,YAAY,KAAA;QAClC,UAAUA,EAAO;QACjB,WAAWc,EACV,qJACD;QACA,gBAAgB,MAAU;SACzB,IAAMoB,IAAWxD,EAAQ;SACzB,CAAIwD,GAAU,MAAMjD,EAAM,WAAWiD,EAAS,MAAMjD,EAAM,aAC1D,EAAQ,UAAU;UAAE,GAAGA,EAAM;UAAS,GAAGA,EAAM;SAAQ,GAClDe,EAAO,YAAU7B,EAAU6B,EAAO,KAAK;QAC7C;QACA,cAAc,MAAUf,EAAM,eAAe;QAC7C,eAAe;SAEd,AADA0B,EAAOX,CAAM,GACb5B,EAAM,SAAS,MAAM;QACtB;QA1BD,UAAA;SA4BE4B,EAAO;SACR,kBAAC,QAAD;UAAM,WAAU;UAAhB,UAAA,CACC,kBAAC,QAAD;WAAM,WAAU;WAAqB,UAAAA,EAAO;UAAY,CAAA,GACvDA,EAAO,eACP,kBAAC,QAAD;WAAM,WAAU;WACd,UAAAA,EAAO;UACH,CAAA,CAEF;;SACLV,EAAS,SAASU,EAAO,KAAK,KAC9B,kBAACmC,IAAD;UAAO,WAAU;UAA+B,eAAY;SAAQ,CAAA;QAE9D;OAjCF,GAAAnC,EAAO,KAiCL,CACR;MACE,CAAA;OACH8B,KAAWjC,EAAQ,WAAW,MAC/B,kBAAC,KAAD;OACC,MAAK;OACL,WAAU;OAET,UAAAiC,IAAUM,IAAeC;MACxB,CAAA;KAEW;IACR,CAAA,CAAA;;GACT,kBAAC,QAAD;IAAM,IAAI,GAAGjD,EAAG;IAAS,WAAU;IAAU,aAAU;IACrD,UAAAgB;GACI,CAAA;EACF;;AAEP"}

package/dist/components/overlay.d.ts

@@ -6,11 +6,8 @@ export declare const MENU_GAP = 8;
 export declare const OVERLAY_LAYER = "z-50";
 /** Kill CSS animation and transition when the user prefers reduced motion. */
 export declare const OVERLAY_MOTION = "motion-reduce:animate-none motion-reduce:transition-none";
-/** Recolor the existing 1px border. No extra ring, no layout shift. */
-export declare const FOCUS_BORDER = "outline-hidden focus-visible:border-basalt-ring";
-/** Inset 1px theme ring for borderless controls. Outer size stays put. */
-export declare const FOCUS_INSET = "outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring";
-/** Offset ring stays visible on primary fills (ring token equals primary). */
-export declare const FOCUS_RING = "outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background";
+export declare const FOCUS_RING = "basalt-focus";
+export declare const FOCUS_BORDER = "basalt-focus";
+export declare const FOCUS_INSET = "basalt-focus basalt-focus-inset";
 export declare function overlayPanelClass(className?: string): string;
 export declare function overlayItemClass(className?: string): string;

package/dist/components/overlay.js

@@ -2,14 +2,14 @@
 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 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";
+var n = 4, r = 8, i = "z-50", a = "motion-reduce:animate-none motion-reduce:transition-none", o = "basalt-focus", s = o, c = "basalt-focus basalt-focus-inset";
 function l(n) {
 	return e(t, i, "basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-basalt-menu-inset text-basalt-base text-basalt-popover-foreground shadow-md", a, n);
 }
 function u(t) {
-	return e("mx-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row outline-hidden select-none", t);
+	return e("mx-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row select-none", c, t);
 }
 //#endregion
-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 };
+export { s as FOCUS_BORDER, c as FOCUS_INSET, o 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":["OVERLAY_GAP","MENU_GAP","OVERLAY_LAYER","OVERLAY_MOTION","FOCUS_BORDER","FOCUS_INSET","FOCUS_RING","overlayPanelClass","cn","BASALT_UI_CLASS","className","overlayItemClass"],"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\"basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-basalt-menu-inset text-basalt-base 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-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row outline-hidden select-none\",\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;;AAIA,IAAaA,IAAc,GAEdC,IAAW,GAEXC,IAAgB,QAEhBC,IAAiB,4DAGjBC,IAAe,mDAEfC,IACZ,+FAEYC,IACZ;AAED,SAAgBC,EAAkB,GAAoB;CACrD,OAAOC,EACNC,GACAP,GACA,kLACAC,GACAO,CACD;AACD;AAEA,SAAgBC,EAAiB,GAAoB;CACpD,OAAOH,EACN,+QACAE,CACD;AACD"}
+{"version":3,"file":"overlay.js","names":["OVERLAY_GAP","MENU_GAP","OVERLAY_LAYER","OVERLAY_MOTION","FOCUS_RING","FOCUS_BORDER","FOCUS_INSET","overlayPanelClass","cn","BASALT_UI_CLASS","className","overlayItemClass"],"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\nexport const FOCUS_RING = \"basalt-focus\";\nexport const FOCUS_BORDER = FOCUS_RING;\nexport const FOCUS_INSET = \"basalt-focus basalt-focus-inset\";\n\nexport function overlayPanelClass(className?: string) {\n\treturn cn(\n\t\tBASALT_UI_CLASS,\n\t\tOVERLAY_LAYER,\n\t\t\"basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-basalt-menu-inset text-basalt-base 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-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row select-none\",\n\t\tFOCUS_INSET,\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;;AAIA,IAAaA,IAAc,GAEdC,IAAW,GAEXC,IAAgB,QAEhBC,IAAiB,4DAEjBC,IAAa,gBACbC,IAAeD,GACfE,IAAc;AAE3B,SAAgBC,EAAkB,GAAoB;CACrD,OAAOC,EACNC,GACAP,GACA,kLACAC,GACAO,CACD;AACD;AAEA,SAAgBC,EAAiB,GAAoB;CACpD,OAAOH,EACN,gQACAF,GACAI,CACD;AACD"}

package/dist/components/responsive-master-detail.js

@@ -43,7 +43,7 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			tabIndex: -1,
 			hidden: x && p,
 			inert: x && p,
-			className: e("min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border", p && "hidden md:block"),
+			className: e("basalt-focus basalt-focus-inset min-h-0 min-w-0 md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border", p && "hidden md:block"),
 			onFocusCapture: (e) => {
 				e.target !== e.currentTarget && (T.current = e.target);
 			},
@@ -58,7 +58,7 @@ function u({ label: u, list: d, children: f, detailOpen: p, onDetailOpenChange:
 			tabIndex: -1,
 			hidden: x && !p,
 			inert: x && !p,
-			className: e("min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain", !p && "hidden md:block"),
+			className: e("basalt-focus basalt-focus-inset min-h-0 min-w-0 bg-basalt-background md:overflow-y-auto md:overscroll-y-contain", !p && "hidden md:block"),
 			children: [
 				x && p && /* @__PURE__ */ c("div", {
 					className: "border-b border-basalt-border p-basalt-space-lg",

package/dist/components/responsive-master-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-master-detail.js","names":["ResponsiveMasterDetail","compact","setCompact","useState","listRegion","useRef","detailRegion","opener","previous","useEffect","query","update","useLayoutEffect","before","detailOpen","selectedId","target","label","cn","BASALT_UI_CLASS","className","listLabel","event","list","detailLabel","Button","onDetailOpenChange","ArrowLeft","backLabel","empty"],"sources":["../../src/components/responsive-master-detail.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ResponsiveMasterDetailProps {\n\t/** Accessible name of the composition. */\n\tlabel: string;\n\t/** Application-rendered list; selection, routing and data remain outside. */\n\tlist: ReactNode;\n\t/** Application-rendered detail content. */\n\tchildren: ReactNode;\n\t/** Controlled detail visibility. */\n\tdetailOpen: boolean;\n\t/** Requests opening/closing the detail; the caller accepts the change. */\n\tonDetailOpenChange: (open: boolean) => void;\n\t/** Current selection identity, used to focus newly selected mobile details. */\n\tselectedId?: string | null;\n\t/** List region name. @default \"Items\" */\n\tlistLabel?: string;\n\t/** Detail region name. @default \"Details\" */\n\tdetailLabel?: string;\n\t/** Mobile return action text. @default \"Back to items\" */\n\tbackLabel?: string;\n\t/** Desktop detail placeholder while no item is open. */\n\tempty?: ReactNode;\n\t/** Additional root classes; provide application-specific height/scrolling here. */\n\tclassName?: string;\n}\n/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */\nexport function ResponsiveMasterDetail({\n\tlabel,\n\tlist,\n\tchildren,\n\tdetailOpen,\n\tonDetailOpenChange,\n\tselectedId,\n\tlistLabel = \"Items\",\n\tdetailLabel = \"Details\",\n\tbackLabel = \"Back to items\",\n\tempty = (\n\t\t<p className=\"p-basalt-layout text-basalt-base text-basalt-muted-foreground\">\n\t\t\tChoose an item to see its details.\n\t\t</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-h-0 min-w-0 grid-cols-1 rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)] md:overflow-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<section\n\t\t\t\tref={listRegion}\n\t\t\t\taria-label={listLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && detailOpen}\n\t\t\t\tinert={compact && detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-0 min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\tif (event.target !== event.currentTarget) opener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-0 min-w-0 bg-basalt-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-ring md:overflow-y-auto md:overscroll-y-contain\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-basalt-space-lg\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"min-h-basalt-touch\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => onDetailOpenChange(false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAAgE,UAAA;AAE1E,CAAA,GAEJ,gBAC+B;CAC/B,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAaC,EAAoB,IAAI,GACrCC,IAAeD,EAAoB,IAAI,GACvCE,IAASF,EAA2B,IAAI,GACxCG,IAAWH,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBAI,QAAgB;EACf,IAAMC,IAAQ,OAAO,WAAW,oBAAoB,GAC9CC,UAAeT,EAAWQ,EAAM,OAAO;EAG7C,OAFAC,EAAO,GACPD,EAAM,iBAAiB,UAAUC,CAAM,SAC1BD,EAAM,oBAAoB,UAAUC,CAAM;CACxD,GAAG,CAAC,CAAC,GACLC,QAAsB;EACrB,IAAMC,IAASL,EAAS;EAOxB,IALCP,KACAa,MACC,CAACD,EAAO,WAAW,CAACA,EAAO,cAAcA,EAAO,eAAeE,MAEhET,EAAa,SAAS,MAAM,GACzBL,KAAW,CAACa,KAAcD,EAAO,YAAY;GAChD,IAAMG,IAAST,EAAO;GACtB,AAAIS,GAAQ,eAAe,CAACA,EAAO,QAAQ,mBAAmB,IAAGA,EAAO,MAAM,IACzEZ,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAACH;EAASa;EAAYC;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYE;EACZ,WAAWC,EACVC,GACA,sJACAC,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAKhB;GACL,cAAYiB;GACZ,UAAU;GACV,QAAQpB,KAAWa;GACnB,OAAOb,KAAWa;GAClB,WAAWI,EACV,4LACAJ,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,AAAIQ,EAAM,WAAWA,EAAM,kBAAe,EAAO,UAAUA,EAAM;GAClE;GACA,uBAAuB,MAAU;IAChC,IAAMN,IAAUM,EAAM,OAAmB,QACxC,oCACD;IACA,AAAIN,MAAQ,EAAO,UAAUA;GAC9B;GAEC,UAAAO;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAKjB;GACL,cAAYkB;GACZ,UAAU;GACV,QAAQvB,KAAW,CAACa;GACpB,OAAOb,KAAW,CAACa;GACnB,WAAWI,EACV,6KACA,CAACJ,KAAc,iBAChB;GATD,UAAA;IAWEb,KAAWa,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAACW,GAAD;MACC,WAAU;MACV,SAAQ;MACR,eAAeC,EAAmB,EAAK;MAHxC,UAAA,CAKC,kBAACC,GAAD,CAAY,CAAA,GACXC,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAACd;KAAY,OAAO,CAACA;KAChC;IACG,CAAA;IACJ,CAACA,KAAce;GACR;EACL,CAAA,CAAA;;AAEP"}
+{"version":3,"file":"responsive-master-detail.js","names":["ResponsiveMasterDetail","compact","setCompact","useState","listRegion","useRef","detailRegion","opener","previous","useEffect","query","update","useLayoutEffect","before","detailOpen","selectedId","target","label","cn","BASALT_UI_CLASS","className","listLabel","event","list","detailLabel","Button","onDetailOpenChange","ArrowLeft","backLabel","empty"],"sources":["../../src/components/responsive-master-detail.tsx"],"sourcesContent":["import { ArrowLeft } from \"lucide-react\";\nimport { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\n\nexport interface ResponsiveMasterDetailProps {\n\t/** Accessible name of the composition. */\n\tlabel: string;\n\t/** Application-rendered list; selection, routing and data remain outside. */\n\tlist: ReactNode;\n\t/** Application-rendered detail content. */\n\tchildren: ReactNode;\n\t/** Controlled detail visibility. */\n\tdetailOpen: boolean;\n\t/** Requests opening/closing the detail; the caller accepts the change. */\n\tonDetailOpenChange: (open: boolean) => void;\n\t/** Current selection identity, used to focus newly selected mobile details. */\n\tselectedId?: string | null;\n\t/** List region name. @default \"Items\" */\n\tlistLabel?: string;\n\t/** Detail region name. @default \"Details\" */\n\tdetailLabel?: string;\n\t/** Mobile return action text. @default \"Back to items\" */\n\tbackLabel?: string;\n\t/** Desktop detail placeholder while no item is open. */\n\tempty?: ReactNode;\n\t/** Additional root classes; provide application-specific height/scrolling here. */\n\tclassName?: string;\n}\n/** Two columns at 768px and above; one visible, focusable pane below it. Not a modal. */\nexport function ResponsiveMasterDetail({\n\tlabel,\n\tlist,\n\tchildren,\n\tdetailOpen,\n\tonDetailOpenChange,\n\tselectedId,\n\tlistLabel = \"Items\",\n\tdetailLabel = \"Details\",\n\tbackLabel = \"Back to items\",\n\tempty = (\n\t\t<p className=\"p-basalt-layout text-basalt-base text-basalt-muted-foreground\">\n\t\t\tChoose an item to see its details.\n\t\t</p>\n\t),\n\tclassName,\n}: ResponsiveMasterDetailProps) {\n\tconst [compact, setCompact] = useState(false);\n\tconst listRegion = useRef<HTMLElement>(null);\n\tconst detailRegion = useRef<HTMLElement>(null);\n\tconst opener = useRef<HTMLElement | null>(null);\n\tconst previous = useRef({ compact: false, detailOpen: false, selectedId });\n\tuseEffect(() => {\n\t\tconst query = window.matchMedia(\"(max-width: 767px)\");\n\t\tconst update = () => setCompact(query.matches);\n\t\tupdate();\n\t\tquery.addEventListener(\"change\", update);\n\t\treturn () => query.removeEventListener(\"change\", update);\n\t}, []);\n\tuseLayoutEffect(() => {\n\t\tconst before = previous.current;\n\t\tif (\n\t\t\tcompact &&\n\t\t\tdetailOpen &&\n\t\t\t(!before.compact || !before.detailOpen || before.selectedId !== selectedId)\n\t\t)\n\t\t\tdetailRegion.current?.focus();\n\t\tif (compact && !detailOpen && before.detailOpen) {\n\t\t\tconst target = opener.current;\n\t\t\tif (target?.isConnected && !target.closest(\"[hidden], [inert]\")) target.focus();\n\t\t\telse listRegion.current?.focus();\n\t\t}\n\t\tprevious.current = { compact, detailOpen, selectedId };\n\t}, [compact, detailOpen, selectedId]);\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"grid min-h-0 min-w-0 grid-cols-1 rounded-basalt-lg border border-basalt-border md:grid-cols-[minmax(12rem,20rem)_minmax(0,1fr)] md:overflow-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<section\n\t\t\t\tref={listRegion}\n\t\t\t\taria-label={listLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && detailOpen}\n\t\t\t\tinert={compact && detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"basalt-focus basalt-focus-inset min-h-0 min-w-0 md:overflow-y-auto md:overscroll-y-contain md:border-r md:border-basalt-border\",\n\t\t\t\t\tdetailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\tif (event.target !== event.currentTarget) opener.current = event.target;\n\t\t\t\t}}\n\t\t\t\tonPointerDownCapture={(event) => {\n\t\t\t\t\tconst target = (event.target as Element).closest<HTMLElement>(\n\t\t\t\t\t\t\"button, a[href], input, [tabindex]\",\n\t\t\t\t\t);\n\t\t\t\t\tif (target) opener.current = target;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{list}\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tref={detailRegion}\n\t\t\t\taria-label={detailLabel}\n\t\t\t\ttabIndex={-1}\n\t\t\t\thidden={compact && !detailOpen}\n\t\t\t\tinert={compact && !detailOpen}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"basalt-focus basalt-focus-inset min-h-0 min-w-0 bg-basalt-background md:overflow-y-auto md:overscroll-y-contain\",\n\t\t\t\t\t!detailOpen && \"hidden md:block\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{compact && detailOpen && (\n\t\t\t\t\t<div className=\"border-b border-basalt-border p-basalt-space-lg\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"min-h-basalt-touch\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={() => onDetailOpenChange(false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowLeft />\n\t\t\t\t\t\t\t{backLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div hidden={!detailOpen} inert={!detailOpen}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!detailOpen && empty}\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,EAAuB,EACtC,UACA,SACA,aACA,eACA,uBACA,eACA,eAAY,SACZ,iBAAc,WACd,eAAY,iBACZ,WACC,kBAAC,KAAD;CAAG,WAAU;CAAgE,UAAA;AAE1E,CAAA,GAEJ,gBAC+B;CAC/B,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAaC,EAAoB,IAAI,GACrCC,IAAeD,EAAoB,IAAI,GACvCE,IAASF,EAA2B,IAAI,GACxCG,IAAWH,EAAO;EAAE,SAAS;EAAO,YAAY;EAAO;CAAW,CAAC;CAuBzE,OAtBAI,QAAgB;EACf,IAAMC,IAAQ,OAAO,WAAW,oBAAoB,GAC9CC,UAAeT,EAAWQ,EAAM,OAAO;EAG7C,OAFAC,EAAO,GACPD,EAAM,iBAAiB,UAAUC,CAAM,SAC1BD,EAAM,oBAAoB,UAAUC,CAAM;CACxD,GAAG,CAAC,CAAC,GACLC,QAAsB;EACrB,IAAMC,IAASL,EAAS;EAOxB,IALCP,KACAa,MACC,CAACD,EAAO,WAAW,CAACA,EAAO,cAAcA,EAAO,eAAeE,MAEhET,EAAa,SAAS,MAAM,GACzBL,KAAW,CAACa,KAAcD,EAAO,YAAY;GAChD,IAAMG,IAAST,EAAO;GACtB,AAAIS,GAAQ,eAAe,CAACA,EAAO,QAAQ,mBAAmB,IAAGA,EAAO,MAAM,IACzEZ,EAAW,SAAS,MAAM;EAChC;EACA,EAAS,UAAU;GAAE;GAAS;GAAY;EAAW;CACtD,GAAG;EAACH;EAASa;EAAYC;CAAU,CAAC,GAEnC,kBAAC,OAAD;EACC,MAAK;EACL,cAAYE;EACZ,WAAWC,EACVC,GACA,sJACAC,CACD;EAPD,UAAA,CASC,kBAAC,WAAD;GACC,KAAKhB;GACL,cAAYiB;GACZ,UAAU;GACV,QAAQpB,KAAWa;GACnB,OAAOb,KAAWa;GAClB,WAAWI,EACV,kIACAJ,KAAc,iBACf;GACA,iBAAiB,MAAU;IAC1B,AAAIQ,EAAM,WAAWA,EAAM,kBAAe,EAAO,UAAUA,EAAM;GAClE;GACA,uBAAuB,MAAU;IAChC,IAAMN,IAAUM,EAAM,OAAmB,QACxC,oCACD;IACA,AAAIN,MAAQ,EAAO,UAAUA;GAC9B;GAEC,UAAAO;EACO,CAAA,GACT,kBAAC,WAAD;GACC,KAAKjB;GACL,cAAYkB;GACZ,UAAU;GACV,QAAQvB,KAAW,CAACa;GACpB,OAAOb,KAAW,CAACa;GACnB,WAAWI,EACV,mHACA,CAACJ,KAAc,iBAChB;GATD,UAAA;IAWEb,KAAWa,KACX,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAACW,GAAD;MACC,WAAU;MACV,SAAQ;MACR,eAAeC,EAAmB,EAAK;MAHxC,UAAA,CAKC,kBAACC,GAAD,CAAY,CAAA,GACXC,CACM;;IACJ,CAAA;IAEN,kBAAC,OAAD;KAAK,QAAQ,CAACd;KAAY,OAAO,CAACA;KAChC;IACG,CAAA;IACJ,CAACA,KAAce;GACR;EACL,CAAA,CAAA;;AAEP"}

package/dist/components/scroll-area.js

@@ -33,7 +33,7 @@ var s = t.forwardRef(({ "aria-describedby": t, "aria-label": a, "aria-labelledby
 				role: y,
 				tabIndex: p,
 				onScroll: u,
-				className: e("size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background", d === "vertical" && "overflow-x-hidden!", d === "horizontal" && "overflow-y-hidden!", m),
+				className: e("basalt-focus basalt-focus-inset size-full rounded-[inherit]", d === "vertical" && "overflow-x-hidden!", d === "horizontal" && "overflow-y-hidden!", m),
 				children: c
 			}),
 			_ ? /* @__PURE__ */ n(o, { orientation: "vertical" }) : null,

package/dist/components/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":["React","ScrollAreaPrimitive","SCROLLBAR_CLASSES","ScrollBar","cn","orientation","ScrollArea","ariaDescribedBy","ariaLabel","ariaLabelledBy","props","hasVertical","hasHorizontal","viewportRole","role","className","viewportClassName"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype RootProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"asChild\"\n\t| \"children\"\n\t| \"className\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\ntype ViewportProps = Pick<\n\tReact.ComponentPropsWithoutRef<\"div\">,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"children\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\nexport interface ScrollAreaProps extends RootProps, ViewportProps {\n\t/** Classes applied to the non-scrolling root. */\n\tclassName?: string;\n\t/** Axes that may scroll. @default \"vertical\" */\n\torientation?: ScrollAreaOrientation;\n\t/** Classes applied to the actual scrolling viewport. */\n\tviewportClassName?: string;\n}\n\nconst SCROLLBAR_CLASSES =\n\t\"flex touch-none select-none p-px transition-colors basalt-motion motion-reduce:transition-none\";\n\nfunction ScrollBar({ orientation }: { orientation: \"horizontal\" | \"vertical\" }) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\tSCROLLBAR_CLASSES,\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"h-full w-basalt-2_5 border-l border-l-transparent\"\n\t\t\t\t\t: \"h-basalt-2_5 flex-col border-t border-t-transparent\",\n\t\t\t)}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb\n\t\t\t\tdata-slot=\"scroll-area-thumb\"\n\t\t\t\tclassName=\"relative flex-1 rounded-basalt-full bg-basalt-border\"\n\t\t\t/>\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t);\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n\t(\n\t\t{\n\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonScroll,\n\t\t\torientation = \"vertical\",\n\t\t\trole,\n\t\t\ttabIndex = 0,\n\t\t\tviewportClassName,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasVertical = orientation !== \"horizontal\";\n\t\tconst hasHorizontal = orientation !== \"vertical\";\n\t\tconst viewportRole = role ?? (ariaLabel || ariaLabelledBy ? \"region\" : undefined);\n\n\t\treturn (\n\t\t\t<ScrollAreaPrimitive.Root\n\t\t\t\tdata-slot=\"scroll-area\"\n\t\t\t\tclassName={cn(\"relative min-h-0 min-w-0 overflow-hidden\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-orientation={orientation}\n\t\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\trole={viewportRole}\n\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"size-full rounded-[inherit] outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAME,IACL;AAED,SAASC,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAACF,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAWG,EACVF,GACAG,MAAgB,aACb,sDACA,qDACJ;EAEA,UAAA,kBAACJ,EAAoB,OAArB;GACC,aAAU;GACV,WAAU;EACV,CAAA;CAC6B,CAAA;AAEjC;AAEA,IAAaK,IAAaN,EAAM,YAE9B,EACC,oBAAoBO,GACpB,cAAcC,GACd,mBAAmBC,GACnB,aACA,cACA,aACA,iBAAc,YACd,SACA,cAAW,GACX,sBACA,GAAGC,KAEJ,MACI;CACJ,IAAMC,IAAcN,MAAgB,cAC9BO,IAAgBP,MAAgB,YAChCQ,IAAeC,MAASN,KAAaC,IAAiB,WAAW,KAAA;CAEvE,OACC,kBAACR,EAAoB,MAArB;EACC,aAAU;EACV,WAAWG,EAAG,4CAA4CW,CAAS;EACnE,GAAIL;EAHL,UAAA;GAKC,kBAACT,EAAoB,UAArB;IACM;IACL,oBAAkBI;IAClB,aAAU;IACV,oBAAkBE;IAClB,cAAYC;IACZ,mBAAiBC;IACjB,MAAMI;IACI;IACA;IACV,WAAWT,EACV,0KACAC,MAAgB,cAAc,sBAC9BA,MAAgB,gBAAgB,sBAChCW,CACD;IAEC;GAC4B,CAAA;GAC7BL,IAAc,kBAACR,GAAD,EAAW,aAAY,WAAY,CAAA,IAAI;GACrDS,IAAgB,kBAACT,GAAD,EAAW,aAAY,aAAc,CAAA,IAAI;GACzDQ,KAAeC,IACf,kBAACX,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA,IACzD;EACqB;;AAE5B,CACD;AACA,EAAW,cAAc"}
+{"version":3,"file":"scroll-area.js","names":["React","ScrollAreaPrimitive","SCROLLBAR_CLASSES","ScrollBar","cn","orientation","ScrollArea","ariaDescribedBy","ariaLabel","ariaLabelledBy","props","hasVertical","hasHorizontal","viewportRole","role","className","viewportClassName"],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\ntype RootProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"asChild\"\n\t| \"children\"\n\t| \"className\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\ntype ViewportProps = Pick<\n\tReact.ComponentPropsWithoutRef<\"div\">,\n\t| \"aria-describedby\"\n\t| \"aria-label\"\n\t| \"aria-labelledby\"\n\t| \"children\"\n\t| \"onScroll\"\n\t| \"role\"\n\t| \"tabIndex\"\n>;\n\nexport interface ScrollAreaProps extends RootProps, ViewportProps {\n\t/** Classes applied to the non-scrolling root. */\n\tclassName?: string;\n\t/** Axes that may scroll. @default \"vertical\" */\n\torientation?: ScrollAreaOrientation;\n\t/** Classes applied to the actual scrolling viewport. */\n\tviewportClassName?: string;\n}\n\nconst SCROLLBAR_CLASSES =\n\t\"flex touch-none select-none p-px transition-colors basalt-motion motion-reduce:transition-none\";\n\nfunction ScrollBar({ orientation }: { orientation: \"horizontal\" | \"vertical\" }) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\tSCROLLBAR_CLASSES,\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"h-full w-basalt-2_5 border-l border-l-transparent\"\n\t\t\t\t\t: \"h-basalt-2_5 flex-col border-t border-t-transparent\",\n\t\t\t)}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb\n\t\t\t\tdata-slot=\"scroll-area-thumb\"\n\t\t\t\tclassName=\"relative flex-1 rounded-basalt-full bg-basalt-border\"\n\t\t\t/>\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t);\n}\n\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n\t(\n\t\t{\n\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonScroll,\n\t\t\torientation = \"vertical\",\n\t\t\trole,\n\t\t\ttabIndex = 0,\n\t\t\tviewportClassName,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasVertical = orientation !== \"horizontal\";\n\t\tconst hasHorizontal = orientation !== \"vertical\";\n\t\tconst viewportRole = role ?? (ariaLabel || ariaLabelledBy ? \"region\" : undefined);\n\n\t\treturn (\n\t\t\t<ScrollAreaPrimitive.Root\n\t\t\t\tdata-slot=\"scroll-area\"\n\t\t\t\tclassName={cn(\"relative min-h-0 min-w-0 overflow-hidden\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-orientation={orientation}\n\t\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\trole={viewportRole}\n\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"basalt-focus basalt-focus-inset size-full rounded-[inherit]\",\n\t\t\t\t\t\torientation === \"vertical\" && \"overflow-x-hidden!\",\n\t\t\t\t\t\torientation === \"horizontal\" && \"overflow-y-hidden!\",\n\t\t\t\t\t\tviewportClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t\t{hasVertical ? <ScrollBar orientation=\"vertical\" /> : null}\n\t\t\t\t{hasHorizontal ? <ScrollBar orientation=\"horizontal\" /> : null}\n\t\t\t\t{hasVertical && hasHorizontal ? (\n\t\t\t\t\t<ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n\t\t\t\t) : null}\n\t\t\t</ScrollAreaPrimitive.Root>\n\t\t);\n\t},\n);\nScrollArea.displayName = \"ScrollArea\";\n"],"mappings":";;;;;;AAuCA,IAAME,IACL;AAED,SAASC,EAAU,EAAE,kBAA2D;CAC/E,OACC,kBAACF,EAAoB,WAArB;EACC,aAAU;EACG;EACb,WAAWG,EACVF,GACAG,MAAgB,aACb,sDACA,qDACJ;EAEA,UAAA,kBAACJ,EAAoB,OAArB;GACC,aAAU;GACV,WAAU;EACV,CAAA;CAC6B,CAAA;AAEjC;AAEA,IAAaK,IAAaN,EAAM,YAE9B,EACC,oBAAoBO,GACpB,cAAcC,GACd,mBAAmBC,GACnB,aACA,cACA,aACA,iBAAc,YACd,SACA,cAAW,GACX,sBACA,GAAGC,KAEJ,MACI;CACJ,IAAMC,IAAcN,MAAgB,cAC9BO,IAAgBP,MAAgB,YAChCQ,IAAeC,MAASN,KAAaC,IAAiB,WAAW,KAAA;CAEvE,OACC,kBAACR,EAAoB,MAArB;EACC,aAAU;EACV,WAAWG,EAAG,4CAA4CW,CAAS;EACnE,GAAIL;EAHL,UAAA;GAKC,kBAACT,EAAoB,UAArB;IACM;IACL,oBAAkBI;IAClB,aAAU;IACV,oBAAkBE;IAClB,cAAYC;IACZ,mBAAiBC;IACjB,MAAMI;IACI;IACA;IACV,WAAWT,EACV,+DACAC,MAAgB,cAAc,sBAC9BA,MAAgB,gBAAgB,sBAChCW,CACD;IAEC;GAC4B,CAAA;GAC7BL,IAAc,kBAACR,GAAD,EAAW,aAAY,WAAY,CAAA,IAAI;GACrDS,IAAgB,kBAACT,GAAD,EAAW,aAAY,aAAc,CAAA,IAAI;GACzDQ,KAAeC,IACf,kBAACX,EAAoB,QAArB,EAA4B,aAAU,qBAAsB,CAAA,IACzD;EACqB;;AAE5B,CACD;AACA,EAAW,cAAc"}

package/dist/components/segment-control.js

@@ -20,7 +20,7 @@ var o = r.forwardRef(({ allOption: o, className: s, disabled: c = !1, legend: l,
 			children: l
 		}), /* @__PURE__ */ i("div", {
 			"data-slot": "segment-control-viewport",
-			className: "max-w-full overflow-x-auto pb-basalt-space-sm",
+			className: "max-w-full scroll-p-basalt-space-sm overflow-x-auto p-basalt-space-sm",
 			children: /* @__PURE__ */ i(t, {
 				type: "single",
 				value: f,

package/dist/components/segment-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment-control.js","names":["React","SegmentControl","props","legendId","items","allOption","options","cn","className","legend","ToggleGroup","nextValue","onValueChange","ToggleGroupItem","item"],"sources":["../../src/components/segment-control.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface SegmentControlOption {\n\t/** The value selected when this segment is activated. */\n\tvalue: string;\n\t/** The visible label for the segment. */\n\tlabel: React.ReactNode;\n\t/** Disable only this segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlAllOption {\n\t/** The value representing the unfiltered selection. */\n\tvalue: string;\n\t/** The visible label for the leading segment. */\n\tlabel?: React.ReactNode;\n\t/** Disable only the leading segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlProps\n\textends Omit<React.HTMLAttributes<HTMLFieldSetElement>, \"children\" | \"onChange\"> {\n\t/** The currently selected value. */\n\tvalue: string;\n\t/** Called when the user selects a different segment. */\n\tonValueChange: (value: string) => void;\n\t/** The visible legend that names the control. */\n\tlegend: React.ReactNode;\n\t/** The selectable segments shown after the optional All segment. */\n\toptions: readonly SegmentControlOption[];\n\t/** Add a leading unfiltered segment, labelled All by default. */\n\tallOption?: SegmentControlAllOption;\n\t/**\n\t * Disable every segment.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}\n\nexport const SegmentControl = React.forwardRef<HTMLFieldSetElement, SegmentControlProps>(\n\t(\n\t\t{ allOption, className, disabled = false, legend, onValueChange, options, value, ...props },\n\t\tref,\n\t) => {\n\t\tconst legendId = React.useId();\n\t\tconst items: readonly SegmentControlOption[] = allOption\n\t\t\t? [{ ...allOption, label: allOption.label ?? \"All\" }, ...options]\n\t\t\t: options;\n\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(\"basalt-ui min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-basalt-space-lg block text-basalt-sm font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"segment-control-viewport\"\n\t\t\t\t\tclassName=\"max-w-full overflow-x-auto pb-basalt-space-sm\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAaC,IAAiBD,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAGE,KACpF,MACI;CACJ,IAAMC,IAAWH,EAAM,MAAM,GACvBI,IAAyCC,IAC5C,CAAC;EAAE,GAAGA;EAAW,OAAOA,EAAU,SAAS;CAAM,GAAG,GAAGC,CAAO,IAC9DA;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIN;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAIC;GACJ,WAAU;GAET,UAAAM;EACM,CAAA,GACR,kBAAC,OAAD;GACC,aAAU;GACV,WAAU;GAEV,UAAA,kBAACC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAIC,KACHC,EAAcD,CAAS;IAEzB;IACA,mBAAiBR;IACjB,WAAU;IAET,UAAAC,EAAM,KAAK,MACX,kBAACS,GAAD;KAAkC,OAAOC,EAAK;KAAO,UAAUA,EAAK;KAClE,UAAAA,EAAK;IACU,GAFKA,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}
+{"version":3,"file":"segment-control.js","names":["React","SegmentControl","props","legendId","items","allOption","options","cn","className","legend","ToggleGroup","nextValue","onValueChange","ToggleGroupItem","item"],"sources":["../../src/components/segment-control.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface SegmentControlOption {\n\t/** The value selected when this segment is activated. */\n\tvalue: string;\n\t/** The visible label for the segment. */\n\tlabel: React.ReactNode;\n\t/** Disable only this segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlAllOption {\n\t/** The value representing the unfiltered selection. */\n\tvalue: string;\n\t/** The visible label for the leading segment. */\n\tlabel?: React.ReactNode;\n\t/** Disable only the leading segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlProps\n\textends Omit<React.HTMLAttributes<HTMLFieldSetElement>, \"children\" | \"onChange\"> {\n\t/** The currently selected value. */\n\tvalue: string;\n\t/** Called when the user selects a different segment. */\n\tonValueChange: (value: string) => void;\n\t/** The visible legend that names the control. */\n\tlegend: React.ReactNode;\n\t/** The selectable segments shown after the optional All segment. */\n\toptions: readonly SegmentControlOption[];\n\t/** Add a leading unfiltered segment, labelled All by default. */\n\tallOption?: SegmentControlAllOption;\n\t/**\n\t * Disable every segment.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}\n\nexport const SegmentControl = React.forwardRef<HTMLFieldSetElement, SegmentControlProps>(\n\t(\n\t\t{ allOption, className, disabled = false, legend, onValueChange, options, value, ...props },\n\t\tref,\n\t) => {\n\t\tconst legendId = React.useId();\n\t\tconst items: readonly SegmentControlOption[] = allOption\n\t\t\t? [{ ...allOption, label: allOption.label ?? \"All\" }, ...options]\n\t\t\t: options;\n\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(\"basalt-ui min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-basalt-space-lg block text-basalt-sm font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"segment-control-viewport\"\n\t\t\t\t\tclassName=\"max-w-full scroll-p-basalt-space-sm overflow-x-auto p-basalt-space-sm\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAaC,IAAiBD,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAGE,KACpF,MACI;CACJ,IAAMC,IAAWH,EAAM,MAAM,GACvBI,IAAyCC,IAC5C,CAAC;EAAE,GAAGA;EAAW,OAAOA,EAAU,SAAS;CAAM,GAAG,GAAGC,CAAO,IAC9DA;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAWC,EAAG,kCAAkCC,CAAS;EACzD,GAAIN;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAIC;GACJ,WAAU;GAET,UAAAM;EACM,CAAA,GACR,kBAAC,OAAD;GACC,aAAU;GACV,WAAU;GAEV,UAAA,kBAACC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAIC,KACHC,EAAcD,CAAS;IAEzB;IACA,mBAAiBR;IACjB,WAAU;IAET,UAAAC,EAAM,KAAK,MACX,kBAACS,GAAD;KAAkC,OAAOC,EAAK;KAAO,UAAUA,EAAK;KAClE,UAAAA,EAAK;IACU,GAFKA,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}

package/dist/components/select.js

@@ -49,7 +49,7 @@ v.displayName = d.Content.displayName;
 var y = o.forwardRef(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ u(d.Item, {
 	"data-basalt-hover-item": "",
 	ref: a,
-	className: r(e("relative outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
+	className: r(e("relative data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
 	...i,
 	children: [/* @__PURE__ */ l(d.ItemText, {
 		className: "min-w-0 flex-1",

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["React","SelectPrimitive","Select","SelectValue","SelectGroup","SELECT_SIZE_CLASS","SelectTrigger","props","disabled","loading","controlSurfaceClass","cn","size","FOCUS_BORDER","className","children","ChevronDown","SelectLabel","SelectContent","highlightRef","useHoverHighlight","overlayPanelClass","position","SelectItem","overlayItemClass","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { FOCUS_BORDER, OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type SelectProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled value of the select.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value of the select.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Select: React.FC<SelectProps> = SelectPrimitive.Root;\n\nexport type SelectValueProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n\t\"placeholder\"\n> & {\n\t/**\n\t * Content shown when no value is selected.\n\t */\n\tplaceholder?: React.ReactNode;\n};\nexport const SelectValue: React.ForwardRefExoticComponent<\n\tSelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>\n> = SelectPrimitive.Value;\n\ntype RadixSelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\nexport type SelectGroupProps = Omit<RadixSelectGroupProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Group forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectGroupProps[\"asChild\"];\n};\nexport const SelectGroup: React.ForwardRefExoticComponent<\n\tSelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>\n> = SelectPrimitive.Group;\n\nexport type SelectSize = \"sm\" | \"default\" | \"lg\";\n\nconst SELECT_SIZE_CLASS: Record<SelectSize, string> = {\n\tsm: \"basalt-action basalt-action-sm\",\n\tdefault: \"basalt-action\",\n\tlg: \"basalt-action basalt-action-lg\",\n};\n\nexport type SelectTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n\t\"disabled\"\n> & {\n\t/**\n\t * The visual size of the trigger.\n\t * @default default\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Disable the trigger and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Disable the trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const SelectTrigger = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(({ className, children, size = \"default\", loading = false, disabled = false, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\t{...props}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t\tclassName={controlSurfaceClass(\n\t\t\tcn(\n\t\t\t\t\"group/select flex w-full items-center justify-between gap-basalt-control-gap\",\n\t\t\t\tSELECT_SIZE_CLASS[size],\n\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t>\n\t\t{children}\n\t\t<ChevronDown\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"h-basalt-4 w-basalt-4 opacity-50 transition-transform basalt-motion duration-basalt-normal group-data-[state=open]/select:rotate-180 motion-reduce:transition-none\"\n\t\t/>\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\ntype RadixSelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\nexport type SelectLabelProps = Omit<RadixSelectLabelProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Label forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectLabelProps[\"asChild\"];\n};\n\nexport const SelectLabel = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Label>,\n\tSelectLabelProps\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"px-basalt-space-lg py-basalt-space-md text-basalt-sm text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n\t\"position\" | \"sideOffset\"\n> & {\n\t/**\n\t * The positioning mode for the select content.\n\t * @default popper\n\t */\n\tposition?: \"item-aligned\" | \"popper\";\n\t/**\n\t * The distance between the trigger and the select content.\n\t * @default 4\n\t */\n\tsideOffset?: number;\n};\n\nexport const SelectContent = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = OVERLAY_GAP, ...props }, ref) => {\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tposition={position}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(\n\t\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectPrimitive.Viewport ref={highlightRef} className=\"basalt-hover-list\">\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t);\n});\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the select item.\n\t */\n\tvalue: string;\n};\n\nexport const SelectItem = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText className=\"min-w-0 flex-1\">{children}</SelectPrimitive.ItemText>\n\t\t<span className=\"inline-flex w-basalt-icon shrink-0 justify-end\">\n\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t<Check className=\"size-basalt-icon\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</span>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;;AAyBA,IAAaE,IAAgCD,EAAgB,MAWhDE,IAETF,EAAgB,OAWPG,IAETH,EAAgB,OAIdI,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBaC,IAAgBN,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAGO,KAAS,MAC1F,kBAACN,EAAgB,SAAjB;CACM;CACL,GAAIM;CACJ,UAAUC,KAAYC;CACtB,aAAWA,KAAW,KAAA;CACtB,WAAWC,EACVC,EACC,gFACAN,EAAkBO,IAClBC,GACA,+FACAC,CACD,CACD;CAbD,UAAA,CAeEC,GACD,kBAACC,GAAD;EACC,eAAY;EACZ,WAAU;CACV,CAAA,CACuB;AACzB,CAAA,CAAA;AACD,EAAc,cAAcf,EAAgB,QAAQ;AAYpD,IAAagB,IAAcjB,EAAM,YAG9B,EAAE,cAAW,GAAGO,KAAS,MAC3B,kBAACN,EAAgB,OAAjB;CACM;CACL,WAAWU,EACV,qFACAG,CACD;CACA,GAAIP;AACJ,CAAA,CACD;AACD,EAAY,cAAcN,EAAgB,MAAM;AAkBhD,IAAaiB,IAAgBlB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAGO,KAAS,MAAQ;CAC5F,IAAMY,IAAeC,EAAkB;CACvC,OACC,kBAACnB,EAAgB,QAAjB,EAAA,UACC,kBAACA,EAAgB,SAAjB;EACM;EACK;EACE;EACZ,WAAWoB,EACVV,EAAGW,MAAa,YAAY,yCAAyCR,CAAS,CAC/E;EACA,GAAIP;EAEJ,UAAA,kBAACN,EAAgB,UAAjB;GAA0B,KAAKkB;GAAc,WAAU;GACrD;EACwB,CAAA;CACF,CAAA,EACF,CAAA;AAE1B,CAAC;AACD,EAAc,cAAclB,EAAgB,QAAQ;AAYpD,IAAasB,IAAavB,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAGO,KAAS,MACrC,kBAACN,EAAgB,MAAjB;CACC,0BAAuB;CAClB;CACL,WAAWuB,EACVb,EACC,+HACAG,CACD,CACD;CACA,GAAIP;CATL,UAAA,CAWC,kBAACN,EAAgB,UAAjB;EAA0B,WAAU;EAAkB;CAAmC,CAAA,GACzF,kBAAC,QAAD;EAAM,WAAU;EACf,UAAA,kBAACA,EAAgB,eAAjB,EAAA,UACC,kBAACwB,GAAD,EAAO,WAAU,mBAAoB,CAAA,EACP,CAAA;CAC1B,CAAA,CACe;AACtB,CAAA,CAAA;AACD,EAAW,cAAcxB,EAAgB,KAAK"}
+{"version":3,"file":"select.js","names":["React","SelectPrimitive","Select","SelectValue","SelectGroup","SELECT_SIZE_CLASS","SelectTrigger","props","disabled","loading","controlSurfaceClass","cn","size","FOCUS_BORDER","className","children","ChevronDown","SelectLabel","SelectContent","highlightRef","useHoverHighlight","overlayPanelClass","position","SelectItem","overlayItemClass","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { FOCUS_BORDER, OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type SelectProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled value of the select.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value of the select.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Select: React.FC<SelectProps> = SelectPrimitive.Root;\n\nexport type SelectValueProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n\t\"placeholder\"\n> & {\n\t/**\n\t * Content shown when no value is selected.\n\t */\n\tplaceholder?: React.ReactNode;\n};\nexport const SelectValue: React.ForwardRefExoticComponent<\n\tSelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>\n> = SelectPrimitive.Value;\n\ntype RadixSelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\nexport type SelectGroupProps = Omit<RadixSelectGroupProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Group forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectGroupProps[\"asChild\"];\n};\nexport const SelectGroup: React.ForwardRefExoticComponent<\n\tSelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>\n> = SelectPrimitive.Group;\n\nexport type SelectSize = \"sm\" | \"default\" | \"lg\";\n\nconst SELECT_SIZE_CLASS: Record<SelectSize, string> = {\n\tsm: \"basalt-action basalt-action-sm\",\n\tdefault: \"basalt-action\",\n\tlg: \"basalt-action basalt-action-lg\",\n};\n\nexport type SelectTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n\t\"disabled\"\n> & {\n\t/**\n\t * The visual size of the trigger.\n\t * @default default\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Disable the trigger and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Disable the trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const SelectTrigger = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(({ className, children, size = \"default\", loading = false, disabled = false, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\t{...props}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t\tclassName={controlSurfaceClass(\n\t\t\tcn(\n\t\t\t\t\"group/select flex w-full items-center justify-between gap-basalt-control-gap\",\n\t\t\t\tSELECT_SIZE_CLASS[size],\n\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t>\n\t\t{children}\n\t\t<ChevronDown\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"h-basalt-4 w-basalt-4 opacity-50 transition-transform basalt-motion duration-basalt-normal group-data-[state=open]/select:rotate-180 motion-reduce:transition-none\"\n\t\t/>\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\ntype RadixSelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\nexport type SelectLabelProps = Omit<RadixSelectLabelProps, \"asChild\"> & {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Label forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixSelectLabelProps[\"asChild\"];\n};\n\nexport const SelectLabel = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Label>,\n\tSelectLabelProps\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"px-basalt-space-lg py-basalt-space-md text-basalt-sm text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n\t\"position\" | \"sideOffset\"\n> & {\n\t/**\n\t * The positioning mode for the select content.\n\t * @default popper\n\t */\n\tposition?: \"item-aligned\" | \"popper\";\n\t/**\n\t * The distance between the trigger and the select content.\n\t * @default 4\n\t */\n\tsideOffset?: number;\n};\n\nexport const SelectContent = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = OVERLAY_GAP, ...props }, ref) => {\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tposition={position}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={overlayPanelClass(\n\t\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectPrimitive.Viewport ref={highlightRef} className=\"basalt-hover-list\">\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t);\n});\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the select item.\n\t */\n\tvalue: string;\n};\n\nexport const SelectItem = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tdata-basalt-hover-item=\"\"\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText className=\"min-w-0 flex-1\">{children}</SelectPrimitive.ItemText>\n\t\t<span className=\"inline-flex w-basalt-icon shrink-0 justify-end\">\n\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t<Check className=\"size-basalt-icon\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</span>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;;AAyBA,IAAaE,IAAgCD,EAAgB,MAWhDE,IAETF,EAAgB,OAWPG,IAETH,EAAgB,OAIdI,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBaC,IAAgBN,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAGO,KAAS,MAC1F,kBAACN,EAAgB,SAAjB;CACM;CACL,GAAIM;CACJ,UAAUC,KAAYC;CACtB,aAAWA,KAAW,KAAA;CACtB,WAAWC,EACVC,EACC,gFACAN,EAAkBO,IAClBC,GACA,+FACAC,CACD,CACD;CAbD,UAAA,CAeEC,GACD,kBAACC,GAAD;EACC,eAAY;EACZ,WAAU;CACV,CAAA,CACuB;AACzB,CAAA,CAAA;AACD,EAAc,cAAcf,EAAgB,QAAQ;AAYpD,IAAagB,IAAcjB,EAAM,YAG9B,EAAE,cAAW,GAAGO,KAAS,MAC3B,kBAACN,EAAgB,OAAjB;CACM;CACL,WAAWU,EACV,qFACAG,CACD;CACA,GAAIP;AACJ,CAAA,CACD;AACD,EAAY,cAAcN,EAAgB,MAAM;AAkBhD,IAAaiB,IAAgBlB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAGO,KAAS,MAAQ;CAC5F,IAAMY,IAAeC,EAAkB;CACvC,OACC,kBAACnB,EAAgB,QAAjB,EAAA,UACC,kBAACA,EAAgB,SAAjB;EACM;EACK;EACE;EACZ,WAAWoB,EACVV,EAAGW,MAAa,YAAY,yCAAyCR,CAAS,CAC/E;EACA,GAAIP;EAEJ,UAAA,kBAACN,EAAgB,UAAjB;GAA0B,KAAKkB;GAAc,WAAU;GACrD;EACwB,CAAA;CACF,CAAA,EACF,CAAA;AAE1B,CAAC;AACD,EAAc,cAAclB,EAAgB,QAAQ;AAYpD,IAAasB,IAAavB,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAGO,KAAS,MACrC,kBAACN,EAAgB,MAAjB;CACC,0BAAuB;CAClB;CACL,WAAWuB,EACVb,EACC,gHACAG,CACD,CACD;CACA,GAAIP;CATL,UAAA,CAWC,kBAACN,EAAgB,UAAjB;EAA0B,WAAU;EAAkB;CAAmC,CAAA,GACzF,kBAAC,QAAD;EAAM,WAAU;EACf,UAAA,kBAACA,EAAgB,eAAjB,EAAA,UACC,kBAACwB,GAAD,EAAO,WAAU,mBAAoB,CAAA,EACP,CAAA;CAC1B,CAAA,CACe;AACtB,CAAA,CAAA;AACD,EAAW,cAAcxB,EAAgB,KAAK"}

package/dist/components/sensitive-input.js

@@ -10,7 +10,7 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
 var l = i.forwardRef(({ className: l, revealLabel: u, hideLabel: d, disabled: f, size: p = "default", passwordManagerIgnore: m = !1, ...h }, g) => {
 	let [_, v] = i.useState(!1);
 	return /* @__PURE__ */ c("div", {
-		className: t("flex focus-within:border-basalt-ring has-[input[aria-invalid=true]]:border-basalt-destructive"),
+		className: t("basalt-focus-group flex has-[input[aria-invalid=true]]:border-basalt-destructive"),
 		children: [/* @__PURE__ */ s(r, {
 			ref: g,
 			type: _ ? "text" : "password",

package/dist/components/sensitive-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input.js","names":["React","SensitiveInput","props","revealed","setRevealed","controlSurfaceClass","Input","cn","className","Button","size","hideLabel","revealLabel","value","jsx","EyeOff","Eye"],"sources":["../../src/components/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nexport type SensitiveInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * Accessible label for the reveal action.\n\t */\n\trevealLabel: string;\n\t/**\n\t * Accessible label for the hide action.\n\t */\n\thideLabel: string;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const SensitiveInput = React.forwardRef<HTMLInputElement, SensitiveInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\trevealLabel,\n\t\t\thideLabel,\n\t\t\tdisabled,\n\t\t\tsize = \"default\",\n\t\t\tpasswordManagerIgnore = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [revealed, setRevealed] = React.useState(false);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\t\"flex focus-within:border-basalt-ring has-[input[aria-invalid=true]]:border-basalt-destructive\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={revealed ? \"text\" : \"password\"}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tpasswordManagerIgnore={passwordManagerIgnore}\n\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 border-0 bg-transparent shadow-none\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize={size === \"default\" ? \"icon\" : size}\n\t\t\t\t\tclassName=\"basalt-action-icon basalt-action-inset shrink-0\"\n\t\t\t\t\taria-label={revealed ? hideLabel : revealLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => setRevealed((value) => !value)}\n\t\t\t\t>\n\t\t\t\t\t{revealed ? (\n\t\t\t\t\t\t<EyeOff className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\t},\n);\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":";;;;;;;;;AA4BA,IAAaC,IAAiBD,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAGE,KAEJ,MACI;CACJ,IAAM,CAACC,GAAUC,KAAeJ,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EACC,WAAWK,EACV,+FACD;EAHD,UAAA,CAKC,kBAACC,GAAD;GACM;GACL,MAAMH,IAAW,SAAS;GACpB;GACiB;GACvB,WAAWI,EAAG,sDAAsDC,CAAS;GACnE;GACV,GAAIN;EACJ,CAAA,GACD,kBAACO,GAAD;GACC,MAAK;GACL,SAAQ;GACR,MAAMC,MAAS,YAAY,SAASA;GACpC,WAAU;GACV,cAAYP,IAAWQ,IAAYC;GACzB;GACV,eAAeR,GAAa,MAAU,CAACS,CAAK;GAE3C,UACAC,EADAX,IACCY,IAEAC,GAFD;IAAQ,WAAU;IAAwB,eAAY;GAAQ,CAEH;EAErD,CAAA,CACJ;;AAEP,CACD;AACA,EAAe,cAAc"}
+{"version":3,"file":"sensitive-input.js","names":["React","SensitiveInput","props","revealed","setRevealed","controlSurfaceClass","Input","cn","className","Button","size","hideLabel","revealLabel","value","jsx","EyeOff","Eye"],"sources":["../../src/components/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nexport type SensitiveInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * Accessible label for the reveal action.\n\t */\n\trevealLabel: string;\n\t/**\n\t * Accessible label for the hide action.\n\t */\n\thideLabel: string;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const SensitiveInput = React.forwardRef<HTMLInputElement, SensitiveInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\trevealLabel,\n\t\t\thideLabel,\n\t\t\tdisabled,\n\t\t\tsize = \"default\",\n\t\t\tpasswordManagerIgnore = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [revealed, setRevealed] = React.useState(false);\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={controlSurfaceClass(\n\t\t\t\t\t\"basalt-focus-group flex has-[input[aria-invalid=true]]:border-basalt-destructive\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={revealed ? \"text\" : \"password\"}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tpasswordManagerIgnore={passwordManagerIgnore}\n\t\t\t\t\tclassName={cn(\"min-w-0 flex-1 border-0 bg-transparent shadow-none\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize={size === \"default\" ? \"icon\" : size}\n\t\t\t\t\tclassName=\"basalt-action-icon basalt-action-inset shrink-0\"\n\t\t\t\t\taria-label={revealed ? hideLabel : revealLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => setRevealed((value) => !value)}\n\t\t\t\t>\n\t\t\t\t\t{revealed ? (\n\t\t\t\t\t\t<EyeOff className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-basalt-4 w-basalt-4\" aria-hidden=\"true\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\t},\n);\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":";;;;;;;;;AA4BA,IAAaC,IAAiBD,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAGE,KAEJ,MACI;CACJ,IAAM,CAACC,GAAUC,KAAeJ,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EACC,WAAWK,EACV,kFACD;EAHD,UAAA,CAKC,kBAACC,GAAD;GACM;GACL,MAAMH,IAAW,SAAS;GACpB;GACiB;GACvB,WAAWI,EAAG,sDAAsDC,CAAS;GACnE;GACV,GAAIN;EACJ,CAAA,GACD,kBAACO,GAAD;GACC,MAAK;GACL,SAAQ;GACR,MAAMC,MAAS,YAAY,SAASA;GACpC,WAAU;GACV,cAAYP,IAAWQ,IAAYC;GACzB;GACV,eAAeR,GAAa,MAAU,CAACS,CAAK;GAE3C,UACAC,EADAX,IACCY,IAEAC,GAFD;IAAQ,WAAU;IAAwB,eAAY;GAAQ,CAEH;EAErD,CAAA,CACJ;;AAEP,CACD;AACA,EAAe,cAAc"}

package/dist/components/sidebar.js

@@ -240,7 +240,7 @@ function B({ label: t, defaultOpen: r = !0, children: a }) {
 function V({ className: t, ...n }) {
 	return /* @__PURE__ */ w("div", {
 		"data-slot": "sidebar-footer",
-		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-nav-inset py-basalt-nav-inset", t),
+		className: e("flex shrink-0 flex-col gap-basalt-content-gap px-basalt-layout pt-basalt-space-lg pb-basalt-layout", t),
 		...n
 	});
 }