@uisatin/ui 0.0.0-stage → 0.1.1

package/components/date-picker.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+/**
+ * Calendar, DatePicker and DateRangePicker, 1:1 with the uiKit design (🆕 date picker).
+ *
+ * Calendar: one month (or two side by side), Monday first, weekdays as one letter in text/xs muted.
+ * Days are 36px in 40px cells, their numbers text/sm (13px) medium. A picked day is a primary circle; the two ends of a range are
+ * primary squares rounded radius-md, with a band in status/brand/bg — a tint of the brand —
+ * from the middle of the first to the middle of the last. While the end is being picked the day
+ * under the pointer gets a bg/hover circle and the band runs up to it. Today is a 12×2 primary
+ * dash under its number; days of other months are text/subtle.
+ *
+ * Header: "November 2026" in text/sm (13px) medium, with arrows, or (`header="picker"`) "‹ November ›" on the left and the
+ * year as a small Select on the right, newest first, the shown year checked. Always six weeks, so
+ * the height never jumps between months.
+ *
+ * Keyboard: the grid is one tab stop; arrows move a day or a week, Page Up / Down a month, Home /
+ * End the week, Enter or Space picks.
+ */
+export type DateRange = {
+    from: Date | null;
+    to: Date | null;
+};
+export declare const formatDate: (d: Date) => string;
+export declare const formatRange: ({ from, to }: DateRange) => string;
+export interface CalendarProps {
+    mode?: 'single' | 'range';
+    /** single: the picked day. */
+    value?: Date | null;
+    onValueChange?: (value: Date) => void;
+    /** range: the picked range. */
+    range?: DateRange;
+    onRangeChange?: (range: DateRange) => void;
+    /** The first month shown. Defaults to the value's month, or today's. */
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    /** Two months side by side (the range picker). */
+    months?: 1 | 2;
+    header?: 'title' | 'picker';
+    min?: Date;
+    max?: Date;
+    /** Today, for the dash. Defaults to now. */
+    today?: Date;
+    className?: string;
+}
+export declare function Calendar({ mode, value, onValueChange, range, onRangeChange, month: monthProp, onMonthChange, months, header, min, max, today: todayProp, className, }: CalendarProps): React.JSX.Element;
+interface FieldBits {
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    error?: React.ReactNode | boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */
+    wrapperClassName?: string;
+    className?: string;
+}
+export interface DatePickerPanelProps {
+    value?: Date | null;
+    onValueChange?: (value: Date) => void;
+    min?: Date;
+    max?: Date;
+    today?: Date;
+    className?: string;
+}
+/** The date picker's panel on its own, in place: the popover surface with the Calendar, month and year to pick. */
+export declare function DatePickerPanel({ value, onValueChange, min, max, today, className }: DatePickerPanelProps): React.JSX.Element;
+export interface DatePickerProps extends FieldBits {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date) => void;
+    min?: Date;
+    max?: Date;
+    today?: Date;
+    /** Portal target. */
+    container?: HTMLElement | null;
+}
+/** A date field: the kit Input's skin with a calendar icon; the Calendar opens 4px below, with month and year to pick. */
+export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, min, max, today, label, hint, error, placeholder, disabled, id, size, container, wrapperClassName, className, }: DatePickerProps): React.JSX.Element;
+export interface DateRangePickerProps extends FieldBits {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    /** Called on Apply. */
+    onValueChange?: (value: DateRange) => void;
+    min?: Date;
+    max?: Date;
+    today?: Date;
+    applyLabel?: string;
+    cancelLabel?: string;
+    container?: HTMLElement | null;
+}
+/**
+ * A range field: two months, Cancel and Apply in the footer. Picks wait for Apply. Picking an
+ * end before the start swaps them.
+ */
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, min, max, today, label, hint, error, placeholder, disabled, id, size, applyLabel, cancelLabel, container, wrapperClassName, className, }: DateRangePickerProps): React.JSX.Element;
+export interface DateRangePickerPanelProps {
+    /** The range the panel starts from; picks stay in the panel until Apply. */
+    value?: DateRange;
+    /** Apply. */
+    onApply?: (value: DateRange) => void;
+    onCancel?: () => void;
+    min?: Date;
+    max?: Date;
+    today?: Date;
+    applyLabel?: string;
+    cancelLabel?: string;
+    className?: string;
+}
+/** The range picker's panel on its own, in place: two months, Cancel and Apply. */
+export declare function DateRangePickerPanel({ value, onApply, onCancel, min, max, today, applyLabel, cancelLabel, className, }: DateRangePickerPanelProps): React.JSX.Element;
+export {};

