@sovereignfs/ui 0.40.0 → 0.41.0

package/dist/BalanceChip.module.css

@@ -0,0 +1,32 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 24px;
+  padding: 2px var(--sv-space-2);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.owed {
+  color: var(--sv-color-success-text);
+  background: var(--sv-color-success-surface);
+  border-color: var(--sv-color-success-border);
+}
+
+.owes {
+  color: var(--sv-color-error-text);
+  background: var(--sv-color-error-surface);
+  border-color: var(--sv-color-error-border);
+}
+
+.settled {
+  color: var(--sv-color-text-muted);
+  background: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border);
+}

package/dist/MemberMultiSelect.module.css

@@ -0,0 +1,27 @@
+.group {
+  display: grid;
+  gap: var(--sv-space-2);
+}
+
+.label {
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+}
+
+.trailing {
+  flex-shrink: 0;
+  max-width: 8rem;
+}
+
+.hint {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}

package/dist/index.d.ts

@@ -912,6 +912,87 @@ interface CheckableListRowProps {
  */
 declare function CheckableListRow({ checked, onCheckedChange, label, icon, trailing, disabled, className, }: CheckableListRowProps): react.JSX.Element;
 
+interface CurrencyInputProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'inputMode'> {
+    /** Smallest currency unit (cents) — never a float. Null when the field is empty or unparsable. */
+    valueCents: number | null;
+    onValueChange: (cents: number | null) => void;
+}
+/**
+ * CurrencyInput — decimal amount entry that reports its value as integer
+ * cents, matching Sovereign's "amounts are always smallest-unit integers"
+ * data-model convention (never a float in application state).
+ *
+ * Keeps its own text buffer rather than deriving display text from
+ * `valueCents` on every keystroke — reformatting mid-type (e.g. "12." → the
+ * trailing decimal point) would fight the user's cursor. It only
+ * re-syncs from `valueCents` when the prop changes to something the current
+ * text doesn't already represent (an external reset/prefill), so typing
+ * remains uninterrupted while the parsed amount stays in lockstep with the
+ * parent's state.
+ */
+declare function CurrencyInput({ valueCents, onValueChange, ...rest }: CurrencyInputProps): react.JSX.Element;
+
+interface BalanceChipProps {
+    /** Smallest currency unit (cents). Positive = owed to them, negative = they owe, zero = settled. */
+    amountCents: number;
+    /** ISO 4217 currency code, e.g. "USD". */
+    currency: string;
+    className?: string;
+}
+/**
+ * BalanceChip — inline balance indicator (green = owed to them, red = they
+ * owe, neutral = settled up). For any plugin tracking who-owes-whom — not
+ * Tally-specific despite the naming; "amountCents" is a generic signed net
+ * balance, not tied to expense-splitting semantics.
+ */
+declare function BalanceChip({ amountCents, currency, className }: BalanceChipProps): react.JSX.Element;
+
+type SplitMethod = 'equal' | 'amount' | 'percentage' | 'shares';
+interface SplitMethodSelectorProps {
+    value: SplitMethod;
+    onChange: (value: SplitMethod) => void;
+    size?: 'sm' | 'md';
+    'aria-label'?: string;
+}
+/**
+ * SplitMethodSelector — the four-way equal/amount/percentage/shares picker
+ * shared by any plugin that splits a cost between people. A thin
+ * `SegmentedControl` preset: centralizes the option list and labels so every
+ * expense-splitting plugin presents the same four choices in the same order,
+ * instead of each one re-typing its own copy of this array.
+ */
+declare function SplitMethodSelector({ value, onChange, size, 'aria-label': ariaLabel, }: SplitMethodSelectorProps): react.JSX.Element;
+
+interface MemberMultiSelectOption {
+    id: string;
+    label: string;
+}
+interface MemberMultiSelectProps {
+    options: MemberMultiSelectOption[];
+    selectedIds: Set<string>;
+    onToggle: (id: string, checked: boolean) => void;
+    /** Rendered to the right of a selected row only — e.g. a per-person `CurrencyInput` or share count. */
+    renderTrailing?: (id: string) => ReactNode;
+    /** Section label above the list, e.g. "Paid by" or "Split between". */
+    label?: string;
+    /** Helper/validation text below the list, e.g. a running total. */
+    hint?: ReactNode;
+    className?: string;
+}
+/**
+ * MemberMultiSelect — checkbox list for picking any number of people from an
+ * already-resolved set of options (group/project members, collaborators,
+ * etc.). Deliberately domain-agnostic about *who* an option represents —
+ * instance users and guest members are both just `{id, label}` here, so
+ * nothing special is needed to include guests alongside instance users; the
+ * caller's `options` array is the only place that distinction exists.
+ *
+ * Not a directory search or an "add a new guest" flow — pair with
+ * `SuggestionInput` (search + add) for that; this component only selects
+ * among options already passed in.
+ */
+declare function MemberMultiSelect({ options, selectedIds, onToggle, renderTrailing, label, hint, className, }: MemberMultiSelectProps): react.JSX.Element;
+
 interface UseLongPressOptions {
     /** Called once the press has been held for `delay` without exceeding `moveTolerance`. */
     onLongPress: () => void;
@@ -1046,4 +1127,4 @@ interface CommitOnEnterOrBlurHandlers {
  */
 declare function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, type CommitOnEnterOrBlurHandlers, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, QuantityStepper, type QuantityStepperProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useCommitOnEnterOrBlur, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, BalanceChip, type BalanceChipProps, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, CheckableListRow, type CheckableListRowProps, Checkbox, type CheckboxProps, CodeTextarea, type CodeTextareaProps, type CommitOnEnterOrBlurHandlers, ConfirmDialog, type ConfirmDialogProps, CurrencyInput, type CurrencyInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, IconPicker, type IconPickerProps, type IconProps, Input, type InputProps, type LongPressHandlers, MOBILE_BREAKPOINT_PX, MemberMultiSelect, type MemberMultiSelectOption, type MemberMultiSelectProps, Menu, type MenuEntry, type MenuItem, type MenuLabel, type MenuProps, type MenuSeparator, type NavTabItem, NavTabs, type NavTabsProps, OverlayHeader, type OverlayHeaderProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, QuantityStepper, type QuantityStepperProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Sheet, type SheetProps, Spinner, type SpinnerProps, type SplitMethod, SplitMethodSelector, type SplitMethodSelectorProps, SplitPane, type SplitPaneProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, SuggestionInput, type SuggestionInputProps, type SuggestionOption, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseLongPressOptions, useCommitOnEnterOrBlur, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };

package/dist/index.js

@@ -3636,9 +3636,114 @@ function CheckableListRow({
     trailing && /* @__PURE__ */ jsx91("span", { className: styles39.trailing, children: trailing })
   ] });
 }
