@sovereignfs/ui 0.21.3 → 0.23.0

package/dist/Checkbox.module.css

@@ -0,0 +1,97 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  cursor: pointer;
+}
+
+/* The visual box */
+.box {
+  position: relative;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--sv-radius-sm);
+  border: 1.5px solid var(--sv-color-border-strong);
+  background: var(--sv-color-surface);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checked {
+  background-color: var(--sv-color-accent);
+  border-color: var(--sv-color-accent);
+  color: var(--sv-white);
+}
+
+/* Hide the native input visually but keep it accessible */
+.input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.input:focus-visible + .tick,
+.input:focus-visible {
+  outline: none;
+}
+
+.box:has(.input:focus-visible) {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.tick {
+  width: 10px;
+  height: 8px;
+  pointer-events: none;
+}
+
+/* Label */
+.label {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s ease;
+  /* Strike-through animates via clip-path on a pseudo-element */
+  position: relative;
+}
+
+.label::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1.5px;
+  background: var(--sv-color-text-muted);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 0.2s ease;
+}
+
+.struck {
+  color: var(--sv-color-text-muted);
+}
+
+.struck::after {
+  transform: scaleX(1);
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/DragHandleRow.module.css

@@ -0,0 +1,51 @@
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-1);
+  position: relative;
+}
+
+.row:not(:hover) .handle,
+.row:not(:focus-within) .handle {
+  opacity: 0;
+}
+
+.handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: 2px;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: var(--sv-radius-sm);
+  color: var(--sv-color-text-muted);
+  cursor: grab;
+  opacity: 1;
+  transition: opacity 0.1s ease;
+}
+
+.handle:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+
+.icon {
+  pointer-events: none;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.dragging {
+  opacity: 0.5;
+}

package/dist/FormField.module.css

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--sv-space-1);
+  /* Every local .field/.fieldGroup class this component replaced set this
+     explicitly. Without it, a parent with align-items: flex-start (needed so
+     submit buttons don't stretch full-width) shrink-wraps this wrapper to its
+     content's intrinsic width instead of filling the available space. */
+  width: 100%;
 }
 
 .label {

package/dist/Input.module.css

@@ -14,6 +14,16 @@
     box-shadow 0.15s ease;
 }
 
+/* iOS Safari (tab and standalone PWA) auto-zooms the page whenever a focused
+   input's font-size is below 16px. The viewport intentionally allows pinch-zoom
+   (no maximum-scale — an accessibility requirement), so the only way to stop the
+   focus-zoom is to render the field at >=16px on touch devices. */
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
 .input::placeholder {
   color: var(--sv-color-text-muted);
 }

package/dist/Select.module.css

@@ -33,6 +33,15 @@
   border-radius: var(--sv-radius-sm);
 }
 
+/* iOS Safari zooms the page when a <select> under 16px receives focus, exactly
+   as it does for text inputs. Lift the default size to >=16px on touch devices;
+   the compact `.sm` variant is for dense desktop tables and is left untouched. */
+@media (pointer: coarse) {
+  .select {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
 .select:focus-visible {
   outline: none;
   border-color: var(--sv-color-accent);

package/dist/Textarea.module.css

@@ -0,0 +1,39 @@
+.textarea {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  resize: vertical;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.textarea::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.textarea:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.textarea:read-only {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  border-color: var(--sv-color-border);
+  cursor: default;
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  resize: none;
+}

package/dist/Toast.module.css

@@ -80,7 +80,7 @@
 
 .message {
   font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-secondary);
+  color: var(--sv-color-text-muted);
   margin-top: var(--sv-space-1);
   line-height: 1.4;
 }
@@ -91,9 +91,9 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--sv-color-text-tertiary);
+  color: var(--sv-color-text-subtle);
   line-height: 1;
-  font-size: var(--sv-font-size-base);
+  font-size: var(--sv-font-size-md);
 }
 
 .close:hover {

package/dist/Toggle.module.css

@@ -40,7 +40,7 @@
   background: var(--sv-white);
   transition: transform 0.15s ease;
   left: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--sv-shadow-control);
 }
 
 .on .thumb {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, InputHTMLAttributes, HTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, SelectHTMLAttributes, ReactElement, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes } from 'react';
 
 type BadgeVariant = 'role' | 'status' | 'mono';
 type BadgeStatus = 'active' | 'enabled' | 'deactivated' | 'failed' | 'invited' | 'pending' | 'neutral';