package/components/date-picker.js

@@ -0,0 +1,9 @@
+'use client';export { Calendar, DatePicker, DatePickerPanel, DateRangePicker, DateRangePickerPanel, formatDate, formatRange } from '../chunk-XZNHT6MO.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/components/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"date-picker.js"}

package/components/decision-card.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+/**
+ * DecisionCard, 1:1 with the uiKit `DecisionCard` set (3096:1626) and its `decisionItem` rows
+ * (3092:61608): one question an agent asks, its answers, and Skip / Continue.
+ *
+ * The card is 364 wide, bg/popover, border/default, radius-2xl, shadow-xs. The header is the
+ * medium 14/20 title with an optional step navigator (24px icon buttons around "1/3"); the
+ * footer is a tertiary Skip in text/muted and a primary Continue, 16px above and 12px below.
+ *
+ * - `radio` / `checkbox`: rows of 20px with 4px padding, hover bg action/secondary, 2px apart.
+ * - `chips`: wrapping 28px pills 6px apart; selected ones turn status/brand (fill, border, text).
+ * - `ranking`: 10px-radius rows with a grip, a rank dot (primary for #1) and the label. Drag to
+ *   reorder, or Alt + Arrow keys; the dragged row lifts with border/strong and the md shadow.
+ * - `draft`: the agent's text in a bubble (radius-2xl, 4px top-left); Rewrite makes it editable.
+ * - `summary`: what the card collapses to once answered, with a Change action.
+ *
+ * Stepping between questions moves like Pagination: the new title and answers slide in 24px from
+ * the side of the step (from the right going forward), the old ones slide the other way and fade
+ * out a little faster, and the card eases to its new height, all 300 ms on the kit ease-out. The
+ * step navigator and the footer stay put. Stepping again mid-slide carries on from where things
+ * are. Under reduced motion the parts only cross-fade (150 ms) and the height snaps.
+ */
+export type DecisionOption = {
+    value: string;
+    label: string;
+    /** 14px icon, used by `chips`. */
+    icon?: React.ReactNode;
+};
+export type DecisionValue = string | string[];
+export interface DecisionCardProps extends Omit<React.ComponentProps<'div'>, 'title' | 'defaultValue' | 'onChange'> {
+    type?: 'radio' | 'checkbox' | 'chips' | 'ranking' | 'draft' | 'summary';
+    title: string;
+    /** "1/3". Shows the step navigator. */
+    step?: string;
+    onPreviousStep?: () => void;
+    onNextStep?: () => void;
+    /** A muted line under the title, e.g. "Select up to 5". */
+    hint?: string;
+    options?: DecisionOption[];
+    /**
+     * radio: the chosen value. checkbox / chips: the chosen values. ranking: every value in order.
+     * draft: the text. summary: the values to list.
+     */
+    value?: DecisionValue;
+    defaultValue?: DecisionValue;
+    onValueChange?: (value: DecisionValue) => void;
+    /** chips: how many can be picked. */
+    max?: number;
+    /** draft: the bold first line of the draft, e.g. the subject. */
+    draftTitle?: string;
+    onContinue?: (value: DecisionValue) => void;
+    onSkip?: () => void;
+    /** summary: reopens the question. */
+    onEdit?: () => void;
+    /** draft: called when Rewrite is pressed, after the field becomes editable. */
+    onRewrite?: () => void;
+    continueLabel?: string;
+    skipLabel?: string;
+}
+export declare function DecisionCard({ className, type, title, step, onPreviousStep, onNextStep, hint, options, value: valueProp, defaultValue, onValueChange, max, draftTitle, onContinue, onSkip, onEdit, onRewrite, continueLabel, skipLabel, ...props }: DecisionCardProps): React.JSX.Element;
+/** A static `decisionItem` row in its hover state, for state sheets. */
+export declare function DecisionItemPreview({ children, hover }: {
+    children: React.ReactNode;
+    hover?: boolean;
+}): React.JSX.Element;