+
+// src/components/CurrencyInput/CurrencyInput.tsx
+import { useState as useState15 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
+function centsToText(cents) {
+  return (cents / 100).toFixed(2);
+}
+function textToCents(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return null;
+  return Math.round(parsed * 100);
+}
+function CurrencyInput({ valueCents, onValueChange, ...rest }) {
+  const [text, setText] = useState15(() => valueCents != null ? centsToText(valueCents) : "");
+  if (textToCents(text) !== valueCents) {
+    setText(valueCents != null ? centsToText(valueCents) : "");
+  }
+  return /* @__PURE__ */ jsx92(
+    Input,
+    {
+      ...rest,
+      type: "text",
+      inputMode: "decimal",
+      value: text,
+      onChange: (e) => {
+        const next = e.currentTarget.value;
+        setText(next);
+        onValueChange(textToCents(next));
+      }
+    }
+  );
+}
+
+// src/components/BalanceChip/BalanceChip.tsx
+import styles40 from "./BalanceChip.module.css";
+import { jsx as jsx93 } from "react/jsx-runtime";
+function formatAbsCents(cents) {
+  return (Math.abs(cents) / 100).toFixed(2);
+}
+function BalanceChip({ amountCents, currency, className }) {
+  const direction = amountCents > 0 ? "owed" : amountCents < 0 ? "owes" : "settled";
+  const text = direction === "settled" ? "Settled up" : `${direction === "owed" ? "Owed" : "Owes"} ${currency} ${formatAbsCents(amountCents)}`;
+  return /* @__PURE__ */ jsx93("span", { className: [styles40.chip, styles40[direction], className].filter(Boolean).join(" "), children: text });
+}
+
+// src/components/SplitMethodSelector/SplitMethodSelector.tsx
+import { jsx as jsx94 } from "react/jsx-runtime";
+var OPTIONS = [
+  { label: "Equal", value: "equal" },
+  { label: "Amount", value: "amount" },
+  { label: "Percentage", value: "percentage" },
+  { label: "Shares", value: "shares" }
+];
+function SplitMethodSelector({
+  value,
+  onChange,
+  size = "sm",
+  "aria-label": ariaLabel = "Split method"
+}) {
+  return /* @__PURE__ */ jsx94(
+    SegmentedControl,
+    {
+      value,
+      onChange,
+      options: OPTIONS,
+      size,
+      "aria-label": ariaLabel
+    }
+  );
+}
+
+// src/components/MemberMultiSelect/MemberMultiSelect.tsx
+import styles41 from "./MemberMultiSelect.module.css";
+import { jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
+function MemberMultiSelect({
+  options,
+  selectedIds,
+  onToggle,
+  renderTrailing,
+  label,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs73("div", { className: [styles41.group, className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx95("span", { className: styles41.label, children: label }),
+    options.map((option) => {
+      const checked = selectedIds.has(option.id);
+      return /* @__PURE__ */ jsxs73("div", { className: styles41.row, children: [
+        /* @__PURE__ */ jsx95(
+          Checkbox,
+          {
+            checked,
+            onChange: (next) => onToggle(option.id, next),
+            label: option.label
+          }
+        ),
+        checked && renderTrailing && /* @__PURE__ */ jsx95("span", { className: styles41.trailing, children: renderTrailing(option.id) })
+      ] }, option.id);
+    }),
+    hint && /* @__PURE__ */ jsx95("span", { className: styles41.hint, children: hint })
+  ] });
+}
 export {
   Avatar,
   Badge,
+  BalanceChip,
   Button,
   Calendar,
   Card,
@@ -3646,6 +3751,7 @@ export {
   Checkbox,
   CodeTextarea,
   ConfirmDialog,
+  CurrencyInput,
   DatePicker,
   Dialog,
   DragHandleRow,
@@ -3657,6 +3763,7 @@ export {
   IconPicker,
   Input,
   MOBILE_BREAKPOINT_PX,
+  MemberMultiSelect,
   Menu,
   NavTabs,
   OverlayHeader,
@@ -3667,6 +3774,7 @@ export {
   Select,
   Sheet,
   Spinner,
+  SplitMethodSelector,
   SplitPane,
   StatusBadge,
   SuggestionInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [

package/src/components/BalanceChip/BalanceChip.module.css

@@ -0,0 +1,32 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 24px;
+  padding: 2px var(--sv-space-2);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.owed {
+  color: var(--sv-color-success-text);
+  background: var(--sv-color-success-surface);
+  border-color: var(--sv-color-success-border);
+}
+
+.owes {
+  color: var(--sv-color-error-text);
+  background: var(--sv-color-error-surface);
+  border-color: var(--sv-color-error-border);
+}
+
+.settled {
+  color: var(--sv-color-text-muted);
+  background: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border);
+}

package/src/components/BalanceChip/BalanceChip.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BalanceChip } from './BalanceChip';
+
+const meta = {
+  title: 'Components/BalanceChip',
+  component: BalanceChip,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Inline net-balance indicator — green when owed to them, red when they owe, neutral when settled. Not tied to expense-splitting specifically: any plugin tracking a signed balance between people can use it.',
+      },
+    },
+  },
+  args: {
+    amountCents: 2500,
+    currency: 'USD',
+  },
+} satisfies Meta<typeof BalanceChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Owed: Story = {
+  args: { amountCents: 2500, currency: 'USD' },
+};
+
+export const Owes: Story = {
+  args: { amountCents: -1350, currency: 'USD' },
+};
+
+export const SettledUp: Story = {
+  args: { amountCents: 0, currency: 'USD' },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 'var(--sv-space-2)' }}>
+      <BalanceChip amountCents={2500} currency="USD" />
+      <BalanceChip amountCents={-1350} currency="USD" />
+      <BalanceChip amountCents={0} currency="USD" />
+    </div>
+  ),
+};

