@dashforge/tw 0.1.0-beta → 0.2.0-beta

package/dist/src/components/Grid/grid.variants.d.ts

@@ -0,0 +1,453 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `gridVariants` — CSS Grid container + item, polymorphic in role.
+ *
+ * Architectural choice (planned with the user — F9 deep dive):
+ *
+ *   Pattern is MUI Grid v2 from the API side (`<Grid container>` +
+ *   `<Grid xs={6}>`), but engine is REAL CSS Grid under the hood
+ *   (`display: grid` + `grid-template-columns: repeat(N, 1fr)` +
+ *   `col-span-*`). MUI v2 uses flexbox + basis percentages — historical
+ *   IE11 reasons. In 2026, CSS Grid is universally supported AND
+ *   Tailwind ships `grid-cols-*` / `col-span-*` natively, so flexbox
+ *   would be a downgrade.
+ *
+ * Two distinct shapes coexist in the same TV recipe:
+ *
+ *   • container=true   — display:grid + cols + gap + autoFlow
+ *   • container=false  — col-span at each breakpoint (xs/sm/md/lg/xl)
+ *
+ *   The discriminated union lives in grid.types.ts (TypeScript-level);
+ *   here the TV catalogue exposes every axis so the consumer's choice
+ *   triggers the right classes regardless of which role the component
+ *   is playing. Unused axes produce no classes (TV silently drops
+ *   undefined variants), so a container Grid never accidentally emits
+ *   `col-span-6` and an item Grid never accidentally emits `grid`.
+ *
+ * Mapping table size:
+ *   • cols                  : 6 entries (12, 6, 4, 3, 2, 1)
+ *   • autoFlow              : 5 entries
+ *   • span axes (5×14)      : 70 entries (xs/sm/md/lg/xl × {1..12, auto, full})
+ *   • gap / gapX / gapY     : 33 entries (11 steps × 3 axes)
+ *
+ *   Total: ~115 literal class names. All explicit, all Tailwind-scannable.
+ *   Bundle CSS impact when fully exercised: ~3 KB gz (mostly the
+ *   responsive col-span set).
+ */
+export declare const gridVariants: import("tailwind-variants").TVReturnType<{
+    container: {
+        true: string;
+    };
+    cols: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        12: string;
+    };
+    autoFlow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    spacing: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingX: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingY: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    xs: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    sm: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    md: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    lg: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    xl: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+}, undefined, "", {
+    container: {
+        true: string;
+    };
+    cols: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        12: string;
+    };
+    autoFlow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    spacing: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingX: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingY: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    xs: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    sm: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    md: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    lg: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    xl: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    container: {
+        true: string;
+    };
+    cols: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        12: string;
+    };
+    autoFlow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    spacing: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingX: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    spacingY: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    xs: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    sm: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    md: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    lg: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+    xl: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        auto: string;
+        full: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export type GridVariants = VariantProps<typeof gridVariants>;
+//# sourceMappingURL=grid.variants.d.ts.map

package/dist/src/components/Grid/grid.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/grid.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA6FvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/src/components/Stack/Stack.d.ts

@@ -0,0 +1,24 @@
+import type { StackProps } from './stack.types.js';
+/**
+ * `<Stack>` — flex container 1D, the layout primitive.
+ *
+ * This is the ONLY component in @dashforge/tw that does flex. Box
+ * doesn't, Grid does CSS Grid (not flex). The strict naming → engine
+ * mapping is the whole point: when you read `<Stack>` in a JSX tree,
+ * you instantly know it's flex. No `<Box display="flex" ...>` traps.
+ *
+ * Direction defaults to `'col'` (vertical stack) — the most common
+ * case for forms, sidebars, settings panels. Pass `direction="row"`
+ * for horizontal layouts (toolbars, button rows, breadcrumbs).
+ *
+ * The `divider` prop is the runtime-only piece: TV can't encode the
+ * "render this between each child" logic as a class, so we walk the
+ * children at render time. The walk is O(n); for n ≤ ~10 (typical
+ * Stack content) the cost is negligible. For very long Stacks (1000+
+ * items), prefer to render dividers as part of each child instead.
+ *
+ * When `asChild` is true, the divider prop is silently ignored — Slot
+ * requires a single child, and the N-1 insertion has nowhere to act.
+ */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/src/components/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAqCnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,KAAK,oGAyCjB,CAAC"}

package/dist/src/components/Stack/stack.types.d.ts

