@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/menu/parts.tsx

@@ -0,0 +1,90 @@
+/**
+ * Styled primitives for Menu.
+ *
+ * @example
+ * ```tsx
+ * import { Menu } from '@base-ui/react/menu';
+ * import {
+ *   MenuPositioner, MenuPopup, MenuItem, MenuSeparator, MenuGroupLabel,
+ * } from '@brijbyte/agentic-ui/menu';
+ *
+ * <Menu.Root>
+ *   <Menu.Trigger render={<button>Open</button>} />
+ *   <Menu.Portal>
+ *     <MenuPositioner sideOffset={4}>
+ *       <MenuPopup>
+ *         <MenuItem>Action</MenuItem>
+ *         <MenuSeparator />
+ *         <MenuItem>Another</MenuItem>
+ *       </MenuPopup>
+ *     </MenuPositioner>
+ *   </Menu.Portal>
+ * </Menu.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import styles from "./menu.module.css";
+
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;
+type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseMenu.Arrow>;
+
+export interface MenuPositionerProps extends Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+export interface MenuPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface MenuItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+export interface MenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  className?: string;
+}
+export interface MenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+  className?: string;
+}
+export interface MenuArrowProps extends Omit<BaseArrowProps, "className"> {
+  className?: string;
+}
+
+export const MenuPositioner = forwardRef<ComponentRef<typeof BaseMenu.Positioner>, MenuPositionerProps>(function MenuPositioner(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMenu.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+});
+
+export const MenuPopup = forwardRef<ComponentRef<typeof BaseMenu.Popup>, MenuPopupProps>(function MenuPopup({ className, ...props }, ref) {
+  return <BaseMenu.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const MenuItem = forwardRef<ComponentRef<typeof BaseMenu.Item>, MenuItemProps>(function MenuItem({ className, ...props }, ref) {
+  return <BaseMenu.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+});
+
+export const MenuSeparator = forwardRef<ComponentRef<typeof BaseMenu.Separator>, MenuSeparatorProps>(function MenuSeparator(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMenu.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+});
+
+export const MenuGroupLabel = forwardRef<ComponentRef<typeof BaseMenu.GroupLabel>, MenuGroupLabelProps>(function MenuGroupLabel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMenu.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+});
+
+export const MenuArrow = forwardRef<ComponentRef<typeof BaseMenu.Arrow>, MenuArrowProps>(function MenuArrow({ className, ...props }, ref) {
+  return <BaseMenu.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+});
+
+/** Convenience class for keyboard shortcut hints inside a MenuItem. */
+export { MenuItemShortcut } from "./menuitemshortcut";

package/src/number-field/index.ts

@@ -0,0 +1,20 @@
+export { NumberField } from "./number-field";
+export type { NumberFieldProps } from "./number-field";
+
+export {
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from "./parts";
+export type {
+  NumberFieldGroupProps,
+  NumberFieldInputProps,
+  NumberFieldDecrementProps,
+  NumberFieldIncrementProps,
+  NumberFieldScrubAreaProps,
+  NumberFieldScrubAreaCursorProps,
+} from "./parts";
+export { NumberFieldStyles } from "./number-field";

package/src/number-field/number-field.module.css

@@ -0,0 +1,114 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+
+  .scrub-area {
+    cursor: ew-resize;
+    user-select: none;
+  }
+
+  .scrub-area-cursor {
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
+  }
+
+  .label {
+    cursor: ew-resize;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+  }
+
+  .group {
+    display: flex;
+  }
+
+  .input {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 6rem;
+    height: 2rem;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: normal;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-primary);
+    background-color: var(--color-bg-elevated);
+    border-top: var(--border-width-base) solid var(--color-border-base);
+    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    outline: none;
+    transition: box-shadow var(--duration-fast) var(--easing-standard);
+  }
+
+  .input:focus {
+    z-index: 1;
+    box-shadow: inset var(--shadow-focus);
+  }
+
+  .input[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  .step-button {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+    padding: 0;
+    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-surface-1);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      transform 100ms var(--easing-ease-out);
+  }
+
+  .step-button:hover {
+    background-color: var(--color-surface-hover);
+    color: var(--color-text-primary);
+  }
+
+  .step-button:active:not([data-disabled]) {
+    background-color: var(--color-surface-active);
+    transform: scale(0.93);
+  }
+
+  .step-button:focus-visible {
+    z-index: 1;
+    box-shadow: inset var(--shadow-focus);
+  }
+
+  .step-button[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  .decrement {
+    border-radius: var(--radius-md) 0 0 var(--radius-md);
+  }
+
+  .increment {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  }
+}

