@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/DataList/DataList.styles.js

@@ -4,15 +4,16 @@ const dataListVariants = cva("font-sans text-foreground", {
   variants: {
     orientation: {
       horizontal: "flex flex-col",
-      vertical: "flex flex-col"
+      vertical: "flex flex-col",
+      justified: "flex flex-col"
     },
     size: {
-      sm: "text-xs gap-1.5",
-      default: "text-sm gap-2.5",
-      lg: "text-base gap-3.5"
+      sm: "text-body-3 gap-1.5",
+      default: "text-body-2 gap-2.5",
+      lg: "text-body-1 gap-3.5"
     },
     divided: {
-      true: "divide-y divide-grey-200 dark:divide-grey-800",
+      true: "divide-y divide-border",
       false: ""
     }
   },
@@ -25,8 +26,19 @@ const dataListVariants = cva("font-sans text-foreground", {
 const dataListItemVariants = cva("flex", {
   variants: {
     orientation: {
-      horizontal: "flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-6",
-      vertical: "flex-col gap-1"
+      /**
+       * Small screens: label and value stacked on the left, an action on the
+       * right (a two-column grid). From `sm`: one row.
+       */
+      horizontal: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 sm:flex sm:flex-row sm:items-baseline sm:gap-6",
+      vertical: "flex-col gap-1",
+      /** Label left, value right on every screen (totals, receipts). */
+      justified: "flex-row items-baseline justify-between gap-4 [&>[data-slot=data-list-value]]:text-right"
+    },
+    emphasis: {
+      none: "",
+      /** A total line: label and value in the foreground colour, semibold. */
+      total: "font-semibold [&>[data-slot=data-list-label]]:text-foreground [&>[data-slot=data-list-label]]:font-semibold"
     },
     align: {
       baseline: "sm:items-baseline",
@@ -36,14 +48,45 @@ const dataListItemVariants = cva("flex", {
   },
   defaultVariants: {
     orientation: "horizontal",
-    align: "baseline"
+    align: "baseline",
+    emphasis: "none"
   }
 });
-const dataListLabelVariants = cva(
-  "font-medium text-grey-500 dark:text-grey-400 shrink-0 flex items-center gap-1.5 select-none"
-);
+const dataListInsetPadding = {
+  none: "",
+  sm: "px-4 py-3",
+  default: "px-6 py-4"
+};
+const dataListActionVariants = cva("flex shrink-0 items-center gap-2 sm:ms-auto", {
+  variants: {
+    /**
+     * Small screens: `end` keeps the action on the right of the label;
+     * `below` puts it under the label (wide buttons, long descriptions).
+     * From `sm` up it always ends the row.
+     */
+    placement: {
+      end: "col-start-2 row-span-2 row-start-1 justify-end self-center",
+      below: "col-span-2 col-start-1 mt-2 justify-start sm:mt-0"
+    }
+  },
+  defaultVariants: { placement: "end" }
+});
+const dataListLabelVariants = cva("col-start-1 shrink-0 flex gap-1.5 select-none", {
+  variants: {
+    tone: {
+      muted: "font-medium text-muted-foreground",
+      /** For rows whose label is the main text (settings, sign-in methods). */
+      strong: "font-semibold text-foreground"
+    },
+    withDescription: {
+      true: "items-start",
+      false: "items-center"
+    }
+  },
+  defaultVariants: { tone: "muted", withDescription: false }
+});
 const dataListValueVariants = cva(
-  "font-normal text-foreground flex-1 min-w-0"
+  "col-start-1 font-normal text-foreground flex-1 min-w-0"
 );
 
-export { dataListItemVariants, dataListLabelVariants, dataListValueVariants, dataListVariants };
+export { dataListActionVariants, dataListInsetPadding, dataListItemVariants, dataListLabelVariants, dataListValueVariants, dataListVariants };

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

@@ -5,7 +5,13 @@ export interface DataListProps extends React.HTMLAttributes<HTMLDListElement>, D
      * Orientation layout of labels and values.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | 'justified';
+    /**
+     * Pads each item for edge-to-edge rows (e.g. directly inside a
+     * `sectioned` Card, with `divided`).
+     * @default 'none'
+     */
+    inset?: 'none' | 'sm' | 'default';
     /**
      * Scale size of fonts and spacing.
      * @default 'default'
@@ -25,7 +31,9 @@ export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement>
     /**
      * Item-level orientation override.
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | 'justified';
+    /** `total`: a summary line (semibold label and value). */
+    emphasis?: 'none' | 'total';
     /**
      * Vertical alignment of label and value in horizontal mode.
      * @default 'baseline'
@@ -45,11 +53,20 @@ export interface DataListLabelProps extends React.HTMLAttributes<HTMLElement> {
      * Optional icon node beside the label.
      */
     icon?: React.ReactNode;
+    /** Secondary line under the label. */
+    description?: React.ReactNode;
+    /** `strong`: foreground semibold, when the label is the main text of the row. */
+    tone?: 'muted' | 'strong';
     /**
      * Content element.
      */
     children?: React.ReactNode;
 }
+export interface DataListActionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Small screens: on the right of the label (`end`) or under it (`below`). */
+    placement?: 'end' | 'below';
+    children?: React.ReactNode;
+}
 export interface DataListValueProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Content element.

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

@@ -1 +1 @@
-{"version":3,"file":"DataList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,gBAAgB;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"DataList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,gBAAgB;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;IACtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;IACtD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E,8EAA8E;IAC9E,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Dialog/Dialog.styles.js

@@ -1,25 +1,25 @@
 import { cva } from 'class-variance-authority';
 
 const dialogOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+  "fixed inset-0 z-50 bg-grey-1000/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const dialogContentVariants = cva(
-  "relative pointer-events-auto flex flex-col w-full max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+  "relative pointer-events-auto flex flex-col w-full max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-xl border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
 );
 const dialogHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left p-6 pb-4 border-b border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900 pr-12"
+  "flex flex-col space-y-1.5 text-left p-6 pb-4 border-b border-grey-100 dark:border-grey-800/60 shrink-0 bg-grey-50 dark:bg-grey-900 pr-12"
 );
 const dialogBodyVariants = cva(
   "flex-1 overflow-y-auto p-6 min-h-0"
 );
 const dialogFooterVariants = cva(
-  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 p-6 pt-4 border-t border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900"
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 p-6 pt-4 border-t border-grey-100 dark:border-grey-800/60 shrink-0 bg-grey-50 dark:bg-grey-900"
 );
 const dialogTitleVariants = cva(
-  "text-xl font-display font-semibold leading-none tracking-tight text-foreground"
+  "text-h5 font-semibold leading-none tracking-tight text-foreground"
 );
 const dialogDescriptionVariants = cva(
-  "text-sm text-muted-foreground font-sans leading-relaxed"
+  "text-body-2 text-muted-foreground leading-relaxed"
 );
 
 export { dialogBodyVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants };

package/dist/components/Divider/Divider.js

@@ -41,7 +41,7 @@ const Divider = React.forwardRef(
           "data-slot": "divider",
           "data-testid": "timmbr-divider",
           style,
-          className: cn("flex items-center w-full my-4 gap-3 text-xs font-medium text-grey-500 dark:text-grey-400", className),
+          className: cn("flex items-center w-full my-4 gap-3 text-body-3 font-medium text-grey-500 dark:text-grey-400", className),
           ...props,
           children: [
             /* @__PURE__ */ jsx("div", { className: leftLineClass }),

package/dist/components/Drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import type { DrawerProps, DrawerContentProps, DrawerHeaderProps, DrawerFooterProps } from './Drawer.types';
+import type { DrawerProps, DrawerContentProps, DrawerHeaderProps, DrawerFooterProps, DrawerBodyProps } from './Drawer.types';
 export declare const Drawer: React.FC<DrawerProps>;
 export declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -9,6 +9,7 @@ export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogP
 export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerHeader: React.FC<DrawerHeaderProps>;
 export declare const DrawerFooter: React.FC<DrawerFooterProps>;
-export declare const DrawerTitle: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-export declare const DrawerDescription: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DrawerBody: React.FC<DrawerBodyProps>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAW1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAmCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,WAAW,6GAAwB,CAAC;AACjD,eAAO,MAAM,iBAAiB,qHAA8B,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAc1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAuCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAEhD,CAAC;AAGF,eAAO,MAAM,WAAW,oKAUtB,CAAC;AAGH,eAAO,MAAM,iBAAiB,8KAU5B,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cn } from '@timmbr/utils';
 import { X } from '@timmbr/icons';
 import { resolveMotion } from '../../types/motion.js';
-import { drawerContentVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants } from './Drawer.styles.js';
+import { drawerBodyVariants, drawerContentVariants, drawerDescriptionVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants, drawerTitleVariants } from './Drawer.styles.js';
 import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const Drawer = DialogPrimitive.Root;
@@ -40,7 +40,14 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", m
         ),
         ...props,
         children: [
-          side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-1.5 w-12 rounded-full bg-grey-300 dark:bg-grey-700" }),
+          side === "bottom" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-slot": "drawer-handle",
+              className: "mx-auto h-1.5 w-12 shrink-0 rounded-full bg-grey-300 dark:bg-grey-700"
+            }
+          ),
           children,
           /* @__PURE__ */ jsxs(
             DialogPrimitive.Close,
@@ -63,7 +70,27 @@ const DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { c
 DrawerHeader.displayName = "DrawerHeader";
 const DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(drawerFooterVariants(), className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = DialogPrimitive.Title;
-const DrawerDescription = DialogPrimitive.Description;
+const DrawerBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "drawer-body", className: cn(drawerBodyVariants(), className), ...props });
+DrawerBody.displayName = "DrawerBody";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "drawer-title",
+    className: cn(drawerTitleVariants(), className),
+    ...props
+  }
+));
+DrawerTitle.displayName = DialogPrimitive.Title.displayName;
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "drawer-description",
+    className: cn(drawerDescriptionVariants(), className),
+    ...props
+  }
+));
+DrawerDescription.displayName = DialogPrimitive.Description.displayName;
 
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

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

