@bearmenu/ui 0.8.33 → 0.8.35

package/dist/components/place-card.js

@@ -6,7 +6,7 @@ import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-ZU4NAYN7.js';
+import { Badge } from '../chunk-NIAL4ZU2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-ZU4NAYN7.js';
+import { Badge } from '../chunk-NIAL4ZU2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/qr-panel.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * QrPanel — the frame around the code that gets a phone onto a shared table
+ * (16-shared-table.html T8).
+ *
+ * The code arrives as `children`: an `img` with a data URL, an inline `svg`,
+ * whatever the caller's QR library returns. The design system imports no QR
+ * library — a dependency that ships in every consumer's bundle to serve one
+ * sheet is the wrong trade, and the app already has `qrcode`.
+ *
+ * The white plate is not decoration. A QR reader needs the quiet zone and the
+ * light module ground to decode, so the plate stays white in dark mode too and
+ * the padding is the quiet zone, not padding taste. Its hairline is a neutral
+ * alpha rather than `--border`: the plate is always white, so a themed border
+ * would put a dark ring on it in dark mode.
+ *
+ * The caption sits OUTSIDE the plate, on the sheet's own ground (T8), which is
+ * also what lets it use `--muted-foreground` instead of an ink picked to work
+ * on white.
+ */
+type QrPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** The line under the code — "Scan with a phone camera to join". */
+    caption?: React.ReactNode;
+};
+declare const QrPanel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** The line under the code — "Scan with a phone camera to join". */
+    caption?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { QrPanel, type QrPanelProps };

package/dist/components/qr-panel.js

@@ -0,0 +1,33 @@
+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 QrPanel = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, caption, children } = _b, props = __objRest(_b, ["className", "caption", "children"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "qr-panel",
+        className: cn("flex flex-col items-center gap-3", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "qr-panel-plate",
+              className: "rounded-2xl border border-black/10 bg-white p-5",
+              children: /* @__PURE__ */ jsx("div", { "data-slot": "qr-panel-code", className: "[&>*]:block [&>*]:size-full max-w-[220px]", children })
+            }
+          ),
+          caption ? /* @__PURE__ */ jsx("p", { className: "text-center text-[12.5px] leading-normal text-muted-foreground", children: caption }) : null
+        ]
+      })
+    );
+  }
+);
+QrPanel.displayName = "QrPanel";
+
+export { QrPanel };

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

