@bearmenu/ui 0.8.33 → 0.8.35

package/dist/{chunk-GESB7GCF.js → chunk-6W25S5CF.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-ZU4NAYN7.js';
+import { Badge } from './chunk-NIAL4ZU2.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-LY67SOFC.js

@@ -0,0 +1,142 @@
+import { Input } from './chunk-GTQSGDYF.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ALLOWED_NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  "Backspace",
+  "Tab",
+  "Escape",
+  "Enter",
+  "Delete",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown"
+]);
+var ALLOWED_SHORTCUT_KEYS = /* @__PURE__ */ new Set(["a", "c", "v", "x", "z"]);
+var CurrencyInput = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      onChange,
+      placeholder = "Enter amount",
+      currency = "$",
+      locale = "en-US",
+      min,
+      max,
+      disabled = false,
+      className,
+      error,
+      id: providedId
+    } = _b, props = __objRest(_b, [
+      "value",
+      "onChange",
+      "placeholder",
+      "currency",
+      "locale",
+      "min",
+      "max",
+      "disabled",
+      "className",
+      "error",
+      "id"
+    ]);
+    const reactId = React.useId();
+    const id = providedId != null ? providedId : reactId;
+    const errorId = `${id}-error`;
+    const [displayValue, setDisplayValue] = React.useState("");
+    const [isFocused, setIsFocused] = React.useState(false);
+    const formatNumber = React.useCallback(
+      (num) => {
+        if (num === null || isNaN(num)) return "";
+        return new Intl.NumberFormat(locale, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2
+        }).format(num);
+      },
+      [locale]
+    );
+    const parseInput = (input) => {
+      const cleaned = input.replace(/[^\d.-]/g, "");
+      const parsed = parseFloat(cleaned);
+      return isNaN(parsed) ? null : parsed;
+    };
+    React.useEffect(() => {
+      if (!isFocused) {
+        setDisplayValue(formatNumber(value));
+      }
+    }, [value, isFocused, formatNumber]);
+    const handleInputChange = (e) => {
+      const inputValue = e.target.value;
+      setDisplayValue(inputValue);
+      const parsedValue = parseInput(inputValue);
+      if (parsedValue !== null) {
+        if (min !== void 0 && parsedValue < min) return;
+        if (max !== void 0 && parsedValue > max) return;
+      }
+      onChange(parsedValue);
+    };
+    const handleFocus = () => {
+      setIsFocused(true);
+      if (value !== null && value !== void 0 && !isNaN(value)) {
+        setDisplayValue(value.toString());
+      }
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+      if (value !== null && value !== void 0 && !isNaN(value)) {
+        setDisplayValue(formatNumber(value));
+      } else {
+        setDisplayValue("");
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (ALLOWED_NAVIGATION_KEYS.has(e.key)) return;
+      if ((e.ctrlKey || e.metaKey) && ALLOWED_SHORTCUT_KEYS.has(e.key.toLowerCase())) return;
+      if (/^[0-9]$/.test(e.key)) return;
+      if (e.key === "." || e.key === "-") return;
+      e.preventDefault();
+    };
+    const symbolLength = currency.length;
+    const inputPaddingClass = symbolLength <= 1 ? "pl-8" : symbolLength === 2 ? "pl-10" : symbolLength === 3 ? "pl-12" : "pl-14";
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-muted-foreground",
+            children: currency
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          __spreadValues({
+            ref,
+            id,
+            type: "text",
+            inputMode: "decimal",
+            value: displayValue,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            disabled,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? errorId : void 0,
+            className: cn(inputPaddingClass, className)
+          }, props)
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "ml-1 mt-1 text-sm text-destructive", children: error })
+    ] });
+  }
+);
+CurrencyInput.displayName = "CurrencyInput";
+
+export { CurrencyInput };

package/dist/{chunk-ZU4NAYN7.js → chunk-NIAL4ZU2.js}