@@ -5,5 +5,9 @@ export declare const drawerContentVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const drawerHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const drawerFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Scrolls on its own so the header and footer stay in view (bottom sheets with long forms). */
+export declare const drawerBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const drawerTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const drawerDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export type DrawerContentVariants = VariantProps<typeof drawerContentVariants>;
 //# sourceMappingURL=Drawer.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,oFAAsE,CAAC;AAEtG,eAAO,MAAM,mBAAmB,oFAA2E,CAAC;AAE5G,eAAO,MAAM,yBAAyB,oFAA2D,CAAC;AAElG,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/Drawer/Drawer.styles.js

@@ -1,15 +1,15 @@
 import { cva } from 'class-variance-authority';
 
 const drawerOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-300 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+  "fixed inset-0 z-50 bg-grey-1000/60 backdrop-blur-xs transition-opacity duration-300 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const drawerContentVariants = cva(
-  "fixed z-50 gap-4 bg-white dark:bg-grey-900 p-6 shadow-2xl transition ease-in-out duration-300 font-sans text-foreground border-grey-200 dark:border-grey-800",
+  "fixed z-50 flex flex-col gap-4 bg-grey-50 dark:bg-grey-900 p-6 shadow-2xl transition ease-in-out duration-300 font-sans text-foreground border-grey-200 dark:border-grey-800",
   {
     variants: {
       side: {
         top: "inset-x-0 top-0 border-b data-[state=open]:animate-slide-in-from-top data-[state=closed]:animate-slide-out-to-top",
-        bottom: "inset-x-0 bottom-0 border-t rounded-t-2xl max-h-[85vh] data-[state=open]:animate-slide-in-from-bottom data-[state=closed]:animate-slide-out-to-bottom",
+        bottom: "inset-x-0 bottom-0 border-t rounded-t-2xl max-h-[90dvh] pt-3 pb-[max(1.5rem,env(safe-area-inset-bottom))] data-[state=open]:animate-slide-in-from-bottom data-[state=closed]:animate-slide-out-to-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:animate-slide-in-from-left data-[state=closed]:animate-slide-out-to-left",
         right: "inset-y-0 right-0 h-full w-3/4 max-w-md border-l data-[state=open]:animate-slide-in-from-right data-[state=closed]:animate-slide-out-to-right"
       }
@@ -20,10 +20,13 @@ const drawerContentVariants = cva(
   }
 );
 const drawerHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left"
+  "flex shrink-0 flex-col space-y-1.5 text-left pr-8"
 );
 const drawerFooterVariants = cva(
-  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-auto pt-4"
+  "flex shrink-0 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-auto pt-4"
 );