package/src/components/BalanceChip/BalanceChip.tsx

@@ -0,0 +1,33 @@
+import styles from './BalanceChip.module.css';
+
+export interface BalanceChipProps {
+  /** Smallest currency unit (cents). Positive = owed to them, negative = they owe, zero = settled. */
+  amountCents: number;
+  /** ISO 4217 currency code, e.g. "USD". */
+  currency: string;
+  className?: string;
+}
+
+function formatAbsCents(cents: number): string {
+  return (Math.abs(cents) / 100).toFixed(2);
+}
+
+/**
+ * BalanceChip — inline balance indicator (green = owed to them, red = they
+ * owe, neutral = settled up). For any plugin tracking who-owes-whom — not
+ * Tally-specific despite the naming; "amountCents" is a generic signed net
+ * balance, not tied to expense-splitting semantics.
+ */
+export function BalanceChip({ amountCents, currency, className }: BalanceChipProps) {
+  const direction = amountCents > 0 ? 'owed' : amountCents < 0 ? 'owes' : 'settled';
+  const text =
+    direction === 'settled'
+      ? 'Settled up'
+      : `${direction === 'owed' ? 'Owed' : 'Owes'} ${currency} ${formatAbsCents(amountCents)}`;
+
+  return (
+    <span className={[styles.chip, styles[direction], className].filter(Boolean).join(' ')}>
+      {text}
+    </span>
+  );
+}

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CurrencyInput } from './CurrencyInput';
+
+const meta = {
+  title: 'Components/CurrencyInput',
+  component: CurrencyInput,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Decimal amount entry that reports its value as integer cents, matching the "amounts are always smallest-unit integers" data-model convention. Preserves in-progress typing (e.g. a trailing decimal point) instead of reformatting on every keystroke.',
+      },
+    },
+  },
+  args: {
+    valueCents: null,
+    onValueChange: () => {},
+  },
+} satisfies Meta<typeof CurrencyInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledCurrencyInput({ initialCents }: { initialCents: number | null }) {
+  const [cents, setCents] = useState<number | null>(initialCents);
+  return (
+    <CurrencyInput
+      valueCents={cents}
+      onValueChange={setCents}
+      placeholder="0.00"
+      aria-label="Amount"
+    />
+  );
+}
+
+export const Empty: Story = {
+  render: () => <ControlledCurrencyInput initialCents={null} />,
+};
+
+export const Prefilled: Story = {
+  render: () => <ControlledCurrencyInput initialCents={4250} />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <CurrencyInput valueCents={1000} onValueChange={() => {}} aria-label="Amount" disabled />
+  ),
+};

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { Input, type InputProps } from '../Input/Input';
+
+export interface CurrencyInputProps extends Omit<
+  InputProps,
+  'value' | 'onChange' | 'type' | 'inputMode'
+> {
+  /** Smallest currency unit (cents) — never a float. Null when the field is empty or unparsable. */
+  valueCents: number | null;
+  onValueChange: (cents: number | null) => void;
+}
+
+function centsToText(cents: number): string {
+  return (cents / 100).toFixed(2);
+}
+
+function textToCents(text: string): number | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return null;
+  return Math.round(parsed * 100);
+}
+
+/**
+ * CurrencyInput — decimal amount entry that reports its value as integer
+ * cents, matching Sovereign's "amounts are always smallest-unit integers"
+ * data-model convention (never a float in application state).
+ *
+ * Keeps its own text buffer rather than deriving display text from
+ * `valueCents` on every keystroke — reformatting mid-type (e.g. "12." → the
+ * trailing decimal point) would fight the user's cursor. It only
+ * re-syncs from `valueCents` when the prop changes to something the current
+ * text doesn't already represent (an external reset/prefill), so typing
+ * remains uninterrupted while the parsed amount stays in lockstep with the
+ * parent's state.
+ */
+export function CurrencyInput({ valueCents, onValueChange, ...rest }: CurrencyInputProps) {
+  const [text, setText] = useState(() => (valueCents != null ? centsToText(valueCents) : ''));
+
+  if (textToCents(text) !== valueCents) {
+    setText(valueCents != null ? centsToText(valueCents) : '');
+  }
+
+  return (
+    <Input
+      {...rest}
+      type="text"
+      inputMode="decimal"
+      value={text}
+      onChange={(e) => {
+        const next = e.currentTarget.value;
+        setText(next);
+        onValueChange(textToCents(next));
+      }}
+    />
+  );
+}

