@dashforge/tw 0.10.0-beta → 1.0.0

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,50 @@
+import type { DividerProps } from './divider.types.js';
+/**
+ * `<Divider>` — visual separator. Two modes:
+ *
+ *   1. Line-only (no children):
+ *
+ *        <Divider />
+ *      →  <hr role="separator" aria-orientation="horizontal" />
+ *
+ *      Renders a single horizontal line via `border-t-*` on an `<hr>`
+ *      (which by default has no `display`, no margin in our reset, just
+ *      acts as the border carrier).
+ *
+ *   2. Labeled (with children):
+ *
+ *        <Divider><Typography variant="overline">OR</Typography></Divider>
+ *      →  <div role="separator" aria-orientation="horizontal">
+ *           <span aria-hidden className="flex-1 border-t" />
+ *           <span className="px-3">OR</span>
+ *           <span aria-hidden className="flex-1 border-t" />
+ *         </div>
+ *
+ *      Two line segments share the available space; the label sits
+ *      between them with horizontal padding for breathing room. Each
+ *      line segment is `aria-hidden` (the role="separator" on the root
+ *      conveys the separator semantics — duplicating it would confuse
+ *      screen readers).
+ *
+ * Alignment:
+ *   • align="start"  → label hugs the left, right segment grows
+ *   • align="center" (default) → both segments equal
+ *   • align="end"    → label hugs the right, left segment grows
+ *
+ *   Implemented by setting `flex-basis: 0` to either segment to keep
+ *   it minimal. We use `basis-[2rem]` (32px short stub) rather than
+ *   `basis-0` so a tiny line still hints at the divider on the squashed
+ *   side — pure flex-1 vs basis-0 would collapse it invisibly.
+ *
+ * Vertical orientation:
+ *   The line orientation flips (border-l instead of border-t). Vertical
+ *   labeled dividers are RARE in practice — supported for parity but
+ *   the typical use is line-only between flex row items.
+ *
+ * a11y:
+ *   • Root element gets `role="separator"` (or implicit via `<hr>`)
+ *   • `aria-orientation` is set explicitly so AT knows the axis
+ *   • Labeled mode: label has no extra role; the visual layout speaks
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,OAAO,sGAqFnB,CAAC"}

package/dist/components/Divider/divider.types.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { DividerVariants, DividerLineVariants } from './divider.variants.js';
+/**
+ * Props for `<Divider>` — visual separator with optional inline label.
+ *
+ * Two rendering modes:
+ *   • Line-only (no `children`)   — renders an `<hr>` (horizontal) or
+ *                                   `<div role="separator">` (vertical).
+ *   • Labeled    (with `children`) — renders a flex row: two line
+ *                                    segments around the centered label.
+ *                                    Canonical "OR" separator pattern.
+ *
+ * The user passes ONE consistent prop set; the implementation chooses
+ * the mode based on whether `children` is provided.
+ */
+export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'color' | 'children'>, Pick<DividerVariants, 'orientation' | 'align'>, Pick<DividerLineVariants, 'variant' | 'color'> {
+    /**
+     * Optional inline label. When present, the divider switches from
+     * "single line" to "two segments + label" layout — the canonical
+     * "OR" separator pattern between sign-in methods, section titled
+     * separators, etc.
+     *
+     * Accepts any node (string, Typography element, Stack with icon,
+     * etc.). Recommended: `<Typography variant="overline">OR</Typography>`
+     * for short uppercase labels.
+     */
+    children?: ReactNode;
+    /**
+     * In a flex Stack `direction="row"`, a `<Divider orientation="vertical">`
+     * with `flexItem` stretches to the row's cross-axis height (via
+     * `self-stretch`). Without it, vertical dividers may collapse to
+     * 0 height because there's nothing to anchor them.
+     *
+     * Implementation note: `self-stretch` is already applied on the
+     * vertical line segment by default in the TV — this prop is a
+     * no-op for now, kept for API parity with MUI's same flag (and as
+     * a forward-compatibility hook if we ever change the default).
+     */
+    flexItem?: boolean;
+    /**
+     * Utility classes appended to the variant chain. Resolved via
+     * `tailwind-merge`. Useful for one-off margin (`sx="my-8"`) or
+     * a custom border weight (`sx="border-t-2"`).
+     */
+    sx?: string;
+}
+//# sourceMappingURL=divider.types.d.ts.map

