@brijbyte/agentic-ui 0.0.3 → 0.0.4

package/README.md

@@ -135,34 +135,37 @@ All tokens live in `@layer theme` — the lowest-priority layer. `@layer base` (
 
 Shadows are theme-aware — light mode uses low-opacity black shadows; dark mode uses higher-opacity values so elevation is visible against dark surfaces.
 
-| Token                                                     | Tailwind class       | Role                                        |
-| --------------------------------------------------------- | -------------------- | ------------------------------------------- |
-| `--color-canvas`                                          | `bg-canvas`          | Page background                             |
-| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                             |
-| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                    |
-| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                   |
-| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                 |
-| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                   |
-| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                 |
-| `--color-active`                                          | `bg-active`          | Pressed interactive surface                 |
-| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                |
-| `--color-primary`                                         | `text-primary`       | Primary text                                |
-| `--color-secondary`                                       | `text-secondary`     | Secondary text                              |
-| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                        |
-| `--color-disabled`                                        | `text-disabled`      | Disabled text                               |
-| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds          |
-| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds           |
-| `--color-code`                                            | `text-code`          | Inline code text                            |
-| `--color-line`                                            | `border-line`        | Base border                                 |
-| `--color-line-strong`                                     | `border-line-strong` | Stronger border                             |
-| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                  |
-| `--color-accent`                                          | `bg-accent`          | macOS blue — solid interactive colour       |
-| `--color-accent-hover`                                    | —                    | Accent on hover                             |
-| `--color-accent-pressed`                                  | —                    | Accent on press                             |
-| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)   |
-| `--color-accent-tint-hover`                               | —                    | Tint on hover                               |
-| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent) |
-| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                              |
+| Token                                                     | Tailwind class       | Role                                         |
+| --------------------------------------------------------- | -------------------- | -------------------------------------------- |
+| `--color-canvas`                                          | `bg-canvas`          | Page background                              |
+| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                              |
+| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                     |
+| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                    |
+| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                  |
+| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                    |
+| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                  |
+| `--color-active`                                          | `bg-active`          | Pressed interactive surface                  |
+| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                 |
+| `--color-primary`                                         | `text-primary`       | Primary text                                 |
+| `--color-secondary`                                       | `text-secondary`     | Secondary text                               |
+| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                         |
+| `--color-disabled`                                        | `text-disabled`      | Disabled text                                |
+| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds           |
+| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds            |
+| `--color-code`                                            | `text-code`          | Inline code text                             |
+| `--color-line`                                            | `border-line`        | Base border                                  |
+| `--color-line-strong`                                     | `border-line-strong` | Stronger border                              |
+| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                   |
+| `--color-accent`                                          | `bg-accent`          | macOS blue — links, focus rings, tints       |
+| `--color-accent-solid`                                    | —                    | Filled button bg — AA contrast vs white      |
+| `--color-accent-text`                                     | —                    | Accent text on tinted surfaces — AA contrast |
+| `--color-accent-hover`                                    | —                    | Accent on hover                              |
+| `--color-accent-pressed`                                  | —                    | Accent on press                              |
+| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)    |
+| `--color-accent-tint-hover`                               | —                    | Tint on hover                                |
+| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent)  |
+| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                               |
+| `--color-success/warning/error-on-solid`                  | —                    | Text on filled status buttons (AA contrast)  |
 
 ### Spacing
 
@@ -230,7 +233,7 @@ Per-component JS  (also exports <Name>Styles class-name map)
 @brijbyte/agentic-ui/context-menu    @brijbyte/agentic-ui/tabs
 @brijbyte/agentic-ui/dialog          @brijbyte/agentic-ui/toast
 @brijbyte/agentic-ui/drawer          @brijbyte/agentic-ui/tooltip
-@brijbyte/agentic-ui/input
+@brijbyte/agentic-ui/input           @brijbyte/agentic-ui/popover
 
 Per-component CSS  (/<name>.css mirrors each JS subpath)
 @brijbyte/agentic-ui/accordion.css    @brijbyte/agentic-ui/menu.css
@@ -243,7 +246,7 @@ Per-component CSS  (/<name>.css mirrors each JS subpath)
 @brijbyte/agentic-ui/context-menu.css @brijbyte/agentic-ui/tabs.css
 @brijbyte/agentic-ui/dialog.css       @brijbyte/agentic-ui/toast.css
 @brijbyte/agentic-ui/drawer.css       @brijbyte/agentic-ui/tooltip.css
-@brijbyte/agentic-ui/input.css
+@brijbyte/agentic-ui/input.css        @brijbyte/agentic-ui/popover.css
 ```
 
 ---
@@ -280,6 +283,7 @@ import { Button, Dialog, Input } from "@brijbyte/agentic-ui";
 | `/input`        | `Input`                                             | —                                                                                                                                                                                                     |
 | `/menu`         | `Menu`                                              | `MenuPositioner`, `MenuPopup`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`, `MenuArrow`, `MenuItemShortcut`                                                                                         |
 | `/number-field` | `NumberField`                                       | `NumberFieldGroup`, `NumberFieldInput`, `NumberFieldDecrement`, `NumberFieldIncrement`, `NumberFieldScrubArea`, `NumberFieldScrubAreaCursor`                                                          |
