@womp/kookie-ui 0.25.0 → 0.25.1

package/src/components/notice.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 
 import { Button } from './button.js';
 import { Text } from './text.js';
-import { ThemeSizeContext, useThemeSize } from '../helpers/theme-size.js';
+import { ThemeSizeContext, useThemeSize } from '../hooks/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
 type NoticeSize = '1' | '2' | '3' | '4';

package/src/components/popover.css

@@ -35,16 +35,18 @@
 }
 
 .kui-PopoverToolbarSection {
+  /* Each section owns a column on the one row, whichever sections are present and in any order. */
+  grid-row: 1;
   display: flex;
   align-items: center;
   gap: var(--space-3);
 }
 
-.kui-PopoverToolbarLeft { justify-self: start; }
+.kui-PopoverToolbarLeft { grid-column: 1; justify-self: start; }
 
 .kui-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
 
-.kui-PopoverToolbarRight { justify-self: end; }
+.kui-PopoverToolbarRight { grid-column: 3; justify-self: end; }
 
 .kui-PopoverToolbarTitle {
   display: inline-block;

package/src/components/popover.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';

package/src/components/radio-group.tsx

@@ -8,7 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/radio.tsx

@@ -6,7 +6,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 
 import { radioPropDefs } from './radio.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';

package/src/components/segmented-control.tsx

@@ -7,7 +7,7 @@ import { useComposedRefs, useControllableState, useLayoutEffect } from 'radix-ui
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/select.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import { Spinner } from './spinner.js';
 import {

package/src/components/sheet.css

@@ -1,4 +1,6 @@
-:where(.kui-SheetContent) {
+/* The class sits outside :where() so the 90vw default outranks the dialog's width: 100% in
+   base-dialog.css (same weight, later in the cascade). The width prop sets --width. */
+.kui-SheetContent {
   position: fixed !important;
   /* Use physical properties to integrate with width/height responsive utilities */
   width: var(--width, 90vw);
@@ -11,7 +13,7 @@
 
 /* iOS dynamic viewport height - accounts for browser chrome */
 @supports (height: 100dvh) {
-  :where(.kui-SheetContent) {
+  .kui-SheetContent {
     height: 100dvh;
     max-height: 100dvh;
   }

package/src/components/sheet.tsx

@@ -42,7 +42,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 

package/src/components/shell.tsx

@@ -51,7 +51,7 @@ import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRe
 import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } from './_internal/pane-chrome.js';
 import type { PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps } from './_internal/pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';

package/src/components/sidebar.tsx

@@ -333,6 +333,18 @@ function toDropdownItem(node: React.ReactNode, key: React.Key): React.ReactNode
   return <DropdownMenu.Item key={key}>{node}</DropdownMenu.Item>;
 }
 
+// The sub-list is a <ul>, so each row needs its own <li>. A MenuButton written straight into
+// MenuSubContent gets a MenuItem around it, rather than leaving an <a> or <button> in the list.
+function wrapBareMenuButtons(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child, index) =>
+    React.isValidElement(child) && child.type === SidebarMenuButton ? (
+      <SidebarMenuItem key={child.key ?? index}>{child}</SidebarMenuItem>
+    ) : (
+      child
+    ),
+  );
+}
+
 const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion.Content>, SidebarMenuSubContentProps>(({ className, children, ...props }, forwardedRef) => {
   const visual = useSidebarVisual();
   const mode = React.useContext(SidebarSubMenuModeContext);
@@ -360,7 +372,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
 
   return (
     <Accordion.Content {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuSubContent', className)}>
-      <ul className="kui-SidebarMenuSubList">{children}</ul>
+      <ul className="kui-SidebarMenuSubList">{wrapBareMenuButtons(children)}</ul>
     </Accordion.Content>
   );
 });
@@ -473,6 +485,9 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
     // Arrow key navigation within the popover (input ↔ results)
     const handlePopoverKeyDown = React.useCallback(
       (e: React.KeyboardEvent<HTMLDivElement>) => {
+        // A result row already moved focus with its own arrow handling (focusAdjacentSidebarButton
+        // scopes to this popover); moving again would skip a row.
+        if (e.defaultPrevented) return;
         const container = popoverRef.current;
         if (!container) return;
 

package/src/components/slider.tsx

@@ -4,7 +4,7 @@ import { Direction, Slider as SliderPrimitive } from 'radix-ui';
 
 import { sliderPropDefs } from './slider.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/switch.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { switchPropDefs } from './switch.props.js';
 
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/table.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
 import { ScrollArea } from './scroll-area.js';
 

package/src/components/tabs.tsx

@@ -4,7 +4,7 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 
 import { tabsListPropDefs } from './tabs.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';

package/src/components/text-area.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { textAreaPropDefs } from './text-area.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';

package/src/components/text-field.tsx

@@ -7,7 +7,7 @@ import { composeEventHandlers, composeRefs } from 'radix-ui/internal';
 
 import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';

package/src/components/theme.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Direction, Slot } from 'radix-ui';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
-import { ThemeSizeContext } from '../helpers/theme-size.js';
+import { ThemeSizeContext } from '../hooks/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 

package/src/components/toolbar.tsx

@@ -10,7 +10,7 @@ import { Button } from './button.js';
 import * as DropdownMenu from './dropdown-menu.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { layoutPropDefs } from '../props/layout.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
@@ -197,6 +197,9 @@ type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-
 
 type ToolbarButtonProps = ToolbarTextButtonProps | ToolbarIconButtonProps;
 
+/** The plain DOM props, besides handlers, ARIA and data attributes, a menu row takes from a ToolbarButton. */
+const OVERFLOW_ITEM_KEYS = new Set(['id', 'className', 'style', 'title']);
+
 function isPressed(value: React.AriaAttributes['aria-pressed']) {
   return value === true || value === 'true';
 }
@@ -231,15 +234,21 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
   const off = disabled || group?.disabled || undefined;
 
   if (overflow) {
+    // Only what a menu row means comes across: handlers, ARIA, data attributes, id, class and
+    // style. Button's box props (size, loading, tooltip, fullWidth and the rest) would land on the
+    // DOM as unknown attributes. A wrapping menu trigger hands its open handlers (onPointerDown,
+    // onKeyDown), aria-expanded/haspopup/controls and data-state in through these, so it still
+    // opens from the row.
+    const passed: Record<string, unknown> = {};
+    for (const key of Object.keys(rest)) {
+      if (/^on[A-Z]/.test(key) || key.startsWith('aria-') || key.startsWith('data-') || OVERFLOW_ITEM_KEYS.has(key)) {
+        passed[key] = (rest as Record<string, unknown>)[key];
+      }
+    }
+    if (onKeyDown) passed.onKeyDown = onKeyDown;
     return (
       <ToolbarOverflowItem
-        // Only what a menu row means comes across; Button's box props (size, loading,
-        // tooltip, fullWidth and the rest) would land on the DOM as unknown attributes.
-        id={rest.id}
-        className={rest.className}
-        style={rest.style}
-        onClick={rest.onClick as React.MouseEventHandler<HTMLDivElement> | undefined}
-        aria-label={rest['aria-label']}
+        {...(passed as React.ComponentPropsWithoutRef<'div'>)}
         ref={forwardedRef as unknown as React.Ref<HTMLDivElement>}
         asChild={asChild}
         iconOnly={iconOnly}

package/src/helpers/index.ts

@@ -14,3 +14,6 @@ export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';
 export * from './theme-size.js';
+// The context and its hooks are client code. The server-safe build keeps this import external, so
+// `/helpers` shares the one context the components read and stays loadable from a server component.
+export { ThemeSizeContext, useThemeSize, useThemeSizeProps } from '../hooks/theme-size.js';

package/src/helpers/theme-size.ts

@@ -1,26 +1,16 @@
-'use client';
-
-import * as React from 'react';
+/**
+ * The pure half of the theme size: the type, the default and the clamp. Server-safe.
+ *
+ * The context and the hooks that read it live in `hooks/theme-size.ts`, a client module, so there
+ * is one `ThemeSizeContext` and importing `/helpers` from a server component does not call
+ * `createContext`.
+ */
 
 type ThemeSize = '1' | '2' | '3' | '4';
 
 /** The rest of the 1-4 index when no Theme states a size. */
 const THEME_SIZE_DEFAULT: ThemeSize = '2';
 
-/**
- * The app-wide size index, provided by `Theme` beside `ThemeContext`.
- *
- * It is its own context, holding one string, so a component that only needs
- * the size does not re-render when the accent colour or appearance changes.
- */
-const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
-ThemeSizeContext.displayName = 'ThemeSizeContext';
-
-interface SizePropDef {
-  values: readonly string[];
-  default?: string;
-}
-
 /**
  * Maps the theme size onto a component's own range: the value itself when the
  * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale
@@ -41,33 +31,5 @@ function clampSize(size: ThemeSize, values: readonly string[]): string {
   return nearest;
 }
 
-/**
- * The size a component on the 1-4 index takes: what the caller said, else the
- * nearest Theme's size, mapped into the component's range.
- */
-function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
-  const themeSize = React.useContext(ThemeSizeContext);
-  if (explicit !== undefined) return explicit;
-  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
-  return clampSize(themeSize, propDef.values) as V;
-}
-
-/**
- * Fills `size` from the nearest Theme when the caller left it unset, so the
- * result can go straight into `extractProps`. An explicit size, responsive
- * object included, wins.
- *
- * Returns the same props object when there is nothing to fill: when a size is
- * set, or when the theme size resolves to the prop def's own default (the
- * common case, a Theme with no size), so `extractProps` applies it as before.
- */
-function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
-  const themeSize = React.useContext(ThemeSizeContext);
-  if (props.size !== undefined) return props;
-  const size = clampSize(themeSize, propDef.values);
-  if (size === propDef.default) return props;
-  return { ...props, size };
-}
-
-export { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };
+export { THEME_SIZE_DEFAULT, clampSize };
 export type { ThemeSize };

package/src/hooks/theme-size.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import { THEME_SIZE_DEFAULT, clampSize } from '../helpers/theme-size.js';
+import type { ThemeSize } from '../helpers/theme-size.js';
+
+/**
+ * The app-wide size index, provided by `Theme` beside `ThemeContext`.
+ *
+ * It is its own context, holding one string, so a component that only needs
+ * the size does not re-render when the accent colour or appearance changes.
+ */
+const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
+ThemeSizeContext.displayName = 'ThemeSizeContext';
+
+interface SizePropDef {
+  values: readonly string[];
+  default?: string;
+}
+
+/**
+ * The size a component on the 1-4 index takes: what the caller said, else the
+ * nearest Theme's size, mapped into the component's range.
+ */
+function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (explicit !== undefined) return explicit;
+  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
+  return clampSize(themeSize, propDef.values) as V;
+}
+
+/**
+ * Fills `size` from the nearest Theme when the caller left it unset, so the
+ * result can go straight into `extractProps`. An explicit size, responsive
+ * object included, wins.
+ *
+ * Returns the same props object when there is nothing to fill: when a size is
+ * set, or when the theme size resolves to the prop def's own default (the
+ * common case, a Theme with no size), so `extractProps` applies it as before.
+ */
+function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (props.size !== undefined) return props;
+  const size = clampSize(themeSize, propDef.values);
+  if (size === propDef.default) return props;
+  return { ...props, size };
+}
+
+export { ThemeSizeContext, useThemeSize, useThemeSizeProps };

package/src/styles/tokens/color.css

@@ -8,6 +8,8 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  /* The ground a raised surface sits on: one step below it, so a white card reads as lifted. */
+  --color-ground: var(--neutral-1, var(--gray-1));
 
   /*
    * The neutral scale, named as in v2. It defaults to the plain gray palette; a Theme grayColor
@@ -49,6 +51,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
 }
 
 /*                                     */

package/styles.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -3457,6 +3458,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
@@ -12628,6 +12630,7 @@
   background-color: var(--color-surface);
 }
 .kui-PopoverToolbarSection {
+  grid-row: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12637,6 +12640,7 @@
   gap: var(--space-3);
 }
 .kui-PopoverToolbarLeft {
+  grid-column: 1;
   justify-self: start;
 }
 .kui-PopoverToolbarCenter {
@@ -12646,6 +12650,7 @@
   text-align: center;
 }
 .kui-PopoverToolbarRight {
+  grid-column: 3;
   justify-self: end;
 }
 .kui-PopoverToolbarTitle {
@@ -13235,7 +13240,7 @@
     background-color: GrayText;
   }
 }