package/components/decision-card.js

@@ -0,0 +1,7 @@
+'use client';export { DecisionCard, DecisionItemPreview } from '../chunk-TX3H3QMA.js';
+import '../chunk-J3NSDRVH.js';
+import '../chunk-FDKIX4DC.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=decision-card.js.map
+//# sourceMappingURL=decision-card.js.map

package/components/decision-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"decision-card.js"}

package/components/dialog.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+/**
+ * Dialog, 1:1 with the uiKit `Dialog` set (465:66873): variant default or destructive.
+ * A 425px popover surface (min 360, max 560, never wider or taller than the screen less 16px a side; the body scrolls), radius-2xl, border/default, the shadcn `lg`
+ * shadow. Header 16 / 16 / 8 with a 14px medium title and a 13px muted description, a body
+ * 16px in with a 12px gap (body text, any content, an optional `DialogAlert`), then a
+ * right-aligned footer with 16px padding on both variants, on the same inset as the header and
+ * body. The close button is a 36px tertiary icon button 8px from the top-right corner.
+ *
+ * Built on the Radix Dialog. The destructive variant keeps the same primitive but takes
+ * `role="alertdialog"`, so screen readers announce it as an alert. Pass `container` to portal
+ * it into a positioned element (the docs stage) instead of the page; the dialog then centres
+ * inside that element rather than the viewport.
+ */
+export type DialogVariant = 'default' | 'destructive';
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Optional element that opens the dialog (rendered with `asChild`, so pass a Button). */
+    trigger?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: DialogVariant;
+    /** A `DialogAlert` shown under the body, for a side effect the user must know about. */
+    alert?: React.ReactNode;
+    /** The actions on the right of the footer. Leave it out for a read-only dialog. */
+    footer?: React.ReactNode;
+    /** Figma's `footerSlot`: content on the left of the footer, e.g. a "Don't ask again" checkbox. */
+    footerStart?: React.ReactNode;
+    /** Body. A string renders as body text (13px, text/default). */
+    children?: React.ReactNode;
+    /** Show the close button in the corner. */
+    closeButton?: boolean;
+    /** Modal blocks the page and shows the overlay; turn it off for inline previews. */
+    modal?: boolean;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /** Called when focus moves into the dialog on open; `preventDefault()` keeps it where it was. */
+    onOpenAutoFocus?: (event: Event) => void;
+    className?: string;
+}
+/** The X from Figma's close button (`icon` 16px, 1.25 stroke). */
+export declare function CloseIcon(): React.JSX.Element;
+export declare function Dialog({ open, defaultOpen, onOpenChange, trigger, title, description, variant, alert, footer, footerStart, children, closeButton, modal, container, onOpenAutoFocus, className, }: DialogProps): React.JSX.Element;
+/** Wrap a footer button in this to make it close the dialog: `<DialogClose asChild><Button…/></DialogClose>`. */
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export type DialogAlertIntent = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Alert, 1:1 with the uiKit `Alert` set (475:27871): the inline notice inside a dialog.
+ * radius-xl, 16 / 12 padding, the intent's status bg, a 16px status icon in the intent's
+ * status fg, a 14px medium title over a 13px muted description, and an optional 28px close.
+ */
+export interface DialogAlertProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    intent?: DialogAlertIntent;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Hide the status icon. */
+    icon?: boolean;
+    /** Shows the close button; called when it is pressed. */
+    onDismiss?: () => void;
+}
+/** The four status glyphs from Figma (16px, 1.25 stroke), drawn in currentColor. */
+export declare function StatusIcon({ intent }: {
+    intent: DialogAlertIntent;
+}): React.JSX.Element;
+export declare function DialogAlert({ intent, title, description, icon, onDismiss, className, ...props }: DialogAlertProps): React.JSX.Element;

package/components/dialog.js

@@ -0,0 +1,5 @@
+'use client';export { CloseIcon, Dialog, DialogAlert, DialogClose, StatusIcon } from '../chunk-JPNWHWAQ.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map

