@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/Fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/FormActions/FormActions.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Line above the buttons. */
+    divider?: boolean;
+    /** Where the buttons sit from `sm` up. @default 'end' */
+    align?: 'start' | 'end' | 'between';
+}
+/**
+ * The buttons at the end of a form. Small screens stack them full width with
+ * the primary (last) button on top; from `sm` up they sit in a row.
+ */
+export declare const FormActions: React.ForwardRefExoticComponent<FormActionsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FormActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../../src/components/FormActions/FormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;CACrC;AAID;;;GAGG;AACH,eAAO,MAAM,WAAW,yFAcvB,CAAC"}

package/dist/components/FormActions/FormActions.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+
+const ALIGN = { start: "sm:justify-start", end: "sm:justify-end", between: "sm:justify-between" };
+const FormActions = React.forwardRef(
+  ({ divider = false, align = "end", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "form-actions",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:items-center",
+        ALIGN[align],
+        divider && "border-t border-border pt-4",
+        className
+      ),
+      ...props
+    }
+  )
+);
+FormActions.displayName = "FormActions";
+
+export { FormActions };

package/dist/components/FormActions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormActions';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormActions/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/FormField/FormField.js

@@ -39,7 +39,7 @@ const FormField = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-1 flex items-center gap-1.5",
+                "text-body-3 mt-1 flex items-center gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
-import type { GridProps } from './Grid.types';
+import type { GridItemProps, GridProps } from './Grid.types';
 export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+/** A grid cell that spans several columns (optionally per breakpoint). */
+export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,IAAI,kFAsDhB,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI7D,eAAO,MAAM,IAAI,kFAqEhB,CAAC;AAIF,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,sFAUpB,CAAC"}

package/dist/components/Grid/Grid.js

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { formatGap } from '../../utils/gap.js';
-import { colsMap, smColsMap, mdColsMap, lgColsMap, xlColsMap, gridVariants } from './Grid.styles.js';
+import { formatGap, formatAxisGap } from '../../utils/gap.js';
+import { colsMap, smColsMap, mdColsMap, lgColsMap, xlColsMap, templateClassMap, gridVariants, spanClassMap } from './Grid.styles.js';
 