package/src/number-field/number-field.tsx

@@ -0,0 +1,75 @@
+import { useId } from "react";
+import type { ReactNode } from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import styles from "./number-field.module.css";
+
+export interface NumberFieldProps {
+  /** Visible label text. When present a scrub-area is also rendered. */
+  label?: ReactNode;
+  defaultValue?: number;
+  value?: number | null;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  format?: Intl.NumberFormatOptions;
+  allowWheelScrub?: boolean;
+  className?: string;
+}
+
+function MinusIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden>
+      <path d="M0 5H10" />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden>
+      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
+    </svg>
+  );
+}
+
+function ScrubCursorIcon() {
+  return (
+    <svg width="24" height="12" viewBox="0 0 24 14" fill="currentColor" stroke="white" strokeWidth="0.5" aria-hidden>
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  );
+}
+
+export function NumberField({ label, className, onValueChange, ...props }: NumberFieldProps) {
+  const id = useId();
+
+  return (
+    <BaseNumberField.Root id={id} className={`${styles.root} ${className ?? ""}`} onValueChange={onValueChange as never} {...props}>
+      {label && (
+        <BaseNumberField.ScrubArea className={styles["scrub-area"]}>
+          <label htmlFor={id} className={styles.label}>
+            {label}
+          </label>
+          <BaseNumberField.ScrubAreaCursor className={styles["scrub-area-cursor"]}>
+            <ScrubCursorIcon />
+          </BaseNumberField.ScrubAreaCursor>
+        </BaseNumberField.ScrubArea>
+      )}
+      <BaseNumberField.Group className={styles.group}>
+        <BaseNumberField.Decrement className={`${styles["step-button"]} ${styles.decrement}`}>
+          <MinusIcon />
+        </BaseNumberField.Decrement>
+        <BaseNumberField.Input className={styles.input} />
+        <BaseNumberField.Increment className={`${styles["step-button"]} ${styles.increment}`}>
+          <PlusIcon />
+        </BaseNumberField.Increment>
+      </BaseNumberField.Group>
+    </BaseNumberField.Root>
+  );
+}
+export { styles as NumberFieldStyles };

package/src/number-field/parts.tsx

