@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/src/drawer/drawer.module.css

@@ -1,8 +1,5 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   /* ── Backdrop ──────────────────────────────────────────────────── */
-
   .backdrop {
     --backdrop-opacity: 0.48;
     position: fixed;
@@ -11,39 +8,31 @@
     background-color: black;
     opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
     z-index: var(--z-overlay);
-
     transition-property: opacity;
     transition-duration: 450ms;
     transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
-
     /* iOS 26+: cover the full visual viewport even when scrolled */
     @supports (-webkit-touch-callout: none) {
       position: absolute;
     }
   }
-
   .backdrop[data-starting-style],
   .backdrop[data-ending-style] {
     opacity: 0;
   }
-
   .backdrop[data-swiping] {
     transition-duration: 0ms;
   }
-
   .backdrop[data-ending-style] {
     transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
   }
-
   /* ── Viewport ──────────────────────────────────────────────────── */
-
   .viewport {
     position: fixed;
     inset: 0;
     z-index: var(--z-modal);
     display: flex;
   }
-
   /* side drawers sit against their respective edge */
   .viewport[data-side="left"] {
     justify-content: flex-start;
@@ -61,29 +50,24 @@
     align-items: flex-start;
     justify-content: center;
   }
-
   /* iOS rounded inset padding */
   @supports (-webkit-touch-callout: none) {
     .viewport[data-side="left"],
     .viewport[data-side="right"] {
       padding: 0.625rem;
     }
-
     .viewport[data-side="bottom"] {
       padding: 0 0.625rem 0.625rem;
     }
-
     .viewport[data-side="top"] {
       padding: 0.625rem 0.625rem 0;
     }
   }
-
   /* ── Popup — shared ────────────────────────────────────────────── */
-
   .popup {
     box-sizing: border-box;
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
     outline: none;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -92,18 +76,14 @@
     transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
     transition-duration: 450ms;
   }
-
   .popup[data-swiping] {
     user-select: none;
     transition-duration: 0ms;
   }
-
   .popup[data-ending-style] {
     transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
   }
-
   /* ── Popup — right side (default) ─────────────────────────────── */
-
   .popup-right {
     --bleed: 3rem;
     height: 100%;
@@ -114,21 +94,17 @@
     margin-right: calc(-1 * var(--bleed));
     transform: translateX(var(--drawer-swipe-movement-x));
     transition-property: transform;
-
     @supports (-webkit-touch-callout: none) {
       --bleed: 0px;
       margin-right: 0;
       border-radius: var(--radius-xl);
     }
   }
-
   .popup-right[data-starting-style],
   .popup-right[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + 2px));
   }
-
   /* ── Popup — left side ─────────────────────────────────────────── */
-
   .popup-left {
     --bleed: 3rem;
     height: 100%;
@@ -139,21 +115,17 @@
     margin-left: calc(-1 * var(--bleed));
     transform: translateX(var(--drawer-swipe-movement-x));
     transition-property: transform;
-
     @supports (-webkit-touch-callout: none) {
       --bleed: 0px;
       margin-left: 0;
       border-radius: var(--radius-xl);
     }
   }
-
   .popup-left[data-starting-style],
   .popup-left[data-ending-style] {
     transform: translateX(calc(-100% + var(--bleed) - 2px));
   }
-
   /* ── Popup — bottom ────────────────────────────────────────────── */
-
   .popup-bottom {
     width: 100%;
     max-width: var(--drawer-max-width, 480px);
@@ -163,19 +135,15 @@
     border-bottom: none;
     transform: translateY(var(--drawer-swipe-movement-y));
     transition-property: transform;
-
     @supports (-webkit-touch-callout: none) {
       border-radius: var(--radius-2xl);
     }
   }
-
   .popup-bottom[data-starting-style],
   .popup-bottom[data-ending-style] {
     transform: translateY(calc(100% + 2px));
   }
-
   /* ── Popup — top ───────────────────────────────────────────────── */