@@ -37,7 +37,19 @@ var badgeVariants = cva(
          * of `confirmed` / `pending`: the same pill, the muted ink, because
          * nothing about it needs acting on.
          */
-        completed: "rounded-full border-0 bg-muted px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-muted-foreground"
+        completed: "rounded-full border-0 bg-muted px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-muted-foreground",
+        /**
+         * Who an item belongs to, in the organise table (T4 desktop): a soft
+         * pill carrying an avatar (or an `AvatarGroup` for "Shared") and a
+         * chevron, because the whole pill opens "Who had this?".
+         *
+         * It is a control, not a status, so it keeps 6px of inset either side
+         * of its slots and `gap-1.5` between them; the caller renders the
+         * avatar and the chevron as children. Sized to clear 44px of tap
+         * target when it is the row's own control — see `MenuPickRow` for the
+         * same rule on the add toggle.
+         */
+        assignee: "rounded-full border-0 bg-surface-2 py-1 pl-1 pr-2 gap-1.5 text-[12px] leading-[1.2] font-semibold text-foreground"
       },
       /**
        * `status` is the taller pill the booking design draws beside a

package/dist/{chunk-JWTN7MNK.js → chunk-TVEIUTBQ.js}

@@ -49,9 +49,9 @@ var dialogContentVariants = cva(
 );
 var DialogContent = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, children, size, scrollBehavior, showCloseButton = true } = _b, props = __objRest(_b, ["className", "children", "size", "scrollBehavior", "showCloseButton"]);
+    var _b = _a, { className, children, size, scrollBehavior, showCloseButton = true, overlayClassName } = _b, props = __objRest(_b, ["className", "children", "size", "scrollBehavior", "showCloseButton", "overlayClassName"]);
     return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
       /* @__PURE__ */ jsxs(
         DialogPrimitive.Content,
         __spreadProps(__spreadValues({

package/dist/{chunk-ZJMCU7MI.js → chunk-VCRXL7H5.js}

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-JWTN7MNK.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-TVEIUTBQ.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from './chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/chunk-XLHMF6F5.js

@@ -0,0 +1,127 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues, __spreadProps } from './chunk-MMUBH76A.js';
+import * as React from 'react';
+import { Drawer as Drawer$1 } from 'vaul';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DrawerDirectionContext = React.createContext("bottom");
+var Drawer = (_a) => {
+  var _b = _a, {
+    shouldScaleBackground = false,
+    direction = "bottom"
+  } = _b, props = __objRest(_b, [
+    "shouldScaleBackground",
+    "direction"
+  ]);
+  return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(
+    Drawer$1.Root,
+    __spreadValues({
+      shouldScaleBackground,
+      direction
+    }, props)
+  ) });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = Drawer$1.Trigger;
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = Drawer$1.Close;
+var DrawerOverlay = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    __spreadValues({
+      ref,
+      "data-slot": "drawer-overlay",
+      className: cn("fixed inset-0 z-[1000] bg-black/60", className)
+    }, props)
+  );
+});
+DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
+var DrawerContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant = "flush", showHandle, overlayClassName, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "children"]);
+  const direction = React.useContext(DrawerDirectionContext);
+  const isVertical = direction === "top" || direction === "bottom";
+  const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
+  const positionClasses = direction === "bottom" ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]" : direction === "top" ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]" : direction === "left" ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]" : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "drawer-content",
+        className: cn(
+          "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
+          positionClasses,
+          // The single height cap for every vertical drawer. Consumers should
+          // NOT restate it: six app call sites carried an identical
+          // `!max-h-[90vh]`, so this default governed nothing and changing it
+          // here would have reached none of them.
+          isVertical ? "max-h-[85vh]" : "",
+          variant === "floating" && "m-3 rounded-2xl border",
+          className
+        )
+      }, props), {
+        children: [
+          handleEnabled && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "mx-auto mt-2 h-1.5 w-[60px] shrink-0 rounded-full bg-muted-foreground/30"
+            }
+          ),
+          children
+        ]
+      })
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "drawer-header",
+      className: cn("grid gap-1.5 p-4 text-center sm:text-left", className)
+    }, props)
+  );
+};
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className)
+    }, props)
+  );
+};
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    __spreadValues({
+      ref,
+      "data-slot": "drawer-title",
+      className: cn("text-lg font-semibold leading-none tracking-tight", className)
+    }, props)
+  );
+});
+DrawerTitle.displayName = Drawer$1.Title.displayName;
+var DrawerDescription = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    __spreadValues({
+      ref,
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+DrawerDescription.displayName = Drawer$1.Description.displayName;
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/{chunk-VSRGEB36.js → chunk-XNBDACL7.js}

@@ -1,4 +1,4 @@
-import { SignatureChip } from './chunk-GESB7GCF.js';
+import { SignatureChip } from './chunk-6W25S5CF.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';

package/dist/components/action-bar.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+/**
+ * ActionBar — the band that closes a screen or an overlay: the note that
+ * qualifies the action on one side, the actions on the other.
+ *
+ * The shared-table board draws it three ways and they are one component
+ * (16-shared-table.html): the table overview's "Add item · Organise" pair
+ * over the bottom nav (T2), the add-item overlay's "Added items can be
+ * assigned afterwards." beside "Add 1 item" (T3), and the split sheet's lone
+ * "Save split" (T6). The booking flow draws the same band under its steps.
+ *
+ * Two rules the frames are consistent about:
+ * - The actions sit on the trailing edge at their own width, and `primary` is
+ *   last. A `note` takes the left, so the qualifier is read before the commit.
+ *   Only the table overview divides the bar between two equal buttons — that
+ *   is `layout="split"`, not the default. (T5 and T6 draw a lone Save on the
+ *   trailing edge; T6 and X10 draw Cancel + Save split right-aligned.)
+ * - The bar owns the home-indicator inset. `pb-[max(env(safe-area-inset-bottom),12px)]`
+ *   is here and nowhere else, so no caller has to remember it.
+ *
+ * App-only offsets — bearmenu-fe's `--bottom-nav-offset`, `--page-gutter` —
+ * arrive through `className`. The design system does not know the app's
+ * chrome and must not guess at it.
+ */
+type ActionBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The commit. Trailing edge, always last in the DOM. */
+    primary: React.ReactNode;
+    /** The way out — Cancel, Keep organising. Sits before the primary. */
+    secondary?: React.ReactNode;
+    /** The line that qualifies the action. Takes the left when present. */
+    note?: React.ReactNode;
+    /**
+     * `end` (the default) keeps the actions at their own width on the trailing
+     * edge. `split` divides the bar between them — the table overview's
+     * "Add item · Organise" pair, and nothing else the board draws.
+     */
+    layout?: "end" | "split";
+    /**
+     * Pins the bar to the bottom of its scroll container with the band's own
+     * ground and hairline. Off by default: inside an overlay the footer is
+     * already the last row of a flex column and does not need to stick.
+     */
+    sticky?: boolean;
+};
+declare const ActionBar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The commit. Trailing edge, always last in the DOM. */
+    primary: React.ReactNode;
+    /** The way out — Cancel, Keep organising. Sits before the primary. */
+    secondary?: React.ReactNode;
+    /** The line that qualifies the action. Takes the left when present. */
+    note?: React.ReactNode;
+    /**
+     * `end` (the default) keeps the actions at their own width on the trailing
+     * edge. `split` divides the bar between them — the table overview's
+     * "Add item · Organise" pair, and nothing else the board draws.
+     */
+    layout?: "end" | "split";
+    /**
+     * Pins the bar to the bottom of its scroll container with the band's own
+     * ground and hairline. Off by default: inside an overlay the footer is
+     * already the last row of a flex column and does not need to stick.
+     */
+    sticky?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { ActionBar, type ActionBarProps };

package/dist/components/action-bar.js

@@ -0,0 +1,43 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ActionBar = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, primary, secondary, note, layout = "end", sticky = false } = _b, props = __objRest(_b, ["className", "primary", "secondary", "note", "layout", "sticky"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "action-bar",
+        className: cn(
+          "flex items-center gap-3 px-4 pt-3 pb-[max(env(safe-area-inset-bottom),12px)]",
+          sticky && "sticky bottom-0 z-10 border-t border-border bg-card",
+          className
+        )
+      }, props), {
+        children: [
+          note ? /* @__PURE__ */ jsx("div", { "data-slot": "action-bar-note", className: "min-w-0 flex-1 text-[12.5px] leading-normal text-muted-foreground", children: note }) : null,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "action-bar-actions",
+              className: cn(
+                "flex items-center gap-3",
+                layout === "split" ? "flex-1 [&>*]:flex-1" : "ml-auto shrink-0"
+              ),
+              children: [
+                secondary,
+                primary
+              ]
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+ActionBar.displayName = "ActionBar";
+
+export { ActionBar };

package/dist/components/activity-row.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+/**
+ * ActivityRow / ActivityList — what happened at the table, newest first
+ * (16-shared-table.html T9): "Bruno added Tochitură ardelenească · 9 min ago",
+ * down to "Adrian opened the table · 19:42".
+ *
+ * The leading slot is the actor's avatar when an event has one and a quiet
+ * glyph disc when it does not — a split belongs to an item, not to a person.
+ * Both are 32px so the sentences stay on one left edge however the feed mixes.
+ *
+ * The rows come from an append-only log, not from the current state: state
+ * cannot say that Ana moved Papanași to herself, only that it is hers now.
+ */
+type ActivityRowProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> & {
+    /** The actor's `Avatar`. Wins over `icon` when both are given. */
+    avatar?: React.ReactNode;
+    /** A lucide glyph for an event with no actor. Sits in a muted disc. */
+    icon?: React.ReactNode;
+    /** The sentence — the caller bolds the actor inside it. */
+    body: React.ReactNode;
+    /** "9 min ago", "19:42". Formatted by the caller. */
+    time: React.ReactNode;
+};
+declare const ActivityRow: React.ForwardRefExoticComponent<Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> & {
+    /** The actor's `Avatar`. Wins over `icon` when both are given. */
+    avatar?: React.ReactNode;
+    /** A lucide glyph for an event with no actor. Sits in a muted disc. */
+    icon?: React.ReactNode;
+    /** The sentence — the caller bolds the actor inside it. */
+    body: React.ReactNode;
+    /** "9 min ago", "19:42". Formatted by the caller. */
+    time: React.ReactNode;
+} & React.RefAttributes<HTMLLIElement>>;
+type ActivityListProps = React.HTMLAttributes<HTMLUListElement>;
+declare const ActivityList: React.ForwardRefExoticComponent<ActivityListProps & React.RefAttributes<HTMLUListElement>>;
+
+export { ActivityList, type ActivityListProps, ActivityRow, type ActivityRowProps };

package/dist/components/activity-row.js

@@ -0,0 +1,43 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ActivityRow = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, avatar, icon, body, time } = _b, props = __objRest(_b, ["className", "avatar", "icon", "body", "time"]);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "activity-row",
+        className: cn("flex items-start gap-3 py-3", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar != null ? avatar : /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-muted text-muted-foreground [&>svg]:size-4", children: icon }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[14px] leading-snug", children: body }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12.5px] text-muted-foreground", children: time })
+          ] })
+        ]
+      })
+    );
+  }
+);
+ActivityRow.displayName = "ActivityRow";
+var ActivityList = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsx(
+      "ul",
+      __spreadValues({
+        ref,
+        "data-slot": "activity-list",
+        className: cn("divide-y divide-border", className)
+      }, props)
+    );
+  }
+);
+ActivityList.displayName = "ActivityList";
+
+export { ActivityList, ActivityRow };

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/avatar.d.ts

