@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/components/Button.tsx

@@ -0,0 +1,186 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Check } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'yellow' | 'ink' | 'danger';
+export type ButtonGround = 'paper' | 'yellow' | 'ink';
+/** idle → busy (spinner, width locked, clicks ignored) → done (confirmed in place) → idle. */
+export type ButtonState = 'idle' | 'busy' | 'done';
+
+const button = cva(
+  [
+    'relative inline-flex items-center justify-center gap-2 whitespace-nowrap select-none',
+    'rounded-md border border-transparent font-sans font-semibold leading-none',
+    'transition-[background-color,border-color,color] duration-[120ms] ease-standard',
+    'cursor-pointer outline-none focus-visible:shadow-(--focus-ring)',
+    // Disabled sinks: the well with grey text (3.0 readme and design.cosx.co;
+    // the 3.0 Button source used opacity). "!" so hover never lifts it back.
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-3.5 text-[13px]',
+        md: 'h-[38px] px-[18px] text-ui',
+        lg: 'h-11 px-6 text-[16px]',
+      },
+      variant: { primary: '', secondary: 'bg-transparent', ghost: 'bg-transparent', yellow: 'bg-yellow text-ink hover:bg-yellow-hover', ink: 'bg-ink text-linen hover:bg-ink-raised ink:border-inv-rule ink:bg-ink-raised ink:hover:border-linen', danger: 'bg-error text-white hover:bg-error-text' },
+      ground: { auto: '', paper: '', yellow: '', ink: '' },
+    },
+    compoundVariants: [
+      // Primary: ink on paper and on the yellow; the yellow on ink (and in ink mode).
+      { variant: 'primary', ground: 'auto', class: 'bg-ink text-linen hover:bg-ink-raised ink:bg-yellow-accent ink:text-ink ink:hover:bg-yellow-accent-hover' },
+      { variant: 'primary', ground: ['paper', 'yellow'], class: 'bg-ink text-linen hover:bg-ink-raised' },
+      { variant: 'primary', ground: 'ink', class: 'bg-yellow-accent text-ink hover:bg-yellow-accent-hover' },
+      // Secondary: a hairline that turns ink on hover.
+      { variant: 'secondary', ground: 'auto', class: 'text-fg border-[rgba(17,17,17,.18)] hover:border-fg ink:border-rule' },
+      { variant: 'secondary', ground: ['paper', 'yellow'], class: 'text-ink border-[rgba(17,17,17,.18)] hover:border-ink' },
+      { variant: 'secondary', ground: 'ink', class: 'text-linen border-inv-rule hover:border-linen' },
+      // Ghost (subtle): text only; hover deepens one step.
+      { variant: 'ghost', ground: 'auto', class: 'text-fg hover:bg-hover' },
+      { variant: 'ghost', ground: ['paper', 'yellow'], class: 'text-ink hover:bg-[rgba(17,17,17,.05)]' },
+      { variant: 'ghost', ground: 'ink', class: 'text-linen hover:bg-ink-raised' },
+      // Focus ring follows the ground.
+      { ground: 'yellow', class: 'focus-visible:shadow-[0_0_0_3px_var(--yellow),0_0_0_5px_var(--ink)]' },
+      { ground: 'ink', class: 'focus-visible:shadow-[0_0_0_3px_var(--ink),0_0_0_5px_var(--yellow)]' },
+      // Disabled: filled types sink into the well; outlined and text-only turn grey.
+      {
+        variant: ['primary', 'yellow', 'ink', 'danger'],
+        class:
+          'disabled:border-transparent! disabled:bg-well! disabled:text-fg-secondary! aria-disabled:border-transparent! aria-disabled:bg-well! aria-disabled:text-fg-secondary!',
+      },
+      {
+        variant: ['secondary', 'ghost'],
+        class:
+          'disabled:bg-transparent! disabled:text-fg-secondary! aria-disabled:bg-transparent! aria-disabled:text-fg-secondary! disabled:hover:border-[rgba(17,17,17,.18)] aria-disabled:hover:border-[rgba(17,17,17,.18)]',
+      },
+    ],
+    defaultVariants: { size: 'md', variant: 'primary', ground: 'auto' },
+  },
+);
+
+export type ButtonProps = Omit<ComponentProps<'button'>, 'disabled'> & {
+  /** primary (one per view) · secondary · ghost (subtle: cancel, secondary links) · yellow (inline attention) · ink · danger (destructive, inside a confirming dialog). @default "primary" */
+  variant?: ButtonVariant | undefined;
+  /** Height 32 · 38 · 44 (the product control heights). @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** The surface underneath; sets the primary colour and the focus ring. Unset: paper, flipping to ink in ink mode. */
+  ground?: ButtonGround | undefined;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  /** Shortcut hint at the end of the button (⇧S, Esc). */
+  shortcut?: string | undefined;
+  /** A count at the end (Comments 12). Hidden at zero, 99+ above 99. */
+  count?: number | undefined;
+  /** Async state: busy shows a spinner, done confirms in place; the width never changes. See useButtonAction. */
+  state?: ButtonState | undefined;
+  /** Label shown while state="done". @default the children */
+  doneLabel?: ReactNode;
+  disabled?: boolean | undefined;
+  /** Why it is unavailable. Keeps the button focusable (aria-disabled) so the reason can be read and shown. */
+  disabledReason?: string | undefined;
+  /** Render the child (a link) with the button's look. Async state is not applied. */
+  asChild?: boolean | undefined;
+};
+
+export function formatCount(n: number): string | null {
+  if (!n || n <= 0) return null;
+  return n > 99 ? '99+' : String(n);
+}
+
+/**
+ * Button — one button for every action. Contrast is ink's job: the primary
+ * is ink on paper and on the yellow, the yellow on ink. One primary per
+ * view. Async results stay in the button: busy (width locked, repeat clicks
+ * ignored), done (confirmed in place); a failure is explained beside it.
+ * Hover deepens one step — no lift, no scale, no shadow.
+ */
+export function Button({
+  variant,
+  size,
+  ground,
+  iconLeft,
+  iconRight,
+  shortcut,
+  count,
+  state = 'idle',
+  doneLabel,
+  disabled,
+  disabledReason,
+  asChild,
+  className,
+  children,
+  onClick,
+  style,
+  ref,
+  ...rest
+}: ButtonProps) {
+  const classes = cn(button({ variant, size, ground: ground ?? 'auto' }), className);
+  if (asChild) {
+    return (
+      <Slot className={classes} {...(rest as object)}>
+        {children}
+      </Slot>
+    );
+  }
+
+  const busy = state === 'busy';
+  // Busy and done keep the idle content in place (hidden) and draw on top of
+  // it, so the button never resizes — also when it first renders busy.
+  const overlaid = state !== 'idle';
+  const blocked = Boolean(disabledReason) && disabled;
+  const shownCount = count === undefined ? null : formatCount(count);
+  return (
+    <button
+      type="button"
+      {...rest}
+      ref={ref}
+      className={classes}
+      style={style}
+      disabled={disabled && !disabledReason ? true : undefined}
+      // Busy is not disabled (spec: "busy and disabled are different states"):
+      // it keeps its look; aria-busy says so and repeat clicks are ignored below.
+      aria-disabled={blocked ? true : undefined}
+      aria-busy={busy || undefined}
+      title={blocked ? disabledReason : rest.title}
+      onClick={(e) => {
+        if (blocked || busy || state === 'done') {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      }}
+    >
+      <span className={cn('contents', overlaid && 'invisible')} aria-hidden={overlaid || undefined} data-button-content="">
+        {iconLeft}
+        {children}
+        {iconRight}
+        {shownCount && <span className="font-medium tabular-nums opacity-70">{shownCount}</span>}
+        {shortcut && (
+          <kbd className="ml-0.5 font-sans text-[12px] font-medium opacity-60" aria-hidden>
+            {shortcut}
+          </kbd>
+        )}
+      </span>
+      {overlaid && (
+        <span className="absolute inset-0 flex items-center justify-center gap-2" data-button-overlay="">
+          {busy ? (
+            <>
+              <Spinner />
+              <span className="sr-only">{children}</span>
+            </>
+          ) : (
+            <>
+              <Check size={14} strokeWidth={2} aria-hidden />
+              {doneLabel ?? children}
+            </>
+          )}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,42 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+
+const card = cva('overflow-hidden transition-[background-color,border-color] duration-[120ms] ease-standard', {
+  variants: {
+    ground: {
+      page: 'bg-page text-fg',
+      sunk: 'bg-sunk text-fg',
+      field: 'bg-brand-field text-ink',
+      ink: 'bg-ink text-linen ink:bg-ink-raised',
+    },
+    radius: { panel: 'rounded-lg', section: 'rounded-xl' },
+    outline: { true: 'border border-rule', false: '' },
+    interactive: { true: 'cursor-pointer outline-none hover:border-fg focus-visible:shadow-(--focus-ring)', false: '' },
+    accent: { true: 'border-t-4 border-t-yellow-accent', false: '' },
+  },
+  compoundVariants: [{ interactive: true, ground: 'page', class: 'hover:bg-hover' }],
+  defaultVariants: { ground: 'page', radius: 'panel', interactive: false, accent: false },
+});
+
+export type CardProps = ComponentProps<'div'> & {
+  /** page (paper) · sunk (linen) · field (the brand yellow) · ink. @default "page" */
+  ground?: 'page' | 'sunk' | 'field' | 'ink' | undefined;
+  /** panel 16px · section 24px (whole page-level sections). @default "panel" */
+  radius?: 'panel' | 'section' | undefined;
+  /** Hairline edge. Defaults to on for page, off for the other grounds. */
+  outline?: boolean | undefined;
+  /** Clickable card: hover wash + ink edge. Use asChild to make it the link or button. */
+  interactive?: boolean | undefined;
+  /** A 4px accent rule along the top. */
+  accent?: boolean | undefined;
+  asChild?: boolean | undefined;
+};
+
+/** Card — a rounded region of the page. No shadow: depth is cut into the page. */
+export function Card({ ground = 'page', radius, outline, interactive, accent, asChild, className, ...rest }: CardProps) {
+  const Comp = asChild ? Slot : 'div';
+  return <Comp className={cn(card({ ground, radius, outline: outline ?? ground === 'page', interactive, accent }), className)} {...rest} />;
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,67 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+import { useId, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type CheckboxProps = Omit<ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'onChange' | 'children'> & {
+  /** true · false · "indeterminate" (some children selected). */
+  checked?: boolean | 'indeterminate' | undefined;
+  onChange?: ((checked: boolean) => void) | undefined;
+  /** The label; clicking it toggles too. */
+  label?: ReactNode;
+  /** A line below the label — say why when disabled. */
+  description?: ReactNode;
+  /** Class for the whole row (className goes to the box). */
+  rowClassName?: string | undefined;
+};
+
+/**
+ * Checkbox — a choice in a form that applies on Save or Send (a setting
+ * that applies at once is a Switch). Sunk box, ink when checked; the mixed
+ * state means some children are selected. The whole row toggles.
+ */
+export function Checkbox({ checked, onChange, label, description, disabled, id, className, rowClassName, ...rest }: CheckboxProps) {
+  const auto = useId();
+  const boxId = id ?? `cb${auto}`;
+  const descId = description ? `${boxId}-desc` : undefined;
+  const box = (
+    <CheckboxPrimitive.Root
+      id={boxId}
+      {...(checked !== undefined && { checked })}
+      onCheckedChange={(v) => onChange?.(v === true)}
+      disabled={disabled}
+      aria-describedby={descId}
+      className={cn(
+        'peer mt-0.5 grid size-4 shrink-0 cursor-pointer place-items-center rounded-xs border border-fg-secondary bg-sunk text-page',
+        'transition-[background-color,border-color] duration-[120ms] ease-standard outline-none focus-visible:shadow-(--focus-ring)',
+        'data-[state=checked]:border-fg data-[state=checked]:bg-fg data-[state=indeterminate]:border-fg data-[state=indeterminate]:bg-fg',
+        'disabled:cursor-not-allowed',
+        className,
+      )}
+      {...rest}
+    >
+      <CheckboxPrimitive.Indicator className="grid place-items-center">
+        {checked === 'indeterminate' ? <Minus size={11} strokeWidth={2.5} aria-hidden /> : <Check size={11} strokeWidth={2.5} aria-hidden />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+  if (!label && !description) return box;
+  return (
+    <div className={cn('inline-flex items-start gap-2.5 font-sans', disabled && 'opacity-40', rowClassName)}>
+      {box}
+      <span className="flex flex-col gap-0.5">
+        {label && (
+          <label htmlFor={boxId} className={cn('text-small leading-[1.45] text-fg', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
+            {label}
+          </label>
+        )}
+        {description && (
+          <span id={descId} className="text-meta leading-normal text-fg-secondary">
+            {description}
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/ChoiceCards.tsx

@@ -0,0 +1,68 @@
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
+import { useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { definedAria } from './inputs-aria';
+
+export type Choice = {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** A glyph at the start (an Icon). */
+  icon?: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+export type ChoiceCardsProps = {
+  choices: Choice[];
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** Cards per row on wide screens; they stack on phones. @default 2 */
+  columns?: 2 | 3 | undefined;
+  'aria-label'?: string | undefined;
+  'aria-labelledby'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * ChoiceCards — a few weighty options, each a card with a title and a
+ * sentence (Add a person · Add an organisation). Radio semantics; the
+ * chosen card sits on the brand colour with an ink edge.
+ */
+export function ChoiceCards({ choices, value, defaultValue, onChange, columns = 2, className, ...aria }: ChoiceCardsProps) {
+  const [own, setOwn] = useState(defaultValue);
+  const current = value ?? own;
+  return (
+    <RadioPrimitive.Root
+      value={current ?? ''}
+      onValueChange={(v) => {
+        if (value === undefined) setOwn(v);
+        onChange?.(v);
+      }}
+      loop
+      {...definedAria(aria)}
+      className={cn('grid grid-cols-1 gap-3', columns === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2', className)}
+    >
+      {choices.map((c) => (
+        <RadioPrimitive.Item
+          key={c.value}
+          value={c.value}
+          disabled={c.disabled}
+          className={cn(
+            'group flex cursor-pointer items-start gap-3 rounded-lg border border-rule bg-page p-4 text-left font-sans text-fg outline-none',
+            'transition-[background-color,border-color] duration-[120ms] ease-standard hover:border-fg focus-visible:shadow-(--focus-ring)',
+            'data-[state=checked]:border-fg data-[state=checked]:bg-hover',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-rule',
+          )}
+        >
+          {c.icon && <span className="mt-0.5 flex shrink-0">{c.icon}</span>}
+          <span className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="text-ui font-medium">{c.title}</span>
+            {c.description && <span className="text-meta leading-normal text-fg-secondary">{c.description}</span>}
+          </span>
+        </RadioPrimitive.Item>
+      ))}
+    </RadioPrimitive.Root>
+  );
+}

package/src/components/CodeInput.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+
+export type CodeInputProps = {
+  /** Number of cells. @default 6 */
+  length?: number | undefined;
+  value?: string | undefined;
+  onChange?: ((code: string) => void) | undefined;
+  /** Called once every cell is filled — typing the last digit or pasting the whole code. */
+  onComplete?: ((code: string) => void) | undefined;
+  /** Digits only (default) or letters and digits. */
+  mode?: 'numeric' | 'alphanumeric' | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Seconds until the code can be sent again; the countdown runs here. */
+  resendIn?: number | undefined;
+  onResend?: (() => void) | undefined;
+  /** @default (s) => `Resend in ${s} s` */
+  formatCountdown?: ((seconds: number) => ReactNode) | undefined;
+  /** @default "Send a new code" */
+  resendLabel?: string | undefined;
+  /** Name of the group for screen readers when there is no Field label. @default "Verification code" */
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * CodeInput — one cell per character of a one-time code. Typing moves on,
+ * Backspace moves back, arrows move; pasting the whole code fills every
+ * cell and completes. The first cell carries autocomplete=one-time-code
+ * so phones offer the code from the message.
+ */
+export function CodeInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  mode = 'numeric',
+  invalid,
+  disabled,
+  resendIn,
+  onResend,
+  formatCountdown = (s) => `Resend in ${s} s`,
+  resendLabel = 'Send a new code',
+  'aria-label': ariaLabel = 'Verification code',
+  className,
+}: CodeInputProps) {
+  const field = useField();
+  const [own, setOwn] = useState('');
+  const code = (value ?? own).slice(0, length);
+  const cells = useRef<Array<HTMLInputElement | null>>([]);
+  const allowed = mode === 'numeric' ? /\d/ : /[a-z0-9]/i;
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const [left, setLeft] = useState(resendIn ?? 0);
+  useEffect(() => setLeft(resendIn ?? 0), [resendIn]);
+  useEffect(() => {
+    if (left <= 0) return;
+    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
+    return () => clearTimeout(t);
+  }, [left]);
+
+  const set = (next: string) => {
+    const clean = next.slice(0, length);
+    if (value === undefined) setOwn(clean);
+    onChange?.(clean);
+    if (clean.length === length && !clean.includes(' ')) onComplete?.(clean);
+  };
+  const focus = (i: number) => cells.current[Math.max(0, Math.min(length - 1, i))]?.focus();
+  const chars = Array.from({ length }, (_, i) => code[i] ?? '');
+
+  const put = (i: number, raw: string) => {
+    const typed = [...raw].filter((c) => allowed.test(c)).map((c) => c.toUpperCase());
+    if (!typed.length) return;
+    const next = [...chars];
+    typed.forEach((c, k) => {
+      if (i + k < length) next[i + k] = c;
+    });
+    // Empty cells are a space inside; the value has no trailing spaces.
+    set(next.map((c) => c || ' ').join('').trimEnd());
+    focus(i + typed.length);
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-2 font-sans', className)}>
+      <div role="group" aria-label={field?.labelId ? undefined : ariaLabel} aria-labelledby={field?.labelId} className="flex gap-2">
+        {chars.map((c, i) => (
+          <input
+            key={i}
+            ref={(el) => {
+              cells.current[i] = el;
+            }}
+            id={i === 0 ? field?.id : undefined}
+            value={c.trim()}
+            inputMode={mode === 'numeric' ? 'numeric' : 'text'}
+            autoComplete={i === 0 ? 'one-time-code' : 'off'}
+            maxLength={length}
+            disabled={off}
+            aria-label={`${i + 1} of ${length}`}
+            aria-invalid={bad || undefined}
+            aria-describedby={field?.describedBy}
+            onFocus={(e) => e.currentTarget.select()}
+            onChange={(e) => put(i, e.target.value)}
+            onPaste={(e) => {
+              e.preventDefault();
+              put(0, e.clipboardData.getData('text'));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Backspace') {
+                e.preventDefault();
+                const next = [...chars];
+                const at = c.trim() ? i : i - 1;
+                if (at < 0) return;
+                next[at] = ' ';
+                set(next.map((ch) => ch || ' ').join('').trimEnd());
+                focus(at);
+              } else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                focus(i - 1);
+              } else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                focus(i + 1);
+              }
+            }}
+            className={cn(
+              'h-[52px] w-11 rounded-md border bg-sunk text-center font-sans text-[20px] font-medium text-fg tabular-nums outline-none',
+              'transition-[border-color] duration-[120ms] ease-standard focus:border-fg focus:shadow-(--focus-ring)',
+              bad ? 'border-transparent bg-error-wash focus:border-error' : 'border-transparent',
+              off && 'cursor-not-allowed bg-well text-fg-secondary',
+            )}
+          />
+        ))}
+      </div>
+      {resendIn !== undefined && (
+        <div className="text-meta text-fg-secondary" aria-live="polite">
+          {left > 0 ? (
+            formatCountdown(left)
+          ) : (
+            <button type="button" onClick={onResend} className="cursor-pointer rounded-xs font-medium text-fg underline underline-offset-3 outline-none focus-visible:shadow-(--focus-ring)">
+              {resendLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}