package/src/components/MemberMultiSelect/MemberMultiSelect.module.css

@@ -0,0 +1,27 @@
+.group {
+  display: grid;
+  gap: var(--sv-space-2);
+}
+
+.label {
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+}
+
+.trailing {
+  flex-shrink: 0;
+  max-width: 8rem;
+}
+
+.hint {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}

package/src/components/MemberMultiSelect/MemberMultiSelect.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CurrencyInput } from '../CurrencyInput/CurrencyInput';
+import { MemberMultiSelect, type MemberMultiSelectOption } from './MemberMultiSelect';
+
+const meta = {
+  title: 'Components/MemberMultiSelect',
+  component: MemberMultiSelect,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Checkbox list for picking any number of people from an already-resolved set of options. Domain-agnostic about who an option represents — instance users and guest members are both just `{id, label}`, so nothing special is needed to include guests. Not a directory search or invite flow; pair with SuggestionInput for that.',
+      },
+    },
+  },
+  args: {
+    options: [],
+    selectedIds: new Set(),
+    onToggle: () => {},
+  },
+} satisfies Meta<typeof MemberMultiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const OPTIONS: MemberMultiSelectOption[] = [
+  { id: '1', label: 'Priya' },
+  { id: '2', label: 'Jamie (guest)' },
+  { id: '3', label: 'Sam' },
+];
+
+function ControlledMultiSelect({ withTrailing = false }: { withTrailing?: boolean }) {
+  const [selected, setSelected] = useState<Set<string>>(new Set(['1', '3']));
+  const [amounts, setAmounts] = useState<Record<string, number | null>>({});
+
+  return (
+    <MemberMultiSelect
+      options={OPTIONS}
+      selectedIds={selected}
+      onToggle={(id, checked) => {
+        setSelected((prev) => {
+          const next = new Set(prev);
+          if (checked) next.add(id);
+          else next.delete(id);
+          return next;
+        });
+      }}
+      label="Split between"
+      hint={withTrailing ? 'Remaining: 0.00' : undefined}
+      renderTrailing={
+        withTrailing
+          ? (id) => (
+              <CurrencyInput
+                valueCents={amounts[id] ?? null}
+                onValueChange={(cents) => setAmounts((prev) => ({ ...prev, [id]: cents }))}
+                placeholder="0.00"
+                aria-label={`Amount for ${OPTIONS.find((o) => o.id === id)?.label}`}
+              />
+            )
+          : undefined
+      }
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledMultiSelect />,
+};
+
+export const WithTrailingAmountInput: Story = {
+  render: () => <ControlledMultiSelect withTrailing />,
+};

package/src/components/MemberMultiSelect/MemberMultiSelect.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Checkbox } from '../Checkbox/Checkbox';
+import styles from './MemberMultiSelect.module.css';
+
+export interface MemberMultiSelectOption {
+  id: string;
+  label: string;
+}
+
+export interface MemberMultiSelectProps {
+  options: MemberMultiSelectOption[];
+  selectedIds: Set<string>;
+  onToggle: (id: string, checked: boolean) => void;
+  /** Rendered to the right of a selected row only — e.g. a per-person `CurrencyInput` or share count. */
+  renderTrailing?: (id: string) => ReactNode;
+  /** Section label above the list, e.g. "Paid by" or "Split between". */
+  label?: string;
+  /** Helper/validation text below the list, e.g. a running total. */
+  hint?: ReactNode;
+  className?: string;
+}
+
+/**
+ * MemberMultiSelect — checkbox list for picking any number of people from an
+ * already-resolved set of options (group/project members, collaborators,
+ * etc.). Deliberately domain-agnostic about *who* an option represents —
+ * instance users and guest members are both just `{id, label}` here, so
+ * nothing special is needed to include guests alongside instance users; the
+ * caller's `options` array is the only place that distinction exists.
+ *
+ * Not a directory search or an "add a new guest" flow — pair with
+ * `SuggestionInput` (search + add) for that; this component only selects
+ * among options already passed in.
+ */
+export function MemberMultiSelect({
+  options,
+  selectedIds,
+  onToggle,
+  renderTrailing,
+  label,
+  hint,
+  className,
+}: MemberMultiSelectProps) {
+  return (
+    <div className={[styles.group, className].filter(Boolean).join(' ')}>
+      {label && <span className={styles.label}>{label}</span>}
+      {options.map((option) => {
+        const checked = selectedIds.has(option.id);
+        return (
+          <div key={option.id} className={styles.row}>
+            <Checkbox
+              checked={checked}
+              onChange={(next) => onToggle(option.id, next)}
+              label={option.label}
+            />
+            {checked && renderTrailing && (
+              <span className={styles.trailing}>{renderTrailing(option.id)}</span>
+            )}
+          </div>
+        );
+      })}
+      {hint && <span className={styles.hint}>{hint}</span>}
+    </div>
+  );
+}

