@sovereignfs/ui 0.37.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/FileDropzone.module.css

@@ -0,0 +1,63 @@
+.dropzone {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-4);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--sv-space-4) var(--sv-space-5);
+  border: 1.5px dashed var(--sv-color-border);
+  border-radius: var(--sv-radius-md);
+  background-color: var(--sv-color-surface-raised);
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease;
+}
+
+@media (hover: hover) {
+  .dropzone:hover {
+    background-color: var(--sv-color-surface-sunken);
+    border-color: var(--sv-color-border-strong);
+  }
+}
+
+.dropzoneActive {
+  background-color: var(--sv-color-surface-sunken);
+  border-color: var(--sv-color-border-strong);
+}
+
+.dropzoneDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sv-color-text-muted);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-medium);
+  color: var(--sv-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hint {
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}
+
+.hiddenInput {
+  display: none;
+}

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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, PointerEvent, MouseEvent } from 'react';
+import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, PointerEvent, MouseEvent, KeyboardEvent } from 'react';
 
 type BadgeVariant = 'role' | 'status' | 'mono';
 type BadgeStatus = 'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
@@ -18,7 +18,7 @@ interface BadgeProps {
  */
 declare function Badge({ variant, status, children }: BadgeProps): react.JSX.Element;
 
-type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
+type IconName = 'house' | 'settings' | 'log-out' | 'chevron-right' | 'chevron-left' | 'chevron-down' | 'chevron-up' | 'x' | 'check' | 'plus' | 'trash-2' | 'pencil' | 'rotate-ccw' | 'search' | 'user' | 'shield' | 'lock' | 'eye' | 'eye-off' | 'mail' | 'bell' | 'activity' | 'package' | 'grid-2x2' | 'info' | 'alert-triangle' | 'calendar' | 'sliders-horizontal' | 'ellipsis-vertical' | 'file' | 'upload' | 'external-link' | 'banana' | 'apple' | 'carrot' | 'egg' | 'beef' | 'fish' | 'coffee' | 'wine' | 'beer' | 'cookie' | 'pizza' | 'candy' | 'salad' | 'milk' | 'drumstick' | 'croissant' | 'cup-soda' | 'spray-can' | 'snowflake' | 'shopping-basket';
 
 /** Decorative icon — visually meaningful but described by surrounding text. */
 type DecorativeProps = {
@@ -701,6 +701,45 @@ interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function DragHandleRow({ children, handleProps, isDragging, className, ...rest }: DragHandleRowProps): react.JSX.Element;
 
+interface FileDropzoneProps {
+    /** Native `<input type="file">` `name` attribute — set this to submit the
+     * file as part of a native `<form action={...}>` (Server Action) request. */
+    name?: string;
+    /** Native `<input type="file">` `accept` attribute, e.g. `".zip,application/zip"`. */
+    accept?: string;
+    /** Icon shown beside the label — a file-type glyph. Defaults to a generic file icon. */
+    icon?: ReactNode;
+    /** Primary label — e.g. "Choose a ZIP file", or the selected file's name. */
+    label: string;
+    /** Secondary hint — e.g. "or drag and drop here", or the selected file's size. */
+    hint?: string;
+    /** Called with the picked or dropped file, or `null` if the input is cleared. */
+    onFileSelect: (file: File | null) => void;
+    /** Accessible name for the control — describe what will be uploaded. */
+    ariaLabel: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A styled drag-and-drop file picker: a dashed-border dropzone wrapping a
+ * visually-hidden native `<input type="file">`, so the native picker still
+ * opens on click and the field participates in normal form semantics. A
+ * dropped file is written into the input's own `FileList` (via `DataTransfer`)
+ * so `name` + native `<form action>` submission sees it exactly like a
+ * click-picked file — not just the `onFileSelect` callback.
+ *
+ * Caller owns the selected-file state and passes `label`/`hint` accordingly
+ * (e.g. swap to the picked file's name/size) — this component is otherwise
+ * uncontrolled and stateless beyond its own drag-hover visual.
+ *
+ * Do not pass `required` through to a wrapping form's validation via this
+ * field — `display: none` on the hidden input does not exempt it from HTML5
+ * constraint validation, so a `required` hidden input can block submission
+ * with no visible field for the user to focus. Validate `onFileSelect`'s
+ * result in application code instead.
+ */
+declare function FileDropzone({ name, accept, icon, label, hint, onFileSelect, ariaLabel, disabled, className, }: FileDropzoneProps): react.JSX.Element;
+
 interface CalendarProps {
     /** Selected date, or `null` for no selection. */
     value: Date | null;
@@ -873,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;
@@ -979,4 +1099,32 @@ declare const MOBILE_BREAKPOINT_PX = 768;
  */
 declare function useIsMobile(breakpointPx?: number): boolean;
 
-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, ConfirmDialog, type ConfirmDialogProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, 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, useDoubleTapHandler, useIsMobile, useLongPress, useOverlaySecondRow, useSingleOrDoubleTap, useToast };
+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.
+ */
+declare function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers;
+
+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 };