@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/alert-dialog/alert-dialog.css

@@ -0,0 +1,84 @@
+@layer components {
+  .backdrop_xocxMW {
+    min-height: 100dvh;
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+    background-color: #0000007a;
+    position: fixed;
+    inset: 0;
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop_xocxMW[data-starting-style], .backdrop_xocxMW[data-ending-style] {
+    opacity: 0;
+  }
+
+  .popup_xocxMW {
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(380px, calc(100vw - var(--space-8)));
+    gap: var(--space-3);
+    transition: opacity .2s var(--easing-ease-out),
+      transform .2s var(--easing-spring);
+    outline: none;
+    flex-direction: column;
+    display: flex;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+  }
+
+  .popup_xocxMW[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(.96);
+  }
+
+  .popup_xocxMW[data-ending-style] {
+    opacity: 0;
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
+    transform: translate(-50%, -50%) scale(.98);
+  }
+
+  .header_xocxMW {
+    gap: var(--space-1-5);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .icon_xocxMW {
+    margin-bottom: var(--space-1);
+  }
+
+  .title_xocxMW {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+  }
+
+  .description_xocxMW {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .actions_xocxMW {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+    display: flex;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./alert-dialog.module.css";
+
+//#region src/alert-dialog/alert-dialog.d.ts
+interface AlertAction {
+  label: ReactNode;
+  /** Called when the action button is clicked. The dialog closes automatically. */
+  onAction?: () => void;
+  /** Renders as a filled accent button — use for the primary confirm action. */
+  primary?: boolean;
+  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */
+  destructive?: boolean;
+}
+interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  trigger?: ReactElement;
+  /** Optional icon shown above the title. */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /**
+   * Action buttons rendered right-aligned.
+   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).
+   * Use `destructive: true` to apply destructive tone to the confirm action.
+   */
+  actions: AlertAction[];
+  className?: string;
+}
+declare function AlertDialog({
+  trigger,
+  icon,
+  title,
+  description,
+  actions,
+  className,
+  onOpenChange,
+  ...props
+}: AlertDialogProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AlertAction, AlertDialog, AlertDialogProps, styles };
+//# sourceMappingURL=alert-dialog.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,46 @@
+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";
+//#region src/alert-dialog/alert-dialog.tsx
+function AlertDialog$1({ trigger, icon, title, description, actions, className, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
+		onOpenChange,
+		...props,
+		children: [trigger && /* @__PURE__ */ jsx(AlertDialog.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: alert_dialog_module_default.backdrop }), /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+			className: `${alert_dialog_module_default.popup} ${className ?? ""}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: alert_dialog_module_default.header,
+				children: [
+					icon && /* @__PURE__ */ jsx("div", {
+						className: alert_dialog_module_default.icon,
+						children: icon
+					}),
+					/* @__PURE__ */ jsx(AlertDialog.Title, {
+						className: alert_dialog_module_default.title,
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx(AlertDialog.Description, {
+						className: alert_dialog_module_default.description,
+						children: description
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: alert_dialog_module_default.actions,
+				children: actions.map((action, i) => /* @__PURE__ */ jsx(AlertDialog.Close, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: action.primary ? "solid" : "outline",
+						tone: action.destructive ? "destructive" : "primary",
+						size: "sm",
+						onClick: action.onAction
+					}),
+					children: action.label
+				}, i))
+			})]
+		})] })]
+	});
+}
+//#endregion
+export { AlertDialog$1 as AlertDialog };
+
+//# sourceMappingURL=alert-dialog.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

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

@@ -0,0 +1,14 @@
+//#region src/alert-dialog/alert-dialog.module.css
+var alert_dialog_module_default = {
+	"actions": "actions_xocxMW",
+	"backdrop": "backdrop_xocxMW",
+	"description": "description_xocxMW",
+	"header": "header_xocxMW",
+	"icon": "icon_xocxMW",
+	"popup": "popup_xocxMW",
+	"title": "title_xocxMW"
+};
+//#endregion
+export { alert_dialog_module_default as default };
+
+//# sourceMappingURL=alert-dialog.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.module.js","names":[],"sources":["../../src/alert-dialog/alert-dialog.module.css"],"sourcesContent":["@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    min-height: 100dvh;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n\n    @supports (-webkit-touch-callout: none) {\n      position: absolute;\n    }\n  }\n\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-5) var(--space-6);\n    width: min(380px, calc(100vw - var(--space-8)));\n    outline: none;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-3);\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  /* ─── Header ──────────────────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-1-5);\n  }\n\n  .icon {\n    margin-bottom: var(--space-1);\n  }\n\n  .title {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n  }\n\n  .description {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  /* ─── Actions ─────────────────────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-1);\n  }\n}\n"],"mappings":";AAcA,IAAA,8BAAY;CAAI,WAAU;CAAM,YAAA;CAAA,eAAA;CAAA,UAAA;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}

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

@@ -0,0 +1,3 @@
+import { AlertAction, AlertDialog, AlertDialogProps, styles } from "./alert-dialog.js";
+import { AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogTitle, AlertDialogTitleProps } from "./parts.js";
+export { type AlertAction, AlertDialog, AlertDialogBackdrop, type AlertDialogBackdropProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogProps, styles as AlertDialogStyles, AlertDialogTitle, type AlertDialogTitleProps };

package/dist/alert-dialog/index.js

@@ -0,0 +1,4 @@
+import alert_dialog_module_default from "./alert-dialog.module.js";
+import { AlertDialog } from "./alert-dialog.js";
+import { AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, AlertDialogTitle } from "./parts.js";
+export { AlertDialog, AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, alert_dialog_module_default as AlertDialogStyles, AlertDialogTitle };

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

@@ -0,0 +1,28 @@
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region src/alert-dialog/parts.d.ts
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof AlertDialog.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof AlertDialog.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialog.Description>;
+interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+declare const AlertDialogBackdrop: react.ForwardRefExoticComponent<AlertDialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogPopup: react.ForwardRefExoticComponent<AlertDialogPopupProps & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: react.ForwardRefExoticComponent<AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: react.ForwardRefExoticComponent<AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogTitle, AlertDialogTitleProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/alert-dialog/parts.tsx"],"mappings":";;;;;KA8BK,iBAAA,GAAoB,wBAAA,QAAgC,WAAA,CAAgB,QAAA;AAAA,KACpE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,oBAAA,GAAuB,wBAAA,QAAgC,WAAA,CAAgB,WAAA;AAAA,UAE3D,wBAAA,SAAiC,IAAA,CAAK,iBAAA;EACrD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,2BAAA,SAAoC,IAAA,CAAK,oBAAA;EACxD,SAAA;AAAA;AAAA,cAGW,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAA,wBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMnB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOhB,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}

package/dist/alert-dialog/parts.js

@@ -0,0 +1,62 @@
+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";
+//#region src/alert-dialog/parts.tsx
+/**
+* Styled primitives for AlertDialog.
+*
+* @example
+* ```tsx
+* import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+* import { Button } from '@brijbyte/agentic-ui/button';
+* import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';
+*
+* <BaseAlertDialog.Root>
+*   <BaseAlertDialog.Trigger render={<button>Open</button>} />
+*   <BaseAlertDialog.Portal>
+*     <AlertDialogBackdrop />
+*     <AlertDialogPopup>
+*       <AlertDialogTitle>Delete account?</AlertDialogTitle>
+*       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+*       <div>
+*         <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
+*         <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
+*       </div>
+*     </AlertDialogPopup>
+*   </BaseAlertDialog.Portal>
+* </BaseAlertDialog.Root>
+* ```
+*/
+const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		ref,
+		className: `${alert_dialog_module_default.backdrop} ${className ?? ""}`,
+		...props
+	});
+});
+const AlertDialogPopup = forwardRef(function AlertDialogPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		ref,
+		className: `${alert_dialog_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const AlertDialogTitle = forwardRef(function AlertDialogTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		ref,
+		className: `${alert_dialog_module_default.title} ${className ?? ""}`,
+		...props
+	});
+});
+const AlertDialogDescription = forwardRef(function AlertDialogDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		ref,
+		className: `${alert_dialog_module_default.description} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { AlertDialogBackdrop, AlertDialogDescription, AlertDialogPopup, AlertDialogTitle };
+
+//# sourceMappingURL=parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for AlertDialog.\n *\n * @example\n * ```tsx\n * import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\n * import { Button } from '@brijbyte/agentic-ui/button';\n * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';\n *\n * <BaseAlertDialog.Root>\n *   <BaseAlertDialog.Trigger render={<button>Open</button>} />\n *   <BaseAlertDialog.Portal>\n *     <AlertDialogBackdrop />\n *     <AlertDialogPopup>\n *       <AlertDialogTitle>Delete account?</AlertDialogTitle>\n *       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>\n *       <div>\n *         <BaseAlertDialog.Close render={<Button variant=\"soft\" tone=\"destructive\" size=\"sm\" />}>Delete</BaseAlertDialog.Close>\n *         <BaseAlertDialog.Close render={<Button variant=\"outline\" size=\"sm\" />}>Cancel</BaseAlertDialog.Close>\n *       </div>\n *     </AlertDialogPopup>\n *   </BaseAlertDialog.Portal>\n * </BaseAlertDialog.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport styles from \"./alert-dialog.module.css\";\n\ntype BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;\n\nexport interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogTitleProps extends Omit<BaseTitleProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n  className?: string;\n}\n\nexport const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return <BaseAlertDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.Popup>, AlertDialogPopupProps>(function AlertDialogPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return <BaseAlertDialog.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;AACzD,QAAO,oBAACA,YAAgB,UAAjB;EAA+B;EAAK,WAAW,GAAGC,4BAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAE/G;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC5D,QAAO,oBAACD,YAAgB,aAAjB;EAAkC;EAAK,WAAW,GAAGC,4BAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAErH"}

package/dist/badge/badge.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_fRZpDq {
     align-items: center;
@@ -18,14 +16,14 @@
 
   .variant-default_fRZpDq {
     background-color: var(--color-surface-3);
-    border-color: var(--color-border-base);
-    color: var(--color-text-secondary);
+    border-color: var(--color-line);
+    color: var(--color-secondary);
   }
 
   .variant-solid_fRZpDq {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
 
   .variant-soft_fRZpDq {
@@ -66,5 +64,3 @@
     height: 5px;
   }
 }
-
-@layer utilities;

package/dist/badge/badge.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.module.js","names":[],"sources":["../../src/badge/badge.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-wide);\n    line-height: 1;\n    border-radius: var(--radius-sm);\n    border: var(--border-width-base) solid transparent;\n    padding: 2px var(--space-1-5);\n    white-space: nowrap;\n  }\n\n  /* Variants */\n  .variant-default {\n    background-color: var(--color-surface-3);\n    border-color: var(--color-border-base);\n    color: var(--color-text-secondary);\n  }\n\n  .variant-solid {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n    color: var(--color-text-on-accent);\n  }\n\n  .variant-soft {\n    background-color: var(--color-accent-tint);\n    border-color: var(--color-accent-tint-hover);\n    color: var(--color-accent);\n  }\n\n  .variant-success {\n    background-color: var(--color-success-bg);\n    border-color: var(--color-success-border);\n    color: var(--color-success-text);\n  }\n\n  .variant-warning {\n    background-color: var(--color-warning-bg);\n    border-color: var(--color-warning-border);\n    color: var(--color-warning-text);\n  }\n\n  .variant-error {\n    background-color: var(--color-error-bg);\n    border-color: var(--color-error-border);\n    color: var(--color-error-text);\n  }\n\n  .variant-info {\n    background-color: var(--color-info-bg);\n    border-color: var(--color-info-border);\n    color: var(--color-info-text);\n  }\n\n  /* Dot indicator */\n  .dot {\n    width: 5px;\n    height: 5px;\n    border-radius: var(--radius-full);\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n}\n"],"mappings":";AAkBA,IAAA,uBAAe;CAAA,OAAA;CAAA,QAAA;CAAA,mBAAA;CAAA,iBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,mBAAA;CAAA"}
+{"version":3,"file":"badge.module.js","names":[],"sources":["../../src/badge/badge.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-wide);\n    line-height: 1;\n    border-radius: var(--radius-sm);\n    border: var(--border-width-base) solid transparent;\n    padding: 2px var(--space-1-5);\n    white-space: nowrap;\n  }\n  /* Variants */\n  .variant-default {\n    background-color: var(--color-surface-3);\n    border-color: var(--color-line);\n    color: var(--color-secondary);\n  }\n  .variant-solid {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n    color: var(--color-on-accent);\n  }\n  .variant-soft {\n    background-color: var(--color-accent-tint);\n    border-color: var(--color-accent-tint-hover);\n    color: var(--color-accent);\n  }\n  .variant-success {\n    background-color: var(--color-success-bg);\n    border-color: var(--color-success-border);\n    color: var(--color-success-text);\n  }\n  .variant-warning {\n    background-color: var(--color-warning-bg);\n    border-color: var(--color-warning-border);\n    color: var(--color-warning-text);\n  }\n  .variant-error {\n    background-color: var(--color-error-bg);\n    border-color: var(--color-error-border);\n    color: var(--color-error-text);\n  }\n  .variant-info {\n    background-color: var(--color-info-bg);\n    border-color: var(--color-info-border);\n    color: var(--color-info-text);\n  }\n  /* Dot indicator */\n  .dot {\n    width: 5px;\n    height: 5px;\n    border-radius: var(--radius-full);\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n}\n"],"mappings":";AAkBA,IAAA,uBAAW;CAAK,OAAM;CAAa,QAAA;CAAA,mBAAA;CAAA,iBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,mBAAA;CAAA"}

package/dist/button/button.css

@@ -91,16 +91,16 @@
     --btn-color-pressed: var(--color-accent-pressed);
     --btn-tint: var(--color-accent-tint);
     --btn-tint-hover: var(--color-accent-tint-hover);
-    --btn-on-color: var(--color-text-on-accent);
+    --btn-on-color: var(--color-on-accent);
   }
 
   .tone-secondary_4j5AgW {
-    --btn-color: var(--color-text-secondary);
-    --btn-color-hover: var(--color-text-primary);
-    --btn-color-pressed: var(--color-text-primary);
-    --btn-tint: var(--color-surface-hover);
-    --btn-tint-hover: var(--color-surface-active);
-    --btn-on-color: var(--color-bg-base);
+    --btn-color: var(--color-secondary);
+    --btn-color-hover: var(--color-primary);
+    --btn-color-pressed: var(--color-primary);
+    --btn-tint: var(--color-hover);
+    --btn-tint-hover: var(--color-active);
+    --btn-on-color: var(--color-canvas);
   }
 
   .tone-destructive_4j5AgW {
@@ -176,34 +176,34 @@
   }
 
   .variant-outline_4j5AgW {
-    border-color: var(--color-border-strong);
-    color: var(--color-text-primary);
+    border-color: var(--color-line-strong);
+    color: var(--color-primary);
     background-color: #0000;
   }
 
   .variant-outline_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
     border-color: var(--btn-color);
     color: var(--btn-color);
   }
 
   .variant-outline_4j5AgW:active:not([data-disabled]), .variant-outline_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    background-color: var(--color-active);
   }
 
   .variant-ghost_4j5AgW {
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     background-color: #0000;
     border-color: #0000;
   }
 
   .variant-ghost_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
     color: var(--btn-color);
   }
 
   .variant-ghost_4j5AgW:active:not([data-disabled]), .variant-ghost_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    background-color: var(--color-active);
   }
 
   .loader_4j5AgW {

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\n  .root:active:not([data-disabled]) {\n    transform: scale(0.97);\n  }\n\n  .root:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  .root[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.44;\n    pointer-events: none;\n  }\n\n  /* ─── Sizes ──────────────────────────────────────────────────────── */\n\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\n  .size-sm {\n    height: 26px;\n    padding-inline: var(--space-2-5);\n    font-size: var(--font-size-sm);\n  }\n\n  .size-md {\n    height: 30px;\n    padding-inline: var(--space-3);\n    font-size: var(--font-size-md);\n  }\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\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\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\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-text-on-accent);\n  }\n\n  .tone-secondary {\n    --btn-color: var(--color-text-secondary);\n    --btn-color-hover: var(--color-text-primary);\n    --btn-color-pressed: var(--color-text-primary);\n    --btn-tint: var(--color-surface-hover);\n    --btn-tint-hover: var(--color-surface-active);\n    --btn-on-color: var(--color-bg-base);\n  }\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\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\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\n  /* ─── Variants — consume tone tokens ────────────────────────────── */\n\n  .variant-solid {\n    background-color: var(--btn-color);\n    border-color: var(--btn-color);\n    color: var(--btn-on-color);\n  }\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\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\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\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\n  .variant-soft {\n    background-color: var(--btn-tint);\n    border-color: transparent;\n    color: var(--btn-color);\n  }\n\n  .variant-soft:hover:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n  }\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\n  .variant-outline {\n    background-color: transparent;\n    border-color: var(--color-border-strong);\n    color: var(--color-text-primary);\n  }\n\n  .variant-outline:hover:not([data-disabled]) {\n    background-color: var(--color-surface-hover);\n    border-color: var(--btn-color);\n    color: var(--btn-color);\n  }\n\n  .variant-outline:active:not([data-disabled]),\n  .variant-outline[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-surface-active);\n  }\n\n  .variant-ghost {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-text-secondary);\n  }\n\n  .variant-ghost:hover:not([data-disabled]) {\n    background-color: var(--color-surface-hover);\n    color: var(--btn-color);\n  }\n\n  .variant-ghost:active:not([data-disabled]),\n  .variant-ghost[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-surface-active);\n  }\n\n  /* ─── Loader ─────────────────────────────────────────────────────── */\n\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\n  .loader-visible {\n    opacity: 1;\n  }\n\n  .content-loading {\n    visibility: hidden;\n  }\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\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,wBAAE;CAAA,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 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"}

