@sovereignfs/ui 0.37.0 → 0.40.0

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/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;
@@ -979,4 +1018,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, 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 };