package/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dialog.js"}

package/components/donut-chart.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ChartCardBaseProps } from './chart.js';
+/**
+ * Donut chart, 1:1 with the uiKit `chart/donutCard` (4067:7096), in the shared ChartCard
+ * (chart.tsx).
+ *
+ * A 184px ring (20px thick) of chart/1–5 segments starting at 12 o'clock, a 2px gap between
+ * them, with the sum in the middle (text/xl semibold) over `centerLabel` in text/muted. The sum
+ * lives in the ring, so the card's summary shows only the range. Under the ring a legend of
+ * plain pills (swatch and label, the value is in the ring on hover) in two columns, 16 × 8 apart.
+ * From 560px the legend moves to the right of the ring as one column.
+ *
+ * Hover a segment or its pill (or set `highlight`): the other segments fade to 15%, the other
+ * pills' content to 45% (the hovered one fills bg/hover), and the middle shows the hovered value over "Label · 20%".
+ */
+export interface DonutCardProps extends Omit<ChartCardBaseProps, 'total' | 'change'> {
+    /** Under the sum in the middle. */
+    centerLabel?: string;
+}
+export declare function DonutCard({ data, formatValue, highlight, centerLabel, ...props }: DonutCardProps): React.JSX.Element;

package/components/donut-chart.js

@@ -0,0 +1,11 @@
+'use client';export { DonutCard } from '../chunk-CL2II6BX.js';
+import '../chunk-YPJYW624.js';
+import '../chunk-Y5AYU7PK.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-O7F3CIDV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=donut-chart.js.map
+//# sourceMappingURL=donut-chart.js.map

package/components/donut-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"donut-chart.js"}