package/dist/card/card.css

@@ -1,9 +1,7 @@
-@layer theme, base;
-
 @layer components {
   .root_mD1LSW {
     background-color: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-xl);
     overflow: hidden;
   }
@@ -30,7 +28,7 @@
 
   .header_mD1LSW {
     padding: var(--space-4) var(--space-5);
-    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
     gap: var(--space-0-5);
     flex-direction: column;
     display: flex;
@@ -40,7 +38,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
   }
@@ -48,7 +46,7 @@
   .description_mD1LSW {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-normal);
   }
 
@@ -58,11 +56,9 @@
 
   .footer_mD1LSW {
     padding: var(--space-3) var(--space-5);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
     align-items: center;
     gap: var(--space-2);
     display: flex;
   }
 }
-
-@layer utilities;

package/dist/card/card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.module.js","names":[],"sources":["../../src/card/card.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    background-color: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-xl);\n    overflow: hidden;\n  }\n\n  .root-elevated {\n    box-shadow: var(--shadow-sm);\n  }\n\n  .root-interactive {\n    cursor: pointer;\n    transition:\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n\n  .root-interactive:hover {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n\n  .root-interactive:active {\n    transform: scale(0.995);\n  }\n\n  .header {\n    padding: var(--space-4) var(--space-5);\n    border-bottom: var(--border-width-base) solid var(--color-border-subtle);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-normal);\n  }\n\n  .body {\n    padding: var(--space-4) var(--space-5);\n  }\n\n  .footer {\n    padding: var(--space-3) var(--space-5);\n    border-top: var(--border-width-base) solid var(--color-border-subtle);\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAgBA,IAAA,sBAAc;CAAA,QAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,QAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA,SAAA;CAAA"}
+{"version":3,"file":"card.module.js","names":[],"sources":["../../src/card/card.module.css"],"sourcesContent":["@layer components {\n  .root {\n    background-color: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-xl);\n    overflow: hidden;\n  }\n  .root-elevated {\n    box-shadow: var(--shadow-sm);\n  }\n  .root-interactive {\n    cursor: pointer;\n    transition:\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n  .root-interactive:hover {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n  .root-interactive:active {\n    transform: scale(0.995);\n  }\n  .header {\n    padding: var(--space-4) var(--space-5);\n    border-bottom: var(--border-width-base) solid var(--color-line-subtle);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n  }\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-normal);\n  }\n  .body {\n    padding: var(--space-4) var(--space-5);\n  }\n  .footer {\n    padding: var(--space-3) var(--space-5);\n    border-top: var(--border-width-base) solid var(--color-line-subtle);\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAgBA,IAAA,sBAAE;CAAA,QAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,QAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA,SAAA;CAAA"}

package/dist/checkbox/checkbox.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_J4At5G {
     align-items: center;
@@ -16,7 +14,7 @@
 
   .indicator_J4At5G {
     border-radius: var(--radius-sm);
-    border: var(--border-width-base) solid var(--color-border-strong);
+    border: var(--border-width-base) solid var(--color-line-strong);
     background-color: var(--color-surface-1);
     width: 16px;
     height: 16px;
@@ -53,7 +51,7 @@
   .icon_J4At5G {
     width: 10px;
     height: 10px;
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
     opacity: 0;
     transition: opacity var(--duration-fast) var(--easing-standard),
       transform var(--duration-fast) var(--easing-spring);
@@ -68,9 +66,7 @@
   .label_J4At5G {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
   }
 }
-
-@layer utilities;

package/dist/checkbox/checkbox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.module.js","names":[],"sources":["../../src/checkbox/checkbox.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  .indicator {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-sm);\n    border: var(--border-width-base) solid var(--color-border-strong);\n    background-color: var(--color-surface-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    position: relative;\n  }\n\n  .indicator:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-color: var(--color-accent);\n  }\n\n  .indicator:hover:not([data-disabled]) {\n    border-color: var(--color-accent);\n  }\n\n  .indicator[data-checked],\n  .indicator[data-indeterminate] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n\n  .indicator[data-checked]:hover,\n  .indicator[data-indeterminate]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n\n  /* Checkmark SVG */\n  .icon {\n    width: 10px;\n    height: 10px;\n    color: var(--color-text-on-accent);\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-spring);\n  }\n\n  .indicator[data-checked] .icon,\n  .indicator[data-indeterminate] .icon {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n  }\n}\n"],"mappings":";AAQA,IAAA,0BAAe;CAAC,QAAK;CAAA,aAAA;CAAA,SAAA;CAAA,QAAA;CAAA"}
+{"version":3,"file":"checkbox.module.js","names":[],"sources":["../../src/checkbox/checkbox.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .indicator {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-sm);\n    border: var(--border-width-base) solid var(--color-line-strong);\n    background-color: var(--color-surface-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    position: relative;\n  }\n  .indicator:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-color: var(--color-accent);\n  }\n  .indicator:hover:not([data-disabled]) {\n    border-color: var(--color-accent);\n  }\n  .indicator[data-checked],\n  .indicator[data-indeterminate] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .indicator[data-checked]:hover,\n  .indicator[data-indeterminate]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  /* Checkmark SVG */\n  .icon {\n    width: 10px;\n    height: 10px;\n    color: var(--color-on-accent);\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-spring);\n  }\n  .indicator[data-checked] .icon,\n  .indicator[data-indeterminate] .icon {\n    opacity: 1;\n    transform: scale(1);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n}\n"],"mappings":";AAQA,IAAA,0BAAa;CAAA,QAAU;CAAA,aAAA;CAAA,SAAA;CAAA,QAAA;CAAA"}