@timmbr/ui 1.5.0 → 1.7.0

package/dist/components/Card/Card.styles.js

@@ -5,10 +5,12 @@ const cardVariants = cva(
   {
     variants: {
       variant: {
-        outline: "border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-sm",
-        elevated: "border border-transparent bg-grey-50 dark:bg-grey-900 shadow-md hover:shadow-lg",
-        subtle: "border border-transparent bg-grey-50 dark:bg-grey-950",
-        interactive: "border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 shadow-sm hover:border-primary hover:shadow-md cursor-pointer"
+        outline: "border border-grey-200 dark:border-grey-800 bg-card shadow-sm",
+        elevated: "border border-transparent bg-card shadow-md hover:shadow-lg",
+        subtle: "border border-transparent bg-card",
+        interactive: "border border-grey-200 dark:border-grey-800 bg-card shadow-sm hover:border-primary hover:shadow-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        /** Flat, recessed panel inside other surfaces (forms, dialogs). */
+        inset: "border border-border bg-bg-subtle"
       },
       padding: {
         none: "p-0",
@@ -16,18 +18,75 @@ const cardVariants = cva(
         default: "p-6",
         md: "p-6",
         lg: "p-8"
+      },
+      /** Highlighted (e.g. the default address, a chosen option). */
+      selected: {
+        true: "border-primary/50",
+        false: ""
+      },
+      /** Header / content / footer get the padding instead, with full-width dividers. */
+      sectioned: {
+        true: "flex flex-col p-0",
+        false: ""
       }
     },
     defaultVariants: {
       variant: "outline",
-      padding: "default"
+      padding: "default",
+      selected: false,
+      sectioned: false
     }
   }
 );
-const cardHeaderVariants = cva("flex flex-col gap-1.5 mb-4");
+const cardSectionPadding = {
+  none: "",
+  sm: "p-4",
+  default: "p-6",
+  md: "p-6",
+  lg: "p-8"
+};
+const cardSectionFooterPadding = {
+  none: "",
+  sm: "px-4 py-2",
+  default: "px-6 py-3",
+  md: "px-6 py-3",
+  lg: "px-8 py-4"
+};
+const cardHeaderVariants = cva("flex flex-col gap-1.5", {
+  variants: {
+    sectioned: {
+      true: "",
+      false: "mb-4"
+    },
+    divider: {
+      true: "border-b border-border",
+      false: ""
+    }
+  },
+  compoundVariants: [{ sectioned: false, divider: true, className: "pb-4" }],
+  defaultVariants: { sectioned: false, divider: false }
+});
 const cardTitleVariants = cva("text-h6 font-bold text-foreground leading-tight tracking-tight");
-const cardDescriptionVariants = cva("text-body-2 text-muted leading-relaxed");
-const cardContentVariants = cva("flex flex-col gap-4");
-const cardFooterVariants = cva("flex items-center justify-between pt-4 mt-4 border-t border-grey-100 dark:border-grey-800");
+const cardDescriptionVariants = cva("text-body-2 text-muted-foreground leading-relaxed");
+const cardContentVariants = cva("flex flex-col gap-4", {
+  variants: {
+    sectioned: { true: "flex-1", false: "" }
+  },
+  defaultVariants: { sectioned: false }
+});
+const cardFooterVariants = cva(
+  "flex items-center gap-2 border-t border-border",
+  {
+    variants: {
+      sectioned: { true: "", false: "pt-4 mt-4" },
+      justify: {
+        start: "justify-start",
+        between: "justify-between",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: { sectioned: false, justify: "between" }
+  }
+);
 
-export { cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants };
+export { cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardSectionFooterPadding, cardSectionPadding, cardTitleVariants, cardVariants };

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

@@ -1,13 +1,24 @@
 import type * as React from 'react';
-import type { CardVariants } from './Card.styles';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {
+import type { CardFooterVariants, CardVariants } from './Card.styles';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Omit<CardVariants, 'selected' | 'sectioned'> {
     /**
      * If true, delegates rendering to the direct child element using Radix Slot.
      */
     asChild?: boolean;
+    /** Highlights the card (e.g. the default or chosen item). */
+    selected?: boolean;
+    /**
+     * The `padding` goes to CardHeader / CardContent / CardFooter instead of the
+     * card, so header and footer dividers run edge to edge.
+     */
+    sectioned?: boolean;
 }
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     asChild?: boolean;
+    /** Line under the header (full width in a `sectioned` card). */
+    divider?: boolean;
+    /** Content at the end of the header row (badges, buttons). */
+    actions?: React.ReactNode;
 }
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     asChild?: boolean;
@@ -18,7 +29,7 @@ export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraph
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
     asChild?: boolean;
 }
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement>, Omit<CardFooterVariants, 'sectioned'> {
     asChild?: boolean;
 }
 //# sourceMappingURL=Card.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,WAAW,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

@@ -1,10 +1,10 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const checkboxVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
     isError?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const checkboxIndicatorVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
 //# sourceMappingURL=Checkbox.styles.d.ts.map

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

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const chipVariants: (props?: ({
     variant?: "filled" | "subtle" | "outlined" | null | undefined;
     color?: "default" | "destructive" | "success" | "warning" | "primary" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
     clickable?: boolean | null | undefined;
     selected?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Extra content between the description and the buttons (e.g. what will be deleted). */
+    children?: React.ReactNode;
+    /** `destructive` for deletes / sign-outs: red confirm button and icon. */
+    tone?: 'default' | 'destructive';
+    /** Icon in the circle above the title. */
+    icon?: React.ReactNode;
+    confirmLabel: React.ReactNode;
+    cancelLabel: React.ReactNode;
+    /** Icon on the confirm button. */
+    confirmIcon?: React.ReactNode;
+    /**
+     * Runs on confirm. The dialog stays open with a spinner until it settles,
+     * then closes; if it throws, it stays open (show the error yourself).
+     */
+    onConfirm: () => void | Promise<void>;
+    /** @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** A confirmation with Cancel / Confirm that waits for the action to finish. */
+export declare function ConfirmDialog({ open, onOpenChange, title, description, children, tone, icon, confirmLabel, cancelLabel, confirmIcon, onConfirm, size, }: ConfirmDialogProps): React.JSX.Element;
+export declare namespace ConfirmDialog {
+    var displayName: string;
+}
+//# sourceMappingURL=ConfirmDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAS,EACT,IAAW,GACZ,EAAE,kBAAkB,qBA0CpB;yBAvDe,aAAa"}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogBody, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../AlertDialog/AlertDialog.js';
+import { Button } from '../Button/Button.js';
+
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  tone = "default",
+  icon,
+  confirmLabel,
+  cancelLabel,
+  confirmIcon,
+  onConfirm,
+  size = "sm"
+}) {
+  const [busy, setBusy] = React.useState(false);
+  const confirm = async (event) => {
+    event.preventDefault();
+    setBusy(true);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch {
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: (next) => !busy && onOpenChange(next), children: /* @__PURE__ */ jsxs(AlertDialogContent, { size, children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      icon && /* @__PURE__ */ jsx(AlertDialogMedia, { tone: tone === "destructive" ? "destructive" : "default", children: icon }),
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+    ] }),
+    children && /* @__PURE__ */ jsx(AlertDialogBody, { children }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: busy, children: cancelLabel }),
+      /* @__PURE__ */ jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: tone === "destructive" ? "destructive" : "primary",
+          leftIcon: confirmIcon,
+          loading: busy,
+          onClick: confirm,
+          children: confirmLabel
+        }
+      ) })
+    ] })
+  ] }) });
+}
+ConfirmDialog.displayName = "ConfirmDialog";
+
+export { ConfirmDialog };

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const containerVariants: (props?: ({
-    maxWidth?: "sm" | "lg" | "md" | "xl" | "2xl" | "full" | null | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
     padded?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ContainerVariants = VariantProps<typeof containerVariants>;

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps } from './DataList.types';
+import type { DataListProps, DataListItemProps, DataListLabelProps, DataListValueProps, DataListActionProps } from './DataList.types';
 export declare const DataList: React.ForwardRefExoticComponent<DataListProps & React.RefAttributes<HTMLDListElement>>;
 export declare const DataListItem: React.ForwardRefExoticComponent<DataListItemProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DataListLabel: React.ForwardRefExoticComponent<DataListLabelProps & React.RefAttributes<HTMLElement>>;
 export declare const DataListValue: React.ForwardRefExoticComponent<DataListValueProps & React.RefAttributes<HTMLElement>>;
+/** Buttons or a status at the end of a row (under the value on small screens). */
+export declare const DataListAction: React.ForwardRefExoticComponent<DataListActionProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=DataList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataList.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAY1B,eAAO,MAAM,QAAQ,wFAyBpB,CAAC;AAGF,eAAO,MAAM,YAAY,0FAsBxB,CAAC;AAGF,eAAO,MAAM,aAAa,wFAoBzB,CAAC;AAGF,eAAO,MAAM,aAAa,wFAazB,CAAC"}
+{"version":3,"file":"DataList.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAc1B,eAAO,MAAM,QAAQ,wFA0BpB,CAAC;AAGF,eAAO,MAAM,YAAY,0FAuBxB,CAAC;AAGF,eAAO,MAAM,aAAa,wFAiDzB,CAAC;AAGF,eAAO,MAAM,aAAa,wFAazB,CAAC;AAGF,kFAAkF;AAClF,eAAO,MAAM,cAAc,yFAW1B,CAAC"}

package/dist/components/DataList/DataList.js

@@ -2,11 +2,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '@timmbr/utils';
-import { dataListVariants, dataListItemVariants, dataListLabelVariants, dataListValueVariants } from './DataList.styles.js';
+import { dataListVariants, dataListActionVariants, dataListItemVariants, dataListInsetPadding, dataListLabelVariants, dataListValueVariants } from './DataList.styles.js';
+import { Text } from '../Text/Text.js';
 
 const DataListContext = React.createContext({
   orientation: "horizontal",
-  size: "default"
+  size: "default",
+  inset: "none"
 });
 const DataList = React.forwardRef(
   ({
@@ -14,15 +16,16 @@ const DataList = React.forwardRef(
     orientation = "horizontal",
     size = "default",
     divided = false,
+    inset = "none",
     children,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx(DataListContext.Provider, { value: { orientation, size }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DataListContext.Provider, { value: { orientation, size, inset }, children: /* @__PURE__ */ jsx(
       "dl",
       {
         ref,
         "data-slot": "data-list",
-        className: cn(dataListVariants({ orientation, size, divided }), className),
+        className: cn(dataListVariants({ orientation, size, divided }), inset !== "none" && "gap-0", className),
         ...props,
         children
       }
@@ -31,7 +34,7 @@ const DataList = React.forwardRef(
 );
 DataList.displayName = "DataList";
 const DataListItem = React.forwardRef(
-  ({ className, orientation: itemOrientation, align = "baseline", children, ...props }, ref) => {
+  ({ className, orientation: itemOrientation, align = "baseline", emphasis = "none", children, ...props }, ref) => {
     const context = React.useContext(DataListContext);
     const orientation = itemOrientation ?? context.orientation;
     return /* @__PURE__ */ jsx(
@@ -40,10 +43,11 @@ const DataListItem = React.forwardRef(
         ref,
         "data-slot": "data-list-item",
         className: cn(
-          dataListItemVariants({ orientation, align }),
-          context.size === "sm" && "py-1",
-          context.size === "default" && "py-1.5",
-          context.size === "lg" && "py-2",
+          dataListItemVariants({ orientation, align, emphasis }),
+          context.inset === "none" && context.size === "sm" && "py-1",
+          context.inset === "none" && context.size === "default" && "py-1.5",
+          context.inset === "none" && context.size === "lg" && "py-2",
+          dataListInsetPadding[context.inset],
           className
         ),
         ...props,
@@ -54,10 +58,14 @@ const DataListItem = React.forwardRef(
 );
 DataListItem.displayName = "DataListItem";
 const DataListLabel = React.forwardRef(
-  ({ className, minWidth, icon, style, children, ...props }, ref) => {
+  ({ className, minWidth, icon, description, tone, style, children, ...props }, ref) => {
+    const { orientation } = React.useContext(DataListContext);
+    const width = minWidth ? typeof minWidth === "number" ? `${minWidth}px` : minWidth : void 0;
+    const responsiveWidth = Boolean(width) && orientation === "horizontal";
     const computedStyle = {
       ...style,
-      ...minWidth ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth } : {}
+      ...width && !responsiveWidth ? { minWidth: width } : {},
+      ...responsiveWidth ? { "--data-list-label-min": width } : {}
     };
     return /* @__PURE__ */ jsxs(
       "dt",
@@ -65,11 +73,28 @@ const DataListLabel = React.forwardRef(
         ref,
         "data-slot": "data-list-label",
         style: computedStyle,
-        className: cn(dataListLabelVariants(), className),
+        className: cn(
+          dataListLabelVariants({ tone, withDescription: Boolean(description) }),
+          responsiveWidth && "sm:min-w-[var(--data-list-label-min)]",
+          className
+        ),
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-grey-400 dark:text-grey-500", children: icon }),
-          children
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "inline-flex shrink-0 items-center justify-center text-muted-foreground",
+                description && "mt-0.5"
+              ),
+              children: icon
+            }
+          ),
+          description ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { children }),
+            /* @__PURE__ */ jsx(Text, { as: "span", variant: "body-3", foreground: "muted", weight: "normal", children: description })
+          ] }) : children
         ]
       }
     );
@@ -91,5 +116,18 @@ const DataListValue = React.forwardRef(
   }
 );
 DataListValue.displayName = "DataListValue";
+const DataListAction = React.forwardRef(
+  ({ className, placement, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dd",
+    {
+      ref,
+      "data-slot": "data-list-action",
+      className: cn(dataListActionVariants({ placement }), className),
+      ...props,
+      children
+    }
+  )
+);
+DataListAction.displayName = "DataListAction";
 
-export { DataList, DataListItem, DataListLabel, DataListValue };
+export { DataList, DataListAction, DataListItem, DataListLabel, DataListValue };

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

@@ -1,14 +1,27 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const dataListVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    orientation?: "horizontal" | "vertical" | "justified" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
     divided?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const dataListItemVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "horizontal" | "vertical" | "justified" | null | undefined;
+    emphasis?: "none" | "total" | null | undefined;
     align?: "center" | "start" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const dataListLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Item padding when rows run edge to edge (e.g. directly inside a sectioned Card). */
+export declare const dataListInsetPadding: {
+    readonly none: "";
+    readonly sm: "px-4 py-3";
+    readonly default: "px-6 py-4";
+};
+export declare const dataListActionVariants: (props?: ({
+    placement?: "end" | "below" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dataListLabelVariants: (props?: ({
+    tone?: "strong" | "muted" | null | undefined;
+    withDescription?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const dataListValueVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export type DataListVariants = VariantProps<typeof dataListVariants>;
 //# sourceMappingURL=DataList.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;;8EAqB3B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;8EAgB/B,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"DataList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,gBAAgB;;;;8EAsB3B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;8EA6B/B,CAAC;AAEH,uFAAuF;AACvF,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;8EAajC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;8EAahC,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

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

@@ -4,7 +4,8 @@ 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-body-3 gap-1.5",
@@ -12,7 +13,7 @@ const dataListVariants = cva("font-sans text-foreground", {
       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/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"}