@brijbyte/agentic-ui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./package.json": "./package.json",
     "./styles": "./dist/index.css",
     "./layer-order": "./dist/layer-order.css",
     "./tokens": "./dist/tokens.css",

package/src/button/button.module.css

@@ -78,18 +78,21 @@
   }
   /* ─── 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-on-accent);
@@ -98,6 +101,7 @@
     --btn-color: var(--color-secondary);
     --btn-color-hover: var(--color-primary);
     --btn-color-pressed: var(--color-primary);
+    --btn-text-color: var(--color-secondary);
     --btn-tint: var(--color-hover);
     --btn-tint-hover: var(--color-active);
     --btn-on-color: var(--color-canvas);
@@ -106,25 +110,28 @@
     --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 {
@@ -158,7 +165,7 @@
   .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);
@@ -173,10 +180,15 @@
     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-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
   .variant-outline:active:not([data-disabled]),
   .variant-outline[data-pressed]:not([data-disabled]) {
@@ -187,9 +199,13 @@
     border-color: transparent;
     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-hover);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
   .variant-ghost:active:not([data-disabled]),
   .variant-ghost[data-pressed]:not([data-disabled]) {

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/index.ts

@@ -2,236 +2,24 @@
 import "./styles/tokens.css";
 import "./styles/reset.css";
 
-// ─── AlertDialog ─────────────────────────────────────────────────────
-export { AlertDialog, AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from "./alert-dialog";
-export type {
-  AlertDialogProps,
-  AlertAction,
-  AlertDialogBackdropProps,
-  AlertDialogPopupProps,
-  AlertDialogTitleProps,
-  AlertDialogDescriptionProps,
-} from "./alert-dialog";
-
-// ─── ContextMenu ─────────────────────────────────────────────────────
-export {
-  ContextMenu,
-  ContextMenuPopup,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
-} from "./context-menu";
-export type {
-  ContextMenuProps,
-  ContextMenuEntry,
-  ContextMenuItemDef,
-  ContextMenuSeparatorDef,
-  ContextMenuGroupDef,
-  ContextMenuPopupProps,
-  ContextMenuItemProps,
-  ContextMenuSeparatorProps,
-  ContextMenuGroupProps,
-  ContextMenuGroupLabelProps,
-} from "./context-menu";
-
-// ─── Button ──────────────────────────────────────────────────────────
-export { Button } from "./button";
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./button";
-
-// ─── Badge ───────────────────────────────────────────────────────────
-export { Badge } from "./badge";
-export type { BadgeProps, BadgeVariant } from "./badge";
-
-// ─── Card ────────────────────────────────────────────────────────────
-export { Card, CardHeader, CardBody, CardFooter } from "./card";
-export type { CardProps, CardHeaderProps } from "./card";
-
-// ─── Input ───────────────────────────────────────────────────────────
-export { Input } from "./input";
-export type { InputProps, InputSize } from "./input";
-
-// ─── Checkbox ────────────────────────────────────────────────────────
-export { Checkbox, CheckboxRoot, CheckboxIndicator } from "./checkbox";
-export type { CheckboxProps, CheckboxRootProps, CheckboxIndicatorProps } from "./checkbox";
-
-// ─── Switch ──────────────────────────────────────────────────────────
-export { Switch, SwitchRoot, SwitchThumb } from "./switch";
-export type { SwitchProps, SwitchRootProps, SwitchThumbProps } from "./switch";
-
-// ─── Select ──────────────────────────────────────────────────────────
-export {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectPositioner,
-  SelectPopup,
-  SelectList,
-  SelectItem,
-  SelectItemText,
-  SelectItemIndicator,
-  SelectGroupContainer,
-  SelectGroupLabel,
-  SelectSeparator,
-} from "./select";
-export type {
-  SelectProps,
-  SelectOption,
-  SelectGroup,
-  SelectTriggerProps,
-  SelectValueProps,
-  SelectPositionerProps,
-  SelectPopupProps,
-  SelectListProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectItemIndicatorProps,
-  SelectGroupProps,
-  SelectGroupLabelProps,
-  SelectSeparatorProps,
-} from "./select";
-
-// ─── Dialog ──────────────────────────────────────────────────────────
-export { Dialog, DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogDescription, DialogClose } from "./dialog";
-export type {
-  DialogProps,
-  DialogBackdropProps,
-  DialogViewportProps,
-  DialogPopupProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
-  DialogCloseProps,
-} from "./dialog";
-
-// ─── Tooltip ─────────────────────────────────────────────────────────
-export { Tooltip, TooltipPositioner, TooltipPopup, TooltipArrow } from "./tooltip";
-export type { TooltipProps, TooltipPositionerProps, TooltipPopupProps, TooltipArrowProps } from "./tooltip";
-
-// ─── Tabs ────────────────────────────────────────────────────────────
-export { Tabs, TabsList, TabsTab, TabsPanel } from "./tabs";
-export type { TabsProps, TabItem, TabsListProps, TabsTabProps, TabsPanelProps } from "./tabs";
-
-// ─── Accordion ───────────────────────────────────────────────────────
-export { Accordion, AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "./accordion";
-export type {
-  AccordionProps,
-  AccordionItem,
-  AccordionItemProps,
-  AccordionHeaderProps,
-  AccordionTriggerProps,
-  AccordionPanelProps,
-} from "./accordion";
-
-// ─── Progress ────────────────────────────────────────────────────────
-export { Progress, ProgressTrack, ProgressIndicator } from "./progress";
-export type { ProgressProps, ProgressStatus, ProgressSize, ProgressTrackProps, ProgressIndicatorProps } from "./progress";
-
-// ─── Toast ───────────────────────────────────────────────────────────
-export { ToastViewport, useToastManager, ToastRoot, ToastTitle, ToastDescription, ToastClose, ToastViewportPart } from "./toast";
-export type { ToastType, ToastRootProps, ToastTitleProps, ToastDescriptionProps, ToastCloseProps, ToastViewportPartProps } from "./toast";
-
-// ─── Drawer ──────────────────────────────────────────────────────────
-export {
-  Drawer,
-  DrawerBackdrop,
-  DrawerViewport,
-  DrawerPopup,
-  DrawerContent,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerClose,
-  DrawerHandleBar,
-  DrawerFooter,
-} from "./drawer";
-export type {
-  DrawerProps,
-  DrawerSide,
-  DrawerBackdropProps,
-  DrawerViewportProps,
-  DrawerPopupProps,
-  DrawerContentProps,
-  DrawerTitleProps,
-  DrawerDescriptionProps,
-  DrawerCloseProps,
-} from "./drawer";
-
-// ─── Separator ───────────────────────────────────────────────────────
-export { Separator } from "./separator";
-export type { SeparatorProps } from "./separator";
-
-// ─── Slider ──────────────────────────────────────────────────────────
-export { Slider, SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderLabel, SliderValue } from "./slider";
-export type {
-  SliderProps,
-  SliderControlProps,
-  SliderTrackProps,
-  SliderIndicatorProps,
-  SliderThumbProps,
-  SliderLabelProps,
-  SliderValueProps,
-} from "./slider";
-
-// ─── Collapsible ─────────────────────────────────────────────────────
-export { Collapsible, CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from "./collapsible";
-export type { CollapsibleProps, CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps } from "./collapsible";
-
-// ─── NumberField ─────────────────────────────────────────────────────
-export {
-  NumberField,
-  NumberFieldGroup,
-  NumberFieldInput,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldScrubArea,
-  NumberFieldScrubAreaCursor,
-} from "./number-field";
-export type {
-  NumberFieldProps,
-  NumberFieldGroupProps,
-  NumberFieldInputProps,
-  NumberFieldDecrementProps,
-  NumberFieldIncrementProps,
-  NumberFieldScrubAreaProps,
-  NumberFieldScrubAreaCursorProps,
-} from "./number-field";
-
-// ─── Menu ────────────────────────────────────────────────────────────
-export { Menu, MenuPositioner, MenuPopup, MenuItem, MenuSeparator, MenuGroupLabel, MenuArrow, MenuItemShortcut } from "./menu";
-export type {
-  MenuProps,
-  MenuEntry,
-  MenuItemDef,
-  MenuSeparatorDef,
-  MenuGroupDef,
-  MenuPositionerProps,
-  MenuPopupProps,
-  MenuItemProps,
-  MenuSeparatorProps,
-  MenuGroupLabelProps,
-  MenuArrowProps,
-  MenuItemShortcutProps,
-} from "./menu";
-
-// ─── CSS module class name maps ───────────────────────────────────────
-// Import these to reference the hashed class names in custom CSS or tests.
-export { AlertDialogStyles } from "./alert-dialog";
-export { ContextMenuStyles } from "./context-menu";
-export { AccordionStyles } from "./accordion";
-export { BadgeStyles } from "./badge";
-export { ButtonStyles } from "./button";
-export { CardStyles } from "./card";
-export { CheckboxStyles } from "./checkbox";
-export { CollapsibleStyles } from "./collapsible";
-export { DialogStyles } from "./dialog";
-export { DrawerStyles } from "./drawer";
-export { InputStyles } from "./input";
-export { MenuStyles } from "./menu";
-export { NumberFieldStyles } from "./number-field";
-export { ProgressStyles } from "./progress";
-export { SelectStyles } from "./select";
-export { SeparatorStyles } from "./separator";
-export { SliderStyles } from "./slider";
-export { SwitchStyles } from "./switch";
-export { TabsStyles } from "./tabs";
-export { ToastStyles } from "./toast";
-export { TooltipStyles } from "./tooltip";
+export * from "./accordion";
+export * from "./alert-dialog";
+export * from "./badge";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./context-menu";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./input";
+export * from "./menu";
+export * from "./number-field";
+export * from "./progress";
+export * from "./select";
+export * from "./separator";
+export * from "./slider";
+export * from "./switch";
+export * from "./tabs";
+export * from "./toast";
+export * from "./tooltip";

package/src/styles/tokens.css

@@ -5,9 +5,6 @@
  * Monospace-first, semantic color tokens, supports light & dark modes.
  */
 