+| `/popover`      | `Popover`                                           | `PopoverPositioner`, `PopoverPopup`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`, `PopoverArrow`, `PopoverViewport`                                                                          |
 | `/progress`     | `Progress`                                          | `ProgressTrack`, `ProgressIndicator`                                                                                                                                                                  |
 | `/select`       | `Select`                                            | `SelectTrigger`, `SelectValue`, `SelectPositioner`, `SelectPopup`, `SelectList`, `SelectItem`, `SelectItemText`, `SelectItemIndicator`, `SelectGroupContainer`, `SelectGroupLabel`, `SelectSeparator` |
 | `/separator`    | `Separator`                                         | —                                                                                                                                                                                                     |
@@ -413,6 +417,8 @@ import { Button } from "@brijbyte/agentic-ui/button";
 | `success`     | Confirm / complete action       |
 | `warning`     | Caution required                |
 
+All tone/variant combinations meet WCAG AA contrast (4.5:1 for text, 3:1 for borders). Each tone exposes two colour roles internally — a solid fill colour (`--btn-color`) and a separate text colour (`--btn-text-color`) optimised for legibility on tinted surfaces — so `soft`, `outline`, and `ghost` variants are always readable regardless of mode.
+
 **`loading`** disables the button and shows a centred spinner. The button width stays stable — children are hidden with `visibility: hidden` so they still contribute to layout.
 
 **`loadingText`** overrides the stable-width behaviour. When set, children swap to this text during loading (no spinner). Use when the loading state needs to communicate progress via text.
@@ -597,6 +603,97 @@ import { Collapsible } from "@brijbyte/agentic-ui/collapsible";
 
 When open, the trigger's bottom corners square off and connect flush with the content panel. When closing, the corners only round back after the panel has fully collapsed — no visible seam at any point during the animation.
 
+### Popover
+
+```tsx
+import { Popover } from "@brijbyte/agentic-ui/popover";
+
+// side: top | bottom (default) | left | right
+// align: start | center (default) | end
+<Popover
+  trigger={<Button variant="outline" size="sm">Details</Button>}
+  title="Deployment info"
+  description="Last deployed 3 minutes ago from main."
+  side="bottom"
+  align="start"
+/>
+
+// With body content and a close button
+<Popover
+  trigger={<Button>Settings</Button>}
+  title="API Settings"
+  dismissible
+>
+  <Input placeholder="API key" style={{ marginTop: "var(--space-3)" }} />
+</Popover>
+```
+
+**`trigger`** is rendered as-is and receives the open/close handler from base-ui.
+
+**`dismissible`** renders a close (×) button in the top-right corner. Omit it for simple informational popovers that dismiss on outside click.
+
+**`side`** / **`align`** control positioning. The popup auto-repositions to avoid viewport overflow — it will flip sides when there isn't enough space.
+
+#### Shared trigger (one popover, many triggers)
+
+Use `Popover.createHandle` from base-ui to connect multiple triggers to a single popup instance. Each trigger passes its own `payload`; the Root receives it via a render-function child. Switching triggers while the popup is open animates the content transition with `PopoverViewport`:
+
+```tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { PopoverPopup, PopoverTitle, PopoverDescription, PopoverArrow, PopoverViewport } from "@brijbyte/agentic-ui/popover";
+
+interface Item {
+  id: string;
+  name: string;
+  detail: string;
+}
+
+// Create once outside the component — typed with the payload shape
+const handle = BasePopover.createHandle<Item>();
+
+function MyList({ items }: { items: Item[] }) {
+  return (
+    <>
+      {/* Single Root — content driven by whichever trigger is active */}
+      <BasePopover.Root handle={handle}>
+        {({ payload }) =>
+          payload ? (
+            <BasePopover.Portal>
+              <BasePopover.Positioner side="right" sideOffset={8}>
+                <PopoverPopup>
+                  <PopoverArrow />
+                  {/* Viewport animates between triggers */}
+                  <PopoverViewport>
+                    <PopoverTitle>{payload.name}</PopoverTitle>
+                    <PopoverDescription>{payload.detail}</PopoverDescription>
+                  </PopoverViewport>
+                </PopoverPopup>
+              </BasePopover.Positioner>
+            </BasePopover.Portal>
+          ) : null
+        }
+      </BasePopover.Root>
+
+      {/* Each trigger passes its item as the payload */}
+      {items.map((item) => (
+        <BasePopover.Trigger
+          key={item.id}
+          handle={handle}
+          payload={item}
+          render={
+            <Button variant="ghost" size="xs">
+              Info
+            </Button>
+          }
+        />
+      ))}
+    </>
+  );
+}
+```
+
+`PopoverViewport` detects the direction between the old and new trigger and slides content in/out accordingly — down when moving to a lower trigger, up when moving higher, left/right for horizontal layouts.
+
 ### Menu
 
 ```tsx
@@ -726,15 +823,15 @@ import { ContextMenu } from "@brijbyte/agentic-ui/context-menu";
 
 <ContextMenu
   items={[
-    { label: "Cut",   shortcut: "⌘X" },
-    { label: "Copy",  shortcut: "⌘C" },
+    { label: "Cut", shortcut: "⌘X" },
+    { label: "Copy", shortcut: "⌘C" },
     { label: "Paste", shortcut: "⌘V", disabled: true },
     { type: "separator" },
     { label: "Select All", shortcut: "⌘A" },
   ]}
 >
   <div>Right click me</div>
-</ContextMenu>
+</ContextMenu>;
 ```
 
 Activated by right-click or long press on the child element. Supports `items` with `label`, `shortcut`, `icon`, `onSelect`, and `disabled`. Use `type: "separator"` for dividers and `type: "group"` with nested `items` for logical sections.
@@ -755,7 +852,7 @@ import { ContextMenuPopup, ContextMenuItem, ContextMenuSubmenuTrigger } from "@b
       </ContextMenuPopup>
     </BaseContextMenu.Positioner>
   </BaseContextMenu.Portal>
-</BaseContextMenu.SubmenuRoot>
+</BaseContextMenu.SubmenuRoot>;
 ```
 
 ---