-:where(.kui-SheetContent) {
+.kui-SheetContent {
   position: fixed !important;
   width: var(--width, 90vw);
   max-width: min(var(--overlay-w), 100vw);
@@ -13244,7 +13249,7 @@
   margin: 0 !important;
 }
 @supports (height: 100dvh) {
-  :where(.kui-SheetContent) {
+  .kui-SheetContent {
     height: 100dvh;
     max-height: 100dvh;
   }

package/tokens/base.css

@@ -61,6 +61,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -108,6 +109,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);

package/tokens.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-ground: var(--neutral-1, var(--gray-1));
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -3454,6 +3455,7 @@
   --color-page: var(--neutral-1, var(--gray-1));
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
+  --color-ground: var(--neutral-1, var(--gray-1));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);

package/dist/esm/chunk-2EXOL2BR.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/select.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';\n\nimport { extractProps } from '../helpers/extract-props.js';\nimport { useThemeSize } from '../helpers/theme-size.js';\nimport { ChevronDownIcon, ThickCheckIcon } from './icons.js';\nimport { Spinner } from './spinner.js';\nimport {\n  selectRootPropDefs,\n  selectTriggerPropDefs,\n  selectContentPropDefs,\n} from './select.props.js';\nimport { useThemeContext, Theme } from './theme.js';\nimport { useThumbSync } from '../hooks/use-thumb-sync.js';\n\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype SelectRootOwnProps = GetPropDefTypes<typeof selectRootPropDefs>;\n\n// Trigger and Content pass the size prop def as its own record. It is hoisted because\n// extractProps caches its compiled prop defs on the identity of each record it is given:\n// a literal written at the call site would be a new object, and a recompile, every render.\nconst selectSizePropDefs = { size: selectRootPropDefs.size };\n\n// Keys that open the list from the trigger, as in Radix.\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];\n\ninterface SelectContextValue extends SelectRootOwnProps {\n  /** Whether the list is open. Undefined when Content is rendered outside a Kookie Select.Root. */\n  open?: boolean;\n}\nconst SelectContext = React.createContext<SelectContextValue>({});\n\ninterface SelectRootProps extends SelectPrimitive.SelectProps, SelectRootOwnProps {}\nconst SelectRoot: React.FC<SelectRootProps> = (props) => {\n  const {\n    children,\n    size: sizeProp,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    ...rootProps\n  } = props;\n  const size = useThemeSize(sizeProp, selectRootPropDefs.size);\n\n  // Root owns the open state and hands Radix a controlled `open`, so Content learns of a\n  // change in the same render Radix does. Radix's uncontrolled state reports changes from an\n  // effect, a render late, which would mount the open list once without its wrappers.\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);\n  const open = openProp ?? uncontrolledOpen;\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [onOpenChange],\n  );\n\n  return (\n    <SelectPrimitive.Root {...rootProps} open={open} onOpenChange={handleOpenChange}>\n      <SelectContext.Provider value={React.useMemo(() => ({ size, open }), [size, open])}>\n        {children}\n      </SelectContext.Provider>\n    </SelectPrimitive.Root>\n  );\n};\nSelectRoot.displayName = 'Select.Root';\n\ntype SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;\ntype SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;\ninterface SelectTriggerProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,\n    SelectTriggerOwnProps {}\nconst SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(SelectContext);\n    const {\n      children,\n      className,\n      color,\n      radius,\n      placeholder,\n      error,\n      loading,\n      disabled,\n      readOnly,\n      ...triggerProps\n    } = extractProps(\n      // Pass size value from the context to generate styles\n      { size: context?.size, ...props },\n      // Pass size prop def to allow it to be extracted\n      selectSizePropDefs,\n      selectTriggerPropDefs,\n    );\n\n    // The props win when set; otherwise a caller's own aria-* (a form library's aria-invalid)\n    // stays, so both paths reach the accessibility tree and the CSS, as on TextField.\n    const {\n      'aria-invalid': ariaInvalid,\n      'aria-busy': ariaBusy,\n      'aria-disabled': ariaDisabled,\n      'aria-readonly': ariaReadOnly,\n    } = triggerProps;\n    const isInvalid = Boolean(error) || ariaInvalid === true || ariaInvalid === 'true';\n    const ariaProps = React.useMemo(\n      () => ({\n        'aria-invalid': isInvalid ? true : ariaInvalid,\n        'aria-busy': loading || ariaBusy,\n        'aria-disabled': disabled || ariaDisabled,\n        'aria-readonly': readOnly || ariaReadOnly,\n      }),\n      [isInvalid, ariaInvalid, loading, ariaBusy, disabled, ariaDisabled, readOnly, ariaReadOnly],\n    );\n\n    // Read-only and loading triggers stay focusable but do not open or take typeahead,\n    // as on Combobox. Radix skips its own handler when the event is default-prevented.\n    const isBlocked = Boolean(readOnly || loading);\n    const blockedHandlers = isBlocked\n      ? {\n          onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => event.preventDefault(),\n          onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.preventDefault();\n            event.currentTarget.focus();\n          },\n          onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n            if (OPEN_KEYS.includes(event.key) || (!isModifierKey && event.key.length === 1)) {\n              event.preventDefault();\n            }\n          },\n        }\n      : undefined;\n\n    return (\n      // `disabled` goes to Radix, which merges it with Root's and sets the native attribute.\n      <SelectPrimitive.Trigger asChild disabled={disabled} {...blockedHandlers}>\n        <button\n          data-accent-color={color}\n          data-radius={radius}\n          data-error={error}\n          data-loading={loading}\n          {...triggerProps}\n          {...ariaProps}\n          ref={forwardedRef}\n          className={classNames('kui-reset', 'kui-SelectTrigger', className)}\n        >\n          <span className=\"kui-SelectTriggerInner\">\n            <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>\n          </span>\n          <SelectPrimitive.Icon asChild>\n            {loading ? (\n              <span className=\"kui-SelectIcon kui-SelectLoadingIcon\" aria-hidden=\"true\">\n                <Spinner />\n              </span>\n            ) : (\n              <ChevronDownIcon className=\"kui-SelectIcon\" />\n            )}\n          </SelectPrimitive.Icon>\n        </button>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = 'Select.Trigger';\n\ntype SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;\ntype SelectContentOwnProps = GetPropDefTypes<typeof selectContentPropDefs>;\ninterface SelectContentProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Content, RemovedProps>,\n    SelectContentOwnProps {\n  container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>['container'];\n}\nconst SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(SelectContext);\n    const { className, children, color, container, ...contentProps } = extractProps(\n      // Pass size value from the context to generate styles\n      { size: context?.size, ...props },\n      // Pass size prop def to allow it to be extracted\n      selectSizePropDefs,\n      selectContentPropDefs,\n    );\n    const themeContext = useThemeContext();\n\n    // While closed, Radix still renders Content's children, into a detached fragment: the\n    // items must exist for the trigger's value label, typeahead and the native form select.\n    // Nothing in that fragment is ever shown, so the theme wrapper and the scroll area, with\n    // its two resize observers, are left out until the list opens.\n    if (context.open === false && !contentProps.forceMount) {\n      return (\n        <SelectPrimitive.Portal container={container}>\n          <SelectPrimitive.Content {...contentProps} asChild={false} ref={forwardedRef}>\n            {children}\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      );\n    }\n\n    const resolvedColor = color || themeContext.accentColor;\n    return (\n      <SelectPrimitive.Portal container={container}>\n        <Theme asChild>\n          <SelectPrimitive.Content\n            data-accent-color={resolvedColor}\n            sideOffset={4}\n            {...contentProps}\n            asChild={false}\n            ref={forwardedRef}\n            className={classNames(\n              'kui-PopperContent',\n              'kui-BaseMenuContent',\n              'kui-variant-soft',\n              'kui-SelectContent',\n              className,\n            )}\n          >\n            <SelectScrollArea>{children}</SelectScrollArea>\n          </SelectPrimitive.Content>\n        </Theme>\n      </SelectPrimitive.Portal>\n    );\n  },\n);\nSelectContent.displayName = 'Select.Content';\n\n/** The open list's scroll area. Its own component so the thumb sync hook runs only while open. */\nfunction SelectScrollArea({ children }: { children: React.ReactNode }) {\n  const setThumbViewport = useThumbSync<HTMLDivElement>();\n  return (\n    <ScrollAreaPrimitive.Root type=\"auto\" className=\"kui-ScrollAreaRoot\">\n      <SelectPrimitive.Viewport\n        asChild\n        className={classNames('kui-BaseMenuViewport', 'kui-SelectViewport')}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={setThumbViewport}\n          className=\"kui-ScrollAreaViewport\"\n          style={{ overflowY: undefined }}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n      </SelectPrimitive.Viewport>\n      <ScrollAreaPrimitive.Scrollbar className=\"kui-ScrollAreaScrollbar\" orientation=\"vertical\">\n        <ScrollAreaPrimitive.Thumb className=\"kui-ScrollAreaThumb\" />\n      </ScrollAreaPrimitive.Scrollbar>\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\ntype SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;\ninterface SelectItemProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Item, RemovedProps> {}\nconst SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>((props, forwardedRef) => {\n  const { className, children, ...itemProps } = props;\n\n  // Detect if this is rich content (not just a string)\n  const isRichContent = typeof children !== 'string';\n\n  return (\n    <SelectPrimitive.Item\n      {...itemProps}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames(\n        'kui-reset',\n        'kui-BaseMenuItem',\n        'kui-SelectItem',\n        { 'kui-SelectItemRich': isRichContent },\n        className,\n      )}\n    >\n      <SelectPrimitive.ItemIndicator className=\"kui-SelectItemIndicator\">\n        <ThickCheckIcon className=\"kui-SelectItemIndicatorIcon\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n});\nSelectItem.displayName = 'Select.Item';\n\ntype SelectGroupElement = React.ElementRef<typeof SelectPrimitive.Group>;\ninterface SelectGroupProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Group, RemovedProps> {}\nconst SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Group\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('kui-SelectGroup', className)}\n    />\n  ),\n);\nSelectGroup.displayName = 'Select.Group';\n\ntype SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;\ninterface SelectLabelProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Label, RemovedProps> {}\nconst SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Label\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('kui-BaseMenuLabel', 'kui-SelectLabel', className)}\n    />\n  ),\n);\nSelectLabel.displayName = 'Select.Label';\n\ntype SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;\ninterface SelectSeparatorProps\n  extends ComponentPropsWithout<typeof SelectPrimitive.Separator, RemovedProps> {}\nconst SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <SelectPrimitive.Separator\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('kui-BaseMenuSeparator', 'kui-SelectSeparator', className)}\n    />\n  ),\n);\nSelectSeparator.displayName = 'Select.Separator';\n\nexport {\n  SelectRoot as Root,\n  SelectTrigger as Trigger,\n  SelectContent as Content,\n  SelectItem as Item,\n  SelectGroup as Group,\n  SelectLabel as Label,\n  SelectSeparator as Separator,\n};\n\nexport type {\n  SelectRootProps as RootProps,\n  SelectTriggerProps as TriggerProps,\n  SelectContentProps as ContentProps,\n  SelectItemProps as ItemProps,\n  SelectGroupProps as GroupProps,\n  SelectLabelProps as LabelProps,\n  SelectSeparatorProps as SeparatorProps,\n};\n"],
-  "mappings": "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",
-  "names": ["select_exports", "__export", "SelectContent", "SelectGroup", "SelectItem", "SelectLabel", "SelectRoot", "SelectSeparator", "SelectTrigger", "React", "classNames", "SelectPrimitive", "ScrollAreaPrimitive", "selectSizePropDefs", "selectRootPropDefs", "OPEN_KEYS", "SelectContext", "SelectRoot", "props", "children", "sizeProp", "openProp", "defaultOpen", "onOpenChange", "rootProps", "size", "useThemeSize", "uncontrolledOpen", "setUncontrolledOpen", "open", "handleOpenChange", "next", "SelectPrimitive", "SelectTrigger", "forwardedRef", "context", "className", "color", "radius", "placeholder", "error", "loading", "disabled", "readOnly", "triggerProps", "extractProps", "selectTriggerPropDefs", "ariaInvalid", "ariaBusy", "ariaDisabled", "ariaReadOnly", "isInvalid", "ariaProps", "blockedHandlers", "event", "isModifierKey", "classNames", "Spinner", "ChevronDownIcon", "SelectContent", "container", "contentProps", "selectContentPropDefs", "themeContext", "useThemeContext", "resolvedColor", "Theme", "SelectScrollArea", "setThumbViewport", "useThumbSync", "ScrollAreaPrimitive", "SelectItem", "itemProps", "isRichContent", "ThickCheckIcon", "SelectGroup", "SelectLabel", "SelectSeparator"]
-}