+const BREAKPOINTS = ["base", "sm", "md", "lg", "xl"];
 const Grid = React.forwardRef(
   ({
     className,
@@ -16,6 +17,7 @@ const Grid = React.forwardRef(
     colGap,
     autoFit = false,
     minChildWidth = "240px",
+    template,
     asChild = false,
     children,
     ...props
@@ -28,15 +30,27 @@ const Grid = React.forwardRef(
     } else if (typeof cols === "number") {
       responsiveClasses.push(colsMap[cols] || "grid-cols-1");
     } else if (typeof cols === "object") {
+      if (cols.base) responsiveClasses.push(colsMap[cols.base] || "");
       if (cols.sm) responsiveClasses.push(smColsMap[cols.sm] || "");
       if (cols.md) responsiveClasses.push(mdColsMap[cols.md] || "");
       if (cols.lg) responsiveClasses.push(lgColsMap[cols.lg] || "");
       if (cols.xl) responsiveClasses.push(xlColsMap[cols.xl] || "");
     }
     const gapClass = formatGap(gap);
-    const rowGapClass = rowGap !== void 0 ? typeof rowGap === "number" ? `gap-y-${rowGap}` : `gap-y-[${rowGap}]` : "";
-    const colGapClass = colGap !== void 0 ? typeof colGap === "number" ? `gap-x-${colGap}` : `gap-x-[${colGap}]` : "";
+    const rowGapClass = formatAxisGap("y", rowGap);
+    const colGapClass = formatAxisGap("x", colGap);
+    const templateVars = {};
+    if (template) {
+      const byBreakpoint = typeof template === "string" ? { base: template } : template;
+      for (const bp of BREAKPOINTS) {
+        const value = byBreakpoint[bp];
+        if (!value) continue;
+        templateVars[bp === "base" ? "--grid-template" : `--grid-template-${bp}`] = value;
+        responsiveClasses.push(templateClassMap[bp]);
+      }
+    }
     const gridStyles = {
+      ...templateVars,
       ...style,
       ...customGridTemplate ? { gridTemplateColumns: customGridTemplate } : {}
     };
@@ -54,5 +68,17 @@ const Grid = React.forwardRef(
   }
 );
 Grid.displayName = "Grid";
+const GridItem = React.forwardRef(
+  ({ className, span, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "div";
+    const bySize = span === void 0 ? {} : typeof span === "object" ? span : { base: span };
+    const spanClasses = BREAKPOINTS.map((bp) => {
+      const value = bySize[bp];
+      return value === void 0 ? void 0 : spanClassMap[bp][String(value)];
+    });
+    return /* @__PURE__ */ jsx(Component, { ref, "data-slot": "grid-item", className: cn(spanClasses, className), ...props });
+  }
+);
+GridItem.displayName = "GridItem";
 
-export { Grid };
+export { Grid, GridItem };

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

@@ -4,4 +4,90 @@ export declare const smColsMap: Record<number, string>;
 export declare const mdColsMap: Record<number, string>;
 export declare const lgColsMap: Record<number, string>;
 export declare const xlColsMap: Record<number, string>;
+/** `template`: the column template comes from a CSS variable per breakpoint (literal classes). */
+export declare const templateClassMap: {
+    readonly base: "grid-cols-[var(--grid-template)]";
+    readonly sm: "sm:grid-cols-[var(--grid-template-sm)]";
+    readonly md: "md:grid-cols-[var(--grid-template-md)]";
+    readonly lg: "lg:grid-cols-[var(--grid-template-lg)]";
+    readonly xl: "xl:grid-cols-[var(--grid-template-xl)]";
+};
+/** GridItem `span` classes per breakpoint. */
+export declare const spanClassMap: {
+    readonly base: {
+        readonly 1: "col-span-1";
+        readonly 2: "col-span-2";
+        readonly 3: "col-span-3";
+        readonly 4: "col-span-4";
+        readonly 5: "col-span-5";
+        readonly 6: "col-span-6";
+        readonly 7: "col-span-7";
+        readonly 8: "col-span-8";
+        readonly 9: "col-span-9";
+        readonly 10: "col-span-10";
+        readonly 11: "col-span-11";
+        readonly 12: "col-span-12";
+        readonly full: "col-span-full";
+    };
+    readonly sm: {
+        readonly 1: "sm:col-span-1";
+        readonly 2: "sm:col-span-2";
+        readonly 3: "sm:col-span-3";
+        readonly 4: "sm:col-span-4";
+        readonly 5: "sm:col-span-5";
+        readonly 6: "sm:col-span-6";
+        readonly 7: "sm:col-span-7";
+        readonly 8: "sm:col-span-8";
+        readonly 9: "sm:col-span-9";
+        readonly 10: "sm:col-span-10";
+        readonly 11: "sm:col-span-11";
+        readonly 12: "sm:col-span-12";
+        readonly full: "sm:col-span-full";
+    };
+    readonly md: {
+        readonly 1: "md:col-span-1";
+        readonly 2: "md:col-span-2";
+        readonly 3: "md:col-span-3";
+        readonly 4: "md:col-span-4";
+        readonly 5: "md:col-span-5";
+        readonly 6: "md:col-span-6";
+        readonly 7: "md:col-span-7";
+        readonly 8: "md:col-span-8";
+        readonly 9: "md:col-span-9";
+        readonly 10: "md:col-span-10";
+        readonly 11: "md:col-span-11";
+        readonly 12: "md:col-span-12";
+        readonly full: "md:col-span-full";
+    };
+    readonly lg: {
+        readonly 1: "lg:col-span-1";
+        readonly 2: "lg:col-span-2";
+        readonly 3: "lg:col-span-3";
+        readonly 4: "lg:col-span-4";
+        readonly 5: "lg:col-span-5";
+        readonly 6: "lg:col-span-6";
+        readonly 7: "lg:col-span-7";
+        readonly 8: "lg:col-span-8";
+        readonly 9: "lg:col-span-9";
+        readonly 10: "lg:col-span-10";
+        readonly 11: "lg:col-span-11";
+        readonly 12: "lg:col-span-12";
+        readonly full: "lg:col-span-full";
+    };
+    readonly xl: {
+        readonly 1: "xl:col-span-1";
+        readonly 2: "xl:col-span-2";
+        readonly 3: "xl:col-span-3";
+        readonly 4: "xl:col-span-4";
+        readonly 5: "xl:col-span-5";
+        readonly 6: "xl:col-span-6";
+        readonly 7: "xl:col-span-7";
+        readonly 8: "xl:col-span-8";
+        readonly 9: "xl:col-span-9";
+        readonly 10: "xl:col-span-10";
+        readonly 11: "xl:col-span-11";
+        readonly 12: "xl:col-span-12";
+        readonly full: "xl:col-span-full";
+    };
+};
 //# sourceMappingURL=Grid.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,oFAAqB,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa1C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC"}
+{"version":3,"file":"Grid.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,oFAAqB,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa1C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAEX,8CAA8C;AAC9C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Ef,CAAC"}

package/dist/components/Grid/Grid.styles.js

@@ -71,5 +71,89 @@ const xlColsMap = {
   11: "xl:grid-cols-11",
   12: "xl:grid-cols-12"
 };
+const templateClassMap = {
+  base: "grid-cols-[var(--grid-template)]",
+  sm: "sm:grid-cols-[var(--grid-template-sm)]",
+  md: "md:grid-cols-[var(--grid-template-md)]",
+  lg: "lg:grid-cols-[var(--grid-template-lg)]",
+  xl: "xl:grid-cols-[var(--grid-template-xl)]"
+};
+const spanClassMap = {
+  base: {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12",
+    full: "col-span-full"
+  },
+  sm: {
+    1: "sm:col-span-1",
+    2: "sm:col-span-2",
+    3: "sm:col-span-3",
+    4: "sm:col-span-4",
+    5: "sm:col-span-5",
+    6: "sm:col-span-6",
+    7: "sm:col-span-7",
+    8: "sm:col-span-8",
+    9: "sm:col-span-9",
+    10: "sm:col-span-10",
+    11: "sm:col-span-11",
+    12: "sm:col-span-12",
+    full: "sm:col-span-full"
+  },
+  md: {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+    5: "md:col-span-5",
+    6: "md:col-span-6",
+    7: "md:col-span-7",
+    8: "md:col-span-8",
+    9: "md:col-span-9",
+    10: "md:col-span-10",
+    11: "md:col-span-11",
+    12: "md:col-span-12",
+    full: "md:col-span-full"
+  },
+  lg: {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+    5: "lg:col-span-5",
+    6: "lg:col-span-6",
+    7: "lg:col-span-7",
+    8: "lg:col-span-8",
+    9: "lg:col-span-9",
+    10: "lg:col-span-10",
+    11: "lg:col-span-11",
+    12: "lg:col-span-12",
+    full: "lg:col-span-full"
+  },
+  xl: {
+    1: "xl:col-span-1",
+    2: "xl:col-span-2",
+    3: "xl:col-span-3",
+    4: "xl:col-span-4",
+    5: "xl:col-span-5",
+    6: "xl:col-span-6",
+    7: "xl:col-span-7",
+    8: "xl:col-span-8",
+    9: "xl:col-span-9",
+    10: "xl:col-span-10",
+    11: "xl:col-span-11",
+    12: "xl:col-span-12",
+    full: "xl:col-span-full"
+  }
+};
 
-export { colsMap, gridVariants, lgColsMap, mdColsMap, smColsMap, xlColsMap };
+export { colsMap, gridVariants, lgColsMap, mdColsMap, smColsMap, spanClassMap, templateClassMap, xlColsMap };

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

@@ -1,5 +1,8 @@
 import type * as React from 'react';
+import type { GapValue } from '../../utils/gap';
 export interface ResponsiveCols {
+    /** Columns at every size (below the first breakpoint given). */
+    base?: number;
     sm?: number;
     md?: number;
     lg?: number;
@@ -16,15 +19,21 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      * Gap between rows and columns (e.g. 2, 4, 6, 8 or CSS string '1rem').
      * @default 4
      */
-    gap?: number | string;
+    gap?: GapValue;
     /**
      * Specific row gap.
      */
-    rowGap?: number | string;
+    rowGap?: GapValue;
     /**
      * Specific column gap.
      */
-    colGap?: number | string;
+    colGap?: GapValue;
+    /**
+     * Custom column template (CSS `grid-template-columns`), e.g.
+     * `{ lg: '15rem minmax(0,1fr)' }` for a fixed side column from `lg` up.
+     * Takes precedence over `cols` at the breakpoints it sets.
+     */
+    template?: string | ResponsiveTemplate;
     /**
      * If true, generates an auto-fit/auto-fill responsive grid using minChildWidth.
      */
@@ -38,4 +47,23 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     asChild?: boolean;
 }
+export interface ResponsiveTemplate {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+export type GridSpan = number | 'full';
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Columns the item spans: a number or `full`, or one per breakpoint. */
+    span?: GridSpan | {
+        base?: GridSpan;
+        sm?: GridSpan;
+        md?: GridSpan;
+        lg?: GridSpan;
+        xl?: GridSpan;
+    };
+    asChild?: boolean;
+}
 //# sourceMappingURL=Grid.types.d.ts.map

package/dist/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,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,GAAG;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;QAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;QAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;QAAC,EAAE,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAClG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Heading/Heading.styles.d.ts

@@ -1,8 +1,8 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const headingVariants: (props?: ({
-    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+    level?: 4 | 1 | 2 | 3 | 5 | 6 | null | undefined;
     font?: "title" | "display" | null | undefined;
-    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    foreground?: "default" | "destructive" | "success" | "warning" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
     weight?: "bold" | "normal" | "medium" | "light" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type HeadingVariants = VariantProps<typeof headingVariants>;

package/dist/components/Heading/Heading.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;;;;8EAqC1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Heading.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,eAAe;;;;;8EAyC1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/Heading/Heading.styles.js

@@ -1,27 +1,31 @@
 import { cva } from 'class-variance-authority';
 
-const headingVariants = cva("transition-colors leading-[1.3] text-foreground", {
+const headingVariants = cva("transition-colors text-foreground", {
   variants: {
     level: {
-      1: "text-[64px]",
-      2: "text-[48px]",
-      3: "text-[32px]",
-      4: "text-[24px] tracking-[-0.02em]",
-      5: "text-[20px]",
-      6: "text-[20px]"
+      1: "text-h1",
+      2: "text-h2",
+      3: "text-h3",
+      4: "text-h4",
+      5: "text-h5",
+      6: "text-h6"
     },
     font: {
-      display: "font-display font-normal",
-      title: "font-title font-bold"
+      // The h* tokens already use the display font.
+      display: "",
+      // Override the token's family ("!" so it wins regardless of CSS order).
+      title: "font-title! font-bold"
     },
     foreground: {
       default: "text-foreground",
-      muted: "text-grey-600 dark:text-grey-400",
+      muted: "text-muted-foreground",
       subtle: "text-grey-500 dark:text-grey-500",
       primary: "text-primary",
       secondary: "text-secondary-foreground",
       destructive: "text-destructive",
-      white: "text-white",
+      success: "text-success",
+      warning: "text-warning",
+      white: "text-grey-50",
       inherit: "text-inherit"
     },
     weight: {

package/dist/components/Heading/Heading.types.d.ts

@@ -25,7 +25,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>,
      * Foreground color token.
      * @default 'default'
      */
-    foreground?: 'default' | 'muted' | 'subtle' | 'primary' | 'secondary' | 'destructive' | 'white' | 'inherit';
+    foreground?: 'default' | 'muted' | 'subtle' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'white' | 'inherit';
     /**
      * If true, renders child element via Radix Slot while applying heading styles.
      */

package/dist/components/Heading/Heading.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.types.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAC9C,eAAe;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D;;;OAGG;IACH,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,aAAa,GACb,OAAO,GACP,SAAS,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Heading.types.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAC9C,eAAe;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D;;;OAGG;IACH,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Icon/Icon.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
-    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    foreground?: "default" | "destructive" | "success" | "warning" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
     clickable?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconVariants = VariantProps<typeof iconVariants>;

package/dist/components/Icon/Icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;8EAgCxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;8EAoCxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/Icon/Icon.styles.js

@@ -1,24 +1,28 @@
 import { cva } from 'class-variance-authority';
 
 const iconVariants = cva(
-  "inline-flex shrink-0 items-center justify-center transition-all leading-none",
+  // Child SVGs (`svg` prop or children) fill the icon box like `icon` does, so
+  // `<Icon><Truck /></Icon>` also works in Server Components (no function prop).
+  "inline-flex shrink-0 items-center justify-center transition-all leading-none [&>svg]:size-full",
   {
     variants: {
       size: {
-        xs: "size-3 text-xs",
-        sm: "size-4 text-sm",
-        md: "size-5 text-base",
-        lg: "size-6 text-lg",
-        xl: "size-8 text-2xl"
+        xs: "size-3 text-body-3",
+        sm: "size-4 text-body-2",
+        md: "size-5 text-body-1",
+        lg: "size-6 text-subtitle-1",
+        xl: "size-8 text-h4"
       },
       foreground: {
         default: "text-foreground",
-        muted: "text-grey-600 dark:text-grey-400",
+        muted: "text-muted-foreground",
         subtle: "text-grey-500 dark:text-grey-500",
         primary: "text-primary",
         secondary: "text-secondary-foreground",
         destructive: "text-destructive",
-        white: "text-white",
+        success: "text-success",
+        warning: "text-warning",
+        white: "text-grey-50",
         inherit: "text-inherit"
       },
       clickable: {

package/dist/components/IconTile/IconTile.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { IconTileProps } from './IconTile.types';
+/**
+ * An icon in a tinted circle: list rows, section cards, settings rows.
+ * Decorative by default; pass `label` when the icon carries meaning alone.
+ */
+export declare const IconTile: React.ForwardRefExoticComponent<IconTileProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=IconTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconTile.d.ts","sourceRoot":"","sources":["../../../src/components/IconTile/IconTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,QAAQ,uFAcpB,CAAC"}

package/dist/components/IconTile/IconTile.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { iconTileVariants } from './IconTile.styles.js';
+
+const IconTile = React.forwardRef(
+  ({ className, size, tone, label, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "icon-tile",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(iconTileVariants({ size, tone }), className),
+      ...props,
+      children
+    }
+  )
+);
+IconTile.displayName = "IconTile";
+
+export { IconTile };

package/dist/components/IconTile/IconTile.styles.d.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const iconTileVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    tone?: "destructive" | "success" | "warning" | "primary" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconTileVariants = VariantProps<typeof iconTileVariants>;
+//# sourceMappingURL=IconTile.styles.d.ts.map

package/dist/components/IconTile/IconTile.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTile.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IconTile/IconTile.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;8EAmB5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/IconTile/IconTile.styles.js

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority';
+
+const iconTileVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-8 [&_svg]:size-4",
+        md: "size-10 [&_svg]:size-5",
+        lg: "size-12 [&_svg]:size-6"
+      },
+      tone: {
+        primary: "bg-secondary text-secondary-foreground",
+        neutral: "bg-muted text-foreground",
+        success: "bg-success/10 text-success",
+        warning: "bg-warning/15 text-warning-foreground",
+        destructive: "bg-destructive/10 text-destructive"
+      }
+    },
+    defaultVariants: { size: "md", tone: "primary" }
+  }
+);
+
+export { iconTileVariants };

package/dist/components/IconTile/IconTile.types.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { IconTileVariants } from './IconTile.styles';
+export interface IconTileProps extends React.HTMLAttributes<HTMLSpanElement>, IconTileVariants {
+    /** The icon (an SVG element, e.g. `<Package />`); sized by `size`. */
+    children: React.ReactNode;
+    /**
+     * Accessible name. Leave out for decorative tiles (hidden from screen
+     * readers), e.g. next to a text label.
+     */
+    label?: string;
+}
+//# sourceMappingURL=IconTile.types.d.ts.map

package/dist/components/IconTile/IconTile.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTile.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconTile/IconTile.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,gBAAgB;IAC5F,sEAAsE;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/IconTile/index.d.ts

@@ -0,0 +1,4 @@
+export * from './IconTile';
+export * from './IconTile.types';
+export * from './IconTile.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/IconTile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconTile/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}