@@ -0,0 +1,47 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * ReconcileBar — does the split add up? The shared-table board puts it under
+ * every split, in both states (16-shared-table.html T6, X10): "The amounts add
+ * up · 120 / 120" on a green ground, "10 lei short of the item total ·
+ * 110 / 120" on the warning one.
+ *
+ * It is the whole answer to "can I save this", so it says the running figure
+ * and the target side by side and never makes the reader do the subtraction.
+ * The numbers are `tabular-nums`: they change on every keystroke in the custom
+ * mode, and proportional digits make the bar twitch while someone types.
+ *
+ * `message` is injected — the shortfall is money and money is formatted in the
+ * caller's locale, which the design system does not know.
+ */
+declare const reconcileBarVariants: (props?: ({
+    tone?: "short" | "ok" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ReconcileBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<typeof reconcileBarVariants> & {
+    /**
+     * "The amounts add up", "**10 lei short** of the item total". The caller
+     * carries the weight — the shortfall is bold, the rest is not.
+     */
+    message: React.ReactNode;
+    /** What the shares come to now, formatted by the caller. */
+    current: React.ReactNode;
+    /** What they have to come to — the item's line total. */
+    target: React.ReactNode;
+};
+declare const ReconcileBar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<(props?: ({
+    tone?: "short" | "ok" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * "The amounts add up", "**10 lei short** of the item total". The caller
+     * carries the weight — the shortfall is bold, the rest is not.
+     */
+    message: React.ReactNode;
+    /** What the shares come to now, formatted by the caller. */
+    current: React.ReactNode;
+    /** What they have to come to — the item's line total. */
+    target: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { ReconcileBar, type ReconcileBarProps, reconcileBarVariants };

package/dist/components/reconcile-bar.js

@@ -0,0 +1,60 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { TriangleAlert, Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var reconcileBarVariants = cva(
+  "flex items-center gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        ok: "bg-success/15 text-success-ink",
+        // `--warning-deep` and `--warning-ink` are the tokens for exactly this:
+        // the solid `--warning` is tuned as a fill and falls short of AA as ink
+        // on its own wash. Both have dark twins, so there is no `dark:` branch.
+        short: "bg-warning-deep/15 text-warning-ink"
+      }
+    },
+    defaultVariants: { tone: "ok" }
+  }
+);
+var TONE_ICON = {
+  ok: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, strokeWidth: 3 }),
+  short: /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true })
+};
+var ReconcileBar = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, tone, message, current, target } = _b, props = __objRest(_b, ["className", "tone", "message", "current", "target"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "reconcile-bar",
+        "data-tone": tone != null ? tone : "ok",
+        className: cn(reconcileBarVariants({ tone }), className)
+      }, props), {
+        children: [
+          TONE_ICON[tone != null ? tone : "ok"],
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: message }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "reconcile-bar-figures",
+              className: "shrink-0 text-[12px] font-bold tabular-nums",
+              children: [
+                current,
+                /* @__PURE__ */ jsx("span", { className: "px-1.5 opacity-60", children: "/" }),
+                target
+              ]
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+ReconcileBar.displayName = "ReconcileBar";
+
+export { ReconcileBar, reconcileBarVariants };

package/dist/components/responsive-overlay.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { DialogContent } from './dialog.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority/types';
+import '@radix-ui/react-dialog';
+import 'class-variance-authority';
+
+type ResponsiveOverlayProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The overlay's name — "Add an item", "Split this item", "Invite people". */
+    title: React.ReactNode;
+    /** The one line under it — "Table 18 · from the menu". Optional, never two lines. */
+    subtitle?: React.ReactNode;
+    /** The scrolling body. */
+    children: React.ReactNode;
+    /** The closing band — an `ActionBar`, usually. */
+    footer?: React.ReactNode;
+    /**
+     * The close button's accessible name. Injected, like every label here: the
+     * design system holds no copy and no i18n.
+     */
+    closeLabel?: string;
+    /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
+    size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+    /** Classes for the panel itself — the dialog box or the drawer sheet. */
+    className?: string;
+    /** Classes for the scrolling body. */
+    bodyClassName?: string;
+};
+/**
+ * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
+ * `Dialog` from md.
+ *
+ * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
+ * (16-shared-table.html) and the two widths never disagree about it: the
+ * title and its one-line subtitle top left, a round close top right, the body,
+ * and a footer band carrying the note and the actions. What differs is the
+ * container — a sheet that a thumb drags down, or a box in the middle of the
+ * screen — and that is the only thing this component switches.
+ *
+ * The scrim is `--scrim-overlay`. bearmenu-fe's `globals.css` loads after the
+ * design system's and defines a `--scrim` of its own — an opaque photo hue —
+ * so an overlay that reached for `bg-scrim` would paint that colour over the
+ * whole page at full alpha. The two drawer/dialog primitives still carry their
+ * older `bg-black/…`; this component states the token explicitly rather than
+ * changing theirs underneath every other caller.
+ *
+ * It resolves the width with `useMediaQuery`, which is mobile-first: the
+ * drawer is what the server and the first client frame render. A wide screen
+ * that arrives with the overlay already open — an invite link opened on a
+ * laptop — therefore shows the sheet for one frame before the dialog replaces
+ * it. That is the library's documented convention for every breakpoint-
+ * switching component, and a second breakpoint hook with different semantics
+ * would be a worse thing to own than one frame.
+ */
+declare const ResponsiveOverlay: React.ForwardRefExoticComponent<ResponsiveOverlayProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ResponsiveOverlay, type ResponsiveOverlayProps };

package/dist/components/responsive-overlay.js