package/components/dot.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export type DotTone = 'fuchsia' | 'sky' | 'plum' | 'green';
+/**
+ * Dot, 1:1 with the uiKit `Dot` set (369:6759, page dotIndicator): a 16px box with an 8px
+ * indicator in the middle, in the tone's `tone/fg` colour. Solid is a filled circle; outline
+ * is the same 8px circle drawn with a 1px stroke inside it, nothing in the middle.
+ *
+ * With a `label` the dot is an image with that name; without one it is decorative and hidden
+ * from assistive tech (pair it with visible text, as the docs ask).
+ */
+declare const dotVariants: (props?: ({
+    variant?: "outline" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DotProps extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof dotVariants> {
+    tone?: DotTone;
+    /** Accessible name, e.g. "Running". Leave it out when visible text already says it. */
+    label?: string;
+}
+export declare function Dot({ className, tone, variant, label, ...props }: DotProps): React.JSX.Element;
+export { dotVariants };

package/components/dot.js

@@ -0,0 +1,4 @@
+'use client';export { Dot, dotVariants } from '../chunk-B2K45IUR.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=dot.js.map
+//# sourceMappingURL=dot.js.map

package/components/dot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dot.js"}

package/components/dropdown.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { DropdownMenu as DropdownPrimitive } from 'radix-ui';
+/**
+ * DropdownMenu, 1:1 with the uiKit `DropdownMenu` (654:19150) and `DropdownMenu/Item`
+ * (653:19165) sets. A 255px popover surface (max 520), 4px padding, radius-xl,
+ * border/subtle, the shadcn `sm` shadow. Items are at least 32px high, 12px in, 6px top and
+ * bottom, radius-lg, with an 8px gap between a 16px leading icon (text/muted), the content and
+ * a trailing check (status green) when selected. An optional `shortcut` shows its keys (Kbd sm)
+ * before the check. Hover, keyboard highlight and selected fill
+ * bg/selected.
+ *
+ * Groups: `DropdownMenuGroup`. Content: a 14px medium label (20px line). `stacked` puts the
+ * description under it, 2px apart, at 13px / 18px in text/muted; `inline` puts it on the same
+ * baseline 12px after the label, at 13px, truncated. Groups have a 24px header in 12px
+ * text/subtle and are 4px apart with a 1px bg/muted rule between them. Items are 4px apart.
+ *
+ * Built on the Radix DropdownMenu: arrow keys, typeahead, Escape, focus return.
+ */
+/** The popover surface menus share: radius-xl, border/subtle, bg/popover, the shadcn `sm` shadow. */
+export declare const menuSurfaceClass: string;
+/** A group of rows, with a 1px bg/muted rule under every group but the last. */
+export declare const menuGroupClass = "flex flex-col gap-1 not-last:after:block not-last:after:h-px not-last:after:bg-bg-muted";
+/** The 24px group header in 12px text/subtle. */
+export declare const menuGroupLabelClass = "flex h-6 items-center px-3 text-xs leading-3 tracking-normal text-text-subtle";
+export interface DropdownMenuProps {
+    /** The element that opens the menu. Rendered with `asChild`, so pass a Button. */
+    trigger: React.ReactNode;
+    /** `DropdownMenuItem`s, optionally inside `DropdownMenuGroup`s. */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Modal menus block the rest of the page while open. */
+    modal?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /** Accessible name for the menu, when the trigger's text doesn't say enough. */
+    'aria-label'?: string;
+    /** Focus moved outside a non-modal menu; call `preventDefault()` to keep it open. */
+    onFocusOutside?: (event: Event) => void;
+    className?: string;
+}
+export declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, modal, side, align, sideOffset, container, onFocusOutside, className, ...props }: DropdownMenuProps): React.JSX.Element;
+export interface DropdownMenuGroupProps extends React.ComponentProps<typeof DropdownPrimitive.Group> {
+    /** The 24px group header. */
+    label?: React.ReactNode;
+}
+/** A titled group of items (Figma `_dropdown/group`). Groups get a rule between them. */
+export declare function DropdownMenuGroup({ label, children, className, ...props }: DropdownMenuGroupProps): React.JSX.Element;
+/** The row skin every menu shares: Dropdown, Select, Combobox and the Command menu. */
+export declare const menuItemClass: string;
+export interface MenuItemContentProps {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Leading icon. 16px by default; stacked two-line items may use 20px (`iconSize={20}`). */
+    icon?: React.ReactNode;
+    iconSize?: 16 | 20;
+    /** Marks the current value: a trailing check. */
+    selected?: boolean;
+    layout?: 'stacked' | 'inline';
+    /** Keys that run the item, e.g. "⌘N", shown on the right (Figma's `showShortcut`). */
+    shortcut?: string;
+    /** Wraps the label, e.g. in Radix Select's `ItemText`. */
+    renderLabel?: (label: React.ReactNode) => React.ReactNode;
+}
+/** What sits inside a menu row: icon, label and description, then shortcut and check. */
+export declare function MenuItemContent({ label, description, icon, iconSize, selected, layout, shortcut, renderLabel, }: MenuItemContentProps): React.JSX.Element;
+export interface DropdownMenuItemProps extends Omit<React.ComponentProps<typeof DropdownPrimitive.Item>, 'children'>, Omit<MenuItemContentProps, 'label' | 'renderLabel'> {
+    label: string;
+}
+export declare function DropdownMenuItem({ label, description, icon, iconSize, selected, layout, shortcut, className, ...props }: DropdownMenuItemProps): React.JSX.Element;

package/components/dropdown.js

@@ -0,0 +1,5 @@
+'use client';export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass } from '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=dropdown.js.map
+//# sourceMappingURL=dropdown.js.map

package/components/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dropdown.js"}