@@ -5,10 +5,13 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "brown" | "muted" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+type AvatarTone = NonNullable<VariantProps<typeof avatarVariants>["tone"]>;
 declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    tone?: "brown" | "muted" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
@@ -29,4 +32,4 @@ declare const AvatarGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<
     size?: AvatarSize;
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, avatarGroupOverflowVariants, avatarVariants };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, type AvatarTone, avatarGroupOverflowVariants, avatarVariants };

package/dist/components/avatar.js

@@ -15,6 +15,34 @@ var avatarVariants = cva(
         default: "size-10 text-sm",
         lg: "size-12 text-base",
         xl: "size-16 text-lg"
+      },
+      /**
+       * A person's fixed hue at a shared table: the same face is the same
+       * colour on the ledger card, the organise chip, the split row and the
+       * activity feed, so a reader tracks people by colour and never has to
+       * re-read a name (16-shared-table.html, T2/T4/T6/T9).
+       *
+       * The caller assigns it — from join order, from the wire, from wherever
+       * it keeps its participants. The design system never hashes a name into
+       * a colour: a hash re-colours everyone when one person joins, and gives
+       * two people the same hue often enough to matter at a table of four.
+       *
+       * `muted` is the non-person disc — the "Shared between everyone" card's
+       * people glyph, an activity row with no actor.
+       *
+       * Six hues, assigned in the order listed. The board draws the first
+       * three; the rest space across the arc they leave free. Past six, cycle —
+       * at that size the initial and the name are doing the identifying, and
+       * colour is a support cue, never the only one.
+       */
+      tone: {
+        brown: "bg-avatar-brown",
+        teal: "bg-avatar-teal",
+        green: "bg-avatar-green",
+        blue: "bg-avatar-blue",
+        violet: "bg-avatar-violet",
+        rose: "bg-avatar-rose",
+        muted: "bg-muted"
       }
     },
     defaultVariants: {
@@ -23,18 +51,20 @@ var avatarVariants = cva(
   }
 );
 var AvatarContext = React.createContext("default");