package/dist/esm/chunk-2IUGM657.js

@@ -1,3 +0,0 @@
-"use client";
-import*as r from"react";var a="2",u=r.createContext(a);u.displayName="ThemeSizeContext";function f(e,t){if(t.includes(e))return e;let n=Number(e),i=t[0],s=1/0;for(let o=0;o<t.length;o++){let c=Math.abs(Number(t[o])-n);c<s&&(s=c,i=t[o])}return i}function m(e,t){let n=r.useContext(u);return e!==void 0?e:f(n,t.values)}function z(e,t){let n=r.useContext(u);if(e.size!==void 0)return e;let i=f(n,t.values);return i===t.default?e:{...e,size:i}}export{u as a,m as b,z as c};
-//# sourceMappingURL=chunk-2IUGM657.js.map

package/dist/esm/chunk-2IUGM657.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/helpers/theme-size.ts"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\n\ntype ThemeSize = '1' | '2' | '3' | '4';\n\n/** The rest of the 1-4 index when no Theme states a size. */\nconst THEME_SIZE_DEFAULT: ThemeSize = '2';\n\n/**\n * The app-wide size index, provided by `Theme` beside `ThemeContext`.\n *\n * It is its own context, holding one string, so a component that only needs\n * the size does not re-render when the accent colour or appearance changes.\n */\nconst ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);\nThemeSizeContext.displayName = 'ThemeSizeContext';\n\ninterface SizePropDef {\n  values: readonly string[];\n  default?: string;\n}\n\n/**\n * Maps the theme size onto a component's own range: the value itself when the\n * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale\n * is `3`, on a 1-2 scale it is `2`).\n */\nfunction clampSize(size: ThemeSize, values: readonly string[]): string {\n  if (values.includes(size)) return size;\n  const n = Number(size);\n  let nearest = values[0];\n  let distance = Infinity;\n  for (let i = 0; i < values.length; i++) {\n    const d = Math.abs(Number(values[i]) - n);\n    if (d < distance) {\n      distance = d;\n      nearest = values[i];\n    }\n  }\n  return nearest;\n}\n\n/**\n * The size a component on the 1-4 index takes: what the caller said, else the\n * nearest Theme's size, mapped into the component's range.\n */\nfunction useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {\n  const themeSize = React.useContext(ThemeSizeContext);\n  if (explicit !== undefined) return explicit;\n  // The clamped value is one of `propDef.values`, which is what `V` ranges over.\n  return clampSize(themeSize, propDef.values) as V;\n}\n\n/**\n * Fills `size` from the nearest Theme when the caller left it unset, so the\n * result can go straight into `extractProps`. An explicit size, responsive\n * object included, wins.\n *\n * Returns the same props object when there is nothing to fill: when a size is\n * set, or when the theme size resolves to the prop def's own default (the\n * common case, a Theme with no size), so `extractProps` applies it as before.\n */\nfunction useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {\n  const themeSize = React.useContext(ThemeSizeContext);\n  if (props.size !== undefined) return props;\n  const size = clampSize(themeSize, propDef.values);\n  if (size === propDef.default) return props;\n  return { ...props, size };\n}\n\nexport { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };\nexport type { ThemeSize };\n"],
-  "mappings": ";AAEA,UAAYA,MAAW,QAKvB,IAAMC,EAAgC,IAQhCC,EAAyB,gBAAyBD,CAAkB,EAC1EC,EAAiB,YAAc,mBAY/B,SAASC,EAAUC,EAAiBC,EAAmC,CACrE,GAAIA,EAAO,SAASD,CAAI,EAAG,OAAOA,EAClC,IAAM,EAAI,OAAOA,CAAI,EACjBE,EAAUD,EAAO,CAAC,EAClBE,EAAW,IACf,QAASC,EAAI,EAAGA,EAAIH,EAAO,OAAQG,IAAK,CACtC,IAAMC,EAAI,KAAK,IAAI,OAAOJ,EAAOG,CAAC,CAAC,EAAI,CAAC,EACpCC,EAAIF,IACNA,EAAWE,EACXH,EAAUD,EAAOG,CAAC,EAEtB,CACA,OAAOF,CACT,CAMA,SAASI,EAAgBC,EAAyBC,EAAyB,CACzE,IAAMC,EAAkB,aAAWX,CAAgB,EACnD,OAAIS,IAAa,OAAkBA,EAE5BR,EAAUU,EAAWD,EAAQ,MAAM,CAC5C,CAWA,SAASE,EAAgDC,EAAUH,EAAyB,CAC1F,IAAMC,EAAkB,aAAWX,CAAgB,EACnD,GAAIa,EAAM,OAAS,OAAW,OAAOA,EACrC,IAAMX,EAAOD,EAAUU,EAAWD,EAAQ,MAAM,EAChD,OAAIR,IAASQ,EAAQ,QAAgBG,EAC9B,CAAE,GAAGA,EAAO,KAAAX,CAAK,CAC1B",
-  "names": ["React", "THEME_SIZE_DEFAULT", "ThemeSizeContext", "clampSize", "size", "values", "nearest", "distance", "i", "d", "useThemeSize", "explicit", "propDef", "themeSize", "useThemeSizeProps", "props"]
-}