@@ -783,7 +880,7 @@ dist/
   button/index.js          ← Per-component ESM (no CSS imports)
   button/index.d.ts
   button/button.css        ← Per-component plain CSS
-  …                        ← All 19 components follow the same pattern
+  …                        ← All 20 components follow the same pattern
 ```
 
 ### Why no CSS in JS?

package/dist/accordion/accordion.d.ts

@@ -4,19 +4,33 @@ import styles from "./accordion.module.css";
 
 //#region src/accordion/accordion.d.ts
 interface AccordionItem {
+  /** Unique identifier for this panel. */
   value: string;
+  /** Content rendered inside the trigger button. */
   header: ReactNode;
+  /** Content revealed when the panel is expanded. */
   content: ReactNode;
+  /** When `true`, the item cannot be toggled. */
   disabled?: boolean;
 }
 interface AccordionProps {
+  /** Array of items to render as collapsible panels. */
   items: AccordionItem[];
+  /** Allow multiple panels open at once. @default true */
   multiple?: boolean;
+  /** Initially expanded panel values (uncontrolled). */
   defaultValue?: string[];
+  /** Currently expanded panel values (controlled). */
   value?: string[];
+  /** Called when the set of open panels changes. */
   onValueChange?: (value: string[]) => void;
   className?: string;
 }
+/**
+ * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+ * headers, triggers, and animated panels. Pass `multiple` to allow more than one
+ * panel open at a time.
+ */
 declare function Accordion({
   items,
   className,

package/dist/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,KAAA;EACA,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,SAAA;EACT,QAAA;AAAA;AAAA,UAGe,cAAA;EACf,KAAA,EAAO,aAAA;EACP,QAAA;EACA,YAAA;EACA,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;AAAA,iBAWc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;;EAEf,KAAA;EAFe;EAIf,MAAA,EAAQ,SAAA;;EAER,OAAA,EAAS,SAAA;EAJT;EAMA,QAAA;AAAA;AAAA,UAGe,cAAA;EALN;EAOT,KAAA,EAAO,aAAA;EALC;EAOR,QAAA;EAJe;EAMf,YAAA;;EAEA,KAAA;EANA;EAQA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;;;;;;iBAgBc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/accordion/accordion.js

@@ -17,6 +17,11 @@ function ChevronIcon() {
 		})
 	});
 }
+/**
+* Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+* headers, triggers, and animated panels. Pass `multiple` to allow more than one
+* panel open at a time.
+*/
 function Accordion$1({ items, className, multiple = true, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion.Root, {
 		className: `${accordion_module_default.root} ${className ?? ""}`,

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  value: string;\n  header: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  multiple?: boolean;\n  defaultValue?: string[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AAoBA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}
+{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  /** Unique identifier for this panel. */\n  value: string;\n  /** Content rendered inside the trigger button. */\n  header: ReactNode;\n  /** Content revealed when the panel is expanded. */\n  content: ReactNode;\n  /** When `true`, the item cannot be toggled. */\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  /** Array of items to render as collapsible panels. */\n  items: AccordionItem[];\n  /** Allow multiple panels open at once. @default true */\n  multiple?: boolean;\n  /** Initially expanded panel values (uncontrolled). */\n  defaultValue?: string[];\n  /** Currently expanded panel values (controlled). */\n  value?: string[];\n  /** Called when the set of open panels changes. */\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled\n * headers, triggers, and animated panels. Pass `multiple` to allow more than one\n * panel open at a time.\n */\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AA6BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;;;;;;AASV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}

package/dist/alert-dialog/alert-dialog.d.ts

@@ -13,13 +13,19 @@ interface AlertAction {
   destructive?: boolean;
 }
 interface AlertDialogProps {
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the dialog is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Called when the dialog opens or closes. */
   onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  /** Element that opens the dialog when clicked. */
   trigger?: ReactElement;
   /** Optional icon shown above the title. */
   icon?: ReactNode;
+  /** Dialog heading text. */
   title: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   /**
    * Action buttons rendered right-aligned.
@@ -29,6 +35,11 @@ interface AlertDialogProps {
   actions: AlertAction[];
   className?: string;
 }
+/**
+ * A modal that requires a user response before continuing. Blocks interaction
+ * with the rest of the page until dismissed. Two actions render side-by-side;
+ * three or more stack vertically.
+ */
 declare function AlertDialog({
   trigger,
   icon,

package/dist/alert-dialog/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,KAAA,EAAO,SAAA;;EAEP,QAAA;EAH0B;EAK1B,OAAA;EAJgB;EAMhB,WAAA;AAAA;AAAA,UAGe,gBAAA;EACf,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EAJK;EAMf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,SAAA;EACP,WAAA,GAAc,SAAA;EAFP;;;;;EAQP,OAAA,EAAS,WAAA;EACT,SAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EAAc,OAAA;EAAS,IAAA;EAAM,KAAA;EAAO,WAAA;EAAa,OAAA;EAAS,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,KAAA,EAAO,SAAA;;EAEP,QAAA;EAH0B;EAK1B,OAAA;EAJgB;EAMhB,WAAA;AAAA;AAAA,UAGe,gBAAA;EALf;EAOA,IAAA;EALW;EAOX,WAAA;EAJe;EAMf,YAAA,IAAgB,IAAA,WAAe,YAAA;;EAE/B,OAAA,GAAU,YAAA;EAEH;EAAP,IAAA,GAAO,SAAA;EAIO;EAFd,KAAA,EAAO,SAAA;EAQa;EANpB,WAAA,GAAc,SAAA;EAZd;;;;;EAkBA,OAAA,EAAS,WAAA;EACT,SAAA;AAAA;;;;;;iBAQc,WAAA,CAAA;EAAc,OAAA;EAAS,IAAA;EAAM,KAAA;EAAO,WAAA;EAAa,OAAA;EAAS,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/alert-dialog/alert-dialog.js

@@ -3,6 +3,11 @@ import alert_dialog_module_default from "./alert-dialog.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/alert-dialog/alert-dialog.tsx
+/**
+* A modal that requires a user response before continuing. Blocks interaction
+* with the rest of the page until dismissed. Two actions render side-by-side;
+* three or more stack vertically.
+*/
 function AlertDialog$1({ trigger, icon, title, description, actions, className, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
 		onOpenChange,

package/dist/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { Button } from \"../button/button\";\nimport styles from \"./alert-dialog.module.css\";\n\nexport interface AlertAction {\n  label: ReactNode;\n  /** Called when the action button is clicked. The dialog closes automatically. */\n  onAction?: () => void;\n  /** Renders as a filled accent button — use for the primary confirm action. */\n  primary?: boolean;\n  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */\n  destructive?: boolean;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  /** Optional icon shown above the title. */\n  icon?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  /**\n   * Action buttons rendered right-aligned.\n   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).\n   * Use `destructive: true` to apply destructive tone to the confirm action.\n   */\n  actions: AlertAction[];\n  className?: string;\n}\n\nexport function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {\n  return (\n    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseAlertDialog.Trigger render={trigger} />}\n      <BaseAlertDialog.Portal>\n        <BaseAlertDialog.Backdrop className={styles.backdrop} />\n        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n          <div className={styles.header}>\n            {icon && <div className={styles.icon}>{icon}</div>}\n            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>\n            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}\n          </div>\n          <div className={styles.actions}>\n            {actions.map((action, i) => (\n              <BaseAlertDialog.Close\n                key={i}\n                render={\n                  <Button\n                    variant={action.primary ? \"solid\" : \"outline\"}\n                    tone={action.destructive ? \"destructive\" : \"primary\"}\n                    size=\"sm\"\n                    onClick={action.onAction}\n                  />\n                }\n              >\n                {action.label}\n              </BaseAlertDialog.Close>\n            ))}\n          </div>\n        </BaseAlertDialog.Popup>\n      </BaseAlertDialog.Portal>\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport { styles as AlertDialogStyles };\n"],"mappings":";;;;;AAiCA,SAAgBA,cAAY,EAAE,SAAS,MAAM,OAAO,aAAa,SAAS,WAAW,cAAc,GAAG,SAA2B;AAC/H,QACE,qBAACC,YAAgB,MAAjB;EAAoC;EAAuB,GAAI;YAA/D,CACG,WAAW,oBAACA,YAAgB,SAAjB,EAAyB,QAAQ,SAAW,CAAA,EACxD,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAWC,4BAAO,UAAY,CAAA,EACxD,qBAACD,YAAgB,OAAjB;GAAuB,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;aAAlE,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;cAAvB;KACG,QAAQ,oBAAC,OAAD;MAAK,WAAWA,4BAAO;gBAAO;MAAW,CAAA;KAClD,oBAACD,YAAgB,OAAjB;MAAuB,WAAWC,4BAAO;gBAAQ;MAA8B,CAAA;KAC9E,eAAe,oBAACD,YAAgB,aAAjB;MAA6B,WAAWC,4BAAO;gBAAc;MAA0C,CAAA;KACnH;OACN,oBAAC,OAAD;IAAK,WAAWA,4BAAO;cACpB,QAAQ,KAAK,QAAQ,MACpB,oBAACD,YAAgB,OAAjB;KAEE,QACE,oBAAC,QAAD;MACE,SAAS,OAAO,UAAU,UAAU;MACpC,MAAM,OAAO,cAAc,gBAAgB;MAC3C,MAAK;MACL,SAAS,OAAO;MAChB,CAAA;eAGH,OAAO;KACc,EAXjB,EAWiB,CACxB;IACE,CAAA,CACgB;KACD,EAAA,CAAA,CACJ"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { Button } from \"../button/button\";\nimport styles from \"./alert-dialog.module.css\";\n\nexport interface AlertAction {\n  label: ReactNode;\n  /** Called when the action button is clicked. The dialog closes automatically. */\n  onAction?: () => void;\n  /** Renders as a filled accent button — use for the primary confirm action. */\n  primary?: boolean;\n  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */\n  destructive?: boolean;\n}\n\nexport interface AlertDialogProps {\n  /** Controlled open state. */\n  open?: boolean;\n  /** Whether the dialog is initially open (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the dialog opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Element that opens the dialog when clicked. */\n  trigger?: ReactElement;\n  /** Optional icon shown above the title. */\n  icon?: ReactNode;\n  /** Dialog heading text. */\n  title: ReactNode;\n  /** Supplementary text below the title. */\n  description?: ReactNode;\n  /**\n   * Action buttons rendered right-aligned.\n   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).\n   * Use `destructive: true` to apply destructive tone to the confirm action.\n   */\n  actions: AlertAction[];\n  className?: string;\n}\n\n/**\n * A modal that requires a user response before continuing. Blocks interaction\n * with the rest of the page until dismissed. Two actions render side-by-side;\n * three or more stack vertically.\n */\nexport function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {\n  return (\n    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseAlertDialog.Trigger render={trigger} />}\n      <BaseAlertDialog.Portal>\n        <BaseAlertDialog.Backdrop className={styles.backdrop} />\n        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n          <div className={styles.header}>\n            {icon && <div className={styles.icon}>{icon}</div>}\n            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>\n            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}\n          </div>\n          <div className={styles.actions}>\n            {actions.map((action, i) => (\n              <BaseAlertDialog.Close\n                key={i}\n                render={\n                  <Button\n                    variant={action.primary ? \"solid\" : \"outline\"}\n                    tone={action.destructive ? \"destructive\" : \"primary\"}\n                    size=\"sm\"\n                    onClick={action.onAction}\n                  />\n                }\n              >\n                {action.label}\n              </BaseAlertDialog.Close>\n            ))}\n          </div>\n        </BaseAlertDialog.Popup>\n      </BaseAlertDialog.Portal>\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport { styles as AlertDialogStyles };\n"],"mappings":";;;;;;;;;;AA4CA,SAAgBA,cAAY,EAAE,SAAS,MAAM,OAAO,aAAa,SAAS,WAAW,cAAc,GAAG,SAA2B;AAC/H,QACE,qBAACC,YAAgB,MAAjB;EAAoC;EAAuB,GAAI;YAA/D,CACG,WAAW,oBAACA,YAAgB,SAAjB,EAAyB,QAAQ,SAAW,CAAA,EACxD,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAWC,4BAAO,UAAY,CAAA,EACxD,qBAACD,YAAgB,OAAjB;GAAuB,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;aAAlE,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;cAAvB;KACG,QAAQ,oBAAC,OAAD;MAAK,WAAWA,4BAAO;gBAAO;MAAW,CAAA;KAClD,oBAACD,YAAgB,OAAjB;MAAuB,WAAWC,4BAAO;gBAAQ;MAA8B,CAAA;KAC9E,eAAe,oBAACD,YAAgB,aAAjB;MAA6B,WAAWC,4BAAO;gBAAc;MAA0C,CAAA;KACnH;OACN,oBAAC,OAAD;IAAK,WAAWA,4BAAO;cACpB,QAAQ,KAAK,QAAQ,MACpB,oBAACD,YAAgB,OAAjB;KAEE,QACE,oBAAC,QAAD;MACE,SAAS,OAAO,UAAU,UAAU;MACpC,MAAM,OAAO,cAAc,gBAAgB;MAC3C,MAAK;MACL,SAAS,OAAO;MAChB,CAAA;eAGH,OAAO;KACc,EAXjB,EAWiB,CACxB;IACE,CAAA,CACgB;KACD,EAAA,CAAA,CACJ"}

package/dist/badge/badge.d.ts

@@ -5,9 +5,15 @@ import styles from "./badge.module.css";
 //#region src/badge/badge.d.ts
 type BadgeVariant = "default" | "solid" | "soft" | "success" | "warning" | "error" | "info";
 interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+  /** Visual style and semantic colour. @default "default" */
   variant?: BadgeVariant;
+  /** Show a small coloured dot indicator before the label. */
   dot?: boolean;
 }
+/**
+ * Compact label for status, counts, and categories. A plain styled `<span>` —
+ * no base-ui dependency.
+ */
 declare function Badge({
   variant,
   dot,

package/dist/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;;;KAGY,YAAA;AAAA,UAEK,UAAA,SAAmB,wBAAA;EAClC,OAAA,GAAU,YAAA;EACV,GAAA;AAAA;AAAA,iBAGc,KAAA,CAAA;EAAQ,OAAA;EAAqB,GAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;;;KAGY,YAAA;AAAA,UAEK,UAAA,SAAmB,wBAAA;;EAElC,OAAA,GAAU,YAAA;EAJY;EAMtB,GAAA;AAAA;;AAJF;;;iBAWgB,KAAA,CAAA;EAAQ,OAAA;EAAqB,GAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/badge/badge.js

@@ -1,6 +1,10 @@
 import badge_module_default from "./badge.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/badge/badge.tsx
+/**
+* Compact label for status, counts, and categories. A plain styled `<span>` —
+* no base-ui dependency.
+*/
 function Badge({ variant = "default", dot = false, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: [

package/dist/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["styles"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport styles from \"./badge.module.css\";\n\nexport type BadgeVariant = \"default\" | \"solid\" | \"soft\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  variant?: BadgeVariant;\n  dot?: boolean;\n}\n\nexport function Badge({ variant = \"default\", dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={[styles.root, styles[`variant-${variant}`], className ?? \"\"].filter(Boolean).join(\" \")} {...props}>\n      {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n}\nexport { styles as BadgeStyles };\n"],"mappings":";;;AAUA,SAAgB,MAAM,EAAE,UAAU,WAAW,MAAM,OAAO,WAAW,UAAU,GAAG,SAAqB;AACrG,QACE,qBAAC,QAAD;EAAM,WAAW;GAACA,qBAAO;GAAMA,qBAAO,WAAW;GAAY,aAAa;GAAG,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA7G,CACG,OAAO,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAK,eAAY;GAAS,CAAA,EACzD,SACI"}
+{"version":3,"file":"badge.js","names":["styles"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport styles from \"./badge.module.css\";\n\nexport type BadgeVariant = \"default\" | \"solid\" | \"soft\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  /** Visual style and semantic colour. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Show a small coloured dot indicator before the label. */\n  dot?: boolean;\n}\n\n/**\n * Compact label for status, counts, and categories. A plain styled `<span>` —\n * no base-ui dependency.\n */\nexport function Badge({ variant = \"default\", dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={[styles.root, styles[`variant-${variant}`], className ?? \"\"].filter(Boolean).join(\" \")} {...props}>\n      {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n}\nexport { styles as BadgeStyles };\n"],"mappings":";;;;;;;AAgBA,SAAgB,MAAM,EAAE,UAAU,WAAW,MAAM,OAAO,WAAW,UAAU,GAAG,SAAqB;AACrG,QACE,qBAAC,QAAD;EAAM,WAAW;GAACA,qBAAO;GAAMA,qBAAO,WAAW;GAAY,aAAa;GAAG,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA7G,CACG,OAAO,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAK,eAAY;GAAS,CAAA,EACzD,SACI"}

package/dist/button/button.d.ts

@@ -7,10 +7,13 @@ type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
 type ButtonTone = "primary" | "secondary" | "destructive" | "success" | "warning";
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  /** Visual shape — filled, tinted, outlined, or borderless. @default "solid" */
   variant?: ButtonVariant;
-  /** Semantic color. Defaults to "primary". */
+  /** Semantic colour. @default "primary" */
   tone?: ButtonTone | undefined;
+  /** Controls padding and font size. @default "md" */
   size?: ButtonSize | undefined;
+  /** Shows a spinner overlay and disables interaction. */
   loading?: boolean | undefined;
   /**
    * Text shown in place of children while loading.
@@ -18,10 +21,18 @@ interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
    * When omitted, children stay rendered invisibly — width stays stable.
    */
   loadingText?: string | undefined;
+  /** Renders as a square button with equal padding on all sides. */
   iconOnly?: boolean | undefined;
+  /** Custom render element forwarded to base-ui Button. */
   render?: ReactElement | undefined;
+  /** Use a native `<button>` element. @default true */
   nativeButton?: boolean | undefined;
 }
+/**
+ * Pressable button with multiple variants, tones, and sizes. Composes
+ * `@base-ui/react` Button with focus management and disabled-while-loading.
+ * Supports a spinner overlay that preserves button width.
+ */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button, ButtonProps, ButtonSize, ButtonTone, ButtonVariant, styles };

package/dist/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;KAKY,aAAA;AAAA,KACA,UAAA;AAAA,KACA,UAAA;AAAA,UAEK,WAAA,SAAoB,wBAAA;EACnC,OAAA,GAAU,aAAA;;EAEV,IAAA,GAAO,UAAA;EACP,IAAA,GAAO,UAAA;EACP,OAAA;EARoB;;;;AACtB;EAaE,WAAA;EACA,QAAA;EACA,MAAA,GAAS,YAAA;EACT,YAAA;AAAA;AAAA,cAGW,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;KAKY,aAAA;AAAA,KACA,UAAA;AAAA,KACA,UAAA;AAAA,UAEK,WAAA,SAAoB,wBAAA;EAJZ;EAMvB,OAAA,GAAU,aAAA;EANa;EAQvB,IAAA,GAAO,UAAA;EAPG;EASV,IAAA,GAAO,UAAA;;EAEP,OAAA;EAXoB;AACtB;;;;EAgBE,WAAA;EAde;EAgBf,QAAA;;EAEA,MAAA,GAAS,YAAA;EAdF;EAgBP,YAAA;AAAA;;;;;;cAQW,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/button/button.js

@@ -3,6 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "@base-ui/react/button";
 //#region src/button/button.tsx
+/**
+* Pressable button with multiple variants, tones, and sizes. Composes
+* `@base-ui/react` Button with focus management and disabled-while-loading.
+* Supports a spinner overlay that preserves button width.
+*/
 const Button$1 = forwardRef(function Button$2({ variant = "solid", tone = "primary", size = "md", loading = false, loadingText, iconOnly = false, nativeButton = true, disabled, className, children, render, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Button","BaseButton","styles"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement } from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"solid\" | \"soft\" | \"outline\" | \"ghost\";\nexport type ButtonTone = \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  /** Semantic color. Defaults to \"primary\". */\n  tone?: ButtonTone | undefined;\n  size?: ButtonSize | undefined;\n  loading?: boolean | undefined;\n  /**\n   * Text shown in place of children while loading.\n   * When provided the button width adapts to this text (variable width).\n   * When omitted, children stay rendered invisibly — width stays stable.\n   */\n  loadingText?: string | undefined;\n  iconOnly?: boolean | undefined;\n  render?: ReactElement | undefined;\n  nativeButton?: boolean | undefined;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"solid\",\n    tone = \"primary\",\n    size = \"md\",\n    loading = false,\n    loadingText,\n    iconOnly = false,\n    nativeButton = true,\n    disabled,\n    className,\n    children,\n    render,\n    ...props\n  },\n  ref,\n) {\n  const classes = [\n    styles.root,\n    styles[`variant-${variant}`],\n    styles[`tone-${tone}`],\n    styles[`size-${size}`],\n    iconOnly ? styles[\"icon-only\"] : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseButton ref={ref} className={classes} disabled={disabled ?? loading} render={render} nativeButton={nativeButton} {...props}>\n      <span className={`${styles.loader} ${loading && !loadingText ? styles[\"loader-visible\"] : \"\"}`} aria-hidden=\"true\">\n        <span className={styles.spinner} />\n      </span>\n      <span className={loading && !loadingText ? styles[\"content-loading\"] : undefined}>\n        {loading && loadingText ? loadingText : children}\n      </span>\n    </BaseButton>\n  );\n});\n\nexport { styles as ButtonStyles };\n"],"mappings":";;;;;AA0BA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EACE,UAAU,SACV,OAAO,WACP,OAAO,MACP,UAAU,OACV,aACA,WAAW,OACX,eAAe,MACf,UACA,WACA,UACA,QACA,GAAG,SAEL,KACA;AAYA,QACE,qBAACC,QAAD;EAAiB;EAAK,WAZR;GACdC,sBAAO;GACPA,sBAAO,WAAW;GAClBA,sBAAO,QAAQ;GACfA,sBAAO,QAAQ;GACf,WAAWA,sBAAO,eAAe;GACjC,aAAa;GACd,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGgC,UAAU,YAAY;EAAiB;EAAsB;EAAc,GAAI;YAAzH,CACE,oBAAC,QAAD;GAAM,WAAW,GAAGA,sBAAO,OAAO,GAAG,WAAW,CAAC,cAAcA,sBAAO,oBAAoB;GAAM,eAAY;aAC1G,oBAAC,QAAD,EAAM,WAAWA,sBAAO,SAAW,CAAA;GAC9B,CAAA,EACP,oBAAC,QAAD;GAAM,WAAW,WAAW,CAAC,cAAcA,sBAAO,qBAAqB,KAAA;aACpE,WAAW,cAAc,cAAc;GACnC,CAAA,CACI;;EAEf"}