@@ -0,0 +1,91 @@
+/**
+ * Styled primitives for NumberField.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField } from '@base-ui/react/number-field';
+ * import {
+ *   NumberFieldGroup,
+ *   NumberFieldInput,
+ *   NumberFieldDecrement,
+ *   NumberFieldIncrement,
+ * } from '@brijbyte/agentic-ui/number-field';
+ *
+ * <NumberField.Root>
+ *   <NumberField.ScrubArea>...</NumberField.ScrubArea>
+ *   <NumberFieldGroup>
+ *     <NumberFieldDecrement />
+ *     <NumberFieldInput />
+ *     <NumberFieldIncrement />
+ *   </NumberFieldGroup>
+ * </NumberField.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import styles from "./number-field.module.css";
+
+type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseNumberField.Group>;
+type BaseInputProps = ComponentPropsWithoutRef<typeof BaseNumberField.Input>;
+type BaseDecrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Decrement>;
+type BaseIncrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Increment>;
+type BaseScrubAreaProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;
+type BaseScrubAreaCursorProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubAreaCursor>;
+
+export interface NumberFieldGroupProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+export interface NumberFieldInputProps extends Omit<BaseInputProps, "className"> {
+  className?: string;
+}
+export interface NumberFieldDecrementProps extends Omit<BaseDecrementProps, "className"> {
+  className?: string;
+}
+export interface NumberFieldIncrementProps extends Omit<BaseIncrementProps, "className"> {
+  className?: string;
+}
+export interface NumberFieldScrubAreaProps extends Omit<BaseScrubAreaProps, "className"> {
+  className?: string;
+}
+export interface NumberFieldScrubAreaCursorProps extends Omit<BaseScrubAreaCursorProps, "className"> {
+  className?: string;
+}
+
+export const NumberFieldGroup = forwardRef<ComponentRef<typeof BaseNumberField.Group>, NumberFieldGroupProps>(function NumberFieldGroup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseNumberField.Group ref={ref} className={`${styles.group} ${className ?? ""}`} {...props} />;
+});
+
+export const NumberFieldInput = forwardRef<ComponentRef<typeof BaseNumberField.Input>, NumberFieldInputProps>(function NumberFieldInput(
+  { className, ...props },
+  ref,
+) {
+  return <BaseNumberField.Input ref={ref} className={`${styles.input} ${className ?? ""}`} {...props} />;
+});
+
+export const NumberFieldDecrement = forwardRef<ComponentRef<typeof BaseNumberField.Decrement>, NumberFieldDecrementProps>(
+  function NumberFieldDecrement({ className, ...props }, ref) {
+    return <BaseNumberField.Decrement ref={ref} className={`${styles["step-button"]} ${styles.decrement} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const NumberFieldIncrement = forwardRef<ComponentRef<typeof BaseNumberField.Increment>, NumberFieldIncrementProps>(
+  function NumberFieldIncrement({ className, ...props }, ref) {
+    return <BaseNumberField.Increment ref={ref} className={`${styles["step-button"]} ${styles.increment} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const NumberFieldScrubArea = forwardRef<ComponentRef<typeof BaseNumberField.ScrubArea>, NumberFieldScrubAreaProps>(
+  function NumberFieldScrubArea({ className, ...props }, ref) {
+    return <BaseNumberField.ScrubArea ref={ref} className={`${styles["scrub-area"]} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const NumberFieldScrubAreaCursor = forwardRef<ComponentRef<typeof BaseNumberField.ScrubAreaCursor>, NumberFieldScrubAreaCursorProps>(
+  function NumberFieldScrubAreaCursor({ className, ...props }, ref) {
+    return <BaseNumberField.ScrubAreaCursor ref={ref} className={`${styles["scrub-area-cursor"]} ${className ?? ""}`} {...props} />;
+  },
+);

package/src/progress/index.ts

@@ -0,0 +1,6 @@
+export { Progress } from "./progress";
+export type { ProgressProps, ProgressStatus, ProgressSize } from "./progress";
+
+export { ProgressTrack, ProgressIndicator } from "./parts";
+export type { ProgressTrackProps, ProgressIndicatorProps } from "./parts";
+export { ProgressStyles } from "./progress";

package/src/progress/parts.tsx

@@ -0,0 +1,51 @@
+/**
+ * Styled primitives for Progress.
+ *
+ * @example
+ * ```tsx
+ * import { Progress } from '@base-ui/react/progress';
+ * import { ProgressTrack, ProgressIndicator } from '@brijbyte/agentic-ui/progress';
+ *
+ * <Progress.Root value={60} max={100}>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ * </Progress.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import styles from "./progress.module.css";
+
+type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseProgress.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;
+
+export interface ProgressTrackProps extends Omit<BaseTrackProps, "className"> {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+export interface ProgressIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+  status?: "default" | "success" | "warning" | "error";
+}
+
+export const ProgressTrack = forwardRef<ComponentRef<typeof BaseProgress.Track>, ProgressTrackProps>(function ProgressTrack(
+  { className, size = "md", ...props },
+  ref,
+) {
+  return <BaseProgress.Track ref={ref} className={`${styles.track} ${styles[`track-${size}`]} ${className ?? ""}`} {...props} />;
+});
+
+export const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Indicator>, ProgressIndicatorProps>(function ProgressIndicator(
+  { className, status = "default", ...props },
+  ref,
+) {
+  return (
+    <BaseProgress.Indicator
+      ref={ref}
+      className={[styles.indicator, status !== "default" ? styles[`indicator-${status}`] : "", className ?? ""].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+});

package/src/progress/progress.module.css

@@ -0,0 +1,70 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+    width: 100%;
+  }
+
+  .label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+  }
+
+  .track {
+    width: 100%;
+    height: 6px;
+    background-color: var(--color-surface-3);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  .track-sm {
+    height: 4px;
+  }
+  .track-md {
+    height: 6px;
+  }
+  .track-lg {
+    height: 8px;
+  }
+
+  .indicator {
+    height: 100%;
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    transition: width var(--duration-slower) var(--easing-standard);
+  }
+
+  .indicator-success {
+    background-color: var(--color-success-solid);
+  }
+  .indicator-warning {
+    background-color: var(--color-warning-solid);
+  }
+  .indicator-error {
+    background-color: var(--color-error-solid);
+  }
+
+  /* Indeterminate */
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
+    }
+  }
+
+  .indicator[data-value="null"],
+  .indicator-indeterminate {
+    width: 30% !important;
+    animation: progress-indeterminate 1.4s linear infinite;
+  }
+}

