@sovereignfs/ui 0.37.0 → 0.41.0

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/hooks/index.ts

@@ -2,3 +2,5 @@ export { useLongPress } from './useLongPress';
 export type { UseLongPressOptions, LongPressHandlers } from './useLongPress';
 export { useDoubleTapHandler, useSingleOrDoubleTap } from './useDoubleTap';
 export { useIsMobile, MOBILE_BREAKPOINT_PX } from './useIsMobile';
+export { useCommitOnEnterOrBlur } from './useCommitOnEnterOrBlur';
+export type { CommitOnEnterOrBlurHandlers } from './useCommitOnEnterOrBlur';

package/src/hooks/useCommitOnEnterOrBlur.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import type { KeyboardEvent } from 'react';
+
+export interface CommitOnEnterOrBlurHandlers {
+  onKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur: () => void;
+}
+
+/**
+ * useCommitOnEnterOrBlur — spreads onto a quick-entry input/textarea so
+ * Enter and losing focus both commit through the same callback.
+ *
+ * iOS Safari adds its own "Previous / Next / Done" toolbar above the
+ * software keyboard whenever more than one focusable field is nearby (a
+ * Sheet with several fields, a form, etc.) — there is no supported way to
+ * suppress it, since it's WebKit's own field-detection heuristic, not
+ * something the page controls. Tapping that toolbar's Done/checkmark only
+ * ever fires a native `blur`; it is not a form submit and dispatches no
+ * keydown, so a field that commits only on Enter silently discards whatever
+ * was typed the moment a user dismisses the keyboard that way instead of
+ * pressing the on-screen Return key — the two dismissal paths look
+ * identical to the user but produce different outcomes.
+ *
+ * `onCommit` is called unconditionally on both Enter and blur — it owns any
+ * empty-value no-op itself, matching how every call site's own commit
+ * function already guards against an empty value before doing anything.
+ * Callers needing more key handling (e.g. Escape-to-cancel) compose their
+ * own `onKeyDown` around the returned one rather than this hook growing
+ * options for every caller's own key bindings.
+ */
+export function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers {
+  return {
+    onKeyDown: (e) => {
+      if (e.key === 'Enter') onCommit();
+    },
+    onBlur: onCommit,
+  };
+}

package/src/index.ts

@@ -71,6 +71,8 @@ export { Checkbox } from './components/Checkbox/Checkbox';
 export type { CheckboxProps } from './components/Checkbox/Checkbox';
 export { DragHandleRow } from './components/DragHandleRow/DragHandleRow';
 export type { DragHandleRowProps } from './components/DragHandleRow/DragHandleRow';
+export { FileDropzone } from './components/FileDropzone/FileDropzone';
+export type { FileDropzoneProps } from './components/FileDropzone/FileDropzone';
 export { Calendar } from './components/Calendar/Calendar';
 export type { CalendarProps } from './components/Calendar/Calendar';
 export { DatePicker } from './components/DatePicker/DatePicker';
@@ -86,6 +88,26 @@ 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 { useLongPress, useDoubleTapHandler, useSingleOrDoubleTap, useIsMobile } from './hooks';
+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,
+  useSingleOrDoubleTap,
+  useIsMobile,
+  useCommitOnEnterOrBlur,
+} from './hooks';
 export { MOBILE_BREAKPOINT_PX } from './hooks';
-export type { UseLongPressOptions, LongPressHandlers } from './hooks';
+export type { UseLongPressOptions, LongPressHandlers, CommitOnEnterOrBlurHandlers } from './hooks';

package/src/stories/DesignSystemOverview.stories.tsx

@@ -34,12 +34,23 @@ import { Toggle } from '../components/Toggle/Toggle';
 import { Tooltip } from '../components/Tooltip/Tooltip';
 import { Checkbox } from '../components/Checkbox/Checkbox';
 import { DragHandleRow } from '../components/DragHandleRow/DragHandleRow';
+import { FileDropzone } from '../components/FileDropzone/FileDropzone';
 import { OverlayHeader } from '../components/OverlayHeader/OverlayHeader';
 import { Sheet } from '../components/Sheet/Sheet';
 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