@@ -0,0 +1,61 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import type { StackVariants } from './stack.variants.js';
+/**
+ * Props for `<Stack>` — flex container 1D, the layout primitive.
+ *
+ * Axes:
+ *   • direction              — flex-direction (default 'col')
+ *   • align                  — items-* (cross-axis)
+ *   • justify                — justify-* (main-axis)
+ *   • gap                    — token-scale spacing step
+ *   • wrap                   — flex-wrap
+ *   • fullWidth/fullHeight   — w-full / h-full
+ *   • divider                — node rendered N-1 times between children
+ *
+ * Polymorphism:
+ *   • as            — override the HTML tag (default 'div')
+ *   • asChild       — render via Radix Slot onto the single child
+ *
+ * What Stack does NOT do (route to other primitives):
+ *   • Surface chrome (border, bg, shadow)   → wrap in <Box>
+ *   • 2D layout (rows AND columns)          → use <Grid>
+ *   • Text styling                          → <Typography>
+ */
+export interface StackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'>, Pick<StackVariants, 'direction' | 'align' | 'justify' | 'gap' | 'wrap' | 'fullWidth' | 'fullHeight'> {
+    /**
+     * Node rendered N-1 times BETWEEN children — mirror of MUI Stack's
+     * divider prop. Useful for visual separators (a `<hr>`, a thin
+     * `<Box variant="outlined" sx="h-px border-0 border-t">`, an
+     * `<svg>` glyph) that need to follow the flex direction.
+     *
+     * The node is cloned for each insertion via `cloneElement`; pass a
+     * stable element (not a function) for best React reconciliation.
+     * `React.Children.toArray` flattens fragments before the walk, so
+     * `<Stack divider={...}><><...></></Stack>` works as expected.
+     */
+    divider?: ReactNode;
+    /**
+     * Override the rendered HTML tag. Defaults to `'div'`. Use when the
+     * Stack also has semantic meaning — `<Stack as="nav">` for a nav
+     * bar, `<Stack as="ul">` for a list (children become `<li>` via
+     * native HTML, not by us).
+     *
+     * Ignored when `asChild` is true.
+     */
+    as?: ElementType;
+    /**
+     * Render via Radix `Slot` — the Stack styles paint onto the single
+     * React child instead of wrapping it. Mutually exclusive with `as`
+     * (when both are passed, `asChild` wins). The `divider` prop is
+     * ignored when `asChild` is true (the Slot pattern wraps a single
+     * node, so the N-1 insertion logic has no place to act).
+     */
+    asChild?: boolean;
+    /**
+     * Utility classes appended to the variant chain. Resolved via
+     * `tailwind-merge` so the consumer's classes always win over the
+     * variant defaults.
+     */
+    sx?: string;
+}
+//# sourceMappingURL=stack.types.d.ts.map

package/dist/src/components/Stack/stack.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/stack.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,EACjD,IAAI,CAAC,aAAa,EAChB,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,GAChD,WAAW,GAAG,YAAY,CAAC;IACvC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/src/components/Stack/stack.variants.d.ts

@@ -0,0 +1,163 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `stackVariants` — flex container 1D, the layout primitive of @dashforge/tw.
+ *
+ * Architectural role (planned with the user — F9 deep dive):
+ *
+ *   Stack is the ONLY way to do flex in this library. Box is the
+ *   surface (border / bg / shadow); Stack is the arrangement (direction
+ *   / align / justify / gap). Two primitives, two responsibilities,
+ *   zero overlap.
+ *
+ *   This rules out the MUI failure mode where every `<Box display="flex"
+ *   gap={2}>` quietly becomes the de-facto flex container, drowning
+ *   the surface vs layout distinction. Here, if you see `<Stack>` in
+ *   the JSX, you KNOW it's flex; if you see `<Box>`, you KNOW it's
+ *   not. The component name carries the intent.
+ *
+ * Axes:
+ *   • direction         — row / col (+ reverse variants)
+ *   • align / justify   — cross-axis / main-axis alignment
+ *   • gap               — token-scale step (mirror Box spacing scale)
+ *   • wrap              — flex-wrap
+ *   • divider           — runtime-only (handled in Stack.tsx, not here)
+ *
+ * Sizing (`fullWidth`, `fullHeight`) is duplicated from Box because
+ * Stack often plays the role of a full-width strip / full-height
+ * column — re-typing `sx="w-full"` every time would be friction.
+ */
+export declare const stackVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        row: string;
+        col: string;
+        'row-reverse': string;
+        'col-reverse': string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+        baseline: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    gap: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    wrap: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, "flex", {
+    direction: {
+        row: string;
+        col: string;
+        'row-reverse': string;
+        'col-reverse': string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+        baseline: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    gap: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    wrap: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    direction: {
+        row: string;
+        col: string;
+        'row-reverse': string;
+        'col-reverse': string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+        stretch: string;
+        baseline: string;
+    };
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    gap: {
+        0: string;
+        '0.5': string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+    };
+    wrap: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    fullHeight: {
+        true: string;
+    };
+}, undefined, "flex", unknown, unknown, undefined>>;
+export type StackVariants = VariantProps<typeof stackVariants>;
+//# sourceMappingURL=stack.variants.d.ts.map

package/dist/src/components/Stack/stack.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/stack.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAgDxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}