package/components/empty-state.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * EmptyState, 1:1 with the uiKit `EmptyState` set (852:51897) and its `_buttonGroup`
+ * (852:51922): a centred column 350 wide (320–560), padding 16 / 16 / 20, 16 apart, radius-2xl.
+ *
+ * - icon: a 16px glyph in text/default on a bg/muted tile, 10 padding, radius-lg (36 square).
+ * - title in text/lg medium (16/24), description in Body/lg (14/21) text/muted, 8 apart, centred.
+ * - actions: a row of Buttons 8 apart: Primary + Secondary, Secondary alone, or a Tertiary
+ *   "Learn more" with a trailing arrow. Pass them as `<Button>` elements.
+ * - border: ghost (none), dashed or outline, both 1px border/default.
+ */
+declare const emptyStateVariants: (props?: ({
+    border?: "dashed" | "ghost" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface EmptyStateProps extends Omit<React.ComponentProps<'div'>, 'title'>, VariantProps<typeof emptyStateVariants> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A 16px icon, e.g. from iconoir-react. */
+    icon?: React.ReactNode;
+    /** One or two Buttons. */
+    actions?: React.ReactNode;
+}
+export declare function EmptyState({ className, border, title, description, icon, actions, ...props }: EmptyStateProps): React.JSX.Element;
+export { emptyStateVariants };

package/components/empty-state.js

@@ -0,0 +1,4 @@
+'use client';export { EmptyState, emptyStateVariants } from '../chunk-WX6BP5ZP.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=empty-state.js.map
+//# sourceMappingURL=empty-state.js.map

package/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"empty-state.js"}

package/components/file-upload.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+/**
+ * FileUpload, 1:1 with the uiKit `FileUpload` set (4068:3717), its `FileUploadItem` rows
+ * (4068:3453) and the `fileUpload/_icon` mark (4068:3405).
+ *
+ * The drop zone is the dashed EmptyState: a 40px bg/muted tile with a filled file and an up
+ * arrow, the title (text/base medium), what it takes (Body/md, text/muted) and Browse files
+ * (secondary), 16 apart, 32 / 24 in, radius-2xl. While files are dragged over it the zone fills
+ * bg/hover with a status/brand dashed border, the tile turns bg/card, the title says "Drop to
+ * upload" and Browse files is disabled.
+ *
+ * Under the zone, 8 apart, one row per file the app is handling (`files`):
+ * - uploading: the type icon on a 36px tile, the name and "1.0 of 2.4 MB · 40%" over a small
+ *   Progress (indeterminate while `progress` is left out), Cancel on the right.
+ * - error: status/red ground and border, a red warning mark, the name, what went wrong, Remove.
+ * - done: the file as an lg Attachment, full width, one under another.
+ *
+ * Dropping or browsing checks every file against `accept` and `maxSize`. What passes goes to
+ * `onFilesAdded`; what fails goes to `onFilesRejected` with the reason, so the app can show it
+ * as an error row. The upload itself is the app's: it keeps `files` up to date.
+ */
+export type FileUploadStatus = 'uploading' | 'error' | 'done';
+export interface FileUploadFile {
+    id: string;
+    name: string;
+    /** In bytes; feeds "1.0 of 2.4 MB" and the attachment's meta. */
+    size?: number;
+    status: FileUploadStatus;
+    /** 0–100 while uploading; left out, the bar runs indeterminate and the meta says "Waiting…". */
+    progress?: number;
+    /** What went wrong, for `error`. */
+    error?: React.ReactNode;
+    /** Type icon; picked from the name when left out. */
+    icon?: React.ReactNode;
+}
+export interface FileUploadRejection {
+    file: File;
+    reason: 'type' | 'size';
+    /** A ready message, e.g. "Type not supported" or "Larger than 10 MB". */
+    message: string;
+}
+export interface FileUploadProps extends Omit<React.ComponentProps<'div'>, 'title' | 'onDrop'> {
+    files?: FileUploadFile[];
+    /** As on `<input type="file">`: MIME types, `image/*` or extensions, comma separated. */
+    accept?: string;
+    /** Largest file, in bytes. */
+    maxSize?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    title?: React.ReactNode;
+    /** Shown while files are dragged over the zone. */
+    dropTitle?: React.ReactNode;
+    /** What the zone takes, e.g. "PDF, images, CSV · up to 10 MB". */
+    description?: React.ReactNode;
+    browseLabel?: string;
+    /** Called instead of opening the file picker (demos, or an app that brings its own picker). */
+    onBrowse?: () => void;
+    onFilesAdded?: (files: File[]) => void;
+    onFilesRejected?: (rejections: FileUploadRejection[]) => void;
+    /** Cancel on an uploading row. */
+    onCancel?: (file: FileUploadFile) => void;
+    /** Remove on an error row or a done chip. */
+    onRemove?: (file: FileUploadFile) => void;
+    onOpen?: (file: FileUploadFile) => void;
+    /** Shows the drag-over look (state sheets, docs). */
+    'data-force'?: 'drag';
+}
+export declare const formatBytes: (n: number) => string;
+/** The type icon for a file name: PDF, spreadsheet, or a plain page. */
+export declare function fileIconFor(name: string): React.JSX.Element;
+export declare function FileUpload({ files, accept, maxSize, multiple, disabled, title, dropTitle, description, browseLabel, onBrowse, onFilesAdded, onFilesRejected, onCancel, onRemove, onOpen, className, ...props }: FileUploadProps): React.JSX.Element;
+/** One file while it uploads or after it failed (FileUploadItem 4068:3453). */
+export declare function FileUploadItem({ file, onCancel, onRemove, className, }: {
+    file: FileUploadFile;
+    onCancel?: (file: FileUploadFile) => void;
+    onRemove?: (file: FileUploadFile) => void;
+    className?: string;
+}): React.JSX.Element;

package/components/file-upload.js

@@ -0,0 +1,7 @@
+'use client';export { FileUpload, FileUploadItem, fileIconFor, formatBytes } from '../chunk-GICKPMJU.js';
+import '../chunk-7TXHCRAG.js';
+import '../chunk-H4NU7NPO.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=file-upload.js.map
+//# sourceMappingURL=file-upload.js.map

package/components/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"file-upload.js"}