+{"version":3,"file":"button.js","names":["Button","BaseButton","styles"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement } from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"solid\" | \"soft\" | \"outline\" | \"ghost\";\nexport type ButtonTone = \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Visual shape — filled, tinted, outlined, or borderless. @default \"solid\" */\n  variant?: ButtonVariant;\n  /** Semantic colour. @default \"primary\" */\n  tone?: ButtonTone | undefined;\n  /** Controls padding and font size. @default \"md\" */\n  size?: ButtonSize | undefined;\n  /** Shows a spinner overlay and disables interaction. */\n  loading?: boolean | undefined;\n  /**\n   * Text shown in place of children while loading.\n   * When provided the button width adapts to this text (variable width).\n   * When omitted, children stay rendered invisibly — width stays stable.\n   */\n  loadingText?: string | undefined;\n  /** Renders as a square button with equal padding on all sides. */\n  iconOnly?: boolean | undefined;\n  /** Custom render element forwarded to base-ui Button. */\n  render?: ReactElement | undefined;\n  /** Use a native `<button>` element. @default true */\n  nativeButton?: boolean | undefined;\n}\n\n/**\n * Pressable button with multiple variants, tones, and sizes. Composes\n * `@base-ui/react` Button with focus management and disabled-while-loading.\n * Supports a spinner overlay that preserves button width.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"solid\",\n    tone = \"primary\",\n    size = \"md\",\n    loading = false,\n    loadingText,\n    iconOnly = false,\n    nativeButton = true,\n    disabled,\n    className,\n    children,\n    render,\n    ...props\n  },\n  ref,\n) {\n  const classes = [\n    styles.root,\n    styles[`variant-${variant}`],\n    styles[`tone-${tone}`],\n    styles[`size-${size}`],\n    iconOnly ? styles[\"icon-only\"] : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseButton ref={ref} className={classes} disabled={disabled ?? loading} render={render} nativeButton={nativeButton} {...props}>\n      <span className={`${styles.loader} ${loading && !loadingText ? styles[\"loader-visible\"] : \"\"}`} aria-hidden=\"true\">\n        <span className={styles.spinner} />\n      </span>\n      <span className={loading && !loadingText ? styles[\"content-loading\"] : undefined}>\n        {loading && loadingText ? loadingText : children}\n      </span>\n    </BaseButton>\n  );\n});\n\nexport { styles as ButtonStyles };\n"],"mappings":";;;;;;;;;;AAqCA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EACE,UAAU,SACV,OAAO,WACP,OAAO,MACP,UAAU,OACV,aACA,WAAW,OACX,eAAe,MACf,UACA,WACA,UACA,QACA,GAAG,SAEL,KACA;AAYA,QACE,qBAACC,QAAD;EAAiB;EAAK,WAZR;GACdC,sBAAO;GACPA,sBAAO,WAAW;GAClBA,sBAAO,QAAQ;GACfA,sBAAO,QAAQ;GACf,WAAWA,sBAAO,eAAe;GACjC,aAAa;GACd,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGgC,UAAU,YAAY;EAAiB;EAAsB;EAAc,GAAI;YAAzH,CACE,oBAAC,QAAD;GAAM,WAAW,GAAGA,sBAAO,OAAO,GAAG,WAAW,CAAC,cAAcA,sBAAO,oBAAoB;GAAM,eAAY;aAC1G,oBAAC,QAAD,EAAM,WAAWA,sBAAO,SAAW,CAAA;GAC9B,CAAA,EACP,oBAAC,QAAD;GAAM,WAAW,WAAW,CAAC,cAAcA,sBAAO,qBAAqB,KAAA;aACpE,WAAW,cAAc,cAAc;GACnC,CAAA,CACI;;EAEf"}

