@brijbyte/agentic-ui 0.0.2 → 0.0.3

package/dist/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./accordion.module.css";
 
 //#region src/accordion/accordion.d.ts

package/dist/accordion/accordion.js

@@ -1,6 +1,6 @@
 import accordion_module_default from "./accordion.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/accordion/accordion.tsx
 function ChevronIcon() {
 	return /* @__PURE__ */ jsx("svg", {

package/dist/accordion/parts.d.ts

@@ -1,6 +1,6 @@
+import { Accordion } from "@base-ui/react/accordion";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import { Accordion } from "@base-ui/react/accordion";
 
 //#region src/accordion/parts.d.ts
 type BaseItemProps = ComponentPropsWithoutRef<typeof Accordion.Item>;

package/dist/accordion/parts.js

@@ -1,7 +1,7 @@
 import accordion_module_default from "./accordion.module.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 //#region src/accordion/parts.tsx
 /**
 * Styled primitives for Accordion.

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./alert-dialog.module.css";
 
 //#region src/alert-dialog/alert-dialog.d.ts

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

@@ -1,7 +1,7 @@
 import { Button } from "../button/button.js";
 import alert_dialog_module_default from "./alert-dialog.module.js";
-import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/alert-dialog/alert-dialog.tsx
 function AlertDialog$1({ trigger, icon, title, description, actions, className, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialog.Root, {

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

@@ -1,6 +1,6 @@
-import { AlertDialog } from "@base-ui/react/alert-dialog";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 
 //#region src/alert-dialog/parts.d.ts
 type BaseBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;

package/dist/alert-dialog/parts.js

@@ -1,7 +1,7 @@
 import alert_dialog_module_default from "./alert-dialog.module.js";
-import { AlertDialog } from "@base-ui/react/alert-dialog";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/alert-dialog/parts.tsx
 /**
 * Styled primitives for AlertDialog.

package/dist/badge/badge.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
 import styles from "./badge.module.css";
 
 //#region src/badge/badge.d.ts

package/dist/button/button.css

@@ -86,9 +86,10 @@
   }
 
   .tone-primary_4j5AgW {
-    --btn-color: var(--color-accent);
+    --btn-color: var(--color-accent-solid);
     --btn-color-hover: var(--color-accent-hover);
     --btn-color-pressed: var(--color-accent-pressed);
+    --btn-text-color: var(--color-accent-text);
     --btn-tint: var(--color-accent-tint);
     --btn-tint-hover: var(--color-accent-tint-hover);
     --btn-on-color: var(--color-on-accent);
@@ -98,6 +99,7 @@
     --btn-color: var(--color-secondary);
     --btn-color-hover: var(--color-primary);
     --btn-color-pressed: var(--color-primary);
+    --btn-text-color: var(--color-secondary);
     --btn-tint: var(--color-hover);
     --btn-tint-hover: var(--color-active);
     --btn-on-color: var(--color-canvas);
@@ -107,27 +109,30 @@
     --btn-color: var(--color-error-solid);
     --btn-color-hover: var(--color-error-solid);
     --btn-color-pressed: var(--color-error-solid);
+    --btn-text-color: var(--color-error-text);
     --btn-tint: var(--color-error-bg);
     --btn-tint-hover: var(--color-error-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-error-on-solid);
   }
 
   .tone-success_4j5AgW {
     --btn-color: var(--color-success-solid);
     --btn-color-hover: var(--color-success-solid);
     --btn-color-pressed: var(--color-success-solid);
+    --btn-text-color: var(--color-success-text);
     --btn-tint: var(--color-success-bg);
     --btn-tint-hover: var(--color-success-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-success-on-solid);
   }
 
   .tone-warning_4j5AgW {
     --btn-color: var(--color-warning-solid);
     --btn-color-hover: var(--color-warning-solid);
     --btn-color-pressed: var(--color-warning-solid);
+    --btn-text-color: var(--color-warning-text);
     --btn-tint: var(--color-warning-bg);
     --btn-tint-hover: var(--color-warning-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-warning-on-solid);
   }
 
   .variant-solid_4j5AgW {
@@ -162,7 +167,7 @@
 
   .variant-soft_4j5AgW {
     background-color: var(--btn-tint);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
     border-color: #0000;
   }
 
@@ -181,10 +186,15 @@
     background-color: #0000;
   }
 
+  .variant-outline_4j5AgW:not(.tone-secondary_4j5AgW) {
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
+  }
+
   .variant-outline_4j5AgW:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
 
   .variant-outline_4j5AgW:active:not([data-disabled]), .variant-outline_4j5AgW[data-pressed]:not([data-disabled]) {
@@ -197,9 +207,13 @@
     border-color: #0000;
   }
 
+  .variant-ghost_4j5AgW:not(.tone-secondary_4j5AgW) {
+    color: var(--btn-text-color);
+  }
+
   .variant-ghost_4j5AgW:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
 
   .variant-ghost_4j5AgW:active:not([data-disabled]), .variant-ghost_4j5AgW[data-pressed]:not([data-disabled]) {

package/dist/button/button.d.ts

@@ -9,18 +9,18 @@ type ButtonSize = "xs" | "sm" | "md" | "lg";
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
   variant?: ButtonVariant;
   /** Semantic color. Defaults to "primary". */
-  tone?: ButtonTone;
-  size?: ButtonSize;
-  loading?: boolean;
+  tone?: ButtonTone | undefined;
+  size?: ButtonSize | undefined;
+  loading?: boolean | undefined;
   /**
    * Text shown in place of children while loading.
    * When provided the button width adapts to this text (variable width).
    * When omitted, children stay rendered invisibly — width stays stable.
    */
-  loadingText?: string;
-  iconOnly?: boolean;
-  render?: ReactElement;
-  nativeButton?: boolean;
+  loadingText?: string | undefined;
+  iconOnly?: boolean | undefined;
+  render?: ReactElement | undefined;
+  nativeButton?: boolean | undefined;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 //#endregion

package/dist/button/button.js

@@ -1,7 +1,7 @@
 import button_module_default from "./button.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "@base-ui/react/button";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/button/button.tsx
 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, {

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;\n  size?: ButtonSize;\n  loading?: boolean;\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;\n  iconOnly?: boolean;\n  render?: ReactElement;\n  nativeButton?: boolean;\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  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"}

package/dist/button/button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.module.js","names":[],"sources":["../../src/button/button.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-normal);\n    line-height: 1;\n    border-radius: var(--radius-md);\n    border: var(--border-width-base) solid transparent;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      opacity var(--duration-fast) var(--easing-standard),\n      transform 100ms var(--easing-ease-out);\n    outline: none;\n    position: relative;\n  }\n  .root:active:not([data-disabled]) {\n    transform: scale(0.97);\n  }\n  .root:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .root[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.44;\n    pointer-events: none;\n  }\n  /* ─── Sizes ──────────────────────────────────────────────────────── */\n  .size-xs {\n    height: 22px;\n    padding-inline: var(--space-2);\n    font-size: var(--font-size-xs);\n    border-radius: var(--radius-sm);\n  }\n  .size-sm {\n    height: 26px;\n    padding-inline: var(--space-2-5);\n    font-size: var(--font-size-sm);\n  }\n  .size-md {\n    height: 30px;\n    padding-inline: var(--space-3);\n    font-size: var(--font-size-md);\n  }\n  .size-lg {\n    height: 36px;\n    padding-inline: var(--space-4);\n    font-size: var(--font-size-lg);\n    border-radius: var(--radius-lg);\n  }\n  /* Icon-only */\n  .icon-only.size-xs {\n    width: 22px;\n    padding-inline: 0;\n  }\n  .icon-only.size-sm {\n    width: 26px;\n    padding-inline: 0;\n  }\n  .icon-only.size-md {\n    width: 30px;\n    padding-inline: 0;\n  }\n  .icon-only.size-lg {\n    width: 36px;\n    padding-inline: 0;\n  }\n  /* ─── Tones — set scoped color tokens ────────────────────────────── */\n  /*\n   * Each tone exposes four custom properties consumed by the variants below:\n   *   --btn-color         solid bg / soft text / outline+ghost hover text\n   *   --btn-color-hover   solid bg hover\n   *   --btn-color-pressed solid bg pressed\n   *   --btn-tint          soft bg\n   *   --btn-tint-hover    soft bg hover\n   *   --btn-on-color      text on solid bg\n   */\n  .tone-primary {\n    --btn-color: var(--color-accent);\n    --btn-color-hover: var(--color-accent-hover);\n    --btn-color-pressed: var(--color-accent-pressed);\n    --btn-tint: var(--color-accent-tint);\n    --btn-tint-hover: var(--color-accent-tint-hover);\n    --btn-on-color: var(--color-on-accent);\n  }\n  .tone-secondary {\n    --btn-color: var(--color-secondary);\n    --btn-color-hover: var(--color-primary);\n    --btn-color-pressed: var(--color-primary);\n    --btn-tint: var(--color-hover);\n    --btn-tint-hover: var(--color-active);\n    --btn-on-color: var(--color-canvas);\n  }\n  .tone-destructive {\n    --btn-color: var(--color-error-solid);\n    --btn-color-hover: var(--color-error-solid);\n    --btn-color-pressed: var(--color-error-solid);\n    --btn-tint: var(--color-error-bg);\n    --btn-tint-hover: var(--color-error-bg);\n    --btn-on-color: #ffffff;\n  }\n  .tone-success {\n    --btn-color: var(--color-success-solid);\n    --btn-color-hover: var(--color-success-solid);\n    --btn-color-pressed: var(--color-success-solid);\n    --btn-tint: var(--color-success-bg);\n    --btn-tint-hover: var(--color-success-bg);\n    --btn-on-color: #ffffff;\n  }\n  .tone-warning {\n    --btn-color: var(--color-warning-solid);\n    --btn-color-hover: var(--color-warning-solid);\n    --btn-color-pressed: var(--color-warning-solid);\n    --btn-tint: var(--color-warning-bg);\n    --btn-tint-hover: var(--color-warning-bg);\n    --btn-on-color: #ffffff;\n  }\n  /* ─── Variants — consume tone tokens ────────────────────────────── */\n  .variant-solid {\n    background-color: var(--btn-color);\n    border-color: var(--btn-color);\n    color: var(--btn-on-color);\n  }\n  .variant-solid:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: brightness(0.92);\n  }\n  .variant-solid:active:not([data-disabled]),\n  .variant-solid[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: brightness(0.84);\n  }\n  /* primary solid gets its own hover tokens instead of filter */\n  .variant-solid.tone-primary:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: none;\n  }\n  .variant-solid.tone-primary:active:not([data-disabled]),\n  .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: none;\n  }\n  .variant-soft {\n    background-color: var(--btn-tint);\n    border-color: transparent;\n    color: var(--btn-color);\n  }\n  .variant-soft:hover:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n  }\n  .variant-soft:active:not([data-disabled]),\n  .variant-soft[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n    filter: brightness(0.95);\n  }\n  .variant-outline {\n    background-color: transparent;\n    border-color: var(--color-line-strong);\n    color: var(--color-primary);\n  }\n  .variant-outline:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    border-color: var(--btn-color);\n    color: var(--btn-color);\n  }\n  .variant-outline:active:not([data-disabled]),\n  .variant-outline[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  .variant-ghost {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-secondary);\n  }\n  .variant-ghost:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    color: var(--btn-color);\n  }\n  .variant-ghost:active:not([data-disabled]),\n  .variant-ghost[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  /* ─── Loader ─────────────────────────────────────────────────────── */\n  /* Always in the DOM, always position:absolute so it never affects layout */\n  .loader {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .loader-visible {\n    opacity: 1;\n  }\n  .content-loading {\n    visibility: hidden;\n  }\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .spinner {\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: spin 0.6s linear infinite;\n    opacity: 0.7;\n  }\n}\n"],"mappings":";AAwCA,IAAA,wBAAY;CAAI,mBAAA;CAAA,aAAA;CAAA,UAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,WAAA;CAAA,oBAAA;CAAA,gBAAA;CAAA,kBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}
+{"version":3,"file":"button.module.js","names":[],"sources":["../../src/button/button.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-normal);\n    line-height: 1;\n    border-radius: var(--radius-md);\n    border: var(--border-width-base) solid transparent;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      opacity var(--duration-fast) var(--easing-standard),\n      transform 100ms var(--easing-ease-out);\n    outline: none;\n    position: relative;\n  }\n  .root:active:not([data-disabled]) {\n    transform: scale(0.97);\n  }\n  .root:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .root[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.44;\n    pointer-events: none;\n  }\n  /* ─── Sizes ──────────────────────────────────────────────────────── */\n  .size-xs {\n    height: 22px;\n    padding-inline: var(--space-2);\n    font-size: var(--font-size-xs);\n    border-radius: var(--radius-sm);\n  }\n  .size-sm {\n    height: 26px;\n    padding-inline: var(--space-2-5);\n    font-size: var(--font-size-sm);\n  }\n  .size-md {\n    height: 30px;\n    padding-inline: var(--space-3);\n    font-size: var(--font-size-md);\n  }\n  .size-lg {\n    height: 36px;\n    padding-inline: var(--space-4);\n    font-size: var(--font-size-lg);\n    border-radius: var(--radius-lg);\n  }\n  /* Icon-only */\n  .icon-only.size-xs {\n    width: 22px;\n    padding-inline: 0;\n  }\n  .icon-only.size-sm {\n    width: 26px;\n    padding-inline: 0;\n  }\n  .icon-only.size-md {\n    width: 30px;\n    padding-inline: 0;\n  }\n  .icon-only.size-lg {\n    width: 36px;\n    padding-inline: 0;\n  }\n  /* ─── Tones — set scoped color tokens ────────────────────────────── */\n  /*\n   * Each tone exposes scoped custom properties consumed by the variants below:\n   *   --btn-color         solid bg color\n   *   --btn-color-hover   solid bg on hover\n   *   --btn-color-pressed solid bg on press\n   *   --btn-text-color    text color for soft / outline / ghost variants\n   *                       (may differ from --btn-color for contrast on tinted surfaces)\n   *   --btn-tint          soft bg\n   *   --btn-tint-hover    soft bg on hover\n   *   --btn-on-color      text on solid bg\n   */\n  .tone-primary {\n    --btn-color: var(--color-accent-solid);\n    --btn-color-hover: var(--color-accent-hover);\n    --btn-color-pressed: var(--color-accent-pressed);\n    --btn-text-color: var(--color-accent-text);\n    --btn-tint: var(--color-accent-tint);\n    --btn-tint-hover: var(--color-accent-tint-hover);\n    --btn-on-color: var(--color-on-accent);\n  }\n  .tone-secondary {\n    --btn-color: var(--color-secondary);\n    --btn-color-hover: var(--color-primary);\n    --btn-color-pressed: var(--color-primary);\n    --btn-text-color: var(--color-secondary);\n    --btn-tint: var(--color-hover);\n    --btn-tint-hover: var(--color-active);\n    --btn-on-color: var(--color-canvas);\n  }\n  .tone-destructive {\n    --btn-color: var(--color-error-solid);\n    --btn-color-hover: var(--color-error-solid);\n    --btn-color-pressed: var(--color-error-solid);\n    --btn-text-color: var(--color-error-text);\n    --btn-tint: var(--color-error-bg);\n    --btn-tint-hover: var(--color-error-bg);\n    --btn-on-color: var(--color-error-on-solid);\n  }\n  .tone-success {\n    --btn-color: var(--color-success-solid);\n    --btn-color-hover: var(--color-success-solid);\n    --btn-color-pressed: var(--color-success-solid);\n    --btn-text-color: var(--color-success-text);\n    --btn-tint: var(--color-success-bg);\n    --btn-tint-hover: var(--color-success-bg);\n    --btn-on-color: var(--color-success-on-solid);\n  }\n  .tone-warning {\n    --btn-color: var(--color-warning-solid);\n    --btn-color-hover: var(--color-warning-solid);\n    --btn-color-pressed: var(--color-warning-solid);\n    --btn-text-color: var(--color-warning-text);\n    --btn-tint: var(--color-warning-bg);\n    --btn-tint-hover: var(--color-warning-bg);\n    --btn-on-color: var(--color-warning-on-solid);\n  }\n  /* ─── Variants — consume tone tokens ────────────────────────────── */\n  .variant-solid {\n    background-color: var(--btn-color);\n    border-color: var(--btn-color);\n    color: var(--btn-on-color);\n  }\n  .variant-solid:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: brightness(0.92);\n  }\n  .variant-solid:active:not([data-disabled]),\n  .variant-solid[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: brightness(0.84);\n  }\n  /* primary solid gets its own hover tokens instead of filter */\n  .variant-solid.tone-primary:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: none;\n  }\n  .variant-solid.tone-primary:active:not([data-disabled]),\n  .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: none;\n  }\n  .variant-soft {\n    background-color: var(--btn-tint);\n    border-color: transparent;\n    color: var(--btn-text-color);\n  }\n  .variant-soft:hover:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n  }\n  .variant-soft:active:not([data-disabled]),\n  .variant-soft[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n    filter: brightness(0.95);\n  }\n  .variant-outline {\n    background-color: transparent;\n    border-color: var(--color-line-strong);\n    color: var(--color-primary);\n  }\n  /* Non-secondary tones show their tone color at rest */\n  .variant-outline:not(.tone-secondary) {\n    border-color: var(--btn-text-color);\n    color: var(--btn-text-color);\n  }\n  .variant-outline:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    border-color: var(--btn-text-color);\n    color: var(--btn-text-color);\n  }\n  .variant-outline:active:not([data-disabled]),\n  .variant-outline[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  .variant-ghost {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-secondary);\n  }\n  /* Non-secondary tones show their tone color at rest */\n  .variant-ghost:not(.tone-secondary) {\n    color: var(--btn-text-color);\n  }\n  .variant-ghost:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    color: var(--btn-text-color);\n  }\n  .variant-ghost:active:not([data-disabled]),\n  .variant-ghost[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  /* ─── Loader ─────────────────────────────────────────────────────── */\n  /* Always in the DOM, always position:absolute so it never affects layout */\n  .loader {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .loader-visible {\n    opacity: 1;\n  }\n  .content-loading {\n    visibility: hidden;\n  }\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .spinner {\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: spin 0.6s linear infinite;\n    opacity: 0.7;\n  }\n}\n"],"mappings":";AAwCA,IAAA,wBAAY;CAAI,mBAAA;CAAA,aAAA;CAAA,UAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,WAAA;CAAA,oBAAA;CAAA,gBAAA;CAAA,kBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}

package/dist/card/card.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import styles from "./card.module.css";
 
 //#region src/card/card.d.ts

package/dist/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./checkbox.module.css";
 
 //#region src/checkbox/checkbox.d.ts

package/dist/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import checkbox_module_default from "./checkbox.module.js";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/checkbox/checkbox.tsx
 function Checkbox$1({ children, id, className, onCheckedChange, ...props }) {

package/dist/checkbox/parts.js

@@ -1,6 +1,6 @@
 import checkbox_module_default from "./checkbox.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/checkbox/parts.tsx
 /**

package/dist/collapsible/collapsible.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./collapsible.module.css";
 
 //#region src/collapsible/collapsible.d.ts

package/dist/collapsible/parts.js

@@ -1,6 +1,6 @@
 import collapsible_module_default from "./collapsible.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/collapsible/parts.tsx
 /**

package/dist/context-menu/context-menu.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./context-menu.module.css";
 
 //#region src/context-menu/context-menu.d.ts

package/dist/context-menu/parts.js

@@ -1,6 +1,6 @@
 import context_menu_module_default from "./context-menu.module.js";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { ContextMenu } from "@base-ui/react/context-menu";
 //#region src/context-menu/parts.tsx
 /**

package/dist/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./dialog.module.css";
 
 //#region src/dialog/dialog.d.ts

package/dist/dialog/parts.js

@@ -1,6 +1,6 @@
 import dialog_module_default from "./dialog.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/dialog/parts.tsx
 /**

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./drawer.module.css";
 
 //#region src/drawer/drawer.d.ts

package/dist/drawer/parts.d.ts

@@ -1,7 +1,7 @@
 import { DrawerSide } from "./drawer.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
 
 //#region src/drawer/parts.d.ts

package/dist/drawer/parts.js

@@ -1,6 +1,6 @@
 import drawer_module_default from "./drawer.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Drawer } from "@base-ui/react/drawer";
 //#region src/drawer/parts.tsx
 /**