@timmbr/ui 1.5.0 → 1.7.0

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

@@ -4,12 +4,12 @@ const drawerOverlayVariants = cva(
   "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-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",
+  "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,

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

@@ -4,7 +4,17 @@ const dropdownContentVariants = cva(
   "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-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"
+  "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

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: {

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

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/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"}