package/dist/components/Divider/divider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/divider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAElF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EACrE,IAAI,CAAC,eAAe,EAAE,aAAa,GAAG,OAAO,CAAC,EAC9C,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,OAAO,CAAC;IACtD;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/components/Divider/divider.variants.d.ts

@@ -0,0 +1,129 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `dividerVariants` — visual separator with two rendering modes (line-only
+ * vs labeled). Two interconnected TV recipes:
+ *
+ *   • `dividerVariants`      — root container (block layout, alignment)
+ *   • `dividerLineVariants`  — the actual line segments (border style,
+ *                              color, orientation)
+ *
+ * Two recipes (not one with slots) because the labeled mode renders
+ * THREE elements (left line · label · right line) while the line-only
+ * mode is ONE element. Splitting keeps each TV catalogue small and
+ * the type unions narrow.
+ *
+ * Mental model:
+ *   • Without `children` → renders an `<hr>` (or a div if vertical)
+ *     with the line styles applied directly.
+ *   • With `children`    → renders a flex row with two `<span>` line
+ *     segments either side of the label. The label's flex-shrink keeps
+ *     it from being squashed; the line segments share the remaining
+ *     space according to `align`.
+ *
+ * a11y: the root always carries `role="separator"` + `aria-orientation`
+ * — handled in Divider.tsx, not in TV (it's a prop, not a class).
+ */
+export declare const dividerVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex items-center", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    align: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex items-center", unknown, unknown, undefined>>;
+export type DividerVariants = VariantProps<typeof dividerVariants>;
+export declare const dividerLineVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    segment: {
+        full: string;
+        grow: string;
+    };
+}, undefined, "", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    segment: {
+        full: string;
+        grow: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    segment: {
+        full: string;
+        grow: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export type DividerLineVariants = VariantProps<typeof dividerLineVariants>;
+//# sourceMappingURL=divider.variants.d.ts.map

package/dist/components/Divider/divider.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/divider.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEA0B1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAYnE,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA0C9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,32 @@
+import type { GridProps } from './grid.types.js';
+/**
+ * `<Grid>` — CSS Grid container + item, polymorphic in role.
+ *
+ * API surface mirrors MUI Grid v2:
+ *   • <Grid container spacing={4} cols={12}>          ← container
+ *   • <Grid xs={12} md={6}>                           ← item
+ *
+ * Engine is REAL CSS Grid (not flexbox, unlike MUI v2 internals).
+ * Benefits over flexbox-based implementation:
+ *   • Native `gap` (no negative-margin tricks)
+ *   • `col-span-N` maps directly to `grid-column: span N`
+ *   • Vertical alignment without manual `align-items` per item
+ *   • Auto-flow for dense packing without DOM gymnastics
+ *
+ * TypeScript discriminated union (see grid.types.ts) makes mixing
+ * impossible: `<Grid container xs={6}>` won't compile. Same for the
+ * inverse. IntelliSense filters by role.
+ *
+ * Defaults at the component level (not at the TV level — see the
+ * variants file for the rationale):
+ *   • container: cols defaults to 12 (MUI convention)
+ *   • item:      xs defaults to 'full' so a forgotten prop doesn't
+ *                collapse the cell to 1/12th of a row
+ *
+ * `asChild` on a CONTAINER is technically allowed but rarely useful:
+ * `display:grid` only applies to direct children, so the slotted
+ * element has to already be a viable container parent. Use sparingly;
+ * test asserts the wrapping still emits the right class chain.
+ */
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,SAAS,EAKV,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,mGAwGhB,CAAC"}

package/dist/components/Grid/grid.types.d.ts

@@ -0,0 +1,103 @@
+import type { ElementType, HTMLAttributes } from 'react';
+/**
+ * Grid types — discriminated union for container vs item role.
+ *
+ * Pattern is MUI v2: a single `<Grid>` component that switches role
+ * based on the `container` prop. Container exposes layout axes
+ * (cols, spacing, autoFlow). Item exposes per-breakpoint span axes
+ * (xs/sm/md/lg/xl).
+ *
+ * TypeScript-level enforcement (the key win over MUI):
+ *   • `<Grid container xs={6}>` is a TYPE ERROR — `xs` doesn't exist
+ *     on the container shape.
+ *   • `<Grid xs={6} spacing={4}>` is a TYPE ERROR — `spacing` doesn't
+ *     exist on the item shape.
+ *   IntelliSense filters suggestions per role, so the developer never
+ *   sees props that don't apply.
+ *
+ * Type-only file (no runtime). Lives separate from the variants so the
+ * union doesn't widen with the variant catalogue's enum unions.
+ */
+/**
+ * Valid column-span values for a grid item, at any breakpoint.
+ *   • 1..12  — explicit span count
+ *   • 'auto' — content-sized (CSS Grid auto-track)
+ *   • 'full' — `col-span-full` (spans all columns regardless of count)
+ */
+export type ColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+/**
+ * Token-scale spacing step. Mirror of Box.p / Stack.gap so the value
+ * space across primitives is identical — `<Grid container spacing={4}>`
+ * and `<Stack gap={4}>` produce visually equivalent gaps.
+ */
+export type GridSpacingStep = 0 | '0.5' | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;
+/**
+ * Container-role props. Discriminated on `container: true`.
+ *
+ * NOTE on `cols`: defaults to 12 in the component implementation
+ * (not in TV) — the MUI v2 convention. Override to 6/4/3/2/1 for
+ * dense dashboard layouts.
+ */
+export interface GridContainerProps {
+    /** Discriminator — `true` makes this a grid container. */
+    container: true;
+    /** Number of columns. Default 12. */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Gap between cells. Shorthand for spacingX + spacingY. */
+    spacing?: GridSpacingStep;
+    /** Horizontal gap override (wins over `spacing`). */
+    spacingX?: GridSpacingStep;
+    /** Vertical gap override (wins over `spacing`). */
+    spacingY?: GridSpacingStep;
+    /** `grid-auto-flow` — useful for dense or column-major packing. */
+    autoFlow?: 'row' | 'col' | 'dense' | 'row-dense' | 'col-dense';
+}
+/**
+ * Item-role props. Discriminated on `container: false | undefined`.
+ *
+ * Each breakpoint accepts a `ColSpan`. The cascade is Tailwind-native
+ * mobile-first: `xs` is the base (no media query), `sm/md/lg/xl`
+ * override at the corresponding min-width.
+ *
+ * Default behaviour when no breakpoint is set: spans `full` — the
+ * "comfortable default" so a forgotten prop doesn't collapse the cell
+ * to 1/12th of a row.
+ */
+export interface GridItemProps {
+    /** Discriminator — absent (or `false`) makes this a grid item. */
+    container?: false;
+    /** Base breakpoint (no media query). Default `'full'`. */
+    xs?: ColSpan;
+    /** Span at sm breakpoint and up. */
+    sm?: ColSpan;
+    /** Span at md breakpoint and up. */
+    md?: ColSpan;
+    /** Span at lg breakpoint and up. */
+    lg?: ColSpan;
+    /** Span at xl breakpoint and up. */
+    xl?: ColSpan;
+}
+/**
+ * Common props shared by both roles. Kept in a separate intersection
+ * so the discriminated union stays narrow and IntelliSense fast.
+ */
+interface GridCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** Override the rendered HTML tag. Default `'div'`. Ignored under `asChild`. */
+    as?: ElementType;
+    /**
+     * Render via Radix Slot onto the single child. Wins over `as`.
+     * Note: container Grids using `asChild` don't make sense for most
+     * cases — the Slot pattern collapses our wrapper, but Grid's
+     * `display:grid` only applies to direct children, so the child
+     * needs to BE a container with the right children.
+     */
+    asChild?: boolean;
+    /** Utility-class override, merged via tailwind-merge. */
+    sx?: string;
+}
+/**
+ * `<Grid>` props — discriminated union: container OR item, never both.
+ */
+export type GridProps = (GridContainerProps | GridItemProps) & GridCommonProps;
+export {};
+//# sourceMappingURL=grid.types.d.ts.map

package/dist/components/Grid/grid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,OAAO,GACf,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAChD,MAAM,GACN,MAAM,CAAC;AAEX;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,SAAS,EAAE,IAAI,CAAC;IAChB,qCAAqC;IACrC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC9B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,CAAC;CAChE;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,aAAa;IAC5B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,0DAA0D;IAC1D,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oCAAoC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oCAAoC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oCAAoC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,oCAAoC;IACpC,EAAE,CAAC,EAAE,OAAO,CAAC;CACd;AAED;;;GAGG;AACH,UAAU,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACjF,gFAAgF;IAChF,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,kBAAkB,GAAG,aAAa,CAAC,GAAG,eAAe,CAAC"}