@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/badge/badge.tsx

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef } from "react";
+import styles from "./badge.module.css";
+
+export type BadgeVariant = "default" | "solid" | "soft" | "success" | "warning" | "error" | "info";
+
+export interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+  variant?: BadgeVariant;
+  dot?: boolean;
+}
+
+export function Badge({ variant = "default", dot = false, className, children, ...props }: BadgeProps) {
+  return (
+    <span className={[styles.root, styles[`variant-${variant}`], className ?? ""].filter(Boolean).join(" ")} {...props}>
+      {dot && <span className={styles.dot} aria-hidden="true" />}
+      {children}
+    </span>
+  );
+}
+export { styles as BadgeStyles };

package/src/badge/index.ts

@@ -0,0 +1,3 @@
+export { Badge } from "./badge";
+export type { BadgeProps, BadgeVariant } from "./badge";
+export { BadgeStyles } from "./badge";

package/src/button/button.module.css

@@ -0,0 +1,265 @@
+@layer components {
+  .root {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1-5);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+    line-height: 1;
+    border-radius: var(--radius-md);
+    border: var(--border-width-base) solid transparent;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    white-space: nowrap;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      opacity var(--duration-fast) var(--easing-standard),
+      transform 100ms var(--easing-ease-out);
+    outline: none;
+    position: relative;
+  }
+
+  .root:active:not([data-disabled]) {
+    transform: scale(0.97);
+  }
+
+  .root:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .root[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.44;
+    pointer-events: none;
+  }
+
+  /* ─── Sizes ──────────────────────────────────────────────────────── */
+
+  .size-xs {
+    height: 22px;
+    padding-inline: var(--space-2);
+    font-size: var(--font-size-xs);
+    border-radius: var(--radius-sm);
+  }
+
+  .size-sm {
+    height: 26px;
+    padding-inline: var(--space-2-5);
+    font-size: var(--font-size-sm);
+  }
+
+  .size-md {
+    height: 30px;
+    padding-inline: var(--space-3);
+    font-size: var(--font-size-md);
+  }
+
+  .size-lg {
+    height: 36px;
+    padding-inline: var(--space-4);
+    font-size: var(--font-size-lg);
+    border-radius: var(--radius-lg);
+  }
+
+  /* Icon-only */
+  .icon-only.size-xs {
+    width: 22px;
+    padding-inline: 0;
+  }
+  .icon-only.size-sm {
+    width: 26px;
+    padding-inline: 0;
+  }
+  .icon-only.size-md {
+    width: 30px;
+    padding-inline: 0;
+  }
+  .icon-only.size-lg {
+    width: 36px;
+    padding-inline: 0;
+  }
+
+  /* ─── 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
+   *   --btn-tint          soft bg
+   *   --btn-tint-hover    soft bg hover
+   *   --btn-on-color      text on solid bg
+   */
+
+  .tone-primary {
+    --btn-color: var(--color-accent);
+    --btn-color-hover: var(--color-accent-hover);
+    --btn-color-pressed: var(--color-accent-pressed);
+    --btn-tint: var(--color-accent-tint);
+    --btn-tint-hover: var(--color-accent-tint-hover);
+    --btn-on-color: var(--color-text-on-accent);
+  }
+
+  .tone-secondary {
+    --btn-color: var(--color-text-secondary);
+    --btn-color-hover: var(--color-text-primary);
+    --btn-color-pressed: var(--color-text-primary);
+    --btn-tint: var(--color-surface-hover);
+    --btn-tint-hover: var(--color-surface-active);
+    --btn-on-color: var(--color-bg-base);
+  }
+
+  .tone-destructive {
+    --btn-color: var(--color-error-solid);
+    --btn-color-hover: var(--color-error-solid);
+    --btn-color-pressed: var(--color-error-solid);
+    --btn-tint: var(--color-error-bg);
+    --btn-tint-hover: var(--color-error-bg);
+    --btn-on-color: #ffffff;
+  }
+
+  .tone-success {
+    --btn-color: var(--color-success-solid);
+    --btn-color-hover: var(--color-success-solid);
+    --btn-color-pressed: var(--color-success-solid);
+    --btn-tint: var(--color-success-bg);
+    --btn-tint-hover: var(--color-success-bg);
+    --btn-on-color: #ffffff;
+  }
+
+  .tone-warning {
+    --btn-color: var(--color-warning-solid);
+    --btn-color-hover: var(--color-warning-solid);
+    --btn-color-pressed: var(--color-warning-solid);
+    --btn-tint: var(--color-warning-bg);
+    --btn-tint-hover: var(--color-warning-bg);
+    --btn-on-color: #ffffff;
+  }
+
+  /* ─── Variants — consume tone tokens ────────────────────────────── */
+
+  .variant-solid {
+    background-color: var(--btn-color);
+    border-color: var(--btn-color);
+    color: var(--btn-on-color);
+  }
+
+  .variant-solid:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: brightness(0.92);
+  }
+
+  .variant-solid:active:not([data-disabled]),
+  .variant-solid[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: brightness(0.84);
+  }
+
+  /* primary solid gets its own hover tokens instead of filter */
+  .variant-solid.tone-primary:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: none;
+  }
+
+  .variant-solid.tone-primary:active:not([data-disabled]),
+  .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: none;
+  }
+
+  .variant-soft {
+    background-color: var(--btn-tint);
+    border-color: transparent;
+    color: var(--btn-color);
+  }
+
+  .variant-soft:hover:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+  }
+
+  .variant-soft:active:not([data-disabled]),
+  .variant-soft[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+    filter: brightness(0.95);
+  }
+
+  .variant-outline {
+    background-color: transparent;
+    border-color: var(--color-border-strong);
+    color: var(--color-text-primary);
+  }
+
+  .variant-outline:hover:not([data-disabled]) {
+    background-color: var(--color-surface-hover);
+    border-color: var(--btn-color);
+    color: var(--btn-color);
+  }
+
+  .variant-outline:active:not([data-disabled]),
+  .variant-outline[data-pressed]:not([data-disabled]) {
+    background-color: var(--color-surface-active);
+  }
+
+  .variant-ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-text-secondary);
+  }
+
+  .variant-ghost:hover:not([data-disabled]) {
+    background-color: var(--color-surface-hover);
+    color: var(--btn-color);
+  }
+
+  .variant-ghost:active:not([data-disabled]),
+  .variant-ghost[data-pressed]:not([data-disabled]) {
+    background-color: var(--color-surface-active);
+  }
+
+  /* ─── Loader ─────────────────────────────────────────────────────── */
+
+  /* Always in the DOM, always position:absolute so it never affects layout */
+  .loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .loader-visible {
+    opacity: 1;
+  }
+
+  .content-loading {
+    visibility: hidden;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner {
+    width: 12px;
+    height: 12px;
+    border: 1.5px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    opacity: 0.7;
+  }
+}