+const drawerBodyVariants = cva("-mx-6 min-h-0 flex-1 overflow-y-auto overscroll-contain px-6");
+const drawerTitleVariants = cva("text-h5 font-semibold leading-none tracking-tight text-foreground");
+const drawerDescriptionVariants = cva("text-body-2 text-muted-foreground leading-relaxed");
 
-export { drawerContentVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants };
+export { drawerBodyVariants, drawerContentVariants, drawerDescriptionVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants, drawerTitleVariants };

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

@@ -11,4 +11,5 @@ export interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeo
 }
 export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type DrawerBodyProps = React.HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=Drawer.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAMvE,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAA8B,CAAC;AACpF,eAAO,MAAM,mBAAmB,0HAAgC,CAAC;AACjE,eAAO,MAAM,iBAAiB,qHAA8B,CAAC;AAC7D,eAAO,MAAM,kBAAkB,yDAA+B,CAAC;AAC/D,eAAO,MAAM,eAAe,sDAA4B,CAAC;AACzD,eAAO,MAAM,sBAAsB,0HAAmC,CAAC;AAEvE,eAAO,MAAM,sBAAsB;YAGvB,OAAO;wCAiBjB,CAAC;AAGH,eAAO,MAAM,sBAAsB,6KAUjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,iGAuB9B,CAAC;AAGH,eAAO,MAAM,gBAAgB,8FAU3B,CAAC;AAGH,eAAO,MAAM,wBAAwB,+KAsBnC,CAAC;AAGH,eAAO,MAAM,iBAAiB;YAGlB,OAAO;wCAajB,CAAC;AAGH,eAAO,MAAM,qBAAqB,4KAUhC,CAAC;AAGH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAUhF,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAMvE,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAA8B,CAAC;AACpF,eAAO,MAAM,mBAAmB,0HAAgC,CAAC;AACjE,eAAO,MAAM,iBAAiB,qHAA8B,CAAC;AAC7D,eAAO,MAAM,kBAAkB,yDAA+B,CAAC;AAC/D,eAAO,MAAM,eAAe,sDAA4B,CAAC;AACzD,eAAO,MAAM,sBAAsB,0HAAmC,CAAC;AAEvE,eAAO,MAAM,sBAAsB;YAGvB,OAAO;wCAiBjB,CAAC;AAGH,eAAO,MAAM,sBAAsB,6KAUjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,iGAuB9B,CAAC;AAGH,eAAO,MAAM,gBAAgB,8FAoC3B,CAAC;AAGH,eAAO,MAAM,wBAAwB,+KAsBnC,CAAC;AAGH,eAAO,MAAM,iBAAiB;YAGlB,OAAO;wCAajB,CAAC;AAGH,eAAO,MAAM,qBAAqB,4KAUhC,CAAC;AAGH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAUhF,CAAC"}