@@ -0,0 +1,132 @@
+import { useMediaQuery } from '../chunk-OPVKL4VS.js';
+import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-TVEIUTBQ.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var MD_MEDIA_QUERY = "(min-width: 768px)";
+function useFocusReturn(open) {
+  const openerRef = React.useRef(null);
+  const wasOpen = React.useRef(false);
+  React.useEffect(() => {
+    if (open) {
+      wasOpen.current = true;
+      return;
+    }
+    if (wasOpen.current) {
+      wasOpen.current = false;
+      const opener = openerRef.current;
+      if (opener && opener.isConnected) {
+        requestAnimationFrame(() => opener.focus());
+      }
+    }
+    const track = (event) => {
+      const target = event.target;
+      if (target instanceof HTMLElement) openerRef.current = target;
+    };
+    if (document.activeElement instanceof HTMLElement && document.activeElement !== document.body) {
+      openerRef.current = document.activeElement;
+    }
+    document.addEventListener("focusin", track);
+    return () => document.removeEventListener("focusin", track);
+  }, [open]);
+}
+var ResponsiveOverlay = React.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    title,
+    subtitle,
+    children,
+    footer,
+    closeLabel = "Close",
+    size = "lg",
+    className,
+    bodyClassName
+  }, ref) => {
+    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const titleId = React.useId();
+    const subtitleId = React.useId();
+    useFocusReturn(open);
+    const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        isWide ? /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }) : /* @__PURE__ */ jsx(DrawerTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? isWide ? /* @__PURE__ */ jsx(DialogDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx(DrawerDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-slot": "responsive-overlay-close",
+          onClick: () => onOpenChange(false),
+          className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
+          ]
+        }
+      )
+    ] });
+    const body = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "responsive-overlay-body",
+        className: cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName),
+        children
+      }
+    );
+    const foot = footer ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "responsive-overlay-footer",
+        className: "shrink-0 border-t border-border bg-surface-2",
+        children: footer
+      }
+    ) : null;
+    if (isWide) {
+      return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          ref,
+          size,
+          showCloseButton: false,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          "aria-labelledby": titleId,
+          "aria-describedby": subtitle ? subtitleId : void 0,
+          className: cn(
+            // The dialog's own `grid gap-4 p-6` would put air between the
+            // header, the body and the band the frames draw flush.
+            "flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0",
+            className
+          ),
+          children: [
+            header,
+            body,
+            foot
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        ref,
+        overlayClassName: "bg-scrim-overlay",
+        "aria-labelledby": titleId,
+        "aria-describedby": subtitle ? subtitleId : void 0,
+        className: cn("flex max-h-[85vh] flex-col p-0", className),
+        children: [
+          header,
+          body,
+          foot
+        ]
+      }
+    ) });
+  }
+);
+ResponsiveOverlay.displayName = "ResponsiveOverlay";
+
+export { ResponsiveOverlay };

package/dist/components/searchable-select.js

@@ -1,6 +1,6 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-ZJMCU7MI.js';
-import '../chunk-JWTN7MNK.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-VCRXL7H5.js';
+import '../chunk-TVEIUTBQ.js';
 import { Button } from '../chunk-5SGKGFMN.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-GESB7GCF.js';
