@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/index.ts

@@ -0,0 +1,237 @@
+// ─── Styles (side-effect) ─────────────────────────────────────────────
+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";

package/src/input/index.ts

@@ -0,0 +1,3 @@
+export { Input } from "./input";
+export type { InputProps, InputSize } from "./input";
+export { InputStyles } from "./input";

package/src/input/input.module.css

@@ -0,0 +1,93 @@
+@layer components {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    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-primary);
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-md);
+    outline: none;
+    transition:
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      background-color var(--duration-fast) var(--easing-standard);
+    appearance: none;
+    -webkit-appearance: none;
+  }
+  .root::placeholder {
+    color: var(--color-tertiary);
+    font-family: var(--font-mono);
+  }
+  .root:hover:not(:disabled):not([data-invalid]) {
+    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);
+  }
+  .has-right-icon {
+    padding-right: var(--space-8);
+  }
+  /* ─── Adornments ────────────────────────────────────── */
+  .adornment {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-tertiary);
+    pointer-events: none;
+    width: var(--space-8);
+  }
+  .adornment-left {
+    left: 0;
+  }
+  .adornment-right {
+    right: 0;
+  }
+}

package/src/input/input.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Input as BaseInput } from "@base-ui/react/input";
+import styles from "./input.module.css";
+
+export type InputSize = "sm" | "md" | "lg";
+
+// Omit native `size` (number) so we can use string-based size tokens
+export interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+  /** Visual size. Maps to height + font-size design tokens. Default: `"md"`. */
+  size?: InputSize;
+  leftAdornment?: ReactNode;
+  rightAdornment?: ReactNode;
+  invalid?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { size = "md", leftAdornment, rightAdornment, invalid, className, ...props },
+  ref,
+) {
+  const classes = [
+    styles.root,
+    styles[`size-${size}`],
+    leftAdornment ? styles["has-left-icon"] : "",
+    rightAdornment ? styles["has-right-icon"] : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={styles.inputWrapper}>
+      {leftAdornment && <span className={`${styles.adornment} ${styles["adornment-left"]}`}>{leftAdornment}</span>}
+      <BaseInput ref={ref} className={classes} aria-invalid={invalid} {...props} />
+      {rightAdornment && <span className={`${styles.adornment} ${styles["adornment-right"]}`}>{rightAdornment}</span>}
+    </div>
+  );
+});
+export { styles as InputStyles };

package/src/menu/index.ts

@@ -0,0 +1,7 @@
+export { Menu } from "./menu";
+export type { MenuProps, MenuEntry, MenuItemDef, MenuSeparatorDef, MenuGroupDef } from "./menu";
+
+export { MenuPositioner, MenuPopup, MenuItem, MenuSeparator, MenuGroupLabel, MenuArrow, MenuItemShortcut } from "./parts";
+export type { MenuPositionerProps, MenuPopupProps, MenuItemProps, MenuSeparatorProps, MenuGroupLabelProps, MenuArrowProps } from "./parts";
+export type { MenuItemShortcutProps } from "./menuitemshortcut";
+export { MenuStyles } from "./menu";

package/src/menu/menu.module.css

@@ -0,0 +1,142 @@
+@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-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-popover);
+    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);
+    transition:
+      opacity 150ms var(--easing-ease-out),
+      transform 150ms var(--easing-ease-out);
+  }
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+  /* ─── Item ───────────────────────────────────────────────────────── */
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    /* Horizontal padding leaves room for the highlight inset */
+    padding: var(--space-1-5) var(--space-3);
+    margin: 1px var(--space-1);
+    border-radius: var(--radius-md);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    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-on-accent);
+  }
+  .item[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  /* ─── Item internals ─────────────────────────────────────────────── */
+  .item-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    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-tertiary);
+    letter-spacing: 0.02em;
+    flex-shrink: 0;
+  }
+  .item[data-highlighted] .item-shortcut {
+    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-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-line-subtle);
+  }
+  /* ─── Submenu ────────────────────────────────────────────────────── */
+  .submenu-trigger-icon {
+    margin-left: auto;
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+  .item[data-highlighted] .submenu-trigger-icon {
+    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-overlay);
+  }
+  .arrow-stroke {
+    fill: var(--color-line);
+  }
+}

