@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Autocomplete/autocomplete.types.ts

@@ -1,198 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { AutocompleteVariants } from './autocomplete.variants.js';
-
-/**
- * Default `{ value, label, disabled? }` option shape.
- *
- * The simplest shape and the one used by the component when no
- * `getOptionValue` / `getOptionLabel` props are provided. For richer
- * option shapes (e.g., `{ id, name, country, ... }`) make the component
- * generic by passing `<TOption>` and providing the accessors:
- *
- * ```tsx
- * type User = { id: string; name: string; admin?: boolean };
- *
- * <Autocomplete<User>
- *   name="owner"
- *   options={users}
- *   getOptionValue={(u) => u.id}
- *   getOptionLabel={(u) => u.name}
- *   getOptionDisabled={(u) => !u.admin}
- * />
- * ```
- */
-export interface AutocompleteOption {
-  /** Value persisted on the form. */
-  value: string;
-  /** Display label (string or any React node). */
-  label: ReactNode;
-  /** Per-option explicit disable. */
-  disabled?: boolean;
-}
-
-export interface AutocompleteSlotProps {
-  root?: { className?: string };
-  label?: { className?: string };
-  requiredMark?: { className?: string };
-  inputWrapper?: { className?: string };
-  input?: { className?: string };
-  trigger?: { className?: string };
-  clearButton?: { className?: string };
-  popover?: { className?: string };
-  listBox?: { className?: string };
-  listItem?: { className?: string };
-  emptyState?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-  /** Wrapper around the chip list (multi-select only). */
-  chipsList?: { className?: string };
-  /** Individual chip displayed in multi-select. */
-  chip?: { className?: string };
-  /** `×` button on a chip. */
-  chipRemove?: { className?: string };
-}
-
-/**
- * Union of the value shapes `<Autocomplete>` accepts.
- *
- * - **Single-select (default)**: `string | null`
- * - **Multi-select** (`multiple` prop): `string[] | null`
- *
- * `null` means "no selection" in both modes — a multi-select with no
- * picks emits an empty array on first commit, then keeps emitting arrays.
- */
-export type AutocompleteValue = string | string[] | null;
-
-/**
- * Props for `<Autocomplete>`.
- *
- * Bridge-integrated single-select combobox with full ARIA combobox
- * a11y, keyboard navigation, and Form Closure v1 error gating.
- *
- * Mirrors the MUI-side `@dashforge/ui/Autocomplete` at the bridge
- * level — same `name` / `rules` / `visibleWhen` / `access` semantics,
- * same StrictMode-safe unregister-on-unmount.
- *
- * @typeParam TOption  Shape of an option. Defaults to
- *                     `AutocompleteOption` (`{ value, label, disabled? }`).
- *                     Pass `<TOption>` + `getOptionValue` / `getOptionLabel`
- *                     for arbitrary domain types.
- */
-export interface AutocompleteProps<TOption = AutocompleteOption>
-  extends AutocompleteVariants {
-  name: string;
-  rules?: unknown;
-  options: TOption[];
-  label?: ReactNode;
-  helperText?: ReactNode;
-  required?: boolean;
-  error?: boolean;
-  disabled?: boolean;
-  /** Placeholder shown when the input is empty. */
-  placeholder?: string;
-  /** Engine predicate — field not rendered when it returns `false`. */
-  visibleWhen?: (engine: Engine) => boolean;
-  /** RBAC access requirement. */
-  access?: AccessRequirement;
-  /** Root className shortcut. */
-  sx?: string;
-  /** Per-slot className overrides. */
-  slotProps?: AutocompleteSlotProps;
-  /** Controlled value (form mode reads from the bridge if omitted). */
-  value?: AutocompleteValue;
-  /** Default value for uncontrolled mode (no-op in form mode). */
-  defaultValue?: AutocompleteValue;
-  /** Fires when the user picks an option (after bridge update in form mode). */
-  onValueChange?: (value: AutocompleteValue) => void;
-  /** Fallback text when no option matches the typed filter. */
-  emptyMessage?: string;
-
-  // ───── F5-A-bis: multi-select ─────
-
-  /**
-   * Multi-select mode. When `true`:
-   *
-   * - `value` / `defaultValue` accept `string[]` (or `null`).
-   * - Picks are toggled rather than replaced; the popover stays open.
-   * - Selected items render as chips inside the input wrapper.
-   * - Backspace at the start of an empty input removes the last chip.
-   * - The clear button (`×`) clears the entire selection.
-   */
-  multiple?: boolean;
-
-  // ───── F5-A-bis: free-solo ─────
-
-  /**
-   * Allow committing arbitrary strings (not just option values).
-   *
-   * When `true`:
-   *   - **Enter** commits the typed text as the value when no option
-   *     row is highlighted (or no rows match the filter).
-   *   - **Blur** commits the typed text the same way, unless the text
-   *     exactly matches an existing option's label (in which case the
-   *     option's value snaps in).
-   *   - In multi mode, each free-solo commit adds a new chip whose key
-   *     and label are the typed string.
-   *
-   * Free-solo is independent of `multiple` — works in both modes.
-   */
-  freeSolo?: boolean;
-
-  // ───── F5-A-bis: async runtime options ─────
-
-  /**
-   * Async option loader. Called (debounced by `loadDebounceMs`) every
-   * time the user types in the input. Results replace the static
-   * `options` prop while the user is actively filtering.
-   *
-   * Return a promise that resolves with the new option list. Reject /
-   * throw to surface a generic empty state.
-   *
-   * @example
-   * ```tsx
-   * <Autocomplete
-   *   name="user"
-   *   options={[]}
-   *   loadOptions={async (q) => {
-   *     const res = await fetch(`/api/users?q=${q}`);
-   *     return res.ok ? res.json() : [];
-   *   }}
-   * />
-   * ```
-   */
-  loadOptions?: (query: string) => Promise<TOption[]>;
-  /**
-   * Debounce window (ms) for `loadOptions`. The loader fires after the
-   * user stops typing for this long.
-   * @default 250
-   */
-  loadDebounceMs?: number;
-  /** Text displayed in the popover while a fetch is in flight. */
-  loadingMessage?: ReactNode;
-
-  // ───── Generic option accessors (F5-A-bis) ─────
-
-  /**
-   * Extract the persistable value (string) from an option.
-   * @default `(o) => (o as AutocompleteOption).value`
-   */
-  getOptionValue?: (option: TOption) => string;
-  /**
-   * Extract the display label from an option.
-   * @default `(o) => (o as AutocompleteOption).label`
-   */
-  getOptionLabel?: (option: TOption) => ReactNode;
-  /**
-   * Per-option disabled flag.
-   * @default `(o) => Boolean((o as AutocompleteOption).disabled)`
-   */
-  getOptionDisabled?: (option: TOption) => boolean;
-  /**
-   * Unique React key for an option. Defaults to `getOptionValue`.
-   * Override if your `value` strings can collide across distinct
-   * option records (rare).
-   */
-  getOptionKey?: (option: TOption) => string;
-}