package/dist/components/Dropdown/Dropdown.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { cn } from '@timmbr/utils';
 import { Check, ChevronRight } from '@timmbr/icons';
 import { resolveMotion } from '../../types/motion.js';
-import { dropdownItemVariants, dropdownContentVariants } from './Dropdown.styles.js';
+import { dropdownItemVariants, dropdownContentVariants, dropdownItemIconVariants } from './Dropdown.styles.js';
 import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -63,15 +63,28 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, motio
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    "data-slot": "dropdown-item",
-    className: cn(dropdownItemVariants(), inset && "pl-8", className),
-    ...props
+const DropdownMenuItem = React.forwardRef(({ className, inset, icon, destructive, asChild, children, ...props }, ref) => {
+  const iconNode = icon ? /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-item-icon", "aria-hidden": "true", className: dropdownItemIconVariants(), children: icon }) : null;
+  let content = children;
+  if (iconNode) {
+    content = asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, iconNode, children.props.children) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      iconNode,
+      children
+    ] });
   }
-));
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      asChild,
+      "data-slot": "dropdown-item",
+      "data-destructive": destructive ? "" : void 0,
+      className: cn(dropdownItemVariants({ destructive }), icon && "gap-2", inset && "pl-8", className),
+      ...props,
+      children: content
+    }
+  );
+});
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
@@ -98,7 +111,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
     ref,
     "data-slot": "dropdown-label",
     className: cn(
-      "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+      "px-2 py-1.5 text-body-3 font-semibold text-muted-foreground uppercase tracking-wider",
       inset && "pl-8",
       className
     ),
@@ -123,7 +136,7 @@ const DropdownMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto text-xs tracking-widest text-muted-foreground font-mono", className),
+      className: cn("ml-auto text-body-3 tracking-widest text-muted-foreground tabular-nums", className),
       ...props
     }
   );

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

@@ -1,3 +1,7 @@
 export declare const dropdownContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const dropdownItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dropdownItemVariants: (props?: ({
+    destructive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Leading icon of a menu item. */
+export declare const dropdownItemIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //# sourceMappingURL=Dropdown.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC"}
+{"version":3,"file":"Dropdown.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAWhC,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,wBAAwB,oFAAyE,CAAC"}

package/dist/components/Dropdown/Dropdown.styles.js

@@ -1,10 +1,20 @@
 import { cva } from 'class-variance-authority';
 
 const dropdownContentVariants = cva(
-  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 p-1 text-foreground shadow-lg font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 p-1 text-foreground shadow-lg font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
 );
 const dropdownItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  "relative flex cursor-pointer select-none items-center rounded-sm px-2.5 py-1.5 text-body-2 outline-none transition-colors hover:bg-grey-100 dark:hover:bg-grey-800 focus:bg-grey-100 dark:focus:bg-grey-800 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      destructive: {
+        true: "text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive dark:hover:bg-destructive/15 dark:focus:bg-destructive/15",
+        false: ""
+      }
+    },
+    defaultVariants: { destructive: false }
+  }
 );
