@timmbr/ui 1.5.0 → 1.7.0

package/README.md

@@ -67,16 +67,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 | Category | Components | Description |
 | :--- | :--- | :--- |
-| **Actions** | `Button`, `LinkButton` | Accessible buttons and anchor links with `next/link` default SPA routing, adornment icons, loading spinners, and cross-zone delegation. |
-| **Typography** | `Text`, `Heading` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
-| **Surfaces** | `Card`, `Avatar`, `Badge`, `Chip`, `Divider` | Display primitives including user avatars, status pills, elevated cards, interactive chips, and separators. |
-| **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `Center` | Responsive breakpoint containers, flex distribution, responsive CSS grid, and centered wrappers. |
-| **Form Controls** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `FormField`, `Label` | Comprehensive form primitives with labels, helper text, validation error states, and dual-thumb sliders. |
-| **Navigation** | `Tabs`, `Pagination`, `SideBarNavigation` | Accessible tabs, multi-page pagination, and responsive collapsable sidebar navigation. |
-| **Feedback** | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, determinate/indeterminate progress, shimmer loaders, and card-deck multi-toasts with hover-spread. |
-| **Overlays** | `Dialog`, `Drawer`, `Dropdown`, `Popover`, `Tooltip` | Centered dialogs, off-canvas sliding drawers, contextual dropdowns, interactive popovers, and accessible tooltips. |
-| **Data Display** | `Table`, `DataList`, `Stat`, `EmptyState` | Structured data tables with pagination, key-value data lists, KPI metrics, and empty state placeholders. |
-| **Visual Media** | `Icon` | Unified icon wrapper supporting Lucide icons, external image URLs, raw SVGs, and clickable modes. |
+| **Layout** | `Container`, `Stack`, `Inline`, `Grid`, `GridItem`, `Center`, `Divider`, `PageHeader`, `VisuallyHidden` | Responsive containers, flex and grid layout, separators, and page titles with description, actions and a back link. |
+| **Typography** | `Heading`, `Text` | Typography primitives restricted to semantic elements (`<p>`, `<span>`, `<h1>`–`<h6>`) with design token scaling. |
+| **Actions** | `Button`, `LinkButton` | Accessible buttons and anchor links with `next/link` default SPA routing, adornment icons, loading spinners, cross-zone delegation, and destructive variants. |
+| **Forms** | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `RangeSlider`, `OtpInput`, `ImageUpload`, `FormField`, `Label`, `Fieldset`, `FormActions` | Form primitives with labels, helper text, validation error states, one-time codes and uploads. |
+| **Data Display** | `Card`, `MediaCard`, `Badge`, `Chip`, `Avatar`, `IconTile`, `Price`, `Rating`, `DataList`, `List`, `Table`, `Stat`, `Accordion`, `Icon` | Surfaces and cards (`MediaCard` is the media + text template that feature cards build on), status pills, prices with discounts, read-only ratings, key-value lists, tables and KPIs. |
+| **Feedback** | `Alert`, `EmptyState`, `Progress`, `Skeleton`, `Spinner`, `Toast` | Status banners, empty states, progress, shimmer loaders and toasts. |
+| **Overlays** | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Drawer`, `ResponsiveDialog`, `Dropdown`, `Popover`, `Tooltip`, `AuthModal` | Dialogs and confirmations, off-canvas drawers and bottom sheets (`ResponsiveDialog`: dialog on desktop, bottom sheet on phones), menus (with icons and destructive items), popovers, tooltips and the sign-in modal. |
+| **Navigation** | `NavHeader`, `NavFooter`, `SideBarNavigation`, `SubNav`, `Tabs`, `Pagination`, `Stepper` | Site header and footer, app sidebar, in-page section navigation (`SubNav`), tabs, pagination and step progress (`Stepper`). |
+
+Use theme tokens (`bg-card`, `border-border`, `text-muted-foreground`, …) and the DS primitives (`Text`, `Stack`, `Card` parts…) inside components rather than palette steps or raw typography, so a theme change lands in one place.
+
+Storybook uses the same groups (`Foundations` holds the design tokens).
 
 
 ## Component Usage

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

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const alertIconVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type AlertVariants = VariantProps<typeof alertVariants>;
 //# sourceMappingURL=Alert.styles.d.ts.map

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import type { AlertDialogProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps } from './AlertDialog.types';
+import type { AlertDialogProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogMediaProps } from './AlertDialog.types';
 export declare const AlertDialog: React.FC<AlertDialogProps>;
 export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 export declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const AlertDialogHeader: React.FC<AlertDialogHeaderProps>;
+/** Icon circle above the title, e.g. a warning for a destructive confirmation. */
+export declare const AlertDialogMedia: React.FC<AlertDialogMediaProps>;
 export declare const AlertDialogBody: React.FC<AlertDialogBodyProps>;
 export declare const AlertDialogFooter: React.FC<AlertDialogFooterProps>;
 export declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=AlertDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAarE,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAA6B,CAAC;AACjF,eAAO,MAAM,kBAAkB,wHAA+B,CAAC;AAC/D,eAAO,MAAM,iBAAiB,uDAA8B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,wKAU7B,CAAC;AAGH,eAAO,MAAM,kBAAkB,gGA4B7B,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,gBAAgB,8KAU3B,CAAC;AAGH,eAAO,MAAM,sBAAsB,wLAUjC,CAAC;AAGH,eAAO,MAAM,iBAAiB,6KAU5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6KAU5B,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAerE,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAA6B,CAAC;AACjF,eAAO,MAAM,kBAAkB,wHAA+B,CAAC;AAC/D,eAAO,MAAM,iBAAiB,uDAA8B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,wKAU7B,CAAC;AAGH,eAAO,MAAM,kBAAkB,gGA4B7B,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAO5D,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAE9D,CAAC;AAGF,eAAO,MAAM,gBAAgB,8KAU3B,CAAC;AAGH,eAAO,MAAM,sBAAsB,wLAUjC,CAAC;AAGH,eAAO,MAAM,iBAAiB,kGAW5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,kGAW5B,CAAC"}

package/dist/components/AlertDialog/AlertDialog.js

@@ -4,7 +4,8 @@ import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cn } from '@timmbr/utils';
 import { resolveMotion } from '../../types/motion.js';
-import { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogOverlayVariants, alertDialogTitleVariants } from './AlertDialog.styles.js';
+import { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogMediaVariants, alertDialogOverlayVariants, alertDialogTitleVariants } from './AlertDialog.styles.js';
+import { buttonVariants } from '../Button/Button.styles.js';
 import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const AlertDialog = AlertDialogPrimitive.Root;
@@ -20,7 +21,7 @@ const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, children, motion, ...props }, ref) => {
+const AlertDialogContent = React.forwardRef(({ className, children, motion, size, ...props }, ref) => {
   const globalMotion = useGlobalAnimation();
   const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
@@ -32,7 +33,7 @@ const AlertDialogContent = React.forwardRef(({ className, children, motion, ...p
         "data-slot": "alert-dialog-content",
         role: "alertdialog",
         className: cn(
-          alertDialogContentVariants(),
+          alertDialogContentVariants({ size }),
           !shouldAnimate && "transition-none animate-none",
           motionClass,
           className
@@ -46,6 +47,16 @@ const AlertDialogContent = React.forwardRef(({ className, children, motion, ...p
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-header", className: cn(alertDialogHeaderVariants(), className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogMedia = ({ className, tone, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "alert-dialog-media",
+    "aria-hidden": "true",
+    className: cn(alertDialogMediaVariants({ tone }), className),
+    ...props
+  }
+);
+AlertDialogMedia.displayName = "AlertDialogMedia";
 const AlertDialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-body", className: cn(alertDialogBodyVariants(), className), ...props });
 AlertDialogBody.displayName = "AlertDialogBody";
 const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-footer", className: cn(alertDialogFooterVariants(), className), ...props });
@@ -70,25 +81,27 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AlertDialogAction = React.forwardRef(({ className, variant = "primary", size, asChild, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
+    asChild,
     "data-slot": "alert-dialog-action",
-    className: cn(className),
+    className: cn(!asChild && buttonVariants({ variant, size }), className),
     ...props
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AlertDialogCancel = React.forwardRef(({ className, variant = "outline", size, asChild, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
+    asChild,
     "data-slot": "alert-dialog-cancel",
-    className: cn(className),
+    className: cn(!asChild && buttonVariants({ variant, size }), className),
     ...props
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -1,8 +1,14 @@
 export declare const alertDialogOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const alertDialogContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const alertDialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Title and description; a leading AlertDialogMedia gets more room. */
 export declare const alertDialogHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const alertDialogDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const alertDialogMediaVariants: (props?: ({
+    tone?: "default" | "destructive" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=AlertDialog.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC"}
+{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,oFAEtC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;8EAYtC,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oFAEnC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAGF,eAAO,MAAM,wBAAwB;;8EAYpC,CAAC"}

package/dist/components/AlertDialog/AlertDialog.styles.js

@@ -4,10 +4,20 @@ const alertDialogOverlayVariants = cva(
   "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 alertDialogContentVariants = cva(
-  "relative pointer-events-auto flex flex-col w-full max-w-lg 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 p-6 gap-4 data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+  "relative pointer-events-auto flex flex-col w-full 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 p-6 gap-4 data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out",
+  {
+    variants: {
+      size: {
+        sm: "max-w-md",
+        md: "max-w-lg",
+        lg: "max-w-2xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
 );
 const alertDialogHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left"
+  "flex flex-col gap-1.5 text-left has-[>[data-slot=alert-dialog-media]]:gap-3"
 );
 const alertDialogBodyVariants = cva(
   "flex flex-col space-y-3 min-h-0"
@@ -21,5 +31,18 @@ const alertDialogTitleVariants = cva(
 const alertDialogDescriptionVariants = cva(
   "text-body-2 text-muted-foreground leading-relaxed"
 );
+const alertDialogMediaVariants = cva(
+  "flex size-12 shrink-0 items-center justify-center rounded-full [&_svg]:size-6",
+  {
+    variants: {
+      tone: {
+        default: "bg-primary/10 text-primary",
+        destructive: "bg-destructive/10 text-destructive",
+        warning: "bg-warning/15 text-warning-foreground"
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
+);
 
-export { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogOverlayVariants, alertDialogTitleVariants };
+export { alertDialogBodyVariants, alertDialogContentVariants, alertDialogDescriptionVariants, alertDialogFooterVariants, alertDialogHeaderVariants, alertDialogMediaVariants, alertDialogOverlayVariants, alertDialogTitleVariants };

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

@@ -1,8 +1,11 @@
 import type * as React from 'react';
 import type * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import type { MotionProp } from '../../types/motion';
+import type { ButtonVariants } from '../Button/Button.styles';
 export type AlertDialogProps = AlertDialogPrimitive.AlertDialogProps;
 export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+    /** Width: sm (28rem), md (32rem, default), lg (42rem). */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Motion transition control.
      */
@@ -11,6 +14,20 @@ export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<
 export type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type AlertDialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
 export type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
-export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
+/**
+ * Button look of the footer actions. Ignored with `asChild` (the child, e.g.
+ * a `Button`, brings its own styles).
+ */
+export interface AlertDialogButtonStyleProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+}
+export interface AlertDialogActionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, AlertDialogButtonStyleProps {
+}
+export interface AlertDialogCancelProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, AlertDialogButtonStyleProps {
+}
+export interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tint of the icon circle. */
+    tone?: 'default' | 'destructive' | 'warning';
+}
 //# sourceMappingURL=AlertDialog.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,gBAAgB,CAAC;AAErE,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC3E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1E,MAAM,MAAM,sBAAsB,GAChC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAC;AAErE,MAAM,MAAM,sBAAsB,GAChC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,gBAAgB,CAAC;AAErE,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IAC3E,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1E;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxE,2BAA2B;CAAG;AAElC,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxE,2BAA2B;CAAG;AAElC,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;CAC9C"}

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

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const avatarRootVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
     variant?: "grey" | "outline" | "subtle" | "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarStatusVariants: (props?: ({
     status?: "offline" | "online" | "busy" | "away" | null | undefined;
-    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type AvatarVariants = VariantProps<typeof avatarRootVariants>;
 //# sourceMappingURL=Avatar.styles.d.ts.map

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "outline" | "subtle" | "primary" | "secondary" | "brand" | null | undefined;
-    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "outline" | "subtle" | "primary" | "secondary" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
 //# sourceMappingURL=Badge.styles.d.ts.map

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

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

package/dist/components/Badge/Badge.styles.js

@@ -12,7 +12,9 @@ const badgeVariants = cva(
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground",
         subtle: "bg-bg-subtle text-foreground",
         success: "bg-success text-grey-50",
-        destructive: "bg-destructive text-grey-50"
+        destructive: "bg-destructive text-grey-50",
+        warning: "bg-warning text-warning-foreground",
+        info: "bg-info text-info-foreground"
       },
       size: {
         sm: "px-1.5 py-0.5 text-body-3",

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFA+FlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFAqGlB,CAAC"}

package/dist/components/Button/Button.js

@@ -15,6 +15,8 @@ const Button = React.forwardRef(
     style,
     variant,
     size,
+    shape,
+    fullWidth,
     asChild = false,
     motion,
     leftIcon,
@@ -40,6 +42,8 @@ const Button = React.forwardRef(
             buttonVariants({
               variant: resolvedVariant,
               size: resolvedSize,
+              shape,
+              fullWidth,
               className
             }),
             !shouldAnimate && "transition-none active:scale-100",
@@ -66,6 +70,8 @@ const Button = React.forwardRef(
           buttonVariants({
             variant: resolvedVariant,
             size: resolvedSize,
+            shape,
+            fullWidth,
             className
           }),
           !shouldAnimate && "transition-none active:scale-100",

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

@@ -1,7 +1,9 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "primary" | "secondary" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "overlay" | "outline" | "ghost" | "primary" | "secondary" | "destructive-outline" | "destructive-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | null | undefined;
+    shape?: "default" | "circle" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=Button.styles.d.ts.map

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

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

package/dist/components/Button/Button.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[2px] font-sans font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none active:scale-[0.98]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-sans font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none active:scale-[0.98]",
   {
     variants: {
       variant: {
@@ -11,19 +11,38 @@ const buttonVariants = cva(
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600",
         ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800",
         destructive: "bg-destructive text-grey-50 hover:bg-destructive/90 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm",
+        "destructive-outline": "border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 hover:border-destructive active:bg-destructive/15",
+        "destructive-ghost": "text-destructive hover:bg-destructive/10 active:bg-destructive/15",
+        /** Floating over imagery (e.g. a wishlist toggle on a product photo). */
+        overlay: "bg-card/90 text-foreground shadow-xs backdrop-blur-xs hover:bg-card hover:text-primary aria-pressed:text-primary [&[aria-pressed=true]_svg]:fill-current",
         link: "text-primary underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal"
       },
       size: {
-        sm: "h-9 px-3 text-body-3",
-        default: "h-11 px-5 text-body-2",
-        md: "h-11 px-5 text-body-2",
-        lg: "h-[52px] px-6 text-body-1",
-        icon: "h-10 w-10 p-0 shrink-0"
+        sm: "h-9 px-3 text-body-3 [&_svg]:size-3.5",
+        default: "h-11 px-5 text-body-2 [&_svg]:size-4",
+        md: "h-11 px-5 text-body-2 [&_svg]:size-4",
+        lg: "h-[52px] px-6 text-body-1 [&_svg]:size-5",
+        icon: "h-10 w-10 p-0 shrink-0 [&_svg]:size-5",
+        "icon-sm": "h-8 w-8 p-0 shrink-0 [&_svg]:size-4.5"
+      },
+      shape: {
+        default: "rounded-[2px]",
+        circle: "rounded-full"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
       }
     },
+    compoundVariants: [
+      // A text link keeps its inline size: no button height or padding.
+      { variant: "link", className: "h-auto px-0 py-0" }
+    ],
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "default",
+      shape: "default",
+      fullWidth: false
     }
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,IAAI,kFAWhB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAWtB,CAAC;AAGF,eAAO,MAAM,SAAS,2FAWrB,CAAC;AAGF,eAAO,MAAM,eAAe,mGAY1B,CAAC;AAGH,eAAO,MAAM,WAAW,yFAWvB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAWtB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,IAAI,kFAkBhB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAmCtB,CAAC;AAGF,eAAO,MAAM,SAAS,2FAKrB,CAAC;AAGF,eAAO,MAAM,eAAe,mGAK3B,CAAC;AAGF,eAAO,MAAM,WAAW,yFAYvB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAgBtB,CAAC"}

package/dist/components/Card/Card.js

@@ -1,32 +1,57 @@
-import { jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { cardVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants } from './Card.styles.js';
+import { cardVariants, cardContentVariants, cardSectionPadding, cardDescriptionVariants, cardFooterVariants, cardSectionFooterPadding, cardHeaderVariants, cardTitleVariants } from './Card.styles.js';
 
+const CardContext = React.createContext({
+  sectioned: false,
+  padding: "default"
+});
 const Card = React.forwardRef(
-  ({ className, variant, padding, asChild = false, ...props }, ref) => {
+  ({ className, variant, padding, selected = false, sectioned = false, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
+    const context = React.useMemo(
+      () => ({ sectioned, padding: padding ?? "default" }),
+      [sectioned, padding]
+    );
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardVariants({ variant, padding }), className),
+        "data-selected": selected || void 0,
+        className: cn(cardVariants({ variant, padding, selected, sectioned }), className),
         ...props
       }
-    );
+    ) });
   }
 );
 Card.displayName = "Card";
 const CardHeader = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, divider = false, actions, children, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
+    const classes = cn(
+      cardHeaderVariants({ sectioned, divider }),
+      sectioned && cardSectionPadding[padding],
+      // Without a divider the content's own top padding is the gap.
+      sectioned && !divider && "pb-0",
+      className
+    );
+    if (actions === void 0 || actions === null || actions === false) {
+      return /* @__PURE__ */ jsx(Comp, { ref, className: classes, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs(
       Comp,
       {
         ref,
-        className: cn(cardHeaderVariants(), className),
-        ...props
+        className: cn(classes, "flex-row flex-wrap items-start justify-between gap-3"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1.5", "data-slot": "card-header-text", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", "data-slot": "card-header-actions", children: actions })
+        ]
       }
     );
   }
@@ -35,37 +60,26 @@ CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "h3";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(cardTitleVariants(), className),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(cardTitleVariants(), className), ...props });
   }
 );
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      className: cn(cardDescriptionVariants(), className),
-      ...props
-    }
-  );
-});
+const CardDescription = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(cardDescriptionVariants(), className), ...props });
+  }
+);
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardContentVariants(), className),
+        className: cn(cardContentVariants({ sectioned }), sectioned && cardSectionPadding[padding], className),
         ...props
       }
     );
@@ -73,13 +87,18 @@ const CardContent = React.forwardRef(
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, justify, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardFooterVariants(), className),
+        className: cn(
+          cardFooterVariants({ sectioned, justify }),
+          sectioned && cardSectionFooterPadding[padding],
+          className
+        ),
         ...props
       }
     );

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

@@ -1,12 +1,39 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const cardVariants: (props?: ({
-    variant?: "outline" | "subtle" | "elevated" | "interactive" | null | undefined;
-    padding?: "none" | "default" | "sm" | "lg" | "md" | null | undefined;
+    variant?: "inset" | "outline" | "subtle" | "elevated" | "interactive" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | "default" | null | undefined;
+    selected?: boolean | null | undefined;
+    sectioned?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Section padding of a `sectioned` card (follows the Card's `padding`). */
+export declare const cardSectionPadding: {
+    readonly none: "";
+    readonly sm: "p-4";
+    readonly default: "p-6";
+    readonly md: "p-6";
+    readonly lg: "p-8";
+};
+/** Footer of a `sectioned` card: the same side padding, shorter vertically. */
+export declare const cardSectionFooterPadding: {
+    readonly none: "";
+    readonly sm: "px-4 py-2";
+    readonly default: "px-6 py-3";
+    readonly md: "px-6 py-3";
+    readonly lg: "px-8 py-4";
+};
+export declare const cardHeaderVariants: (props?: ({
+    sectioned?: boolean | null | undefined;
+    divider?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cardHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cardTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cardDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cardContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cardFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cardContentVariants: (props?: ({
+    sectioned?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cardFooterVariants: (props?: ({
+    sectioned?: boolean | null | undefined;
+    justify?: "start" | "end" | "between" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CardVariants = VariantProps<typeof cardVariants>;
+export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
 //# sourceMappingURL=Card.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;8EA2BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAAoC,CAAC;AACpE,eAAO,MAAM,iBAAiB,oFAAwE,CAAC;AACvG,eAAO,MAAM,uBAAuB,oFAAgD,CAAC;AACrF,eAAO,MAAM,mBAAmB,oFAA6B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,oFAAmG,CAAC;AAEnI,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;8EA0CxB,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,+EAA+E;AAC/E,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;8EAa7B,CAAC;AACH,eAAO,MAAM,iBAAiB,oFAAwE,CAAC;AACvG,eAAO,MAAM,uBAAuB,oFAA2D,CAAC;AAChG,eAAO,MAAM,mBAAmB;;8EAK9B,CAAC;AACH,eAAO,MAAM,kBAAkB;;;8EAa9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}