@dashforge/tw 1.1.1 → 1.3.0

package/dist/src/components/Drawer/drawer.variants.d.ts

@@ -0,0 +1,177 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `<Drawer>` variant recipe — edge-anchored sliding panel.
+ *
+ * Slots:
+ *   - `overlay`      — backdrop (rendered only when `variant='temporary'`)
+ *   - `content`      — the drawer panel itself (positioned + sized)
+ *   - `header`       — top region holding title + close button
+ *   - `title`        — the accessible heading
+ *   - `closeButton`  — the `×` button (top-right of header)
+ *   - `body`         — main scrollable content region
+ *   - `footer`       — bottom action bar (rendered when `footer` prop is set)
+ *   - `resizeHandle` — drag handle on the free edge (rendered when `resize=true`)
+ *
+ * Axes:
+ *   - `position`  — which viewport edge the drawer anchors to. Drives the
+ *                   translate direction on open/close + which side gets a
+ *                   border.
+ *   - `size`      — bounded-axis preset (width for left/right, height for
+ *                   top/bottom). Applied programmatically in `Drawer.tsx`
+ *                   because the same size name maps to a different axis
+ *                   depending on `position`.
+ *   - `variant`   — `'temporary'` (modal, backdrop, focus trap, scroll
+ *                   lock) or `'persistent'` (non-modal, no backdrop,
+ *                   coexists with the surrounding content).
+ *
+ * Motion is gated by `prefers-reduced-motion`: slide animations collapse
+ * to instantaneous appear/disappear for users who opt out.
+ */
+export declare const drawerVariants: import("tailwind-variants").TVReturnType<{
+    position: {
+        right: {
+            content: string[];
+            resizeHandle: string;
+        };
+        left: {
+            content: string[];
+            resizeHandle: string;
+        };
+        top: {
+            content: string[];
+            resizeHandle: string;
+        };
+        bottom: {
+            content: string[];
+            resizeHandle: string;
+        };
+    };
+    variant: {
+        temporary: {};
+        persistent: {};
+        sticky: {};
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    header: string[];
+    title: string;
+    closeButton: string[];
+    body: string;
+    footer: string[];
+    resizeHandle: string[];
+}, undefined, {
+    position: {
+        right: {
+            content: string[];
+            resizeHandle: string;
+        };
+        left: {
+            content: string[];
+            resizeHandle: string;
+        };
+        top: {
+            content: string[];
+            resizeHandle: string;
+        };
+        bottom: {
+            content: string[];
+            resizeHandle: string;
+        };
+    };
+    variant: {
+        temporary: {};
+        persistent: {};
+        sticky: {};
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    header: string[];
+    title: string;
+    closeButton: string[];
+    body: string;
+    footer: string[];
+    resizeHandle: string[];
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        right: {
+            content: string[];
+            resizeHandle: string;
+        };
+        left: {
+            content: string[];
+            resizeHandle: string;
+        };
+        top: {
+            content: string[];
+            resizeHandle: string;
+        };
+        bottom: {
+            content: string[];
+            resizeHandle: string;
+        };
+    };
+    variant: {
+        temporary: {};
+        persistent: {};
+        sticky: {};
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+}, {
+    overlay: string[];
+    content: string[];
+    header: string[];
+    title: string;
+    closeButton: string[];
+    body: string;
+    footer: string[];
+    resizeHandle: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type DrawerVariants = VariantProps<typeof drawerVariants>;
+/**
+ * Size presets. Each entry maps a size name to a Tailwind class for
+ * both the horizontal axis (used by left/right drawers → width) and the
+ * vertical axis (used by top/bottom drawers → height).
+ *
+ * `full` uses `w-screen` / `h-screen` for a full-viewport drawer — the
+ * mobile-fullscreen pattern.
+ *
+ * Values in px (approximate):
+ *   sm  → 256 (w-64)   / 192 (h-48)
+ *   md  → 320 (w-80)   / 288 (h-72)
+ *   lg  → 384 (w-96)   / 384 (h-96)
+ *   full → 100vw       / 100vh
+ */
+export declare const DRAWER_SIZE_PRESETS: Record<NonNullable<DrawerVariants['size']>, {
+    x: string;
+    y: string;
+    xPx: number;
+    yPx: number;
+}>;
+/**
+ * Whether a position places the drawer on a horizontal edge (left/right),
+ * in which case the bounded axis is width — versus a vertical edge
+ * (top/bottom), where the bounded axis is height. Used everywhere the
+ * component needs to decide whether to work with `w-*` classes and `x`
+ * axis coordinates, or `h-*` and `y`.
+ */
+export declare function isHorizontalDrawer(position: NonNullable<DrawerVariants['position']>): boolean;
+//# sourceMappingURL=drawer.variants.d.ts.map

package/dist/src/components/Drawer/drawer.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/drawer.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0IzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,EACnC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAMnD,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,WAAW,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,GAChD,OAAO,CAET"}

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

@@ -1 +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"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,SAAS,EAKV,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,mGAsHhB,CAAC"}

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

@@ -99,5 +99,21 @@ interface GridCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNam
  * `<Grid>` props — discriminated union: container OR item, never both.
  */
 export type GridProps = (GridContainerProps | GridItemProps) & GridCommonProps;
+/**
+ * Subset of `<Grid container>` props theme-configurable via
+ * `theme.components.Grid.defaults` (Option C).
+ *
+ * Only container-role axes are exposed — item breakpoints (`xs`, `sm`,
+ * `md`, `lg`, `xl`) are per-instance responsive layout choices and are
+ * intentionally excluded.
+ */
+export type GridVariantProps = Pick<GridContainerProps, 'cols' | 'spacing' | 'spacingX' | 'spacingY' | 'autoFlow'>;
+declare module '@dashforge/tw-tokens' {
+    interface TWComponentDefaults {
+        Grid?: {
+            defaults?: Partial<GridVariantProps>;
+        };
+    }
+}
 export {};
 //# sourceMappingURL=grid.types.d.ts.map

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

@@ -1 +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"}
+{"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;AAE/E;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,kBAAkB,EAClB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAC1D,CAAC;AAEF,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,mBAAmB;QAC3B,IAAI,CAAC,EAAE;YACL,QAAQ,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;SACtC,CAAC;KACH;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAY7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,UAAU,+GAgFtB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAY7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,UAAU,+GAkFtB,CAAC"}

package/dist/src/components/IconButton/iconButton.types.d.ts

@@ -3,6 +3,19 @@ import type { ClassValue } from 'tailwind-variants';
 import type { Engine } from '@dashforge/ui-core';
 import type { AccessRequirement } from '@dashforge/rbac';
 import type { ButtonVariants } from '../Button/button.variants.js';
+/**
+ * Subset of `<IconButton>` props theme-configurable via
+ * `theme.components.IconButton.defaults` (Option C). Same variant axes
+ * as `<Button>` since IconButton reuses `buttonVariants`.
+ */
+export type IconButtonVariantProps = Pick<ButtonVariants, 'variant' | 'color' | 'size' | 'loading'>;
+declare module '@dashforge/tw-tokens' {
+    interface TWComponentDefaults {
+        IconButton?: {
+            defaults?: Partial<IconButtonVariantProps>;
+        };
+    }
+}
 /**
  * Props for `<IconButton>`.
  *
@@ -50,7 +63,33 @@ import type { ButtonVariants } from '../Button/button.variants.js';
  * </IconButton>
  * ```
  */
-export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'children'>, Pick<ButtonVariants, 'variant' | 'color' | 'size' | 'loading'> {
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'children'> {
+    /**
+     * Semantic intent role — same axis as `<Button>`, though the
+     * default here is `'neutral'` (icon-only surfaces usually deserve
+     * a subtler default variant than solid + primary).
+     * @default 'neutral'
+     */
+    color?: ButtonVariants['color'];
+    /**
+     * Visual treatment. Same axis as `<Button>`; default is `'ghost'`
+     * because icon-only actions are typically secondary.
+     * @default 'ghost'
+     */
+    variant?: ButtonVariants['variant'];
+    /**
+     * Square hit-area tier — matches Button's height scale so a
+     * `<Button size="md">` and `<IconButton size="md">` align in the
+     * same row.
+     * @default 'md'
+     */
+    size?: ButtonVariants['size'];
+    /**
+     * When `true`, replace the icon with a `<Spinner>`, short-circuit
+     * clicks, and set `aria-busy="true"`.
+     * @default false
+     */
+    loading?: ButtonVariants['loading'];
     /**
      * The icon — typically an SVG element from the consumer's icon
      * library (Lucide / Phosphor / Tabler / inline SVG). A single

package/dist/src/components/IconButton/iconButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/iconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,UAAU,CACrB,EACD,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;OAGG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB"}
+{"version":3,"file":"iconButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/iconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,cAAc,EACd,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CACzC,CAAC;AAEF,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,mBAAmB;QAC3B,UAAU,CAAC,EAAE;YACX,QAAQ,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;SAC5C,CAAC;KACH;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,UAAU,CACrB;IACH;;;;;OAKG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAEhC;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAE9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAEpC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;OAGG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB"}

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

@@ -0,0 +1,27 @@
+import type { ImageProps } from './image.types.js';
+/**
+ * Dashforge TW `<Image>` — a declarative, robust wrapper over the
+ * native `<img>`. Zero eval, no data fetching: it renders a URL you
+ * give it, and adds the three things a bare `<img>` lacks.
+ *
+ *   1. **No layout shift** — pass `aspectRatio` (or `width` + `height`)
+ *      and the box is reserved before the image loads (CSS
+ *      `aspect-ratio`, no JS measurement).
+ *   2. **Loading skeleton** — a `<Skeleton>` fills the reserved box
+ *      while the image loads, and is skipped for already-cached images
+ *      so there is no flash.
+ *   3. **Graceful error** — on load failure a muted fallback replaces
+ *      the broken-image glyph (`fallback` to customise).
+ *
+ * Lazy by default (`loading="lazy"`). Any native `<img>` attribute not
+ * named here (`srcSet`, `sizes`, `decoding`, …) is forwarded to the
+ * underlying element. The ref points at the `<img>`.
+ *
+ * @example
+ * ```tsx
+ * <Image src="/hero.jpg" alt="Team at work" aspectRatio={16 / 9} rounded="lg" />
+ * <Image src={avatarUrl} alt="Jane Doe" width={48} height={48} rounded="full" />
+ * ```
+ */
+export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA8BnD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,yGAiJjB,CAAC"}

package/dist/src/components/Image/image.types.d.ts

@@ -0,0 +1,126 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { Engine } from '@dashforge/ui-core';
+import type { ImageVariants } from './image.variants.js';
+/**
+ * Subset of `<Image>` props theme-configurable via
+ * `theme.components.Image.defaults` (Option C).
+ */
+export type ImageVariantProps = Pick<ImageVariants, 'fit' | 'rounded'>;
+declare module '@dashforge/tw-tokens' {
+    interface TWComponentDefaults {
+        Image?: {
+            defaults?: Partial<ImageVariantProps>;
+            slotProps?: ImageSlotProps;
+        };
+    }
+}
+export interface ImageSlotProps {
+    /** Wrapper element override. */
+    root?: {
+        className?: string;
+    };
+    /** `<img>` element override. */
+    img?: {
+        className?: string;
+    };
+    /** Loading-skeleton overlay override. */
+    skeleton?: {
+        className?: string;
+    };
+    /** Error-fallback overlay override. */
+    fallback?: {
+        className?: string;
+    };
+}
+/**
+ * Props for `<Image>`.
+ *
+ * A thin, declarative wrapper over the native `<img>` — zero eval, no
+ * data fetching — with the robustness a native `<img>` lacks:
+ *
+ *  1. **No layout shift.** Give `aspectRatio` (or `width` + `height`)
+ *     and the box is reserved before the image loads (CSS
+ *     `aspect-ratio`, no JS measurement).
+ *  2. **Loading skeleton.** While the image loads, a `<Skeleton>` fills
+ *     the reserved box. It is skipped automatically for already-cached
+ *     images (no flash).
+ *  3. **Graceful error.** On load failure a muted fallback replaces the
+ *     broken-image glyph — pass your own via `fallback`.
+ *  4. **Lazy by default** (`loading="lazy"`).
+ *
+ * Any native `<img>` attribute not listed here (`srcSet`, `sizes`,
+ * `crossOrigin`, `referrerPolicy`, `decoding`, …) is forwarded to the
+ * underlying element.
+ *
+ * Note on privacy: an external `src` is fetched by the browser from
+ * that host (egress). Self-host the asset (same-origin / your CDN) to
+ * keep it inside your boundary.
+ *
+ * @example
+ * ```tsx
+ * <Image src="/hero.jpg" alt="Team at work" aspectRatio={16 / 9} rounded="lg" />
+ * <Image src={avatarUrl} alt="Jane Doe" width={48} height={48} rounded="full" />
+ * <Image src={maybeBroken} alt="Product" aspectRatio={1} fallback={<MyPlaceholder />} />
+ * ```
+ */
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className'> {
+    /** Image source URL. Same-origin / data: keeps it inside your boundary; an external host is egress. */
+    src: string;
+    /**
+     * Alternative text (accessibility). Describe what the image conveys;
+     * use `alt=""` for purely decorative images so assistive tech skips it.
+     */
+    alt: string;
+    /**
+     * Locks the box shape before load to prevent layout shift — a number
+     * (`16 / 9`, `1`) or a CSS `aspect-ratio` string (`'16 / 9'`). When
+     * set, the image fills the box via `object-fit`.
+     */
+    aspectRatio?: number | string;
+    /**
+     * How the image fills its box — CSS `object-fit`.
+     * @default 'cover'
+     */
+    fit?: ImageVariants['fit'];
+    /**
+     * Corner radius token, clipped via `overflow-hidden`.
+     * @default 'none'
+     */
+    rounded?: ImageVariants['rounded'];
+    /**
+     * Native lazy/eager loading. Lazy defers off-screen images.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
+    /**
+     * Show a `<Skeleton>` while the image loads. Requires a reserved box
+     * (`aspectRatio`, or both `width` and `height`) — without one there
+     * is no space to paint it, so it is skipped.
+     * @default true
+     */
+    showSkeleton?: boolean;
+    /**
+     * Content shown when the image fails to load. Defaults to a muted
+     * surface with a broken-image glyph.
+     */
+    fallback?: ReactNode;
+    /**
+     * RBAC access requirement. When the current user is unauthorized:
+     * `onUnauthorized: 'hide'` → the image does not render; `'disable'` /
+     * `'readonly'` → it renders dimmed and non-interactive (an image has no
+     * true disabled state). Resolved against the nearest `RbacProvider`.
+     */
+    access?: AccessRequirement;
+    /**
+     * Reactive visibility predicate evaluated against the form engine — the
+     * image renders only when it returns `true` (e.g. show a preview once a
+     * file field has a value). No-op outside a `<DashForm>`.
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /** Root-level Tailwind override (wins via `tailwind-merge`). */
+    sx?: string;
+    /** Per-slot overrides. */
+    slotProps?: ImageSlotProps;
+}
+//# sourceMappingURL=image.types.d.ts.map

package/dist/src/components/Image/image.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/image.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,SAAS,CAAC,CAAC;AAEvE,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,mBAAmB;QAC3B,KAAK,CAAC,EAAE;YACN,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;YACtC,SAAS,CAAC,EAAE,cAAc,CAAC;SAC5B,CAAC;KACH;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,gCAAgC;IAChC,GAAG,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,uCAAuC;IACvC,QAAQ,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,WAAW,CAAC;IAC9E,uGAAuG;IACvG,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE9B;;;OAGG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE3B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAEnC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,0BAA0B;IAC1B,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B"}

package/dist/src/components/Image/image.variants.d.ts

@@ -0,0 +1,149 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * `<Image>` variant recipe.
+ *
+ * Slots:
+ *  - `root`     — positioned wrapper. Holds the `<img>` plus the
+ *                 loading skeleton / error-fallback overlays, and owns
+ *                 the corner radius + overflow clipping. `relative` so
+ *                 the overlays can be `absolute inset-0`.
+ *  - `img`      — the `<img>` element. `object-*` (the `fit` axis)
+ *                 lives here; `block w-full h-full` so it fills the
+ *                 reserved box when an aspect ratio / dimensions are
+ *                 given.
+ *  - `skeleton` — the loading placeholder overlay (a `<Skeleton>`
+ *                 stretched over the reserved box).
+ *  - `fallback` — the broken-image overlay shown after `onError`.
+ *
+ * Variant axes:
+ *  - `fit`     — CSS `object-fit`. `cover` (default) crops to fill,
+ *                `contain` letterboxes, etc.
+ *  - `rounded` — corner radius token, applied to `root` (which clips
+ *                the image via `overflow-hidden`).
+ *
+ * Neutral fallback surface auto-inverts through the dashforge preset's
+ * CSS-variable layer (no explicit `dark:`).
+ */
+export declare const imageVariants: import("tailwind-variants").TVReturnType<{
+    fit: {
+        cover: {
+            img: string;
+        };
+        contain: {
+            img: string;
+        };
+        fill: {
+            img: string;
+        };
+        none: {
+            img: string;
+        };
+        'scale-down': {
+            img: string;
+        };
+    };
+    rounded: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    img: string[];
+    skeleton: string[];
+    fallback: string[];
+}, undefined, {
+    fit: {
+        cover: {
+            img: string;
+        };
+        contain: {
+            img: string;
+        };
+        fill: {
+            img: string;
+        };
+        none: {
+            img: string;
+        };
+        'scale-down': {
+            img: string;
+        };
+    };
+    rounded: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    img: string[];
+    skeleton: string[];
+    fallback: string[];
+}, import("tailwind-variants").TVReturnType<{
+    fit: {
+        cover: {
+            img: string;
+        };
+        contain: {
+            img: string;
+        };
+        fill: {
+            img: string;
+        };
+        none: {
+            img: string;
+        };
+        'scale-down': {
+            img: string;
+        };
+    };
+    rounded: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    img: string[];
+    skeleton: string[];
+    fallback: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ImageVariants = VariantProps<typeof imageVariants>;
+//# sourceMappingURL=image.variants.d.ts.map

package/dist/src/components/Image/image.variants.d.ts.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"LeftNav.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/LeftNav.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,oBAAoB,CAAC;AA+M5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAkF1C"}
+{"version":3,"file":"LeftNav.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/LeftNav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,oBAAoB,CAAC;AAiN5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqF1C"}

package/dist/src/components/LeftNav/leftNav.types.d.ts

@@ -1,6 +1,19 @@
 import type { ReactNode, ComponentType, AnchorHTMLAttributes, Ref } from 'react';
 import type { AccessRequirement } from '@dashforge/rbac';
 import type { LeftNavVariants } from './leftNav.variants.js';
+/**
+ * Subset of `<LeftNav>` props theme-configurable via
+ * `theme.components.LeftNav.defaults` (Option C).
+ */
+export type LeftNavVariantProps = Pick<LeftNavVariants, 'width' | 'collapsed'>;
+declare module '@dashforge/tw-tokens' {
+    interface TWComponentDefaults {
+        LeftNav?: {
+            defaults?: Partial<LeftNavVariantProps>;
+            slotProps?: LeftNavSlotProps;
+        };
+    }
+}
 /**
  * One row in the LeftNav. May be either a clickable item OR a group
  * (a header that owns nested children, optionally collapsible).
@@ -105,15 +118,22 @@ export interface LeftNavSlotProps {
  * component renders the actual nav content and exposes a `collapsed`
  * prop for the icon-only "rail" rendering.
  */
-export interface LeftNavProps extends LeftNavVariants {
+export interface LeftNavProps {
+    /**
+     * Expanded-mode width tier — sm:w-48, md:w-60, lg:w-72.
+     * @default 'md'
+     */
+    width?: LeftNavVariants['width'];
+    /**
+     * Rail mode — icons only, labels visually hidden but kept in DOM
+     * for a11y (`sr-only`). Group children collapse under a caret.
+     * @default false
+     */
+    collapsed?: LeftNavVariants['collapsed'];
+    /** Nav items — a mix of `LeftNavItem` and `LeftNavGroup`. */
     items: LeftNavNode[];
     /** Currently-active item id (highlight + `aria-current="page"`). */
     activeId?: string;
-    /**
-     * Icon-only rail mode. When `true`, labels and group children are
-     * visually hidden (kept for screen readers via `sr-only`).
-     */
-    collapsed?: boolean;
     /** Fired when the user clicks the collapse-toggle button. */
     onCollapseChange?: (collapsed: boolean) => void;
     /** Fired when a group's expanded state changes (controlled or not). */