+const dropdownItemIconVariants = cva("flex size-4 shrink-0 items-center justify-center [&_svg]:size-4");
 
-export { dropdownContentVariants, dropdownItemVariants };
+export { dropdownContentVariants, dropdownItemIconVariants, dropdownItemVariants };

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

@@ -10,5 +10,9 @@ export interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef
 }
 export interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
     inset?: boolean;
+    /** Leading icon (also placed inside an `asChild` link). */
+    icon?: React.ReactNode;
+    /** Destructive action (e.g. Log out, Delete): red text and highlight. */
+    destructive?: boolean;
 }
 //# sourceMappingURL=Dropdown.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;AAExE,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;AAExE,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,wFAyEtB,CAAC"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,wFA0EtB,CAAC"}

package/dist/components/EmptyState/EmptyState.js

@@ -12,6 +12,7 @@ const EmptyState = React.forwardRef(
     className,
     variant = "default",
     size = "default",
+    fullWidth = false,
     icon,
     title,
     description,
@@ -29,7 +30,7 @@ const EmptyState = React.forwardRef(
         ref,
         "data-slot": "empty-state",
         className: cn(
-          emptyStateVariants({ variant, size }),
+          emptyStateVariants({ variant, size, fullWidth }),
           !shouldAnimate && "transition-none animate-none",
           motionClass,
           className
@@ -47,7 +48,7 @@ const EmptyState = React.forwardRef(
           title && /* @__PURE__ */ jsx(
             "h3",
             {
-              className: "text-base font-display font-semibold text-foreground tracking-tight",
+              className: "text-h6 font-semibold text-foreground tracking-tight",
               "data-slot": "empty-state-title",
               children: title
             }
@@ -55,7 +56,7 @@ const EmptyState = React.forwardRef(
           description && /* @__PURE__ */ jsx(
             "p",
             {
-              className: "text-xs text-muted-foreground mt-1.5 max-w-sm leading-relaxed",
+              className: "text-body-3 text-muted-foreground mt-1.5 max-w-sm leading-relaxed",
               "data-slot": "empty-state-description",
               children: description
             }

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

@@ -1,10 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const emptyStateVariants: (props?: ({
     variant?: "default" | "subtle" | "bordered" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const emptyStateIconWrapperVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;
 //# sourceMappingURL=EmptyState.styles.d.ts.map

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

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

package/dist/components/EmptyState/EmptyState.styles.js

@@ -13,6 +13,11 @@ const emptyStateVariants = cva(
         sm: "py-6 px-4 max-w-sm",
         default: "py-10 px-6 max-w-md",
         lg: "py-16 px-8 max-w-lg"
+      },
+      /** Fill the container instead of the size's max width. */
+      fullWidth: {
+        true: "w-full max-w-none",
+        false: ""
       }
     },
     defaultVariants: {
@@ -26,9 +31,9 @@ const emptyStateIconWrapperVariants = cva(
   {
     variants: {
       size: {
-        sm: "size-10 text-lg",
-        default: "size-14 text-2xl",
-        lg: "size-20 text-3xl"
+        sm: "size-10 text-subtitle-1",
+        default: "size-14 text-h4",
+        lg: "size-20 text-h3"
       }
     },
     defaultVariants: {

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type GapValue } from '../../utils/gap';
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Group title (an overline label above the fields). */
+    legend: React.ReactNode;
+    /** Space between the fields. @default 4 */
+    gap?: GapValue;
+}
+/**
+ * Groups related form fields under a label ("Contact", "Address"…). Fixes the
+ * fieldset quirks: it can shrink (`min-w-0`) and the legend gets its spacing.
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=Fieldset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../src/components/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,wDAAwD;IACxD,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,2FAiBpB,CAAC"}

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { formatGap } from '../../utils/gap.js';
+import { Text } from '../Text/Text.js';
+
+const Fieldset = React.forwardRef(
+  ({ legend, gap = 4, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ref,
+      "data-slot": "fieldset",
+      className: cn("flex min-w-0 flex-col border-0 p-0 m-0", formatGap(gap), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Text, { asChild: true, variant: "overline", foreground: "muted", children: /* @__PURE__ */ jsx("legend", { "data-slot": "fieldset-legend", className: "mb-3 p-0", children: legend }) }),
+        children
+      ]
+    }
+  )
+);
+Fieldset.displayName = "Fieldset";
+
+export { Fieldset };

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

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