package/src/menu/menu.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode, ReactElement } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import styles from "./menu.module.css";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface MenuItemDef {
+  type?: "item";
+  label: ReactNode;
+  value?: string;
+  disabled?: boolean;
+  shortcut?: ReactNode;
+  onSelect?: () => void;
+}
+
+export interface MenuSeparatorDef {
+  type: "separator";
+}
+
+export interface MenuGroupDef {
+  type: "group";
+  label?: ReactNode;
+  items: MenuItemDef[];
+}
+
+export type MenuEntry = MenuItemDef | MenuSeparatorDef | MenuGroupDef;
+
+export interface MenuProps {
+  /** The button/element that opens the menu. */
+  trigger: ReactElement;
+  items: MenuEntry[];
+  /** @default "bottom" */
+  side?: "top" | "bottom" | "left" | "right";
+  /** @default "start" */
+  align?: "start" | "center" | "end";
+  /** @default 4 */
+  sideOffset?: number;
+  /** controlled open state */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+// ─── Arrow SVG ─────────────────────────────────────────────────────────────
+
+function ArrowSvg() {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" aria-hidden>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        className={styles["arrow-fill"]}
+      />
+      <path
+        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+        className={styles["arrow-stroke"]}
+      />
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className={styles["arrow-stroke"]}
+      />
+    </svg>
+  );
+}
+
+// ─── Item renderer ──────────────────────────────────────────────────────────
+
+function renderEntry(entry: MenuEntry, index: number): ReactNode {
+  if (entry.type === "separator") {
+    return <BaseMenu.Separator key={index} className={styles.separator} />;
+  }
+
+  if (entry.type === "group") {
+    return (
+      <BaseMenu.Group key={index}>
+        {entry.label && <BaseMenu.GroupLabel className={styles["group-label"]}>{entry.label}</BaseMenu.GroupLabel>}
+        {entry.items.map((item, i) => renderEntry(item, i))}
+      </BaseMenu.Group>
+    );
+  }
+
+  return (
+    <BaseMenu.Item key={entry.value ?? index} className={styles.item} disabled={entry.disabled} onClick={entry.onSelect}>
+      <span className={styles["item-text"]}>{entry.label}</span>
+      {entry.shortcut && <span className={styles["item-shortcut"]}>{entry.shortcut}</span>}
+    </BaseMenu.Item>
+  );
+}
+
+// ─── High-level Menu ────────────────────────────────────────────────────────
+
+export function Menu({ trigger, items, side = "bottom", align = "start", sideOffset = 4, className, onOpenChange, ...props }: MenuProps) {
+  return (
+    <BaseMenu.Root onOpenChange={onOpenChange as never} {...props}>
+      <BaseMenu.Trigger render={trigger} />
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className={`${styles.positioner} ${className ?? ""}`} side={side} align={align} sideOffset={sideOffset}>
+          <BaseMenu.Popup className={styles.popup}>
+            <BaseMenu.Arrow className={styles.arrow}>
+              <ArrowSvg />
+            </BaseMenu.Arrow>
+            {items.map((entry, i) => renderEntry(entry, i))}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}
+export { styles as MenuStyles };

package/src/menu/menuitemshortcut.tsx

@@ -0,0 +1,9 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import styles from "./menu.module.css";
+
+export interface MenuItemShortcutProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuItemShortcut = forwardRef<HTMLSpanElement, MenuItemShortcutProps>(function MenuItemShortcut({ className, ...props }, ref) {
+  return <span ref={ref} className={`${styles["item-shortcut"]} ${className ?? ""}`} {...props} />;
+});