@dashforge/tw 0.11.0-beta → 1.0.0

package/dist/components/Autocomplete/autocomplete.types.d.ts

@@ -0,0 +1,214 @@
+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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+//# sourceMappingURL=autocomplete.types.d.ts.map

package/dist/components/Autocomplete/autocomplete.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/autocomplete.types.ts"],"names":[],"mappings":"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"}

package/dist/components/Autocomplete/autocomplete.variants.d.ts

@@ -0,0 +1,214 @@
+import { 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 declare const autocompleteVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    trigger: string[];
+    clearButton: string[];
+    popover: string[];
+    listBox: string;
+    listItem: string[];
+    emptyState: string;
+    helperText: string;
+    errorText: string;
+    chipsList: string;
+    chip: string[];
+    chipRemove: string[];
+}, undefined, {
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    trigger: string[];
+    clearButton: string[];
+    popover: string[];
+    listBox: string;
+    listItem: string[];
+    emptyState: string;
+    helperText: string;
+    errorText: string;
+    chipsList: string;
+    chip: string[];
+    chipRemove: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    trigger: string[];
+    clearButton: string[];
+    popover: string[];
+    listBox: string;
+    listItem: string[];
+    emptyState: string;
+    helperText: string;
+    errorText: string;
+    chipsList: string;
+    chip: string[];
+    chipRemove: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;
+//# sourceMappingURL=autocomplete.variants.d.ts.map

package/dist/components/Autocomplete/autocomplete.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/autocomplete.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmH/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,36 @@
+import type { BoxProps } from './box.types.js';
+/**
+ * `<Box>` — the surface primitive of @dashforge/tw.
+ *
+ * What it IS:
+ *   A polymorphic container with typed surface variants (plain /
+ *   outlined / elevated / soft / solid) × 7 intent colours, plus
+ *   spacing / sizing / rounded / elevation as enumerated token-scale
+ *   props. Replaces MUI's Box + Paper + Card + Surface in one component.
+ *
+ * What it is NOT (deliberate, enforced by the prop set):
+ *   • Not a flex container         → use <Stack>
+ *   • Not a grid container         → use <Grid>
+ *   • Not a paragraph              → use <Typography>
+ *   • Not a button                 → use <Button>
+ *
+ * The "Box is not flex" rule is the spine of the layout layer. Without
+ * it, every `<div>` in an app gravitates back to Box and the surface
+ * vs layout distinction collapses. Box's job is the SURFACE around
+ * content; Stack/Grid's job is the ARRANGEMENT of content. Two
+ * primitives, two responsibilities.
+ *
+ * When BOTH `as` and `asChild` are passed, `asChild` wins. Same rule
+ * as Typography — documented to avoid the dimension-bloat of a
+ * discriminated union over an 11-axis props type.
+ *
+ * Layering:
+ *   • Sits BENEATH every visual chrome — every card, every panel,
+ *     every section background.
+ *   • Composes ON TOP of @dashforge/tw-tokens (color + spacing + radius
+ *     + shadow scales) via the dashforgePreset CSS variables.
+ *   • Pairs with Typography for text content, Stack/Grid for layout
+ *     children inside it.
+ */
+export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,GAAG,kGAyCf,CAAC"}

package/dist/components/Box/box.types.d.ts

@@ -0,0 +1,54 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import type { BoxVariants } from './box.variants.js';
+/**
+ * Props for `<Box>` — the surface primitive.
+ *
+ * What lives in props (typed, ergonomic):
+ *   • Surface          — variant, color, elevation, rounded
+ *   • Spacing          — p, px, py, m, mx, my (token-scale steps)
+ *   • Sizing           — fullWidth, fullHeight
+ *   • Polymorphism     — as, asChild
+ *   • Override escape  — sx (utility string, merged via tailwind-merge)
+ *
+ * What does NOT live here (deliberate, see Box.tsx header):
+ *   • display / flex / grid / gap   → use Stack or Grid
+ *   • position / top / z-index      → use sx
+ *   • overflow / cursor             → use sx
+ *   • animation / transition        → use sx
+ *
+ * Native attribute overrides:
+ *   • `className` is omitted in favour of `sx` (string of utilities,
+ *     resolved by tailwind-merge so consumer wins over variant defaults)
+ *     — same convention as Button/TextField/Checkbox/Switch.
+ *   • `color` is omitted: collides with the deprecated HTML4 `color`
+ *     attribute. Our typed `color` (intent) is the right one.
+ */
+export interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'color'>, Pick<BoxVariants, 'variant' | 'color' | 'elevation' | 'rounded' | 'p' | 'px' | 'py' | 'm' | 'mx' | 'my' | 'fullWidth' | 'fullHeight'> {
+    /**
+     * Override the rendered HTML tag. Defaults to `'div'`. Useful when
+     * the surface should also carry semantic meaning — `<Box as="section">`
+     * for a page section, `<Box as="article">` for a card-shaped article.
+     *
+     * Ignored when `asChild` is true.
+     */
+    as?: ElementType;
+    /**
+     * Render via Radix `Slot` — the Box styles paint onto the single
+     * React child instead of wrapping it in our own element. Useful for
+     * `<Box asChild><Link>...</Link></Box>` to get a styled router link
+     * with no extra DOM wrapper.
+     *
+     * Mutually exclusive with `as` (when both are passed, `asChild` wins
+     * — see Box.tsx for the reasoning).
+     */
+    asChild?: boolean;
+    /**
+     * Utility classes appended to the variant chain. Resolved via
+     * `tailwind-merge` so the consumer's classes always win over the
+     * variant defaults. Use for one-off overrides AND for utility
+     * dimensions Box deliberately doesn't expose as props (overflow,
+     * position, animation, etc.).
+     */
+    sx?: string;
+}
+//# sourceMappingURL=box.types.d.ts.map

package/dist/components/Box/box.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../src/components/Box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,WAAW,EACd,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAC3C,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GACrC,WAAW,GAAG,YAAY,CAAC;IACvC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}