-
   .popup-top {
     width: 100%;
     max-width: var(--drawer-max-width, 480px);
@@ -185,67 +153,54 @@
     border-top: none;
     transform: translateY(var(--drawer-swipe-movement-y));
     transition-property: transform;
-
     @supports (-webkit-touch-callout: none) {
       border-radius: var(--radius-2xl);
     }
   }
-
   .popup-top[data-starting-style],
   .popup-top[data-ending-style] {
     transform: translateY(calc(-100% - 2px));
   }
-
   /* ── Handle bar (bottom/top drawers) ───────────────────────────── */
-
   .handle-bar {
     width: 2.5rem;
     height: 4px;
     border-radius: 9999px;
-    background-color: var(--color-border-strong);
+    background-color: var(--color-line-strong);
     margin: 0 auto var(--space-4);
     flex-shrink: 0;
   }
-
   .popup-top .handle-bar {
     margin: var(--space-4) auto 0;
     order: 1; /* push to bottom in top drawer */
   }
-
   /* ── Content ───────────────────────────────────────────────────── */
-
   .content {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
     height: 100%;
   }
-
   /* ── Title ─────────────────────────────────────────────────────── */
-
   .title {
     font-family: var(--font-mono);
     font-size: var(--font-size-lg);
     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);
     margin: 0;
     padding-right: var(--space-6);
   }
-
   /* ── Description ───────────────────────────────────────────────── */
-
   .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-relaxed);
     margin: 0;
   }
-
   /* ── Close button ──────────────────────────────────────────────── */
-
   .close {
     position: absolute;
     top: var(--space-4);
@@ -255,7 +210,7 @@
     border-radius: var(--radius-sm);
     border: none;
     background: transparent;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -265,18 +220,14 @@
       background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
   }
-
   .close:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
-
   .close:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   /* ── Footer ────────────────────────────────────────────────────── */
-
   .footer {
     display: flex;
     align-items: center;
@@ -284,6 +235,6 @@
     gap: var(--space-2);
     padding-top: var(--space-4);
     margin-top: auto;
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
   }
 }

package/src/index.ts

@@ -2,6 +2,39 @@
 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";
@@ -126,6 +159,18 @@ export type {
 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";
@@ -169,6 +214,8 @@ export type {
 
 // ─── 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";
@@ -183,6 +230,7 @@ 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";

package/src/input/input.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .wrapper {
     display: flex;
@@ -7,20 +5,18 @@
     gap: var(--space-1);
     width: 100%;
   }
-
   .inputWrapper {
     position: relative;
     display: flex;
     align-items: center;
   }
-
   .root {
     width: 100%;
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     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-md);
     outline: none;
     transition:
@@ -30,57 +26,47 @@
     appearance: none;
     -webkit-appearance: none;
   }
-
   .root::placeholder {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     font-family: var(--font-mono);
   }
-
   .root:hover:not(:disabled):not([data-invalid]) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-line-strong);
   }
-
   .root:focus:not(:disabled) {
     border-color: var(--color-accent);
     box-shadow: var(--shadow-focus);
   }
-
   .root:disabled {
     opacity: 0.44;
     cursor: not-allowed;
     background-color: var(--color-surface-2);
   }
-
   .root[data-invalid],
   .root[aria-invalid="true"] {
     border-color: var(--color-error-solid);
   }
-
   .root[data-invalid]:focus,
   .root[aria-invalid="true"]:focus {
     box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
   }
-
   /* ─── Sizes ─────────────────────────────────────────── */
   .size-sm {
     height: 26px;
     padding-inline: var(--space-2);
     font-size: var(--font-size-xs);
   }
-
   .size-md {
     height: 30px;
     padding-inline: var(--space-2-5);
     font-size: var(--font-size-sm);
   }
-
   .size-lg {
     height: 36px;
     padding-inline: var(--space-3);
     font-size: var(--font-size-md);
     border-radius: var(--radius-lg);
   }