package/src/progress/progress.tsx

@@ -0,0 +1,42 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import styles from "./progress.module.css";
+
+export type ProgressStatus = "default" | "success" | "warning" | "error";
+export type ProgressSize = "sm" | "md" | "lg";
+
+export interface ProgressProps {
+  value?: number | null;
+  max?: number;
+  label?: string;
+  showValue?: boolean;
+  status?: ProgressStatus;
+  size?: ProgressSize;
+  className?: string;
+}
+
+export function Progress({ value = null, max = 100, label, showValue = false, status = "default", size = "md", className }: ProgressProps) {
+  const percentage = value != null ? Math.round((value / max) * 100) : null;
+
+  return (
+    <BaseProgress.Root className={`${styles.root} ${className ?? ""}`} value={value} max={max}>
+      {(label ?? showValue) && (
+        <div className={styles["label-row"]}>
+          {label && <span>{label}</span>}
+          {showValue && percentage != null && <span>{percentage}%</span>}
+        </div>
+      )}
+      <BaseProgress.Track className={`${styles.track} ${styles[`track-${size}`]}`}>
+        <BaseProgress.Indicator
+          className={[
+            styles.indicator,
+            status !== "default" ? styles[`indicator-${status}`] : "",
+            value == null ? styles["indicator-indeterminate"] : "",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        />
+      </BaseProgress.Track>
+    </BaseProgress.Root>
+  );
+}
+export { styles as ProgressStyles };

package/src/select/index.ts

@@ -0,0 +1,30 @@
+export { Select } from "./select";
+export type { SelectProps, SelectOption, SelectGroup } from "./select";
+
+export {
+  SelectTrigger,
+  SelectValue,
+  SelectPositioner,
+  SelectPopup,
+  SelectList,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  SelectGroup as SelectGroupContainer,
+  SelectGroupLabel,
+  SelectSeparator,
+} from "./parts";
+export type {
+  SelectTriggerProps,
+  SelectValueProps,
+  SelectPositionerProps,
+  SelectPopupProps,
+  SelectListProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectItemIndicatorProps,
+  SelectGroupProps,
+  SelectGroupLabelProps,
+  SelectSeparatorProps,
+} from "./parts";
+export { SelectStyles } from "./select";