@@ -121,6 +121,12 @@ type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
  * Uses the native picker on mobile — no custom dropdown, maximum a11y coverage.
  *
  * RSC-safe: presentational, no hooks, forwards all native select props.
+ *
+ * `className` sizes the outer box (the wrapper), not the `<select>` itself —
+ * the chevron is absolutely positioned against the wrapper, so a className
+ * that constrains only the `<select>` (e.g. `max-width`) shrinks the select
+ * while the wrapper (and thus the chevron) stays full width, leaving the
+ * chevron stranded past the visible box.
  */
 declare function Select({ className, size, children, ...rest }: SelectProps): react.JSX.Element;
 
@@ -184,6 +190,15 @@ type InputProps = InputHTMLAttributes<HTMLInputElement>;
  */
 declare function Input({ type, className, ...rest }: InputProps): react.JSX.Element;
 
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * Textarea — the primitive multi-line text field. Presentational and
+ * RSC-safe: it forwards all native textarea props to the underlying
+ * `<textarea>`. Styling references `--sv-*` tokens via CSS Modules; there
+ * are no hardcoded values.
+ */
+declare function Textarea({ className, rows, ...rest }: TextareaProps): react.JSX.Element;
+
 type DialogSize = 'sm' | 'md' | 'lg' | 'full';
 interface DialogProps {
     /** Whether the dialog is shown. When false, nothing renders. */
@@ -262,16 +277,32 @@ interface CardProps extends HTMLAttributes<HTMLElement> {
 }
 declare function Card({ as: Tag, interactive, padding, className, children, ...rest }: CardProps): react.JSX.Element;
 
+/** Props to spread onto the field's actual form control. */
+interface FormFieldRenderProps {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    required?: boolean;
+}
 interface FormFieldProps {
     label: string;
     hint?: string;
     error?: string;
-    htmlFor?: string;
+    /** Explicit control id. Auto-generated via `useId()` when omitted. */
+    id?: string;
     required?: boolean;
-    children: ReactNode;
     className?: string;
+    /** Render prop — receives the props that must be spread onto the control
+     * so the label, hint, and error stay associated with it. */
+    children: (field: FormFieldRenderProps) => ReactNode;
 }
-declare function FormField({ label, hint, error, htmlFor, required, children, className, }: FormFieldProps): react.JSX.Element;
+/**
+ * FormField — accessible label + hint/error wrapper for a single form control.
+ * Wires `htmlFor`/`id` and `aria-describedby`/`aria-invalid` onto the control
+ * itself (via the render-prop `field` object), not a surrounding element, so
+ * screen readers reliably announce the hint or error as part of the control.
+ */
+declare function FormField({ label, hint, error, id, required, className, children, }: FormFieldProps): react.JSX.Element;
 
 interface PageHeaderProps {
     title: string;
@@ -324,4 +355,26 @@ interface TooltipProps {
 }
 declare function Tooltip({ content, children, side }: TooltipProps): react.JSX.Element;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Dialog, type DialogProps, type DialogSize, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, Icon, type IconName, type IconProps, Input, type InputProps, type NavTabItem, NavTabs, type NavTabsProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Spinner, type SpinnerProps, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, useToast };
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    /** Renders the label with a strike-through when checked. */
+    strikeThrough?: boolean;
+    disabled?: boolean;
+}
+declare function Checkbox({ checked, onChange, label, strikeThrough, disabled, className, id, ...rest }: CheckboxProps): react.JSX.Element;
+
+interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Pass drag-listener and drag-control props from dnd-kit here. */
+    handleProps?: HTMLAttributes<HTMLButtonElement>;
+    isDragging?: boolean;
+}
+/**
+ * A row wrapper that surfaces a drag handle on the left.
+ * Consumers attach dnd-kit's useSortable listeners to `handleProps`.
+ */
+declare function DragHandleRow({ children, handleProps, isDragging, className, ...rest }: DragHandleRowProps): react.JSX.Element;
+
+export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeStatus, type BadgeVariant, type BannerVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, type DialogSize, DragHandleRow, type DragHandleRowProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, type FormFieldRenderProps, Icon, type IconName, type IconProps, Input, type InputProps, type NavTabItem, NavTabs, type NavTabsProps, PageHeader, type PageHeaderProps, Popover, type PopoverProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectProps, Spinner, type SpinnerProps, SystemBanner, type SystemBannerProps, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastContextValue, type ToastItem, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, useToast };