@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

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

@@ -0,0 +1,66 @@
+@layer components {
+  .root_fRZpDq {
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid transparent;
+    padding: 2px var(--space-1-5);
+    white-space: nowrap;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .variant-default_fRZpDq {
+    background-color: var(--color-surface-3);
+    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-on-accent);
+  }
+
+  .variant-soft_fRZpDq {
+    background-color: var(--color-accent-tint);
+    border-color: var(--color-accent-tint-hover);
+    color: var(--color-accent);
+  }
+
+  .variant-success_fRZpDq {
+    background-color: var(--color-success-bg);
+    border-color: var(--color-success-border);
+    color: var(--color-success-text);
+  }
+
+  .variant-warning_fRZpDq {
+    background-color: var(--color-warning-bg);
+    border-color: var(--color-warning-border);
+    color: var(--color-warning-text);
+  }
+
+  .variant-error_fRZpDq {
+    background-color: var(--color-error-bg);
+    border-color: var(--color-error-border);
+    color: var(--color-error-text);
+  }
+
+  .variant-info_fRZpDq {
+    background-color: var(--color-info-bg);
+    border-color: var(--color-info-border);
+    color: var(--color-info-text);
+  }
+
+  .dot_fRZpDq {
+    border-radius: var(--radius-full);
+    background-color: currentColor;
+    flex-shrink: 0;
+    width: 5px;
+    height: 5px;
+  }
+}

package/dist/badge/badge.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+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"> {
+  variant?: BadgeVariant;
+  dot?: boolean;
+}
+declare function Badge({
+  variant,
+  dot,
+  className,
+  children,
+  ...props
+}: BadgeProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Badge, BadgeProps, BadgeVariant, styles };
+//# sourceMappingURL=badge.d.ts.map

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

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

package/dist/badge/badge.js

@@ -0,0 +1,21 @@
+import badge_module_default from "./badge.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+function Badge({ variant = "default", dot = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			badge_module_default.root,
+			badge_module_default[`variant-${variant}`],
+			className ?? ""
+		].filter(Boolean).join(" "),
+		...props,
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			className: badge_module_default.dot,
+			"aria-hidden": "true"
+		}), children]
+	});
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

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

package/dist/badge/badge.module.css.d.ts

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

package/dist/badge/badge.module.js

@@ -0,0 +1,16 @@
+//#region src/badge/badge.module.css
+var badge_module_default = {
+	"dot": "dot_fRZpDq",
+	"root": "root_fRZpDq",
+	"variant-default": "variant-default_fRZpDq",
+	"variant-error": "variant-error_fRZpDq",
+	"variant-info": "variant-info_fRZpDq",
+	"variant-soft": "variant-soft_fRZpDq",
+	"variant-solid": "variant-solid_fRZpDq",
+	"variant-success": "variant-success_fRZpDq",
+	"variant-warning": "variant-warning_fRZpDq"
+};
+//#endregion
+export { badge_module_default as default };
+
+//# sourceMappingURL=badge.module.js.map

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