package/src/components/Autocomplete/autocomplete.variants.ts

@@ -1,141 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Autocomplete>` with slots.
- *
- * Slots:
- *   - `root`         — outer wrapper (label + combobox + helper/error)
- *   - `label`        — text label above the input
- *   - `requiredMark` — red `*` for required fields
- *   - `inputWrapper` — surface holding the input + clear/trigger buttons
- *   - `input`        — the typeable text input
- *   - `trigger`      — caret / chevron button that opens the popover
- *   - `clearButton`  — `×` button to clear the current selection
- *   - `popover`      — floating panel containing the option list
- *   - `listBox`      — list element wrapping the options
- *   - `listItem`     — single option row
- *   - `emptyState`   — fallback when no options match the filter
- *   - `helperText`   — descriptive line below the input
- *   - `errorText`    — semantic counterpart for error mode
- *   - `chipsList`    — wrapper around selected chips (multi-select only)
- *   - `chip`         — individual selected chip
- *   - `chipRemove`   — `×` button on a chip
- */
-export const autocompleteVariants = tv({
-  slots: {
-    root: 'flex',
-    label: 'block text-sm font-medium text-neutral-900 mb-1',
-    requiredMark: 'text-danger-500 ml-0.5',
-    inputWrapper: [
-      'relative flex items-center',
-      'rounded-md border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30',
-    ],
-    input: [
-      'block w-full bg-transparent outline-none',
-      'text-neutral-900 placeholder:text-neutral-400',
-      'disabled:cursor-not-allowed disabled:opacity-60',
-      'read-only:cursor-default',
-    ],
-    trigger: [
-      'flex items-center justify-center shrink-0 px-2',
-      'text-neutral-600 hover:text-neutral-900',
-      'disabled:cursor-not-allowed disabled:opacity-40',
-      'transition-colors',
-      // Chevron flip on open — targets the SVG child via the aria-
-      // expanded state on the button itself (set by React). Smooth
-      // rotate gated on prefers-reduced-motion (WCAG 2.3.3); the
-      // 180° state still applies, just without the animated tween.
-      '[&[aria-expanded=true]>svg]:rotate-180',
-      '[&>svg]:transition-transform [&>svg]:duration-150 motion-reduce:[&>svg]:transition-none',
-    ],
-    clearButton: [
-      'flex items-center justify-center shrink-0 px-2',
-      'text-neutral-500 hover:text-neutral-900',
-      'transition-colors',
-    ],
-    popover: [
-      'z-50 mt-1 max-h-64 overflow-auto',
-      'rounded-md border bg-neutral-50 border-neutral-300 shadow-lg',
-      'min-w-[var(--trigger-width)]',
-    ],
-    listBox: 'outline-none py-1',
-    listItem: [
-      'cursor-pointer select-none px-3 py-2 text-sm text-neutral-900',
-      'outline-none',
-      'data-[focused]:bg-primary-50 data-[focused]:text-primary-900',
-      'data-[selected]:bg-primary-100 data-[selected]:text-primary-900 data-[selected]:font-medium',
-      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-    ],
-    emptyState: 'px-3 py-2 text-sm text-neutral-500',
-    helperText: 'mt-1 text-sm text-neutral-600',
-    errorText: 'mt-1 text-sm text-danger-600',
-    chipsList: 'flex flex-wrap items-center gap-1 px-1 py-1',
-    chip: [
-      'inline-flex items-center gap-1 shrink-0',
-      'rounded-md bg-primary-100 text-primary-900',
-      'px-2 py-0.5 text-xs font-medium',
-      'border border-primary-200',
-    ],
-    chipRemove: [
-      'inline-flex items-center justify-center',
-      'rounded-sm w-4 h-4 text-primary-700',
-      'hover:bg-primary-200 hover:text-primary-900',
-      'transition-colors',
-    ],
-  },
-  variants: {
-    size: {
-      sm: {
-        inputWrapper: 'h-8',
-        input: 'text-sm px-2',
-        trigger: 'h-8 text-xs',
-        clearButton: 'h-8',
-      },
-      md: {
-        inputWrapper: 'h-10',
-        input: 'text-base px-3',
-        trigger: 'h-10 text-sm',
-        clearButton: 'h-10',
-      },
-      lg: {
-        inputWrapper: 'h-12',
-        input: 'text-lg px-4',
-        trigger: 'h-12 text-base',
-        clearButton: 'h-12',
-      },
-    },
-    layout: {
-      stacked: { root: 'flex-col' },
-      inline: { root: 'flex-row items-start gap-3', label: 'mb-0 pt-2 whitespace-nowrap shrink-0' },
-    },
-    error: {
-      true: {
-        inputWrapper:
-          'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30',
-      },
-    },
-    fullWidth: {
-      true: {
-        root: 'w-full',
-        inputWrapper: 'w-full',
-      },
-    },
-    disabled: {
-      true: {
-        inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    layout: 'stacked',
-    error: false,
-    fullWidth: false,
-    disabled: false,
-  },
-});
-
-export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;