@harismawan/stamp-ui 0.1.1 → 0.2.0

package/dist/components/DatePicker.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, } from '@floating-ui/react';
+import { Calendar, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { startOfMonth, addMonths, isSameDay, isWithin, monthLabel, MonthGrid, } from './internal/calendar';
+const Trigger = styled.button `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 800;
+  font-size: 14px;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  cursor: pointer;
+  transition: transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:active:not(:disabled) {
+    transform: translate(4px, 4px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+const TriggerLabel = styled.span `
+  color: ${(p) => (p.$placeholder ? p.theme.colors.textSubtle : p.theme.colors.text)};
+`;
+const TriggerWrap = styled.span `
+  display: inline-flex;
+  align-items: center;
+`;
+const ClearButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: ${(p) => p.theme.colors.textSubtle};
+  cursor: pointer;
+  padding: 0;
+  margin-left: ${(p) => p.theme.space[1]};
+  border-radius: ${(p) => p.theme.radii.xs};
+
+  &:hover {
+    color: ${(p) => p.theme.colors.text};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+`;
+const Panel = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  padding: ${(p) => p.theme.space[4]};
+  font-family: ${(p) => p.theme.font.body};
+  min-width: 280px;
+  z-index: 1000;
+  outline: none;
+`;
+const GridWrap = styled.div `
+  display: contents;
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${(p) => p.theme.space[3]};
+`;
+const MonthTitle = styled.div `
+  font-size: 14px;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.text};
+`;
+const NavButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+  cursor: pointer;
+  transition: transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:active:not(:disabled) {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+export function DatePicker(props) {
+    const { value, defaultValue, onChange, min, max, placeholder = 'Select date', disabled = false, clearable = false, format, weekStartsOn = 0, id, } = props;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
+    const selected = isControlled ? (value ?? null) : internalValue;
+    const [open, setOpen] = React.useState(false);
+    const [viewedMonth, setViewedMonth] = React.useState(() => startOfMonth(selected ?? new Date()));
+    const [focusedDay, setFocusedDay] = React.useState(null);
+    // Resolves to the roving day cell (tabIndex 0) so focus lands on a day,
+    // not the first nav button, when the popover opens.
+    const initialFocusRef = React.useRef(null);
+    const generatedId = React.useId();
+    const baseId = id ?? generatedId;
+    const labelId = `${baseId}-label`;
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: setOpen,
+        placement: 'bottom-start',
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(8), flip(), shift({ padding: 8 })],
+    });
+    const click = useClick(context, { enabled: !disabled });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'dialog' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+    ]);
+    // When the popover opens, sync the viewed month to the current selection (or
+    // today) and seed roving focus on that day so arrow keys work immediately.
+    React.useEffect(() => {
+        if (open) {
+            const initial = selected ?? new Date();
+            setViewedMonth(startOfMonth(initial));
+            setFocusedDay(initial);
+        }
+    }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+    const commit = (date) => {
+        if (!isControlled)
+            setInternalValue(date);
+        onChange?.(date);
+    };
+    const handleSelect = (day) => {
+        commit(day);
+        setOpen(false);
+    };
+    const handleFocusDay = (day) => {
+        setFocusedDay(day);
+        // Keep the focused cell mounted: if it falls outside the viewed month,
+        // scroll the calendar to that month.
+        if (day.getMonth() !== viewedMonth.getMonth() ||
+            day.getFullYear() !== viewedMonth.getFullYear()) {
+            setViewedMonth(startOfMonth(day));
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (selected)
+            commit(null);
+    };
+    const triggerText = selected
+        ? format
+            ? format(selected)
+            : selected.toLocaleDateString()
+        : placeholder;
+    return (_jsxs(_Fragment, { children: [_jsxs(TriggerWrap, { children: [_jsxs(Trigger, { type: "button", ref: refs.setReference, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": selected ? `Choose date, selected ${triggerText}` : 'Choose date', ...getReferenceProps(), children: [_jsx(Calendar, { size: 16, "aria-hidden": "true" }), _jsx(TriggerLabel, { "$placeholder": !selected, children: triggerText })] }), clearable && selected && !disabled && (_jsx(ClearButton, { type: "button", "aria-label": "Clear date", onClick: handleClear, onKeyDown: (e) => {
+                            // Keep Enter/Space from bubbling to the trigger and opening the
+                            // popover; the button's own activation still fires onClick.
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.stopPropagation();
+                            }
+                        }, children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }), open && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: initialFocusRef, children: _jsxs(Panel, { ref: refs.setFloating, style: floatingStyles, "aria-labelledby": labelId, ...getFloatingProps(), children: [_jsxs(Header, { children: [_jsx(NavButton, { type: "button", "aria-label": "Previous month", onClick: () => setViewedMonth((m) => addMonths(m, -1)), children: _jsx(ChevronLeft, { size: 18, "aria-hidden": "true" }) }), _jsx(MonthTitle, { id: labelId, children: monthLabel(viewedMonth) }), _jsx(NavButton, { type: "button", "aria-label": "Next month", onClick: () => setViewedMonth((m) => addMonths(m, 1)), children: _jsx(ChevronRight, { size: 18, "aria-hidden": "true" }) })] }), _jsx(GridWrap, { ref: (el) => {
+                                    // Point FloatingFocusManager's initialFocus at the roving day
+                                    // cell (the only day button with tabIndex 0) so opening lands
+                                    // focus on a day, enabling arrow navigation immediately.
+                                    initialFocusRef.current =
+                                        el?.querySelector('button[tabindex="0"]') ?? null;
+                                }, children: _jsx(MonthGrid, { month: viewedMonth, weekStartsOn: weekStartsOn, isSelected: (day) => Boolean(selected) && isSameDay(day, selected), isDisabled: (day) => !isWithin(day, min, max), onSelect: handleSelect, focusedDay: focusedDay, onFocusDay: handleFocusDay, labelId: labelId }) })] }) }) }))] }));
+}

package/dist/components/DateRangePicker.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    min?: Date;
+    max?: Date;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    weekStartsOn?: 0 | 1;
+    format?: (date: Date) => string;
+    id?: string;
+}
+export declare function DateRangePicker({ value, defaultValue, onChange, min, max, placeholder, disabled, clearable, weekStartsOn, format, id, }: DateRangePickerProps): React.ReactElement;

package/dist/components/DateRangePicker.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Calendar, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, } from '@floating-ui/react';
+import { MonthGrid, addMonths, isAfter, isBefore, isSameDay, isWithin, monthLabel, startOfMonth, } from './internal/calendar';
+const TriggerWrap = styled.span `
+  display: inline-flex;
+  align-items: center;
+`;
+const EMPTY_RANGE = { start: null, end: null };
+/** Local-midnight Date for the last calendar day of `d`'s month. */
+function lastDayOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+}
+const Trigger = styled.button `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 800;
+  font-size: 14px;
+  color: ${(p) => (p.$placeholder ? p.theme.colors.textSubtle : p.theme.colors.text)};
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  cursor: pointer;
+  transition:
+    transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:active:not(:disabled) {
+    transform: translate(4px, 4px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+const TriggerLabel = styled.span `
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+`;
+const ClearButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  flex: none;
+  color: ${(p) => p.theme.colors.textMuted};
+  background: transparent;
+  border: none;
+  border-radius: ${(p) => p.theme.radii.xs};
+  cursor: pointer;
+  transition: color 80ms ${(p) => p.theme.easing.out};
+
+  &:hover {
+    color: ${(p) => p.theme.colors.text};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 1px;
+  }
+`;
+const Panel = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  padding: ${(p) => p.theme.space[4]};
+  font-family: ${(p) => p.theme.font.body};
+  z-index: 1000;
+  outline: none;
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${(p) => p.theme.space[3]};
+`;
+const MonthsRow = styled.div `
+  display: flex;
+  gap: ${(p) => p.theme.space[5]};
+`;
+const MonthColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[2]};
+`;
+const MonthTitle = styled.div `
+  font-size: 14px;
+  font-weight: 800;
+  text-align: center;
+  color: ${(p) => p.theme.colors.text};
+`;
+const NavButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  flex: none;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+  cursor: pointer;
+  transition:
+    transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    transform: translate(1px, 1px);
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+`;
+export function DateRangePicker({ value, defaultValue, onChange, min, max, placeholder = 'Select range', disabled = false, clearable = false, weekStartsOn = 0, format, id, }) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState(() => defaultValue ?? EMPTY_RANGE);
+    const range = isControlled ? value : internal;
+    const [open, setOpen] = React.useState(false);
+    // The left month shown in the popover; the right month is +1.
+    const [viewedMonth, setViewedMonth] = React.useState(() => startOfMonth(range.start ?? new Date()));
+    // The day that owns roving focus across both grids.
+    const [focusedDay, setFocusedDay] = React.useState(null);
+    // Resolves to the roving day cell (tabIndex 0) so focus lands on a day,
+    // not the first nav button, when the popover opens.
+    const initialFocusRef = React.useRef(null);
+    const generatedId = React.useId();
+    const baseId = id ?? generatedId;
+    const leftLabelId = `${baseId}-left`;
+    const rightLabelId = `${baseId}-right`;
+    const dialogLabelId = `${baseId}-dialog`;
+    // When opening, re-anchor the view on the current start (or today) and seed
+    // roving focus on that day so arrow keys work immediately.
+    const rangeStart = range.start;
+    React.useEffect(() => {
+        if (open) {
+            const initial = rangeStart ?? new Date();
+            setViewedMonth(startOfMonth(initial));
+            setFocusedDay(initial);
+        }
+        // Re-anchor on the open transition; rangeStart is included so reopening
+        // anchors to the current start rather than a stale value.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, rangeStart]);
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: (next) => {
+            if (disabled)
+                return;
+            setOpen(next);
+        },
+        placement: 'bottom-start',
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(8), flip(), shift({ padding: 8 })],
+    });
+    const click = useClick(context, { enabled: !disabled });
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'dialog' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
+    const commit = (next) => {
+        if (!isControlled)
+            setInternal(next);
+        onChange?.(next);
+    };
+    const fmt = format ?? ((d) => d.toLocaleDateString());
+    const triggerText = React.useMemo(() => {
+        if (range.start && range.end)
+            return `${fmt(range.start)} - ${fmt(range.end)}`;
+        if (range.start)
+            return fmt(range.start);
+        return placeholder;
+    }, [range.start, range.end, fmt, placeholder]);
+    const hasValue = range.start != null || range.end != null;
+    const handleSelect = (day) => {
+        const { start, end } = range;
+        // No start, or a complete range already exists -> begin a new range.
+        // Fire onChange so a controlled parent gains the start and can drive the
+        // rest of the flow; without this the controlled value never advances.
+        if (!start || (start && end)) {
+            commit({ start: day, end: null });
+            return;
+        }
+        // start set, end unset. A click before the start restarts the range.
+        if (isBefore(day, start)) {
+            commit({ start: day, end: null });
+            return;
+        }
+        // day on/after start completes the range, fires onChange, and closes.
+        commit({ start, end: day });
+        setOpen(false);
+    };
+    const handleFocusDay = (day) => {
+        setFocusedDay(day);
+        // Keep the focused cell mounted within the visible two-month window. If it
+        // falls before the left month, shift the view left to anchor on it; if it
+        // falls after the right month, shift right so the day stays in view.
+        const left = viewedMonth;
+        const right = addMonths(viewedMonth, 1);
+        if (isBefore(day, startOfMonth(left))) {
+            setViewedMonth(startOfMonth(day));
+        }
+        else if (isAfter(day, lastDayOfMonth(right))) {
+            // Anchor so the focused day's month becomes the right pane.
+            setViewedMonth(startOfMonth(addMonths(day, -1)));
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        commit(EMPTY_RANGE);
+    };
+    const shiftMonths = (delta) => {
+        setViewedMonth((m) => startOfMonth(addMonths(m, delta)));
+    };
+    const isRangeStart = (day) => Boolean(range.start && isSameDay(day, range.start));
+    const isRangeEnd = (day) => Boolean(range.end && isSameDay(day, range.end));
+    const isInRange = (day) => Boolean(range.start && range.end && isAfter(day, range.start) && isBefore(day, range.end));
+    const isDisabled = (day) => !isWithin(day, min, max);
+    const rightMonth = addMonths(viewedMonth, 1);
+    return (_jsxs(_Fragment, { children: [_jsxs(TriggerWrap, { children: [_jsxs(Trigger, { type: "button", id: baseId, ref: refs.setReference, disabled: disabled, "$placeholder": !range.start, "aria-haspopup": "dialog", "aria-expanded": open, ...getReferenceProps(), children: [_jsx(Calendar, { size: 16, strokeWidth: 2.5, "aria-hidden": "true" }), _jsx(TriggerLabel, { children: triggerText })] }), clearable && hasValue && !disabled && (_jsx(ClearButton, { type: "button", "aria-label": "Clear range", onClick: handleClear, onKeyDown: (e) => {
+                            // Keep Enter/Space from bubbling to the trigger and reopening the
+                            // popover; the button's own activation still fires onClick.
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.stopPropagation();
+                            }
+                        }, children: _jsx(X, { size: 14, strokeWidth: 2.5, "aria-hidden": "true" }) }))] }), open && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: initialFocusRef, children: _jsxs(Panel, { ref: refs.setFloating, style: floatingStyles, "aria-labelledby": dialogLabelId, ...getFloatingProps(), children: [_jsx("span", { id: dialogLabelId, hidden: true, children: "Choose date range" }), _jsxs(Header, { children: [_jsx(NavButton, { type: "button", "aria-label": "Previous month", onClick: () => shiftMonths(-1), children: _jsx(ChevronLeft, { size: 18, strokeWidth: 2.5, "aria-hidden": "true" }) }), _jsx(NavButton, { type: "button", "aria-label": "Next month", onClick: () => shiftMonths(1), children: _jsx(ChevronRight, { size: 18, strokeWidth: 2.5, "aria-hidden": "true" }) })] }), _jsxs(MonthsRow, { ref: (el) => {
+                                    // Point FloatingFocusManager's initialFocus at the roving day
+                                    // cell (the first day button with tabIndex 0) so opening lands
+                                    // focus on a day, enabling arrow navigation immediately.
+                                    initialFocusRef.current =
+                                        el?.querySelector('button[tabindex="0"]') ?? null;
+                                }, children: [_jsxs(MonthColumn, { children: [_jsx(MonthTitle, { id: leftLabelId, children: monthLabel(viewedMonth) }), _jsx(MonthGrid, { month: viewedMonth, weekStartsOn: weekStartsOn, labelId: leftLabelId, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, isInRange: isInRange, isDisabled: isDisabled, onSelect: handleSelect, focusedDay: focusedDay, onFocusDay: handleFocusDay })] }), _jsxs(MonthColumn, { children: [_jsx(MonthTitle, { id: rightLabelId, children: monthLabel(rightMonth) }), _jsx(MonthGrid, { month: rightMonth, weekStartsOn: weekStartsOn, labelId: rightLabelId, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, isInRange: isInRange, isDisabled: isDisabled, onSelect: handleSelect, focusedDay: focusedDay, onFocusDay: handleFocusDay })] })] })] }) }) }))] }));
+}

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface FileUploadProps {
+    /** Controlled list of selected files. When provided, the component is controlled. */
+    value?: File[];
+    /** Initial files when uncontrolled. Defaults to `[]`. */
+    defaultValue?: File[];
+    /** Fired with the next file list whenever files are added or removed. */
+    onChange?: (files: File[]) => void;
+    /** Accept string, e.g. `"image/*,.pdf"`. Validated loosely against MIME/extension. */
+    accept?: string;
+    /** Allow more than one file. Defaults to `false` (a new file replaces the current one). */
+    multiple?: boolean;
+    /** Maximum size per file, in bytes. */
+    maxSize?: number;
+    /** Maximum number of files that may be held at once. */
+    maxFiles?: number;
+    /** Disable the whole control (blocks focus, click, drop and the input). */
+    disabled?: boolean;
+    /** Fired with the rejected files and a machine-readable reason. */
+    onReject?: (rejections: FileUploadRejection[]) => void;
+    /** Dropzone prompt. Defaults to "Drag files here or click to browse". */
+    label?: React.ReactNode;
+    /** Optional id; an internal one is generated with `useId` otherwise. */
+    id?: string;
+}
+export interface FileUploadRejection {
+    file: File;
+    reason: FileUploadRejectReason;
+}
+export type FileUploadRejectReason = 'too-large' | 'too-many' | 'wrong-type';
+/** Humanize a byte count into B / KB / MB. */
+export declare function formatFileSize(bytes: number): string;
+export declare const FileUpload: React.FC<FileUploadProps>;