-
   /* Padding adjustments for icons */
   .has-left-icon {
     padding-left: var(--space-8);
@@ -88,18 +74,16 @@
   .has-right-icon {
     padding-right: var(--space-8);
   }
-
   /* ─── Adornments ────────────────────────────────────── */
   .adornment {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     pointer-events: none;
     width: var(--space-8);
   }
-
   .adornment-left {
     left: 0;
   }

package/src/menu/menu.module.css

@@ -1,33 +1,28 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .positioner {
     outline: none;
     z-index: var(--z-dropdown);
   }
-
   .popup {
     box-sizing: border-box;
     padding: var(--space-1) 0;
     border-radius: var(--radius-lg);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     box-shadow: var(--shadow-popover);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     min-width: 200px;
     transform-origin: var(--transform-origin);
     outline: none;
   }
-
   @supports (backdrop-filter: blur(12px)) {
     .popup {
       backdrop-filter: blur(20px) saturate(1.8);
       -webkit-backdrop-filter: blur(20px) saturate(1.8);
     }
   }
-
   .popup[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
@@ -35,7 +30,6 @@
       opacity 150ms var(--easing-ease-out),
       transform 150ms var(--easing-ease-out);
   }
-
   .popup[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
@@ -43,9 +37,7 @@
       opacity 75ms var(--easing-ease-in),
       transform 75ms var(--easing-ease-in);
   }
-
   /* ─── Item ───────────────────────────────────────────────────────── */
-
   .item {
     display: flex;
     align-items: center;
@@ -56,26 +48,22 @@
     border-radius: var(--radius-md);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     cursor: default;
     outline: none;
     user-select: none;
     position: relative;
     transition: none;
   }
-
   .item[data-highlighted] {
     background-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
-
   .item[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   /* ─── Item internals ─────────────────────────────────────────────── */
-
   .item-indicator {
     display: flex;
     align-items: center;
@@ -84,89 +72,71 @@
     flex-shrink: 0;
     color: inherit;
   }
-
   .item-text {
     flex: 1;
   }
-
   .item-shortcut {
     margin-left: var(--space-6);
     font-size: var(--font-size-xs);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     letter-spacing: 0.02em;
     flex-shrink: 0;
   }
-
   .item[data-highlighted] .item-shortcut {
-    color: color-mix(in srgb, var(--color-text-on-accent) 60%, transparent);
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
   }
-
   /* ─── Group label ────────────────────────────────────────────────── */
-
   .group-label {
     padding: var(--space-1-5) var(--space-3) var(--space-0-5);
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wide);
     cursor: default;
     user-select: none;
     margin-inline: var(--space-1);
   }
-
   /* ─── Separator ──────────────────────────────────────────────────── */
-
   .separator {
     margin: var(--space-1) 0;
     height: var(--border-width-base);
-    background-color: var(--color-border-subtle);
+    background-color: var(--color-line-subtle);
   }
-
   /* ─── Submenu ────────────────────────────────────────────────────── */
-
   .submenu-trigger-icon {
     margin-left: auto;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
   }
-
   .item[data-highlighted] .submenu-trigger-icon {
-    color: color-mix(in srgb, var(--color-text-on-accent) 70%, transparent);
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
   }
-
   /* ─── Arrow ──────────────────────────────────────────────────────── */
-
   .arrow {
     display: flex;
   }
-
   .arrow[data-side="top"] {
     bottom: -8px;
     rotate: 180deg;
   }
-
   .arrow[data-side="bottom"] {
     top: -8px;
     rotate: 0deg;
   }
-
   .arrow[data-side="left"] {
     right: -13px;
     rotate: 90deg;
   }
-
   .arrow[data-side="right"] {
     left: -13px;
     rotate: -90deg;
   }
-
   .arrow-fill {
-    fill: var(--color-bg-overlay);
+    fill: var(--color-overlay);
   }
-
   .arrow-stroke {
-    fill: var(--color-border-base);
+    fill: var(--color-line);
   }
 }