@uisatin/ui 0.0.0-stage → 0.1.0

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';
+/**
+ * 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;

package/components/form-field.js

@@ -0,0 +1,4 @@
+'use client';export { FormField, useFormField } from '../chunk-UBNHSZSE.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=form-field.js.map
+//# sourceMappingURL=form-field.js.map

package/components/form-field.js.map

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

package/components/hover-card.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+/**
+ * HoverCard, 1:1 with the uiKit design (🆕 context menu & hover card): a preview of a person,
+ * place or file over its link — the Popover surface (bg/popover, border/default, radius-xl, the
+ * lg shadow), 320 wide, 16px in. It opens after the pointer rests 400 ms on the trigger (the
+ * middle of NN/g's 0.3–0.5 s, so passing over a link doesn't flash it), stays while the pointer
+ * moves into it, and closes 150 ms after it leaves both. Keyboard focus on the trigger opens it.
+ *
+ * Only for extra context the page works without: anything someone needs to act on belongs in a
+ * Popover they open on purpose.
+ */
+export interface HoverCardProps {
+    /** The link or name it previews. Rendered with `asChild`. */
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /** ms the pointer rests before it opens. */
+    openDelay?: number;
+    /** ms after the pointer leaves before it closes. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    container?: HTMLElement | null;
+    className?: string;
+}
+export declare function HoverCard({ trigger, children, side, align, openDelay, closeDelay, open, defaultOpen, onOpenChange, container, className, }: HoverCardProps): React.JSX.Element;
+/** The hover card's surface, for previews you place yourself. */
+export declare const hoverCardClass: string;

package/components/hover-card.js

@@ -0,0 +1,4 @@
+'use client';export { HoverCard, hoverCardClass } from '../chunk-HRKPV66B.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=hover-card.js.map
+//# sourceMappingURL=hover-card.js.map

package/components/hover-card.js.map

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

package/components/input-otp.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+/**
+ * InputOTP, 1:1 with the uiKit design (🆕 input otp & number): a one-time code as 36×36 cells,
+ * 8px apart, in groups (3 + 3 by default) split by an 8px border/strong dash. Each cell wears the
+ * field skin (bg/field, border/default, radius-lg, shadow xs); the cell the next digit goes into
+ * gets the focus border and ring and a blinking caret while the field has focus. A digit is
+ * text/base medium. With an error every cell turns action/destructive and the message replaces the
+ * hint under the cells; label, hint and error sit like Input's. With `success` (the code checked
+ * out) every cell's border turns status/green/fg and the message, in the same colour, leads with a
+ * 16px check.
+ *
+ * The message never moves the cells: it is as wide as the cells (it wraps rather than widening
+ * the field, which would shift a centred field sideways) and keeps a 20px line even while empty,
+ * so swapping hint → "Checking…" → success or error leaves the code where it is.
+ *
+ * The field is as wide as its cells, so it centres wherever it is placed. Focus shows only on
+ * the active cell: the real input carries no ring of its own.
+ *
+ * One real <input> lies over the cells (transparent text and caret), so typing, deleting, paste
+ * and the browser's SMS autofill (`autocomplete="one-time-code"`) all work as in any field, and
+ * screen readers hear one text box. Only digits by default (`pattern`); `onComplete` fires when
+ * every cell is filled.
+ */
+export interface InputOTPProps {
+    /** How many characters. */
+    length?: number;
+    /** Cells per group; groups are split by a dash. 0 for one group. */
+    groupSize?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Every cell is filled. */
+    onComplete?: (value: string) => void;
+    /** Which characters are allowed. Digits by default. */
+    pattern?: RegExp;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** An error message (replaces the hint), or `true` to mark the cells invalid without one. */
+    error?: React.ReactNode | boolean;
+    /** The code checked out: a message under the cells (replaces the hint), or `true` for green cells alone. Ignored while there is an error. */
+    success?: React.ReactNode | boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function InputOTP({ length, groupSize, value: valueProp, defaultValue, onValueChange, onComplete, pattern, label, hint, error, success, disabled, autoFocus, id, name, className, ...props }: InputOTPProps): React.JSX.Element;

package/components/input-otp.js

@@ -0,0 +1,8 @@
+'use client';export { InputOTP } from '../chunk-XL75JRUA.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=input-otp.js.map
+//# sourceMappingURL=input-otp.js.map

package/components/input-otp.js.map

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

package/components/input.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Input, 1:1 with the uiKit `Input` set (820:51657): a label (medium), the field, and a hint
+ * (13/19.5, muted) 8px apart. The label is 13px at every size. Three sizes: sm 28 with a 13px
+ * value, md 32 and lg 36 with 14px (lg at radius-xl), fixed whatever the theme's body size; 12px side padding,
+ * optional 16px leading and trailing icons 8px from the text.
+ *
+ * Placeholder is text/muted; a value is text/default and turns the icons from muted to
+ * default (Figma's `filled`). `error` swaps the hint for the message in action/destructive/bg
+ * and sets `aria-invalid`. Hover, focus and the error ring are styles/components/input.css.
+ *
+ * Inside a FormField, leave out `label`, `hint` and `error`: the field supplies the id,
+ * description and invalid state.
+ */
+export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** An error message (replaces the hint), or `true` to mark the field invalid without one. */
+    error?: React.ReactNode | boolean;
+    size?: 'sm' | 'md' | 'lg';
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */
+    wrapperClassName?: string;
+    /** Show a state without interacting, for state sheets. */
+    'data-force'?: 'hover' | 'focus';
+}
+export declare function Input({ label, hint, error, size, leadingIcon, trailingIcon, className, wrapperClassName, id, disabled, required, value, defaultValue, onChange, 'aria-describedby': ariaDescribedBy, 'data-force': force, ...props }: InputProps): React.JSX.Element;

package/components/input.js

@@ -0,0 +1,5 @@
+'use client';export { Input } from '../chunk-YPNKBE5X.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/components/input.js.map

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

package/components/kbd.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * Kbd, 1:1 with the uiKit `Kbd` set (4021:3415): one keyboard key. sm is 18px high with 4px
+ * sides, md 20px with 6px; a single character or glyph makes it an exact square, radius-sm, a 0.75px border/default edge on
+ * component/kbd/bg (bg/card in Light, bg/muted in Dark), the 11px medium Keycap glyph in
+ * text/muted. Put keys of one shortcut 2px apart, or pass `keys` and let `KbdGroup` do it.
+ *
+ * `tone="inverse"` is for keys on an inverse surface (a tooltip): a darker key on the dark pill
+ * in Light, a lighter one on the light pill in Dark.
+ */
+export interface KbdProps extends React.ComponentProps<'kbd'> {
+    size?: 'sm' | 'md';
+    tone?: 'default' | 'inverse';
+}
+export declare function Kbd({ size, tone, className, children, ...props }: KbdProps): React.JSX.Element;
+/**
+ * Splits a shortcut into keys: modifier glyphs one by one, the rest as one key ("Esc", "K").
+ * Spaces or "+" split it explicitly ("Ctrl + K").
+ */
+export declare function keysOf(shortcut: string): string[];
+export interface KbdGroupProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    /** A shortcut such as "⌘K" or "⌃⇧V", split into keys, or the keys themselves. */
+    keys: string | React.ReactNode[];
+    size?: KbdProps['size'];
+    tone?: KbdProps['tone'];
+}
+/** The keys of one shortcut, 2px apart. */
+export declare function KbdGroup({ keys, size, tone, className, ...props }: KbdGroupProps): React.JSX.Element;
+export declare const KbdArrowUp: () => React.JSX.Element;
+export declare const KbdArrowDown: () => React.JSX.Element;
+export declare const KbdReturn: () => React.JSX.Element;
+export interface KbdHintProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    keys: React.ReactNode[];
+    label: React.ReactNode;
+}
+/** A key hint for a menu footer: keys, then what they do in 12px text/muted, 6px apart. */
+export declare function KbdHint({ keys, label, className, ...props }: KbdHintProps): React.JSX.Element;