package/dist/esm/chunk-2XZ7477Y.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/checkbox.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { useControllableState } from 'radix-ui/internal';\n\nimport { checkboxPropDefs } from './checkbox.props.js';\nimport { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { useThemeSizeProps } from '../helpers/theme-size.js';\n\nimport type { ComponentPropsWithout } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;\ntype CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;\ninterface CheckboxProps\n  extends ComponentPropsWithout<\n      typeof CheckboxPrimitive.Root,\n      'asChild' | 'color' | 'defaultValue' | 'children'\n    >,\n    CheckboxOwnProps {}\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {\n  const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);\n  const {\n    className,\n    color,\n    checked: checkedProp,\n    defaultChecked: defaultCheckedProp,\n    onCheckedChange,\n    ...checkboxProps\n  } = extractProps(props, checkboxPropDefs);\n\n  const [checked, setChecked] = useControllableState({\n    prop: checkedProp,\n    defaultProp: defaultCheckedProp ?? false,\n    onChange: onCheckedChange,\n  });\n\n  return (\n    <CheckboxPrimitive.Root\n      data-accent-color={color}\n      {...checkboxProps}\n      defaultChecked={defaultCheckedProp}\n      checked={checked}\n      onCheckedChange={setChecked}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('kui-reset', 'kui-BaseCheckboxRoot', 'kui-CheckboxRoot', className)}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        className=\"kui-BaseCheckboxIndicator kui-CheckboxIndicator\"\n      >\n        {checked === 'indeterminate' ? <ThickDividerHorizontalIcon /> : <ThickCheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],
-  "mappings": ";kKAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,YAAYC,MAAyB,WAC9C,OAAS,wBAAAC,MAA4B,oBAkBrC,IAAMC,EAAiB,aAA2C,CAACC,EAAUC,IAAiB,CAC5F,IAAMC,EAAQC,EAAkBH,EAAUI,EAAiB,IAAI,EACzD,CACJ,UAAAC,EACA,MAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,gBAAAC,EACA,GAAGC,CACL,EAAIC,EAAaT,EAAOE,CAAgB,EAElC,CAACQ,EAASC,CAAU,EAAIC,EAAqB,CACjD,KAAMP,EACN,YAAaC,GAAsB,GACnC,SAAUC,CACZ,CAAC,EAED,OACE,gBAACM,EAAkB,KAAlB,CACC,oBAAmBT,EAClB,GAAGI,EACJ,eAAgBF,EAChB,QAASI,EACT,gBAAiBC,EACjB,QAAS,GACT,IAAKZ,EACL,UAAWe,EAAW,YAAa,uBAAwB,mBAAoBX,CAAS,GAExF,gBAACU,EAAkB,UAAlB,CACC,QAAO,GACP,UAAU,mDAETH,IAAY,gBAAkB,gBAACK,EAAA,IAA2B,EAAK,gBAACC,EAAA,IAAe,CAClF,CACF,CAEJ,CAAC,EACDnB,EAAS,YAAc",
-  "names": ["React", "classNames", "CheckboxPrimitive", "useControllableState", "Checkbox", "ownProps", "forwardedRef", "props", "useThemeSizeProps", "baseCheckboxPropDefs", "className", "color", "checkedProp", "defaultCheckedProp", "onCheckedChange", "checkboxProps", "extractProps", "checked", "setChecked", "useControllableState", "CheckboxPrimitive", "classNames", "ThickDividerHorizontalIcon", "ThickCheckIcon"]
-}

