@timmbr/ui 1.4.2 → 1.6.0

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,oFAAmF,CAAC;AAClH,eAAO,MAAM,uBAAuB,oFAA4C,CAAC;AACjF,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"}

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-white dark:bg-grey-900 shadow-sm",
-        elevated: "border border-transparent bg-white 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-white 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 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-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" }
   }
 );
-const cardHeaderVariants = cva("flex flex-col gap-1.5 mb-4");
-const cardTitleVariants = cva("text-lg font-serif font-bold text-foreground leading-tight tracking-tight");
-const cardDescriptionVariants = cva("text-sm 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");
 
-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.js

@@ -39,7 +39,7 @@ const Checkbox = React.forwardRef(
           {
             className: cn(checkboxIndicatorVariants({ size })),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "hidden [[data-state=indeterminate]_&]:block w-2.5 h-0.5 bg-white rounded-full" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden [[data-state=indeterminate]_&]:block w-2.5 h-0.5 bg-grey-50 rounded-full" }),
               /* @__PURE__ */ jsx(Check, { className: "[[data-state=indeterminate]_&]:hidden w-full h-full stroke-[3]" })
             ]
           }
@@ -68,16 +68,16 @@ const Checkbox = React.forwardRef(
                 {
                   htmlFor: id,
                   className: cn(
-                    "text-sm font-medium text-foreground cursor-pointer select-none leading-snug",
+                    "text-body-2 font-medium text-foreground cursor-pointer select-none leading-snug",
                     disabled && "cursor-not-allowed"
                   ),
                   children: label
                 }
               ),
-              description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted leading-normal mt-0.5", children: description })
+              description && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-muted leading-normal mt-0.5", children: description })
             ] })
           ] }),
-          errorMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive font-medium pl-7", children: errorMessage })
+          errorMessage && /* @__PURE__ */ jsx("p", { className: "text-body-3 text-destructive font-medium pl-7", children: errorMessage })
         ]
       }
     );

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/Checkbox/Checkbox.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const checkboxVariants = cva(
-  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-white dark:bg-grey-900 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-white data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-white cursor-pointer flex items-center justify-center",
+  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-grey-50 dark:bg-grey-900 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-grey-50 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-grey-50 cursor-pointer flex items-center justify-center",
   {
     variants: {
       size: {

package/dist/components/Chip/Chip.js

@@ -60,7 +60,7 @@ const Chip = React.forwardRef(
               tabIndex: -1,
               onClick: handleRemove,
               "aria-label": "Remove",
-              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-black/10 dark:hover:bg-white/20 transition-all cursor-pointer",
+              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )

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/Chip/Chip.styles.js

@@ -6,7 +6,7 @@ const chipVariants = cva(
     variants: {
       variant: {
         subtle: "bg-grey-100 dark:bg-grey-800 text-foreground border border-transparent",
-        filled: "bg-primary text-white border border-transparent shadow-xs",
+        filled: "bg-primary text-grey-50 border border-transparent shadow-xs",
         outlined: "bg-transparent border border-grey-300 dark:border-grey-700 text-foreground"
       },
       color: {
@@ -17,16 +17,16 @@ const chipVariants = cva(
         destructive: "bg-destructive/10 text-destructive border-destructive/20"
       },
       size: {
-        sm: "h-6 px-2.5 text-[11px]",
-        default: "h-8 px-3 text-xs",
-        lg: "h-9 px-4 text-sm"
+        sm: "h-6 px-2.5 text-caption-lg",
+        default: "h-8 px-3 text-body-3",
+        lg: "h-9 px-4 text-body-2"
       },
       clickable: {
         true: "cursor-pointer hover:brightness-95 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
         false: ""
       },
       selected: {
-        true: "bg-primary text-white border-primary shadow-xs",
+        true: "bg-primary text-grey-50 border-primary shadow-xs",
         false: ""
       }
     },

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