package/components/kbd.js

@@ -0,0 +1,4 @@
+'use client';export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf } from '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=kbd.js.map
+//# sourceMappingURL=kbd.js.map

package/components/kbd.js.map

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

package/components/line-chart.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type ChartCardBaseProps } from './chart';
+/**
+ * Line and Area chart, 1:1 with the uiKit `chart/lineCard` (4076:6759) and `chart/areaCard`
+ * (4070:7627), in the shared ChartCard (chart.tsx).
+ *
+ * One metric over the period: a smooth 2px line in chart/3 (monotone, so it never overshoots a
+ * point) over a 180px plot with a 32px axis gutter and 4 dashed border-subtle gridlines at nice
+ * ticks, the x labels 6px under it (at most about seven, evenly picked). `AreaCard` fills under
+ * the line with chart/3 fading from 28% to nothing at the baseline. No legend: the title says
+ * what is plotted and the KPI above gives its total.
+ *
+ * Hover (or `highlight`) picks the nearest point: a dashed border-strong drop line from it to the
+ * baseline, an 8px dot ringed in chart/3 on bg/card, the tooltip above it (date and value) and
+ * its x label in text/default. Every point is also reachable with the keyboard (arrow keys on the
+ * focused plot). When the data changes the plot fades in on its new scale, unless motion is
+ * reduced.
+ */
+export interface LineCardProps extends ChartCardBaseProps {
+    /** Unit after the value in the tooltip ("orders"). */
+    unit?: string;
+    /** Fill under the line. `AreaCard` sets it. */
+    area?: boolean;
+    /** Swap the plot without the fade when the data changes, as under prefers-reduced-motion. */
+    reducedMotion?: boolean;
+}
+export declare function LineCard({ data, formatValue, highlight, unit, area, reducedMotion, total, ...props }: LineCardProps): React.JSX.Element;
+/** The Line chart with the gradient under its line. */
+export declare function AreaCard(props: Omit<LineCardProps, 'area'>): React.JSX.Element;

package/components/line-chart.js

@@ -0,0 +1,12 @@
+'use client';export { AreaCard, LineCard } from '../chunk-SHDFUXYV.js';
+import '../chunk-DO3TBNSC.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=line-chart.js.map
+//# sourceMappingURL=line-chart.js.map

package/components/line-chart.js.map

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