package/components/floating.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * Anchored positioning for anything that floats next to an element: tooltips, chart
+ * tooltips, small hints. Built on Floating UI (the engine Radix uses for Tooltip, Popover and
+ * DropdownMenu), so every floating layer in Satin keeps the same rules:
+ *
+ * - it renders in a portal on `body`, so a card's `overflow: hidden` never cuts it off;
+ * - it flips to the other side when there's no room and slides along the edge to stay
+ *   8px inside the viewport;
+ * - its pointer follows the anchor when it slides;
+ * - it follows the anchor on scroll and resize.
+ */
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export interface FloatingProps {
+    /** The element it points at. Nothing renders while it's null. */
+    anchor: Element | null;
+    side?: FloatingSide;
+    /** Gap between the anchor and the layer, pointer included. */
+    sideOffset?: number;
+    /** How close to the viewport edge it may go. */
+    collisionPadding?: number;
+    className?: string;
+    /** Gets the side it ended up on and the pointer's props (ref and position). */
+    children: (state: {
+        side: FloatingSide;
+        arrowRef: React.RefObject<HTMLElement | null>;
+        arrowStyle: React.CSSProperties;
+    }) => React.ReactNode;
+}
+export declare function Floating({ anchor, side, sideOffset, collisionPadding, className, children }: FloatingProps): React.ReactPortal | null;

package/components/floating.js

@@ -0,0 +1,3 @@
+'use client';export { Floating } from '../chunk-Y5AYU7PK.js';
+//# sourceMappingURL=floating.js.map
+//# sourceMappingURL=floating.js.map

package/components/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"floating.js"}

package/components/form-field.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * Form field, 1:1 with the uiKit `FormField` set (3649:17775): a label, a control slot, then a
+ * description or, when `error` is set, an error message in its place. Vertical puts the label
+ * 8px above the control; horizontal puts it in a 160px column, 24px to the left. Description
+ * and error sit 6px under the control. Disabled dims the label and description to 50% and
+ * disables the control.
+ *
+ * The control is wired through context: Input and Textarea pick up the field's id (so the
+ * label points at them), `aria-describedby` (description or error), `aria-invalid` and
+ * `disabled`. Any other control can read the same values with `useFormField()`.
+ */
+export interface FormFieldContextValue {
+    id: string;
+    describedBy?: string;
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+}
+/** The id, describedby, invalid, disabled and required of the surrounding FormField, if any. */
+export declare function useFormField(): FormFieldContextValue | null;
+export interface FormFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** An error message. It replaces the description and marks the control invalid. */
+    error?: React.ReactNode;
+    layout?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    /** Shows the required mark after the label and sets `required` on the control. */
+    required?: boolean;
+    /** The id given to the control. Generated when left out. */
+    htmlFor?: string;
+    children: React.ReactNode;
+}
+export declare function FormField({ label, description, error, layout, disabled, required, htmlFor, className, children, ...props }: FormFieldProps): React.JSX.Element;