package/dist/esm/chunk-3WZLXGUE.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as v}from"./chunk-ILWS2JUE.js";import{a as O}from"./chunk-WZKSLTBH.js";import{k as H}from"./chunk-GKDGNPBD.js";import{c as I}from"./chunk-2IUGM657.js";import{a as h}from"./chunk-65KD6WS6.js";import{c as L}from"./chunk-OKQAVYW4.js";import*as e from"react";import te from"classnames";import{Slot as ne}from"radix-ui";import{useComposedRefs as oe,useLayoutEffect as ae}from"radix-ui/internal";var se=e.forwardRef((i,n)=>{let o=I(i,h.size),{className:P,children:a,asChild:s,as:f,color:F,radius:V,disabled:R,done:B=!1,...p}=L(o,h),l=!!o.loading,_=o.loading!==void 0,m=!!R||l,{onClick:T,"aria-describedby":M}=p,A=e.useCallback(t=>{if(m){t.preventDefault();return}T?.(t)},[m,T]),z=e.useMemo(()=>{let t=s&&e.isValidElement(a)?a.props.children:a,d=N(t),c=r=>e.isValidElement(r)&&(r.type==="svg"||typeof r.type!="string"&&r.type!==e.Fragment&&!re.has(k(r.type)));return{iconStart:c(d[0]),iconEnd:c(d[d.length-1])}},[s,a]),[G,W]=e.useState(null),S=e.useRef(null),X=oe(n,S);ae(()=>{let t=S.current;if(!t||l||B)return;let d=t.querySelector(":scope > .kui-BaseButtonContent")??t,c=j(d,"start"),r=j(d,"end");W(u=>u&&u.iconStart===c&&u.iconEnd===r?u:{iconStart:c,iconEnd:r})});let{iconStart:b,iconEnd:q}=G??z,D=!!p["data-icon-only"],E=e.useMemo(()=>{if(!B)return a;let t=e.createElement(H,{key:"kui-done-tick",className:"kui-BaseButtonTick","aria-hidden":!0}),d=c=>{if(D)return t;let r=N(c),u=r.findIndex(y=>!(typeof y=="string"&&!y.trim()));return b&&u!==-1?r.map((y,ee)=>ee===u?t:y):[t,...r]};if(s&&e.isValidElement(a)){let c=a;return e.cloneElement(c,void 0,d(c.props.children))}return d(a)},[B,a,D,b,s]),K=s?ne.Root:f||"button",Q=["button","input","textarea","select"],x=s?e.isValidElement(a)?a.type:void 0:f||"button",C=typeof x=="string"&&Q.includes(x),{onClickCapture:w}=p,$=e.useCallback(t=>{if(s&&m){t.preventDefault(),t.stopPropagation();return}w?.(t)},[s,m,w]),J=!s&&(!f||f==="button"),U="type"in p,Y=e.useId(),g=l?`${Y}-loading`:void 0,Z=e.useMemo(()=>l?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":[M,g].filter(Boolean).join(" ")}:R&&(!C||s)?{"aria-disabled":!0}:{},[l,g,M,R,C,s]);return e.createElement(K,{"data-accent-color":F,"data-radius":V,"data-icon-start":b||void 0,"data-icon-end":q||void 0,"data-done":B||void 0,...p,...Z,"data-disabled":m||void 0,onClick:A,onClickCapture:$,ref:X,className:te("kui-reset","kui-BaseButton",P),...C&&{disabled:R},...J&&!U?{type:"button"}:{}},s&&!l?E:e.createElement(e.Fragment,null,_?e.createElement("span",{className:"kui-BaseButtonContent","aria-hidden":l||void 0},E):E,l?e.createElement(e.Fragment,null,e.createElement("span",{className:"kui-sr-only"},e.createElement("span",{id:g,"aria-hidden":!0},"Loading"),a),e.createElement(O,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},e.createElement("span",null,e.createElement(v,{"aria-hidden":"true"})))):null))});se.displayName="BaseButton";var re=new Set(["Text","Kbd","Code","Link","Em","Strong","Quote","Badge","Trans"]);function k(i){if(!i||typeof i!="function"&&typeof i!="object")return"";let n=i;return n.displayName||n.name||k(n.render)||k(n.type)}function N(i){return e.Children.toArray(i).flatMap(n=>e.isValidElement(n)&&n.type===e.Fragment?N(n.props.children):[n])}function j(i,n){let o=n==="start"?i.firstChild:i.lastChild;for(;o&&(o.nodeType===Node.COMMENT_NODE||o.nodeType===Node.TEXT_NODE&&!o.textContent?.trim());)o=n==="start"?o.nextSibling:o.previousSibling;return o?.nodeType===Node.ELEMENT_NODE&&o.localName==="svg"}export{se as a};
-//# sourceMappingURL=chunk-3WZLXGUE.js.map