package/src/button/button.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import styles from "./button.module.css";
+
+export type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
+export type ButtonTone = "primary" | "secondary" | "destructive" | "success" | "warning";
+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;
+  /**
+   * 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;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = "solid",
+    tone = "primary",
+    size = "md",
+    loading = false,
+    loadingText,
+    iconOnly = false,
+    nativeButton = true,
+    disabled,
+    className,
+    children,
+    render,
+    ...props
+  },
+  ref,
+) {
+  const classes = [
+    styles.root,
+    styles[`variant-${variant}`],
+    styles[`tone-${tone}`],
+    styles[`size-${size}`],
+    iconOnly ? styles["icon-only"] : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <BaseButton ref={ref} className={classes} disabled={disabled ?? loading} render={render} nativeButton={nativeButton} {...props}>
+      <span className={`${styles.loader} ${loading && !loadingText ? styles["loader-visible"] : ""}`} aria-hidden="true">
+        <span className={styles.spinner} />
+      </span>
+      <span className={loading && !loadingText ? styles["content-loading"] : undefined}>
+        {loading && loadingText ? loadingText : children}
+      </span>
+    </BaseButton>
+  );
+});
+
+export { styles as ButtonStyles };

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export { Button } from "./button";
+export type { ButtonProps, ButtonVariant, ButtonTone, ButtonSize } from "./button";
+export { ButtonStyles } from "./button";

package/src/card/card.module.css

@@ -0,0 +1,67 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  .root-elevated {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root-interactive {
+    cursor: pointer;
+    transition:
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-standard);
+  }
+
+  .root-interactive:hover {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  .root-interactive:active {
+    transform: scale(0.995);
+  }
+
+  .header {
+    padding: var(--space-4) var(--space-5);
+    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0-5);
+  }
+
+  .title {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .description {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-normal);
+  }
+
+  .body {
+    padding: var(--space-4) var(--space-5);
+  }
+
+  .footer {
+    padding: var(--space-3) var(--space-5);
+    border-top: var(--border-width-base) solid var(--color-border-subtle);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}

package/src/card/card.tsx

@@ -0,0 +1,54 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import styles from "./card.module.css";
+
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  elevated?: boolean;
+  interactive?: boolean;
+}
+
+// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`
+export interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  /** Card heading rendered in the header area. */
+  heading?: ReactNode;
+  description?: ReactNode;
+}
+
+export function Card({ elevated, interactive, className, children, ...props }: CardProps) {
+  return (
+    <div
+      className={[styles.root, elevated ? styles["root-elevated"] : "", interactive ? styles["root-interactive"] : "", className ?? ""]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {
+  return (
+    <div className={`${styles.header} ${className ?? ""}`} {...props}>
+      {heading && <span className={styles.title}>{heading}</span>}
+      {description && <span className={styles.description}>{description}</span>}
+      {children}
+    </div>
+  );
+}
+
+export function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={`${styles.body} ${className ?? ""}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={`${styles.footer} ${className ?? ""}`} {...props}>
+      {children}
+    </div>
+  );
+}
+export { styles as CardStyles };

package/src/card/index.ts

@@ -0,0 +1,3 @@
+export { Card, CardHeader, CardBody, CardFooter } from "./card";
+export type { CardProps, CardHeaderProps } from "./card";
+export { CardStyles } from "./card";

package/src/checkbox/checkbox.module.css

@@ -0,0 +1,80 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .root[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  .indicator {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid var(--color-border-strong);
+    background-color: var(--color-surface-1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    position: relative;
+  }
+
+  .indicator:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-color: var(--color-accent);
+  }
+
+  .indicator:hover:not([data-disabled]) {
+    border-color: var(--color-accent);
+  }
+
+  .indicator[data-checked],
+  .indicator[data-indeterminate] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .indicator[data-checked]:hover,
+  .indicator[data-indeterminate]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  /* Checkmark SVG */
+  .icon {
+    width: 10px;
+    height: 10px;
+    color: var(--color-text-on-accent);
+    opacity: 0;
+    transform: scale(0.9);
+    transition:
+      opacity var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-spring);
+  }
+
+  .indicator[data-checked] .icon,
+  .indicator[data-indeterminate] .icon {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-normal);
+  }
+}

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,38 @@
+import { useId } from "react";
+import type { ReactNode } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import styles from "./checkbox.module.css";
+
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Checkbox({ children, id, className, onCheckedChange, ...props }: CheckboxProps) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const checkboxId = id ?? useId();
+
+  return (
+    <label className={`${styles.root} ${className ?? ""}`} htmlFor={checkboxId}>
+      <BaseCheckbox.Root id={checkboxId} className={styles.indicator} onCheckedChange={onCheckedChange as never} {...props}>
+        <BaseCheckbox.Indicator className={styles.icon}>
+          <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.5 5L3.5 7.5L8.5 2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+      {children && <span className={styles.label}>{children}</span>}
+    </label>
+  );
+}
+export { styles as CheckboxStyles };

package/src/checkbox/index.ts

@@ -0,0 +1,6 @@
+export { Checkbox } from "./checkbox";
+export type { CheckboxProps } from "./checkbox";
+
+export { CheckboxRoot, CheckboxIndicator } from "./parts";
+export type { CheckboxRootProps, CheckboxIndicatorProps } from "./parts";
+export { CheckboxStyles } from "./checkbox";

package/src/checkbox/parts.tsx

@@ -0,0 +1,54 @@
+/**
+ * Styled primitives for Checkbox.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@base-ui/react/checkbox';
+ * import { CheckboxRoot, CheckboxIndicator } from '@brijbyte/agentic-ui/checkbox';
+ *
+ * <label htmlFor="cb">
+ *   <CheckboxRoot id="cb" onCheckedChange={...}>
+ *     <CheckboxIndicator />
+ *   </CheckboxRoot>
+ *   Enable notifications
+ * </label>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import styles from "./checkbox.module.css";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator>;
+
+export interface CheckboxRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+export interface CheckboxIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+  /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */
+  children?: ReactNode;
+}
+
+export const CheckboxRoot = forwardRef<ComponentRef<typeof BaseCheckbox.Root>, CheckboxRootProps>(function CheckboxRoot(
+  { className, ...props },
+  ref,
+) {
+  return <BaseCheckbox.Root ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+});
+
+export const CheckboxIndicator = forwardRef<ComponentRef<typeof BaseCheckbox.Indicator>, CheckboxIndicatorProps>(function CheckboxIndicator(
+  { className, children, ...props },
+  ref,
+) {
+  return (
+    <BaseCheckbox.Indicator ref={ref} className={`${styles.icon} ${className ?? ""}`} {...props}>
+      {children ?? (
+        <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.5 5L3.5 7.5L8.5 2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+    </BaseCheckbox.Indicator>
+  );
+});