@@ -755,6 +766,65 @@ 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 (
+    <div style={{ width: '100%' }}>
+      <FileDropzone
+        ariaLabel="Upload ZIP file"
+        accept=".zip,application/zip"
+        label={file ? file.name : 'Choose a ZIP file'}
+        hint={file ? `${(file.size / 1024).toFixed(0)} KB` : 'or drag and drop here'}
+        onFileSelect={setFile}
+      />
+    </div>
+  );
+}
+
 function IconPickerDemo() {
   const [value, setValue] = useState<IconName | null>('banana');
   const options: IconName[] = [
@@ -1477,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"
@@ -1489,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"
@@ -1569,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"
@@ -1582,7 +1681,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
             <ComponentCard
               name="Icon"
               importLine="import { Icon } from '@sovereignfs/ui';"
-              usage="SVG icon primitive. 29 bundled icons. Decorative: aria-hidden. Meaningful: aria-label. Three sizes: sm, md, lg."
+              usage="SVG icon primitive. 52 bundled icons. Decorative: aria-hidden. Meaningful: aria-label. Three sizes: sm, md, lg."
             >
               {(
                 [
@@ -1595,6 +1694,7 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
                   'search',
                   'plus',
                   'trash-2',
+                  'external-link',
                 ] as const
               ).map((n) => (
                 <Icon key={n} name={n} size="md" aria-hidden />
@@ -1905,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"
@@ -1946,6 +2055,15 @@ font-weight: var(--sv-font-weight-bold);      /* 700 */`}</Code>
                 ))}
               </div>
             </ComponentCard>
+
+            {/* FileDropzone */}
+            <ComponentCard
+              name="FileDropzone"
+              importLine="import { FileDropzone } from '@sovereignfs/ui';"
+              usage="Styled drag-and-drop file picker — a dashed-border dropzone wrapping a visually-hidden native file input. Caller owns selected-file state and passes label/hint accordingly."
+            >
+              <FileDropzoneDemo />
+            </ComponentCard>
           </div>
         </section>
 

package/src/stories/FileDropzone.stories.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FileDropzone } from '../components/FileDropzone/FileDropzone';
+import { Icon } from '../components/Icon/Icon';
+
+const meta: Meta<typeof FileDropzone> = {
+  title: 'Components/FileDropzone',
+  component: FileDropzone,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileDropzone>;
+
+export const Default: Story = {
+  render: () => {
+    function Demo() {
+      const [file, setFile] = useState<File | null>(null);
+      return (
+        <div style={{ maxWidth: '420px' }}>
+          <FileDropzone
+            ariaLabel="Upload ZIP file"
+            accept=".zip,application/zip"
+            label={file ? file.name : 'Choose a ZIP file'}
+            hint={file ? `${(file.size / 1024).toFixed(0)} KB` : 'or drag and drop here'}
+            onFileSelect={setFile}
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const CustomIcon: Story = {
+  render: () => {
+    function Demo() {
+      const [file, setFile] = useState<File | null>(null);
+      return (
+        <div style={{ maxWidth: '420px' }}>
+          <FileDropzone
+            ariaLabel="Upload font file"
+            accept=".woff2,.woff,.ttf,.otf"
+            icon={<Icon name="upload" size="lg" aria-hidden />}
+            label={file ? file.name : 'Choose a font file'}
+            hint={file ? undefined : '.woff2, .woff, .ttf, or .otf'}
+            onFileSelect={setFile}
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ maxWidth: '420px' }}>
+      <FileDropzone
+        ariaLabel="Upload ZIP file"
+        label="Choose a ZIP file"
+        hint="or drag and drop here"
+        disabled
+        onFileSelect={() => {}}
+      />
+    </div>
+  ),
+};

package/src/stories/InteractionHooks.stories.tsx

@@ -1,7 +1,13 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Card } from '../components/Card/Card';
-import { useDoubleTapHandler, useIsMobile, useLongPress, useSingleOrDoubleTap } from '../hooks';
+import {
+  useCommitOnEnterOrBlur,
+  useDoubleTapHandler,
+  useIsMobile,
+  useLongPress,
+  useSingleOrDoubleTap,
+} from '../hooks';
 
 // ---------------------------------------------------------------------------
 // Shared primitives (mirrors MobilePatterns.stories.tsx's doc styling)
@@ -268,6 +274,42 @@ function DoubleTapDemo() {
   );
 }
 
+function CommitOnEnterOrBlurDemo() {
+  const [value, setValue] = useState('');
+  const [events, setEvents] = useState<string[]>([]);
+  const log = (msg: string) =>
+    setEvents((e) => [...e, `${new Date().toLocaleTimeString()} — ${msg}`]);
+  const commitHandlers = useCommitOnEnterOrBlur(() => log(`commit: "${value}"`));
+
+  return (
+    <div>
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        {...commitHandlers}
+        placeholder="Type, then press Enter or click away…"
+        style={{
+          width: '100%',
+          boxSizing: 'border-box',
+          padding: 'var(--sv-space-2) var(--sv-space-3)',
+          borderRadius: 'var(--sv-radius-md)',
+          border: '1px solid var(--sv-color-border-strong)',
+          background: 'var(--sv-color-surface)',
+          color: 'var(--sv-color-text-primary)',
+          fontFamily: ff,
+          fontSize: 'var(--sv-font-size-sm)',
+        }}
+      />
+      <EventLog events={events} />
+      <Callout type="info">
+        Tries to reproduce the bug this hook fixes: on iOS, tap into the field, type something, then
+        dismiss the keyboard via the native Done/checkmark toolbar instead of the Return key — both
+        now log a commit here, where an Enter-only handler would silently drop the checkmark path.
+      </Callout>
+    </div>
+  );
+}
+
 function IsMobileDemo() {
   const isMobile = useIsMobile();
   return (
@@ -346,6 +388,18 @@ function InteractionHooksDoc() {
         </Callout>
       </section>
 
+      <section style={{ marginBottom: 'var(--sv-space-10)' }}>
+        <SectionHeader
+          title="useCommitOnEnterOrBlur"
+          subtitle="Unifies Enter-to-commit with iOS's native keyboard accessory toolbar, whose Done/checkmark only ever fires a blur, never a keydown."
+        />
+        <Card padding="md">
+          <CommitOnEnterOrBlurDemo />
+        </Card>
+        <CodeBlock>{`const commitHandlers = useCommitOnEnterOrBlur(() => createTask(title));
+<input value={title} onChange={...} {...commitHandlers} />`}</CodeBlock>
+      </section>
+
       <section style={{ marginBottom: 'var(--sv-space-10)' }}>
         <SectionHeader
           title="useIsMobile"