@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/src/alert-dialog/alert-dialog.module.css

@@ -0,0 +1,91 @@
+@layer components {
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    min-height: 100dvh;
+    background-color: rgba(0, 0, 0, 0.48);
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    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)));
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    transition:
+      opacity 200ms var(--easing-ease-out),
+      transform 200ms var(--easing-spring);
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+
+  /* ─── Header ──────────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+  }
+
+  .icon {
+    margin-bottom: var(--space-1);
+  }
+
+  .title {
+    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 {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  /* ─── Actions ─────────────────────────────────────────────────── */
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+}

package/src/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode, ReactElement } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Button } from "../button/button";
+import styles from "./alert-dialog.module.css";
+
+export 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;
+}
+
+export 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;
+}
+
+export function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {
+  return (
+    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>
+      {trigger && <BaseAlertDialog.Trigger render={trigger} />}
+      <BaseAlertDialog.Portal>
+        <BaseAlertDialog.Backdrop className={styles.backdrop} />
+        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? ""}`}>
+          <div className={styles.header}>
+            {icon && <div className={styles.icon}>{icon}</div>}
+            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>
+            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}
+          </div>
+          <div className={styles.actions}>
+            {actions.map((action, i) => (
+              <BaseAlertDialog.Close
+                key={i}
+                render={
+                  <Button
+                    variant={action.primary ? "solid" : "outline"}
+                    tone={action.destructive ? "destructive" : "primary"}
+                    size="sm"
+                    onClick={action.onAction}
+                  />
+                }
+              >
+                {action.label}
+              </BaseAlertDialog.Close>
+            ))}
+          </div>
+        </BaseAlertDialog.Popup>
+      </BaseAlertDialog.Portal>
+    </BaseAlertDialog.Root>
+  );
+}
+
+export { styles as AlertDialogStyles };

package/src/alert-dialog/index.ts

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

package/src/alert-dialog/parts.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import styles from "./alert-dialog.module.css";
+
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;
+
+export interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+
+export const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(
+  function AlertDialogBackdrop({ className, ...props }, ref) {
+    return <BaseAlertDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.Popup>, AlertDialogPopupProps>(function AlertDialogPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAlertDialog.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAlertDialog.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(
+  function AlertDialogDescription({ className, ...props }, ref) {
+    return <BaseAlertDialog.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  },
+);

package/src/badge/badge.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: inline-flex;
@@ -15,50 +13,42 @@
     padding: 2px var(--space-1-5);
     white-space: nowrap;
   }
-
   /* Variants */
   .variant-default {
     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 {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
-
   .variant-soft {
     background-color: var(--color-accent-tint);
     border-color: var(--color-accent-tint-hover);
     color: var(--color-accent);
   }
-
   .variant-success {
     background-color: var(--color-success-bg);
     border-color: var(--color-success-border);
     color: var(--color-success-text);
   }
-
   .variant-warning {
     background-color: var(--color-warning-bg);
     border-color: var(--color-warning-border);
     color: var(--color-warning-text);
   }
-
   .variant-error {
     background-color: var(--color-error-bg);
     border-color: var(--color-error-border);
     color: var(--color-error-text);
   }
-
   .variant-info {
     background-color: var(--color-info-bg);
     border-color: var(--color-info-border);
     color: var(--color-info-text);
   }
-
   /* Dot indicator */
   .dot {
     width: 5px;

package/src/button/button.module.css

@@ -25,49 +25,40 @@
     outline: none;
     position: relative;
   }
-
   .root:active:not([data-disabled]) {
     transform: scale(0.97);
   }
-
   .root:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   .root[data-disabled] {
     cursor: not-allowed;
     opacity: 0.44;
     pointer-events: none;
   }
-
   /* ─── Sizes ──────────────────────────────────────────────────────── */
-
   .size-xs {
     height: 22px;
     padding-inline: var(--space-2);
     font-size: var(--font-size-xs);
     border-radius: var(--radius-sm);
   }
-
   .size-sm {
     height: 26px;
     padding-inline: var(--space-2-5);
     font-size: var(--font-size-sm);
   }
-
   .size-md {
     height: 30px;
     padding-inline: var(--space-3);
     font-size: var(--font-size-md);
   }
-
   .size-lg {
     height: 36px;
     padding-inline: var(--space-4);
     font-size: var(--font-size-lg);
     border-radius: var(--radius-lg);
   }
-
   /* Icon-only */
   .icon-only.size-xs {
     width: 22px;
@@ -85,149 +76,142 @@
     width: 36px;
     padding-inline: 0;
   }
-
   /* ─── Tones — set scoped color tokens ────────────────────────────── */
   /*
-   * Each tone exposes four custom properties consumed by the variants below:
-   *   --btn-color         solid bg / soft text / outline+ghost hover text
-   *   --btn-color-hover   solid bg hover
-   *   --btn-color-pressed solid bg pressed
+   * Each tone exposes scoped custom properties consumed by the variants below:
+   *   --btn-color         solid bg color
+   *   --btn-color-hover   solid bg on hover
+   *   --btn-color-pressed solid bg on press
+   *   --btn-text-color    text color for soft / outline / ghost variants
+   *                       (may differ from --btn-color for contrast on tinted surfaces)
    *   --btn-tint          soft bg
-   *   --btn-tint-hover    soft bg hover
+   *   --btn-tint-hover    soft bg on hover
    *   --btn-on-color      text on solid bg
    */
-
   .tone-primary {
-    --btn-color: var(--color-accent);
+    --btn-color: var(--color-accent-solid);
     --btn-color-hover: var(--color-accent-hover);
     --btn-color-pressed: var(--color-accent-pressed);
+    --btn-text-color: var(--color-accent-text);
     --btn-tint: var(--color-accent-tint);
     --btn-tint-hover: var(--color-accent-tint-hover);
-    --btn-on-color: var(--color-text-on-accent);
+    --btn-on-color: var(--color-on-accent);
   }
-
   .tone-secondary {
-    --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-text-color: var(--color-secondary);
+    --btn-tint: var(--color-hover);
+    --btn-tint-hover: var(--color-active);
+    --btn-on-color: var(--color-canvas);
+  }
   .tone-destructive {
     --btn-color: var(--color-error-solid);
     --btn-color-hover: var(--color-error-solid);
     --btn-color-pressed: var(--color-error-solid);
+    --btn-text-color: var(--color-error-text);
     --btn-tint: var(--color-error-bg);
     --btn-tint-hover: var(--color-error-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-error-on-solid);
   }
-
   .tone-success {
     --btn-color: var(--color-success-solid);
     --btn-color-hover: var(--color-success-solid);
     --btn-color-pressed: var(--color-success-solid);
+    --btn-text-color: var(--color-success-text);
     --btn-tint: var(--color-success-bg);
     --btn-tint-hover: var(--color-success-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-success-on-solid);
   }
-
   .tone-warning {
     --btn-color: var(--color-warning-solid);
     --btn-color-hover: var(--color-warning-solid);
     --btn-color-pressed: var(--color-warning-solid);
+    --btn-text-color: var(--color-warning-text);
     --btn-tint: var(--color-warning-bg);
     --btn-tint-hover: var(--color-warning-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-warning-on-solid);
   }
-
   /* ─── Variants — consume tone tokens ────────────────────────────── */
-
   .variant-solid {
     background-color: var(--btn-color);
     border-color: var(--btn-color);
     color: var(--btn-on-color);
   }
-
   .variant-solid:hover:not([data-disabled]) {
     background-color: var(--btn-color-hover);
     border-color: var(--btn-color-hover);
     filter: brightness(0.92);
   }
-
   .variant-solid:active:not([data-disabled]),
   .variant-solid[data-pressed]:not([data-disabled]) {
     background-color: var(--btn-color-pressed);
     border-color: var(--btn-color-pressed);
     filter: brightness(0.84);
   }
-
   /* primary solid gets its own hover tokens instead of filter */
   .variant-solid.tone-primary:hover:not([data-disabled]) {
     background-color: var(--btn-color-hover);
     border-color: var(--btn-color-hover);
     filter: none;
   }
-
   .variant-solid.tone-primary:active:not([data-disabled]),
   .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {
     background-color: var(--btn-color-pressed);
     border-color: var(--btn-color-pressed);
     filter: none;
   }
-
   .variant-soft {
     background-color: var(--btn-tint);
     border-color: transparent;
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
-
   .variant-soft:hover:not([data-disabled]) {
     background-color: var(--btn-tint-hover);
   }
-
   .variant-soft:active:not([data-disabled]),
   .variant-soft[data-pressed]:not([data-disabled]) {
     background-color: var(--btn-tint-hover);
     filter: brightness(0.95);
   }
-
   .variant-outline {
     background-color: transparent;
-    border-color: var(--color-border-strong);
-    color: var(--color-text-primary);
+    border-color: var(--color-line-strong);
+    color: var(--color-primary);
+  }
+  /* Non-secondary tones show their tone color at rest */
+  .variant-outline:not(.tone-secondary) {
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
-
   .variant-outline:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+    background-color: var(--color-hover);
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
-
   .variant-outline:active:not([data-disabled]),
   .variant-outline[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    background-color: var(--color-active);
   }
-
   .variant-ghost {
     background-color: transparent;
     border-color: transparent;
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
+  }
+  /* Non-secondary tones show their tone color at rest */
+  .variant-ghost:not(.tone-secondary) {
+    color: var(--btn-text-color);
   }
-
   .variant-ghost:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
-    color: var(--btn-color);
+    background-color: var(--color-hover);
+    color: var(--btn-text-color);
   }
-
   .variant-ghost:active:not([data-disabled]),
   .variant-ghost[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    background-color: var(--color-active);
   }
-
   /* ─── Loader ─────────────────────────────────────────────────────── */
-
   /* Always in the DOM, always position:absolute so it never affects layout */
   .loader {
     position: absolute;
@@ -238,21 +222,17 @@
     opacity: 0;
     pointer-events: none;
   }
-
   .loader-visible {
     opacity: 1;
   }
-
   .content-loading {
     visibility: hidden;
   }
-
   @keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
-
   .spinner {
     width: 12px;
     height: 12px;

package/src/button/button.tsx

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

package/src/card/card.module.css

@@ -1,17 +1,13 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     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;
   }
-
   .root-elevated {
     box-shadow: var(--shadow-sm);
   }
-
   .root-interactive {
     cursor: pointer;
     transition:
@@ -19,47 +15,40 @@
       box-shadow var(--duration-fast) var(--easing-standard),
       transform var(--duration-fast) var(--easing-standard);
   }
-
   .root-interactive:hover {
     border-color: var(--color-accent);
     box-shadow: var(--shadow-md);
   }
-
   .root-interactive:active {
     transform: scale(0.995);
   }
-
   .header {
     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);
     display: flex;
     flex-direction: column;
     gap: var(--space-0-5);
   }
-
   .title {
     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);
   }
-
   .description {
     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);
   }
-
   .body {
     padding: var(--space-4) var(--space-5);
   }
-
   .footer {
     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);
     display: flex;
     align-items: center;
     gap: var(--space-2);