-import '../chunk-ZU4NAYN7.js';
+export { SignatureChip } from '../chunk-6W25S5CF.js';
+import '../chunk-NIAL4ZU2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/split-share-row.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+/**
+ * SplitShareRow — one person's share of a split item (16-shared-table.html,
+ * T6 and X10). Include them or leave them out, and in the custom mode set what
+ * they had.
+ *
+ * The board draws one row two ways and they are the same component: under md a
+ * full-width row with the check on the trailing edge, where a thumb is; from md
+ * a tile in a three-up grid with a square checkbox leading, where an eye scans
+ * a column. Both are CSS on one DOM — the order flips with `order`, the check's
+ * radius with a breakpoint — so there is no JS measurement and no flash.
+ *
+ * The amount sits in a soft pill under md whether or not it is editable, as the
+ * frames draw it; from md a fixed amount is plain text and only an editable one
+ * keeps the pill, plus a hairline and a focus ring, because on a wide screen
+ * nothing else would say "you can type here".
+ *
+ * The numeral is the bold sans and only the caller's currency suffix is mono,
+ * as the board draws money everywhere.
+ *
+ * The parent owns the grid (`grid md:grid-cols-3`) and the arithmetic. This row
+ * reports what it was given and never rounds: allocations are integer minor
+ * units and must sum to the line total exactly.
+ */
+type SplitShareRowProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & {
+    /** Avatar and name, composed by the caller — the design system holds no participant shape. */
+    person: React.ReactNode;
+    /** The share as the caller formatted it. Shown when `editable` is false. */
+    amount: React.ReactNode;
+    /** Swaps the amount for a `CurrencyInput`. The custom mode, and only it. */
+    editable?: boolean;
+    /** The editable value in major units, as `CurrencyInput` takes it. */
+    amountValue?: number | null;
+    onAmountChange?: (value: number | null) => void;
+    /** Passed through to `CurrencyInput` for the editable amount. */
+    currency?: string;
+    locale?: string;
+    /** Is this person in the split? Omit the handler for a row that cannot be excluded. */
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The checkbox's accessible name — "Include Ana in the split". Injected;
+     * the design system holds no copy.
+     */
+    includeLabel?: string;
+    /** The editable amount's accessible name — "Ana's share". */
+    amountLabel?: string;
+    disabled?: boolean;
+};
+declare const SplitShareRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    /** Avatar and name, composed by the caller — the design system holds no participant shape. */
+    person: React.ReactNode;
+    /** The share as the caller formatted it. Shown when `editable` is false. */
+    amount: React.ReactNode;
+    /** Swaps the amount for a `CurrencyInput`. The custom mode, and only it. */
+    editable?: boolean;
+    /** The editable value in major units, as `CurrencyInput` takes it. */
+    amountValue?: number | null;
+    onAmountChange?: (value: number | null) => void;
+    /** Passed through to `CurrencyInput` for the editable amount. */
+    currency?: string;
+    locale?: string;
+    /** Is this person in the split? Omit the handler for a row that cannot be excluded. */
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The checkbox's accessible name — "Include Ana in the split". Injected;
+     * the design system holds no copy.
+     */
+    includeLabel?: string;
+    /** The editable amount's accessible name — "Ana's share". */
+    amountLabel?: string;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { SplitShareRow, type SplitShareRowProps };

package/dist/components/split-share-row.js

@@ -0,0 +1,101 @@
+import { CurrencyInput } from '../chunk-LY67SOFC.js';
+import '../chunk-GTQSGDYF.js';
+import { Checkbox } from '../chunk-L3CDXVEP.js';
+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 SplitShareRow = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      person,
+      amount,
+      editable = false,
+      amountValue = null,
+      onAmountChange,
+      currency = "lei",
+      locale,
+      checked,
+      onCheckedChange,
+      includeLabel,
+      amountLabel,
+      disabled = false
+    } = _b, props = __objRest(_b, [
+      "className",
+      "person",
+      "amount",
+      "editable",
+      "amountValue",
+      "onAmountChange",
+      "currency",
+      "locale",
+      "checked",
+      "onCheckedChange",
+      "includeLabel",
+      "amountLabel",
+      "disabled"
+    ]);
+    const amountId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "split-share-row",
+        "data-checked": checked ? "" : void 0,
+        className: cn(
+          "flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2.5",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 order-2", children: person }),
+          editable ? /* @__PURE__ */ jsxs("span", { className: "order-3 shrink-0", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: amountId, className: "sr-only", children: amountLabel }),
+            /* @__PURE__ */ jsx(
+              CurrencyInput,
+              {
+                id: amountId,
+                value: amountValue,
+                onChange: (next) => onAmountChange == null ? void 0 : onAmountChange(next),
+                currency,
+                locale,
+                disabled,
+                className: "h-9 w-24 rounded-lg border border-border bg-surface-2 text-right text-[13px] font-bold tabular-nums focus-within:ring-2 focus-within:ring-ring"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "split-share-amount",
+              className: cn(
+                "order-3 shrink-0 rounded-lg bg-surface-2 px-2.5 py-1 text-[13px] font-bold tabular-nums md:bg-transparent md:px-0",
+                // Only the amount goes quiet when someone is out of the split.
+                // Dimming the whole row takes the name under 4.5:1 with it.
+                checked === false && "text-muted-foreground"
+              ),
+              children: amount
+            }
+          ),
+          onCheckedChange ? /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked,
+              onCheckedChange: (next) => onCheckedChange(next === true),
+              disabled,
+              "aria-label": includeLabel,
+              className: cn(
+                "relative order-4 size-6 rounded-full md:order-1 md:size-5 md:rounded-md",
+                "before:absolute before:-inset-2.5 before:content-[''] md:before:-inset-3"
+              )
+            }
+          ) : null
+        ]
+      })
+    );
+  }
+);
+SplitShareRow.displayName = "SplitShareRow";
+
+export { SplitShareRow };