@@ -0,0 +1 @@
+{"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/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, BadgeVariant, styles } from "./badge.js";
+export { Badge, type BadgeProps, styles as BadgeStyles, type BadgeVariant };

package/dist/badge/index.js

@@ -0,0 +1,3 @@
+import badge_module_default from "./badge.module.js";
+import { Badge } from "./badge.js";
+export { Badge, badge_module_default as BadgeStyles };

package/dist/button/button.css

@@ -0,0 +1,242 @@
+@layer components {
+  .root_4j5AgW {
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-1-5);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+    border-radius: var(--radius-md);
+    border: var(--border-width-base) solid transparent;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      opacity var(--duration-fast) var(--easing-standard),
+      transform .1s var(--easing-ease-out);
+    outline: none;
+    line-height: 1;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .root_4j5AgW:active:not([data-disabled]) {
+    transform: scale(.97);
+  }
+
+  .root_4j5AgW:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .root_4j5AgW[data-disabled] {
+    cursor: not-allowed;
+    opacity: .44;
+    pointer-events: none;
+  }
+
+  .size-xs_4j5AgW {
+    height: 22px;
+    padding-inline: var(--space-2);
+    font-size: var(--font-size-xs);
+    border-radius: var(--radius-sm);
+  }
+
+  .size-sm_4j5AgW {
+    height: 26px;
+    padding-inline: var(--space-2-5);
+    font-size: var(--font-size-sm);
+  }
+
+  .size-md_4j5AgW {
+    height: 30px;
+    padding-inline: var(--space-3);
+    font-size: var(--font-size-md);
+  }
+
+  .size-lg_4j5AgW {
+    height: 36px;
+    padding-inline: var(--space-4);
+    font-size: var(--font-size-lg);
+    border-radius: var(--radius-lg);
+  }
+
+  .icon-only_4j5AgW.size-xs_4j5AgW {
+    width: 22px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-sm_4j5AgW {
+    width: 26px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-md_4j5AgW {
+    width: 30px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-lg_4j5AgW {
+    width: 36px;
+    padding-inline: 0;
+  }
+
+  .tone-primary_4j5AgW {
+    --btn-color: var(--color-accent);
+    --btn-color-hover: var(--color-accent-hover);
+    --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-on-accent);
+  }
+
+  .tone-secondary_4j5AgW {
+    --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 {
+    --btn-color: var(--color-error-solid);
+    --btn-color-hover: var(--color-error-solid);
+    --btn-color-pressed: var(--color-error-solid);
+    --btn-tint: var(--color-error-bg);
+    --btn-tint-hover: var(--color-error-bg);
+    --btn-on-color: #fff;
+  }
+
+  .tone-success_4j5AgW {
+    --btn-color: var(--color-success-solid);
+    --btn-color-hover: var(--color-success-solid);
+    --btn-color-pressed: var(--color-success-solid);
+    --btn-tint: var(--color-success-bg);
+    --btn-tint-hover: var(--color-success-bg);
+    --btn-on-color: #fff;
+  }
+
+  .tone-warning_4j5AgW {
+    --btn-color: var(--color-warning-solid);
+    --btn-color-hover: var(--color-warning-solid);
+    --btn-color-pressed: var(--color-warning-solid);
+    --btn-tint: var(--color-warning-bg);
+    --btn-tint-hover: var(--color-warning-bg);
+    --btn-on-color: #fff;
+  }
+
+  .variant-solid_4j5AgW {
+    background-color: var(--btn-color);
+    border-color: var(--btn-color);
+    color: var(--btn-on-color);
+  }
+
+  .variant-solid_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: brightness(.92);
+  }
+
+  .variant-solid_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: brightness(.84);
+  }
+
+  .variant-solid_4j5AgW.tone-primary_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: none;
+  }
+
+  .variant-solid_4j5AgW.tone-primary_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW.tone-primary_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: none;
+  }
+
+  .variant-soft_4j5AgW {
+    background-color: var(--btn-tint);
+    color: var(--btn-color);
+    border-color: #0000;
+  }
+
+  .variant-soft_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+  }
+
+  .variant-soft_4j5AgW:active:not([data-disabled]), .variant-soft_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+    filter: brightness(.95);
+  }
+
+  .variant-outline_4j5AgW {
+    border-color: var(--color-line-strong);
+    color: var(--color-primary);
+    background-color: #0000;
+  }
+
+  .variant-outline_4j5AgW:hover:not([data-disabled]) {
+    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-active);
+  }
+
+  .variant-ghost_4j5AgW {
+    color: var(--color-secondary);
+    background-color: #0000;
+    border-color: #0000;
+  }
+
+  .variant-ghost_4j5AgW:hover:not([data-disabled]) {
+    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-active);
+  }
+
+  .loader_4j5AgW {
+    opacity: 0;
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset: 0;
+  }
+
+  .loader-visible_4j5AgW {
+    opacity: 1;
+  }
+
+  .content-loading_4j5AgW {
+    visibility: hidden;
+  }
+
+  @keyframes spin_4j5AgW {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner_4j5AgW {
+    opacity: .7;
+    border: 1.5px solid;
+    border-top-color: #0000;
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    animation: .6s linear infinite spin_4j5AgW;
+  }
+}

package/dist/button/button.d.ts

