@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/src/dialog/dialog.tsx

@@ -11,7 +11,14 @@ export interface DialogProps {
   title?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
+  /** Buttons aligned to the right (cancel, confirm). */
   footer?: ReactNode;
+  /**
+   * Content anchored to the left of the footer — intended for a destructive
+   * action (e.g. Delete). When present the footer switches to space-between
+   * layout, matching the macOS dialog pattern.
+   */
+  footerStart?: ReactNode;
   className?: string;
   dismissible?: boolean;
 }
@@ -30,6 +37,7 @@ export function Dialog({
   description,
   children,
   footer,
+  footerStart,
   className,
   dismissible = true,
   onOpenChange,
@@ -50,7 +58,12 @@ export function Dialog({
               </BaseDialog.Close>
             )}
             {children && <div className={styles.body}>{children}</div>}
-            {footer && <div className={styles.footer}>{footer}</div>}
+            {(footer || footerStart) && (
+              <div className={`${styles.footer} ${footerStart ? styles["footer-split"] : ""}`}>
+                {footerStart && <div>{footerStart}</div>}
+                {footer && <div className={styles["footer-end"]}>{footer}</div>}
+              </div>
+            )}
           </BaseDialog.Popup>
         </BaseDialog.Viewport>
       </BaseDialog.Portal>

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,188 +2,24 @@
 import "./styles/tokens.css";
 import "./styles/reset.css";
 
-// ─── 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";
-
-// ─── 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 { 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 { 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/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;
   }