package/dist/card/card.d.ts

@@ -4,14 +4,21 @@ import styles from "./card.module.css";
 
 //#region src/card/card.d.ts
 interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /** Apply a raised shadow for layered surfaces. */
   elevated?: boolean;
+  /** Add hover/active states for clickable cards. */
   interactive?: boolean;
 }
 interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   /** Card heading rendered in the header area. */
   heading?: ReactNode;
+  /** Secondary text below the heading. */
   description?: ReactNode;
 }
+/**
+ * Surface container with optional header, body, and footer slots.
+ * Pure HTML — no base-ui dependency.
+ */
 declare function Card({
   elevated,
   interactive,
@@ -19,6 +26,7 @@ declare function Card({
   children,
   ...props
 }: CardProps): react_jsx_runtime0.JSX.Element;
+/** Header area with optional heading and description. */
 declare function CardHeader({
   heading,
   description,
@@ -26,11 +34,13 @@ declare function CardHeader({
   children,
   ...props
 }: CardHeaderProps): react_jsx_runtime0.JSX.Element;
+/** Padded body content area. */
 declare function CardBody({
   className,
   children,
   ...props
 }: ComponentPropsWithoutRef<"div">): react_jsx_runtime0.JSX.Element;
+/** Footer area, typically used for actions. */
 declare function CardFooter({
   className,
   children,

package/dist/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;;;UAGiB,SAAA,SAAkB,wBAAA;EACjC,QAAA;EACA,WAAA;AAAA;AAAA,UAIe,eAAA,SAAwB,IAAA,CAAK,wBAAA;;EAE5C,OAAA,GAAU,SAAA;EACV,WAAA,GAAc,SAAA;AAAA;AAAA,iBAGA,IAAA,CAAA;EAAO,QAAA;EAAU,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaxE,UAAA,CAAA;EAAa,OAAA;EAAS,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUnF,QAAA,CAAA;EAAW,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ3E,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;;;UAGiB,SAAA,SAAkB,wBAAA;;EAEjC,QAAA;EAFe;EAIf,WAAA;AAAA;AAAA,UAIe,eAAA,SAAwB,IAAA,CAAK,wBAAA;EARX;EAUjC,OAAA,GAAU,SAAA;EANV;EAQA,WAAA,GAAc,SAAA;AAAA;AAJhB;;;;AAAA,iBAWgB,IAAA,CAAA;EAAO,QAAA;EAAU,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAcxE,UAAA,CAAA;EAAa,OAAA;EAAS,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAWnF,QAAA,CAAA;EAAW,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAS3E,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/card/card.js

@@ -1,6 +1,10 @@
 import card_module_default from "./card.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/card/card.tsx
+/**
+* Surface container with optional header, body, and footer slots.
+* Pure HTML — no base-ui dependency.
+*/
 function Card({ elevated, interactive, className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: [
@@ -13,6 +17,7 @@ function Card({ elevated, interactive, className, children, ...props }) {
 		children
 	});
 }
+/** Header area with optional heading and description. */
 function CardHeader({ heading, description, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${card_module_default.header} ${className ?? ""}`,
@@ -30,6 +35,7 @@ function CardHeader({ heading, description, className, children, ...props }) {
 		]
 	});
 }
+/** Padded body content area. */
 function CardBody({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `${card_module_default.body} ${className ?? ""}`,
@@ -37,6 +43,7 @@ function CardBody({ className, children, ...props }) {
 		children
 	});
 }
+/** Footer area, typically used for actions. */
 function CardFooter({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `${card_module_default.footer} ${className ?? ""}`,

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["styles"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport styles from \"./card.module.css\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  elevated?: boolean;\n  interactive?: boolean;\n}\n\n// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`\nexport interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** Card heading rendered in the header area. */\n  heading?: ReactNode;\n  description?: ReactNode;\n}\n\nexport function Card({ elevated, interactive, className, children, ...props }: CardProps) {\n  return (\n    <div\n      className={[styles.root, elevated ? styles[\"root-elevated\"] : \"\", interactive ? styles[\"root-interactive\"] : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {\n  return (\n    <div className={`${styles.header} ${className ?? \"\"}`} {...props}>\n      {heading && <span className={styles.title}>{heading}</span>}\n      {description && <span className={styles.description}>{description}</span>}\n      {children}\n    </div>\n  );\n}\n\nexport function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.body} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.footer} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\nexport { styles as CardStyles };\n"],"mappings":";;;AAeA,SAAgB,KAAK,EAAE,UAAU,aAAa,WAAW,UAAU,GAAG,SAAoB;AACxF,QACE,oBAAC,OAAD;EACE,WAAW;GAACA,oBAAO;GAAM,WAAWA,oBAAO,mBAAmB;GAAI,cAAcA,oBAAO,sBAAsB;GAAI,aAAa;GAAG,CAC9H,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,SAA0B;AACnG,QACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;YAA3D;GACG,WAAW,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAQ;IAAe,CAAA;GAC1D,eAAe,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAc;IAAmB,CAAA;GACxE;GACG;;;AAIV,SAAgB,SAAS,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC3F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EACtD;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC7F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EACxD;EACG,CAAA"}
+{"version":3,"file":"card.js","names":["styles"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport styles from \"./card.module.css\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Apply a raised shadow for layered surfaces. */\n  elevated?: boolean;\n  /** Add hover/active states for clickable cards. */\n  interactive?: boolean;\n}\n\n// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`\nexport interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** Card heading rendered in the header area. */\n  heading?: ReactNode;\n  /** Secondary text below the heading. */\n  description?: ReactNode;\n}\n\n/**\n * Surface container with optional header, body, and footer slots.\n * Pure HTML — no base-ui dependency.\n */\nexport function Card({ elevated, interactive, className, children, ...props }: CardProps) {\n  return (\n    <div\n      className={[styles.root, elevated ? styles[\"root-elevated\"] : \"\", interactive ? styles[\"root-interactive\"] : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Header area with optional heading and description. */\nexport function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {\n  return (\n    <div className={`${styles.header} ${className ?? \"\"}`} {...props}>\n      {heading && <span className={styles.title}>{heading}</span>}\n      {description && <span className={styles.description}>{description}</span>}\n      {children}\n    </div>\n  );\n}\n\n/** Padded body content area. */\nexport function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.body} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\n/** Footer area, typically used for actions. */\nexport function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.footer} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\nexport { styles as CardStyles };\n"],"mappings":";;;;;;;AAsBA,SAAgB,KAAK,EAAE,UAAU,aAAa,WAAW,UAAU,GAAG,SAAoB;AACxF,QACE,oBAAC,OAAD;EACE,WAAW;GAACA,oBAAO;GAAM,WAAWA,oBAAO,mBAAmB;GAAI,cAAcA,oBAAO,sBAAsB;GAAI,aAAa;GAAG,CAC9H,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;;;AAKV,SAAgB,WAAW,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,SAA0B;AACnG,QACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;YAA3D;GACG,WAAW,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAQ;IAAe,CAAA;GAC1D,eAAe,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAc;IAAmB,CAAA;GACxE;GACG;;;;AAKV,SAAgB,SAAS,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC3F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EACtD;EACG,CAAA;;;AAKV,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC7F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EACxD;EACG,CAAA"}