package/src/components/SplitMethodSelector/SplitMethodSelector.stories.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SplitMethodSelector, type SplitMethod } from './SplitMethodSelector';
+
+const meta = {
+  title: 'Components/SplitMethodSelector',
+  component: SplitMethodSelector,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The four-way Equal/Amount/Percentage/Shares picker shared by any cost-splitting plugin. A thin SegmentedControl preset that centralizes the option list and labels.',
+      },
+    },
+  },
+  args: {
+    value: 'equal',
+    onChange: () => {},
+  },
+} satisfies Meta<typeof SplitMethodSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledSelector() {
+  const [value, setValue] = useState<SplitMethod>('equal');
+  return <SplitMethodSelector value={value} onChange={setValue} />;
+}
+
+export const Default: Story = {
+  render: () => <ControlledSelector />,
+};

package/src/components/SplitMethodSelector/SplitMethodSelector.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { SegmentedControl } from '../SegmentedControl/SegmentedControl';
+
+export type SplitMethod = 'equal' | 'amount' | 'percentage' | 'shares';
+
+export interface SplitMethodSelectorProps {
+  value: SplitMethod;
+  onChange: (value: SplitMethod) => void;
+  size?: 'sm' | 'md';
+  'aria-label'?: string;
+}
+
+const OPTIONS: { label: string; value: SplitMethod }[] = [
+  { label: 'Equal', value: 'equal' },
+  { label: 'Amount', value: 'amount' },
+  { label: 'Percentage', value: 'percentage' },
+  { label: 'Shares', value: 'shares' },
+];
+
+/**
+ * SplitMethodSelector — the four-way equal/amount/percentage/shares picker
+ * shared by any plugin that splits a cost between people. A thin
+ * `SegmentedControl` preset: centralizes the option list and labels so every
+ * expense-splitting plugin presents the same four choices in the same order,
+ * instead of each one re-typing its own copy of this array.
+ */
+export function SplitMethodSelector({
+  value,
+  onChange,
+  size = 'sm',
+  'aria-label': ariaLabel = 'Split method',
+}: SplitMethodSelectorProps) {
+  return (
+    <SegmentedControl
+      value={value}
+      onChange={onChange}
+      options={OPTIONS}
+      size={size}
+      aria-label={ariaLabel}
+    />
+  );
+}