@@ -0,0 +1,28 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef, ReactElement } from "react";
+import styles from "./button.module.css";
+
+//#region src/button/button.d.ts
+type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
+type ButtonTone = "primary" | "secondary" | "destructive" | "success" | "warning";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  variant?: ButtonVariant;
+  /** Semantic color. Defaults to "primary". */
+  tone?: ButtonTone;
+  size?: ButtonSize;
+  loading?: boolean;
+  /**
+   * 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;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, ButtonProps, ButtonSize, ButtonTone, ButtonVariant, styles };
+//# sourceMappingURL=button.d.ts.map

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

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

package/dist/button/button.js

@@ -0,0 +1,34 @@
+import button_module_default from "./button.module.js";
+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, {
+		ref,
+		className: [
+			button_module_default.root,
+			button_module_default[`variant-${variant}`],
+			button_module_default[`tone-${tone}`],
+			button_module_default[`size-${size}`],
+			iconOnly ? button_module_default["icon-only"] : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		disabled: disabled ?? loading,
+		render,
+		nativeButton,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `${button_module_default.loader} ${loading && !loadingText ? button_module_default["loader-visible"] : ""}`,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", { className: button_module_default.spinner })
+		}), /* @__PURE__ */ jsx("span", {
+			className: loading && !loadingText ? button_module_default["content-loading"] : void 0,
+			children: loading && loadingText ? loadingText : children
+		})]
+	});
+});
+//#endregion
+export { Button$1 as Button };
+
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

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

package/dist/button/button.module.css.d.ts

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

package/dist/button/button.module.js

@@ -0,0 +1,27 @@
+//#region src/button/button.module.css
+var button_module_default = {
+	"content-loading": "content-loading_4j5AgW",
+	"icon-only": "icon-only_4j5AgW",
+	"loader": "loader_4j5AgW",
+	"loader-visible": "loader-visible_4j5AgW",
+	"root": "root_4j5AgW",
+	"size-lg": "size-lg_4j5AgW",
+	"size-md": "size-md_4j5AgW",
+	"size-sm": "size-sm_4j5AgW",
+	"size-xs": "size-xs_4j5AgW",
+	"spin": "spin_4j5AgW",
+	"spinner": "spinner_4j5AgW",
+	"tone-destructive": "tone-destructive_4j5AgW",
+	"tone-primary": "tone-primary_4j5AgW",
+	"tone-secondary": "tone-secondary_4j5AgW",
+	"tone-success": "tone-success_4j5AgW",
+	"tone-warning": "tone-warning_4j5AgW",
+	"variant-ghost": "variant-ghost_4j5AgW",
+	"variant-outline": "variant-outline_4j5AgW",
+	"variant-soft": "variant-soft_4j5AgW",
+	"variant-solid": "variant-solid_4j5AgW"
+};
+//#endregion
+export { button_module_default as default };
+
+//# sourceMappingURL=button.module.js.map

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

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

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonSize, ButtonTone, ButtonVariant, styles } from "./button.js";
+export { Button, type ButtonProps, type ButtonSize, styles as ButtonStyles, type ButtonTone, type ButtonVariant };

package/dist/button/index.js

@@ -0,0 +1,3 @@
+import button_module_default from "./button.module.js";
+import { Button } from "./button.js";
+export { Button, button_module_default as ButtonStyles };

package/dist/card/card.css

@@ -0,0 +1,64 @@
+@layer components {
+  .root_mD1LSW {
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  .root-elevated_mD1LSW {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root-interactive_mD1LSW {
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-standard);
+  }
+
+  .root-interactive_mD1LSW:hover {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  .root-interactive_mD1LSW:active {
+    transform: scale(.995);
+  }
+
+  .header_mD1LSW {
+    padding: var(--space-4) var(--space-5);
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
+    gap: var(--space-0-5);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .title_mD1LSW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .description_mD1LSW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-normal);
+  }
+
+  .body_mD1LSW {
+    padding: var(--space-4) var(--space-5);
+  }
+
+  .footer_mD1LSW {
+    padding: var(--space-3) var(--space-5);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+}

package/dist/card/card.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./card.module.css";
+
+//#region src/card/card.d.ts
+interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  elevated?: boolean;
+  interactive?: boolean;
+}
+interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  /** Card heading rendered in the header area. */
+  heading?: ReactNode;
+  description?: ReactNode;
+}
+declare function Card({
+  elevated,
+  interactive,
+  className,
+  children,
+  ...props
+}: CardProps): react_jsx_runtime0.JSX.Element;
+declare function CardHeader({
+  heading,
+  description,
+  className,
+  children,
+  ...props
+}: CardHeaderProps): react_jsx_runtime0.JSX.Element;
+declare function CardBody({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"div">): react_jsx_runtime0.JSX.Element;
+declare function CardFooter({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Card, CardBody, CardFooter, CardHeader, CardHeaderProps, CardProps, styles };
+//# sourceMappingURL=card.d.ts.map

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

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