+var AvatarToneContext = React.createContext(null);
 var Avatar = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
+  var _b = _a, { className, size, tone } = _b, props = __objRest(_b, ["className", "size", "tone"]);
   const inheritedSize = React.useContext(AvatarContext);
   const resolvedSize = size != null ? size : inheritedSize;
-  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx(AvatarToneContext.Provider, { value: tone != null ? tone : null, children: /* @__PURE__ */ jsx(
     AvatarPrimitive.Root,
     __spreadValues({
       ref,
       "data-slot": "avatar",
-      className: cn(avatarVariants({ size: resolvedSize }), className)
+      "data-tone": tone != null ? tone : void 0,
+      className: cn(avatarVariants({ size: resolvedSize, tone }), className)
     }, props)
-  ) });
+  ) }) });
 });
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 var AvatarImage = React.forwardRef((_a, ref) => {
@@ -51,13 +81,17 @@ var AvatarImage = React.forwardRef((_a, ref) => {
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 var AvatarFallback = React.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const tone = React.useContext(AvatarToneContext);
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Fallback,
     __spreadValues({
       ref,
       "data-slot": "avatar-fallback",
       className: cn(
-        "flex size-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground",
+        "flex size-full items-center justify-center rounded-full font-semibold",
+        tone === null && "bg-muted text-muted-foreground",
+        tone === "muted" && "text-muted-foreground",
+        tone !== null && tone !== "muted" && "text-white",
         className
       )
     }, props)

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "code" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | "confirmed" | "pending" | "completed" | null | undefined;
+    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from '../chunk-ZU4NAYN7.js';
+export { Badge, badgeVariants } from '../chunk-NIAL4ZU2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';