package/src/index.ts

@@ -88,6 +88,20 @@ export { QuantityStepper } from './components/QuantityStepper/QuantityStepper';
 export type { QuantityStepperProps } from './components/QuantityStepper/QuantityStepper';
 export { CheckableListRow } from './components/CheckableListRow/CheckableListRow';
 export type { CheckableListRowProps } from './components/CheckableListRow/CheckableListRow';
+export { CurrencyInput } from './components/CurrencyInput/CurrencyInput';
+export type { CurrencyInputProps } from './components/CurrencyInput/CurrencyInput';
+export { BalanceChip } from './components/BalanceChip/BalanceChip';
+export type { BalanceChipProps } from './components/BalanceChip/BalanceChip';
+export { SplitMethodSelector } from './components/SplitMethodSelector/SplitMethodSelector';
+export type {
+  SplitMethodSelectorProps,
+  SplitMethod,
+} from './components/SplitMethodSelector/SplitMethodSelector';
+export { MemberMultiSelect } from './components/MemberMultiSelect/MemberMultiSelect';
+export type {
+  MemberMultiSelectProps,
+  MemberMultiSelectOption,
+} from './components/MemberMultiSelect/MemberMultiSelect';
 export {
   useLongPress,
   useDoubleTapHandler,

package/src/stories/DesignSystemOverview.stories.tsx

@@ -41,6 +41,16 @@ import { ConfirmDialog } from '../components/ConfirmDialog/ConfirmDialog';
 import { Menu } from '../components/Menu/Menu';
 import { Calendar } from '../components/Calendar/Calendar';
 import { DatePicker } from '../components/DatePicker/DatePicker';
+import { CurrencyInput } from '../components/CurrencyInput/CurrencyInput';
+import { BalanceChip } from '../components/BalanceChip/BalanceChip';
+import {
+  SplitMethodSelector,
+  type SplitMethod,
+} from '../components/SplitMethodSelector/SplitMethodSelector';
+import {
+  MemberMultiSelect,
+  type MemberMultiSelectOption,
+} from '../components/MemberMultiSelect/MemberMultiSelect';
 
 // ---------------------------------------------------------------------------
 // Shared primitives
@@ -756,6 +766,50 @@ function CheckableListRowDemo() {
   );
 }
 
