@brijbyte/agentic-ui 0.0.1 → 0.0.2

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,7 +76,6 @@
     width: 36px;
     padding-inline: 0;
   }
-
   /* ─── Tones — set scoped color tokens ────────────────────────────── */
   /*
    * Each tone exposes four custom properties consumed by the variants below:
@@ -96,25 +86,22 @@
    *   --btn-tint-hover    soft bg hover
    *   --btn-on-color      text on solid bg
    */
-
   .tone-primary {
     --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-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-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);
@@ -123,7 +110,6 @@
     --btn-tint-hover: var(--color-error-bg);
     --btn-on-color: #ffffff;
   }
-
   .tone-success {
     --btn-color: var(--color-success-solid);
     --btn-color-hover: var(--color-success-solid);
@@ -132,7 +118,6 @@
     --btn-tint-hover: var(--color-success-bg);
     --btn-on-color: #ffffff;
   }
-
   .tone-warning {
     --btn-color: var(--color-warning-solid);
     --btn-color-hover: var(--color-warning-solid);
@@ -141,93 +126,76 @@
     --btn-tint-hover: var(--color-warning-bg);
     --btn-on-color: #ffffff;
   }
-
   /* ─── 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);
   }
-
   .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);
   }
-
   .variant-outline: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: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);
   }
-
   .variant-ghost:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
     color: var(--btn-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 +206,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/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);

package/src/checkbox/checkbox.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
@@ -8,18 +6,16 @@
     cursor: pointer;
     user-select: none;
   }
-
   .root[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .indicator {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     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);
     display: flex;
     align-items: center;
@@ -31,50 +27,43 @@
     outline: none;
     position: relative;
   }
-
   .indicator:focus-visible {
     box-shadow: var(--shadow-focus);
     border-color: var(--color-accent);
   }
-
   .indicator:hover:not([data-disabled]) {
     border-color: var(--color-accent);
   }
-
   .indicator[data-checked],
   .indicator[data-indeterminate] {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
   }
-
   .indicator[data-checked]:hover,
   .indicator[data-indeterminate]:hover {
     background-color: var(--color-accent-hover);
     border-color: var(--color-accent-hover);
   }
-
   /* Checkmark SVG */
   .icon {
     width: 10px;
     height: 10px;
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
     opacity: 0;
     transform: scale(0.9);
     transition:
       opacity var(--duration-fast) var(--easing-standard),
       transform var(--duration-fast) var(--easing-spring);
   }
-
   .indicator[data-checked] .icon,
   .indicator[data-indeterminate] .icon {
     opacity: 1;
     transform: scale(1);
   }
-
   .label {
     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);
   }
 }

package/src/collapsible/collapsible.module.css

@@ -1,12 +1,9 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
-
   .trigger {
     display: flex;
     align-items: center;
@@ -15,9 +12,9 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     background: 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-md);
     cursor: pointer;
     outline: none;
@@ -29,7 +26,6 @@
       border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
       border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
   }
-
   .trigger[data-panel-open] {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -40,55 +36,46 @@
       border-bottom-right-radius var(--duration-normal) var(--easing-standard),
       border-bottom-color var(--duration-normal) var(--easing-standard);
   }
-
   .trigger:hover {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
   }
-
   .trigger:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   .trigger[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .trigger-icon {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
     transition: transform var(--duration-normal) var(--easing-standard);
   }
-
   .trigger[data-panel-open] .trigger-icon {
     transform: rotate(90deg);
   }
-
   .panel {
     height: var(--collapsible-panel-height);
     overflow: hidden;
     transition: height var(--duration-normal) var(--easing-standard);
   }
-
   /* hide when not using hidden="until-found" */
   .panel[hidden]:not([hidden="until-found"]) {
     display: none;
   }
-
   .panel[data-starting-style],
   .panel[data-ending-style] {
     height: 0;
   }
-
   .panel-content {
     padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
     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-relaxed);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-top: none;
     border-radius: 0 0 var(--radius-md) var(--radius-md);
-    background: var(--color-bg-elevated);
+    background: var(--color-elevated);
   }
 }