-/* Establish layer order — must come before any @layer usage */
-@layer theme, base, components, utilities;
-
 @layer theme {
   :root {
     /* ─── Typography ──────────────────────────────────────────────── */
@@ -146,7 +143,7 @@
 
     /* Text */
     --color-primary: rgba(0, 0, 0, 0.88);
-    --color-secondary: rgba(0, 0, 0, 0.55);
+    --color-secondary: rgba(0, 0, 0, 0.6); /* raised from 0.55 — AA 5.01:1 on hover bg */
     --color-tertiary: rgba(0, 0, 0, 0.36);
     --color-disabled: rgba(0, 0, 0, 0.24);
     --color-inverse: rgba(255, 255, 255, 0.95);
@@ -170,6 +167,8 @@
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
+    --color-accent-solid: #0078d4; /* solid button bg — same as accent in light (4.83:1 vs white) */
+    --color-accent-text: #005ea8; /* text/icon on tinted surfaces — AA 5.09:1 on accent-tint bg */
     --color-accent-tint: rgba(0, 120, 212, 0.1);
     --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
 
@@ -190,20 +189,23 @@
     /* Status — Success */
     --color-success-bg: #f0fdf4;
     --color-success-border: #bbf7d0;
-    --color-success-text: #15803d;
-    --color-success-solid: #16a34a;
+    --color-success-text: #147a39; /* darkened from #15803d — AA 4.73:1 on canvas */
+    --color-success-solid: #15803d; /* darkened from #16a34a — AA 5.02:1 vs white */
+    --color-success-on-solid: #ffffff;
 
     /* Status — Warning */
     --color-warning-bg: #fffbeb;
     --color-warning-border: #fde68a;
     --color-warning-text: #92400e;
-    --color-warning-solid: #d97706;
+    --color-warning-solid: #b45309; /* darkened from #d97706 — AA 5.02:1 vs white */
+    --color-warning-on-solid: #ffffff;
 
     /* Status — Error */
     --color-error-bg: #fef2f2;
     --color-error-border: #fecaca;
     --color-error-text: #991b1b;
     --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     /* Status — Info */
     --color-info-bg: #eff6ff;
@@ -268,6 +270,8 @@
       --color-accent: #0a84ff;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
+      --color-accent-solid: #0071e3; /* solid button bg — darkened from #0a84ff — AA 4.70:1 vs white */
+      --color-accent-text: #60a5fa; /* text/icon on tinted surfaces — AA 5.87:1 on accent-tint bg */
       --color-accent-tint: rgba(10, 132, 255, 0.12);
       --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -289,19 +293,22 @@
       --color-success-bg: rgba(22, 163, 74, 0.12);
       --color-success-border: rgba(22, 163, 74, 0.3);
       --color-success-text: #4ade80;
-      --color-success-solid: #22c55e;
+      --color-success-solid: #22c55e; /* vivid — AA 9.22:1 vs black text */
+      --color-success-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Warning */
       --color-warning-bg: rgba(217, 119, 6, 0.12);
       --color-warning-border: rgba(217, 119, 6, 0.3);
       --color-warning-text: #fbbf24;
-      --color-warning-solid: #f59e0b;
+      --color-warning-solid: #f59e0b; /* vivid — AA 9.78:1 vs black text */
+      --color-warning-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Error */
       --color-error-bg: rgba(220, 38, 38, 0.12);
       --color-error-border: rgba(220, 38, 38, 0.3);
       --color-error-text: #f87171;
-      --color-error-solid: #ef4444;
+      --color-error-solid: #dc2626; /* darkened from #ef4444 — AA 4.83:1 vs white */
+      --color-error-on-solid: #ffffff;
 
       /* Status — Info */
       --color-info-bg: rgba(37, 99, 235, 0.12);
@@ -355,6 +362,8 @@
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
     --color-accent-pressed: #005bb5;
+    --color-accent-solid: #0071e3;
+    --color-accent-text: #60a5fa;
     --color-accent-tint: rgba(10, 132, 255, 0.12);
     --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -374,16 +383,19 @@
     --color-success-border: rgba(22, 163, 74, 0.3);
     --color-success-text: #4ade80;
     --color-success-solid: #22c55e;
+    --color-success-on-solid: #000000;
 
     --color-warning-bg: rgba(217, 119, 6, 0.12);
     --color-warning-border: rgba(217, 119, 6, 0.3);
     --color-warning-text: #fbbf24;
     --color-warning-solid: #f59e0b;
+    --color-warning-on-solid: #000000;
 
     --color-error-bg: rgba(220, 38, 38, 0.12);
     --color-error-border: rgba(220, 38, 38, 0.3);
     --color-error-text: #f87171;
-    --color-error-solid: #ef4444;
+    --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     --color-info-bg: rgba(37, 99, 235, 0.12);
     --color-info-border: rgba(37, 99, 235, 0.3);