+function CurrencyInputDemo() {
+  const [cents, setCents] = useState<number | null>(4250);
+  return (
+    <CurrencyInput
+      valueCents={cents}
+      onValueChange={setCents}
+      placeholder="0.00"
+      aria-label="Amount"
+    />
+  );
+}
+
+function SplitMethodSelectorDemo() {
+  const [value, setValue] = useState<SplitMethod>('equal');
+  return <SplitMethodSelector value={value} onChange={setValue} />;
+}
+
+const MEMBER_MULTI_SELECT_OPTIONS: MemberMultiSelectOption[] = [
+  { id: '1', label: 'Priya' },
+  { id: '2', label: 'Jamie (guest)' },
+  { id: '3', label: 'Sam' },
+];
+
+function MemberMultiSelectDemo() {
+  const [selected, setSelected] = useState<Set<string>>(new Set(['1', '3']));
+  return (
+    <div style={{ width: '100%' }}>
+      <MemberMultiSelect
+        options={MEMBER_MULTI_SELECT_OPTIONS}
+        selectedIds={selected}
+        onToggle={(id, checked) => {
+          setSelected((prev) => {
+            const next = new Set(prev);
+            if (checked) next.add(id);
+            else next.delete(id);
+            return next;
+          });
+        }}
+        label="Split between"
+      />
+    </div>
+  );
+}
+
 function FileDropzoneDemo() {
   const [file, setFile] = useState<File | null>(null);
   return (
@@ -1493,6 +1547,17 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <StatusBadge status="pending-delete" />
             </ComponentCard>
 
+            {/* BalanceChip */}
+            <ComponentCard
+              name="BalanceChip"
+              importLine="import { BalanceChip } from '@sovereignfs/ui';"
+              usage="Inline net-balance indicator — green when owed to them, red when they owe, neutral when settled. Not tied to expense-splitting specifically."
+            >
+              <BalanceChip amountCents={2500} currency="USD" />
+              <BalanceChip amountCents={-1350} currency="USD" />
+              <BalanceChip amountCents={0} currency="USD" />
+            </ComponentCard>
+
             {/* Input */}
             <ComponentCard
               name="Input"
@@ -1505,6 +1570,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               </div>
             </ComponentCard>
 
+            {/* CurrencyInput */}
+            <ComponentCard
+              name="CurrencyInput"
+              importLine="import { CurrencyInput } from '@sovereignfs/ui';"
+              usage="Decimal amount entry that reports its value as integer cents. Preserves in-progress typing instead of reformatting on every keystroke."
+            >
+              <CurrencyInputDemo />
+            </ComponentCard>
+
             {/* TagInput */}
             <ComponentCard
               name="TagInput"
@@ -1585,6 +1659,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <SegmentedDemo />
             </ComponentCard>
 
+            {/* SplitMethodSelector */}
+            <ComponentCard
+              name="SplitMethodSelector"
+              importLine="import { SplitMethodSelector } from '@sovereignfs/ui';"
+              usage="The four-way Equal/Amount/Percentage/Shares picker shared by any cost-splitting plugin. A thin SegmentedControl preset."
+            >
+              <SplitMethodSelectorDemo />
+            </ComponentCard>
+
             {/* Tabs */}
             <ComponentCard
               name="Tabs"
@@ -1922,6 +2005,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
               <CheckableListRowDemo />
             </ComponentCard>
 
+            {/* MemberMultiSelect */}
+            <ComponentCard
+              name="MemberMultiSelect"
+              importLine="import { MemberMultiSelect } from '@sovereignfs/ui';"
+              usage="Checkbox list for picking any number of people from an already-resolved option set. Domain-agnostic about guest vs. instance-user options; pair with SuggestionInput for search + add."
+            >
+              <MemberMultiSelectDemo />
+            </ComponentCard>
+
             {/* Checkbox */}
             <ComponentCard
               name="Checkbox"