@openwarelabs/ui 0.0.0-stage → 0.1.0

package/dist/components/CommandPalette/CommandPalette.d.cts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface Command {
+    /** Unique in the list, e.g. "project.new". */
+    id: string;
+    title: string;
+    /** Commands with the same group are listed together under its name (when nothing is typed). */
+    group?: string;
+    icon?: ReactNode;
+    /** Extra words that should find this command, e.g. "start go" for Run. */
+    keywords?: string;
+    /** Shown on the right, e.g. a folder or "Running". */
+    hint?: string;
+    /** Shortcut shown on the right, e.g. "⌘,". */
+    shortcut?: string;
+    /** Why it can't run right now; the command still shows, greyed out, with this as its hint. */
+    disabled?: string;
+    run(): void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onClose(): void;
+    commands: Command[];
+    /** Default "Search commands…". */
+    placeholder?: string;
+}
+/** ⌘K: search every action and run it from the keyboard. Arrow keys (or Ctrl+N and Ctrl+P) move, Enter runs. */
+export declare function CommandPalette({ open, onClose, commands, placeholder }: CommandPaletteProps): import("react").JSX.Element | null;

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface Command {
+    /** Unique in the list, e.g. "project.new". */
+    id: string;
+    title: string;
+    /** Commands with the same group are listed together under its name (when nothing is typed). */
+    group?: string;
+    icon?: ReactNode;
+    /** Extra words that should find this command, e.g. "start go" for Run. */
+    keywords?: string;
+    /** Shown on the right, e.g. a folder or "Running". */
+    hint?: string;
+    /** Shortcut shown on the right, e.g. "⌘,". */
+    shortcut?: string;
+    /** Why it can't run right now; the command still shows, greyed out, with this as its hint. */
+    disabled?: string;
+    run(): void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onClose(): void;
+    commands: Command[];
+    /** Default "Search commands…". */
+    placeholder?: string;
+}
+/** ⌘K: search every action and run it from the keyboard. Arrow keys (or Ctrl+N and Ctrl+P) move, Enter runs. */
+export declare function CommandPalette({ open, onClose, commands, placeholder }: CommandPaletteProps): import("react").JSX.Element | null;

package/dist/components/CommandPalette/filterCommands.d.cts

@@ -0,0 +1,3 @@
+import type { Command } from "./CommandPalette.cjs";
+/** Commands matching every word of the query, best first; with no query, the list as given. */
+export declare function filterCommands(commands: Command[], query: string): Command[];

package/dist/components/CommandPalette/filterCommands.d.ts

@@ -0,0 +1,3 @@
+import type { Command } from "./CommandPalette.js";
+/** Commands matching every word of the query, best first; with no query, the list as given. */
+export declare function filterCommands(commands: Command[], query: string): Command[];

package/dist/components/Dialog/Dialog.d.cts

@@ -0,0 +1,42 @@
+import { type FormEvent, type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    /** Called when the person dismisses it (Escape, the backdrop) unless `dismissible` is false. Set `open` to false here. */
+    onClose(): void;
+    title: ReactNode;
+    /** A muted line or two under the title. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons at the bottom right, cancel first, the main action last. */
+    actions?: ReactNode;
+    /** Pixels. Default 420. */
+    width?: number;
+    /** False while saving, so Escape and the backdrop can't close it mid-way. Default true. */
+    dismissible?: boolean;
+    /** Makes the dialog a form; its submit button submits it. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    className?: string;
+}
+/**
+ * A modal dialog on the native <dialog> element: it traps focus, sits above everything, closes with Escape
+ * or a click on the backdrop, and fades and rises in.
+ */
+export declare function Dialog({ open, onClose, title, description, children, actions, width, dismissible, onSubmit, className, }: DialogProps): import("react").JSX.Element | null;
+export interface ConfirmDialogProps {
+    open: boolean;
+    onClose(): void;
+    title: ReactNode;
+    description: ReactNode;
+    /** The verb on the confirm button: "Delete project", not "OK". */
+    confirmLabel: string;
+    /** Styles the confirm button and icon as a destructive action. */
+    destructive?: boolean;
+    /** Keeps the confirm button disabled, e.g. until a typed confirmation matches. */
+    confirmDisabled?: boolean;
+    /** Runs the action. The dialog closes when it resolves and shows the error's message when it throws. */
+    onConfirm(): Promise<void> | void;
+    /** Extra content between the description and the buttons, such as an option checkbox. */
+    children?: ReactNode;
+}
+/** Asks before an action: a title, what will happen, Cancel and the action. Cancel has focus first. */
+export declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, destructive, confirmDisabled, onConfirm, children, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,42 @@
+import { type FormEvent, type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    /** Called when the person dismisses it (Escape, the backdrop) unless `dismissible` is false. Set `open` to false here. */
+    onClose(): void;
+    title: ReactNode;
+    /** A muted line or two under the title. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons at the bottom right, cancel first, the main action last. */
+    actions?: ReactNode;
+    /** Pixels. Default 420. */
+    width?: number;
+    /** False while saving, so Escape and the backdrop can't close it mid-way. Default true. */
+    dismissible?: boolean;
+    /** Makes the dialog a form; its submit button submits it. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    className?: string;
+}
+/**
+ * A modal dialog on the native <dialog> element: it traps focus, sits above everything, closes with Escape
+ * or a click on the backdrop, and fades and rises in.
+ */
+export declare function Dialog({ open, onClose, title, description, children, actions, width, dismissible, onSubmit, className, }: DialogProps): import("react").JSX.Element | null;
+export interface ConfirmDialogProps {
+    open: boolean;
+    onClose(): void;
+    title: ReactNode;
+    description: ReactNode;
+    /** The verb on the confirm button: "Delete project", not "OK". */
+    confirmLabel: string;
+    /** Styles the confirm button and icon as a destructive action. */
+    destructive?: boolean;
+    /** Keeps the confirm button disabled, e.g. until a typed confirmation matches. */
+    confirmDisabled?: boolean;
+    /** Runs the action. The dialog closes when it resolves and shows the error's message when it throws. */
+    onConfirm(): Promise<void> | void;
+    /** Extra content between the description and the buttons, such as an option checkbox. */
+    children?: ReactNode;
+}
+/** Asks before an action: a title, what will happen, Cancel and the action. Cancel has focus first. */
+export declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, destructive, confirmDisabled, onConfirm, children, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/components/Drawer/Drawer.d.cts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export interface DrawerProps {
+    open: boolean;
+    /** Called on Escape, the backdrop or the ✕, unless `dismissible` is false. Set `open` to false here. */
+    onClose(): void;
+    title: ReactNode;
+    /** A muted line under the title. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons pinned to the bottom: Cancel first, the main action last. */
+    footer?: ReactNode;
+    /** Which edge it slides in from.
+     * @default "right" */
+    side?: "right" | "left" | "bottom";
+    /** Width (or height, from the bottom) in pixels.
+     * @default 420 */
+    size?: number;
+    /** @default true */
+    dismissible?: boolean;
+    className?: string;
+}
+/** A panel that slides in from an edge over the page, for details or a form beside what the person was doing. */
+export declare function Drawer({ open, onClose, title, description, children, footer, side, size, dismissible, className, }: DrawerProps): import("react").JSX.Element | null;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export interface DrawerProps {
+    open: boolean;
+    /** Called on Escape, the backdrop or the ✕, unless `dismissible` is false. Set `open` to false here. */
+    onClose(): void;
+    title: ReactNode;
+    /** A muted line under the title. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons pinned to the bottom: Cancel first, the main action last. */
+    footer?: ReactNode;
+    /** Which edge it slides in from.
+     * @default "right" */
+    side?: "right" | "left" | "bottom";
+    /** Width (or height, from the bottom) in pixels.
+     * @default 420 */
+    size?: number;
+    /** @default true */
+    dismissible?: boolean;
+    className?: string;
+}
+/** A panel that slides in from an edge over the page, for details or a form beside what the person was doing. */
+export declare function Drawer({ open, onClose, title, description, children, footer, side, size, dismissible, className, }: DrawerProps): import("react").JSX.Element | null;

package/dist/components/EmptyState/EmptyState.d.cts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface EmptyStateProps {
+    /** What's missing, as a plain statement: "No projects yet". */
+    title: ReactNode;
+    /** What to do about it, in a sentence. */
+    description?: ReactNode;
+    /** A 20px icon on a tile.
+     * @default <InboxIcon /> */
+    icon?: ReactNode;
+    /** One primary Button, and maybe a secondary one. */
+    actions?: ReactNode;
+    /** Draws a dashed outline around it, for an empty area inside a page.
+     * @default false */
+    bordered?: boolean;
+    className?: string;
+}
+/** What a list, table or panel shows when there's nothing in it yet, and the way to add the first thing. */
+export declare function EmptyState({ title, description, icon, actions, bordered, className }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface EmptyStateProps {
+    /** What's missing, as a plain statement: "No projects yet". */
+    title: ReactNode;
+    /** What to do about it, in a sentence. */
+    description?: ReactNode;
+    /** A 20px icon on a tile.
+     * @default <InboxIcon /> */
+    icon?: ReactNode;
+    /** One primary Button, and maybe a secondary one. */
+    actions?: ReactNode;
+    /** Draws a dashed outline around it, for an empty area inside a page.
+     * @default false */
+    bordered?: boolean;
+    className?: string;
+}
+/** What a list, table or panel shows when there's nothing in it yet, and the way to add the first thing. */
+export declare function EmptyState({ title, description, icon, actions, bordered, className }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/Field/Field.d.cts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface FieldProps {
+    /** The label, set above the control. */
+    label: ReactNode;
+    /** One control: an Input, Textarea, Select, or any element that takes an id. */
+    children: ReactElement;
+    /** A muted line under the control. */
+    hint?: ReactNode;
+    /** An error under the control; it also marks the control invalid. */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * A label above a control, with an optional hint and error below. Field wires them together:
+ * it gives the control an id (unless it has one), points aria-describedby at the hint and error,
+ * and marks it invalid when there is an error.
+ */
+export declare function Field({ label, children, hint, error, className }: FieldProps): import("react").JSX.Element;

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface FieldProps {
+    /** The label, set above the control. */
+    label: ReactNode;
+    /** One control: an Input, Textarea, Select, or any element that takes an id. */
+    children: ReactElement;
+    /** A muted line under the control. */
+    hint?: ReactNode;
+    /** An error under the control; it also marks the control invalid. */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * A label above a control, with an optional hint and error below. Field wires them together:
+ * it gives the control an id (unless it has one), points aria-describedby at the hint and error,
+ * and marks it invalid when there is an error.
+ */
+export declare function Field({ label, children, hint, error, className }: FieldProps): import("react").JSX.Element;

package/dist/components/FileDropZone/FileDropZone.d.cts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface FileDropZoneProps {
+    /** Called with the accepted files, whether dropped or picked. */
+    onFiles(files: File[]): void;
+    /** File types to accept, as for <input accept>: ".png,.jpg", "image/*". */
+    accept?: string;
+    /** @default false */
+    multiple?: boolean;
+    /** The largest file accepted, in bytes. */
+    maxSize?: number;
+    /** @default "Drop files here, or browse" */
+    label?: ReactNode;
+    /** A muted line under the label: what's accepted, how big. */
+    hint?: ReactNode;
+    /** An error to show in place of the hint, such as a failed upload. */
+    error?: ReactNode;
+    /** A 20px icon on the tile.
+     * @default <UploadIcon /> */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** The form field name for the file input. */
+    name?: string;
+    className?: string;
+}
+/**
+ * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
+ * It checks the type and size and says what was wrong.
+ */
+export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;

package/dist/components/FileDropZone/FileDropZone.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface FileDropZoneProps {
+    /** Called with the accepted files, whether dropped or picked. */
+    onFiles(files: File[]): void;
+    /** File types to accept, as for <input accept>: ".png,.jpg", "image/*". */
+    accept?: string;
+    /** @default false */
+    multiple?: boolean;
+    /** The largest file accepted, in bytes. */
+    maxSize?: number;
+    /** @default "Drop files here, or browse" */
+    label?: ReactNode;
+    /** A muted line under the label: what's accepted, how big. */
+    hint?: ReactNode;
+    /** An error to show in place of the hint, such as a failed upload. */
+    error?: ReactNode;
+    /** A 20px icon on the tile.
+     * @default <UploadIcon /> */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** The form field name for the file input. */
+    name?: string;
+    className?: string;
+}
+/**
+ * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
+ * It checks the type and size and says what was wrong.
+ */
+export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;

package/dist/components/FileTree/FileTree.d.cts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface FileTreeNode {
+    name: string;
+    /** A folder's contents. Give folders an empty array if they're empty. */
+    children?: FileTreeNode[];
+    /** Replaces the file or folder icon. */
+    icon?: ReactNode;
+    /** Muted text at the right of the row, such as "+12 −3" or a size. */
+    meta?: ReactNode;
+}
+export interface FileTreeProps {
+    items: FileTreeNode[];
+    /** The selected file's path, "src/app.tsx". */
+    selected?: string;
+    defaultSelected?: string;
+    onSelect?(path: string): void;
+    /** Folder paths open at first, or "all".
+     * @default "all" */
+    defaultExpanded?: string[] | "all";
+    /** Names the tree for screen readers.
+     * @default "Files" */
+    label?: string;
+    className?: string;
+}
+/**
+ * Commandr's project structure explorer: folders open and close, files can be selected.
+ * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
+ */
+export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;

package/dist/components/FileTree/FileTree.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface FileTreeNode {
+    name: string;
+    /** A folder's contents. Give folders an empty array if they're empty. */
+    children?: FileTreeNode[];
+    /** Replaces the file or folder icon. */
+    icon?: ReactNode;
+    /** Muted text at the right of the row, such as "+12 −3" or a size. */
+    meta?: ReactNode;
+}
+export interface FileTreeProps {
+    items: FileTreeNode[];
+    /** The selected file's path, "src/app.tsx". */
+    selected?: string;
+    defaultSelected?: string;
+    onSelect?(path: string): void;
+    /** Folder paths open at first, or "all".
+     * @default "all" */
+    defaultExpanded?: string[] | "all";
+    /** Names the tree for screen readers.
+     * @default "Files" */
+    label?: string;
+    className?: string;
+}
+/**
+ * Commandr's project structure explorer: folders open and close, files can be selected.
+ * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
+ */
+export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;

package/dist/components/Input/Input.d.cts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid.
+     * @default false */
+    isInvalid?: boolean;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Inside the field, before the text: a 16px icon, a unit, a prefix like "https://". */
+    startContent?: ReactNode;
+    /** Inside the field, after the text: a unit, a small ghost Button, a Spinner. */
+    endContent?: ReactNode;
+}
+/**
+ * A single-line text field. With startContent or endContent, the field becomes a group and `className`
+ * goes on the group, so width and margins apply to the whole field.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid.
+     * @default false */
+    isInvalid?: boolean;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Inside the field, before the text: a 16px icon, a unit, a prefix like "https://". */
+    startContent?: ReactNode;
+    /** Inside the field, after the text: a unit, a small ghost Button, a Spinner. */
+    endContent?: ReactNode;
+}
+/**
+ * A single-line text field. With startContent or endContent, the field becomes a group and `className`
+ * goes on the group, so width and margins apply to the whole field.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/InputOTP/InputOTP.d.cts

@@ -0,0 +1,31 @@
+export interface InputOTPProps {
+    /** How many characters the code has.
+     * @default 6 */
+    length?: number;
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called once every box is filled. */
+    onComplete?(value: string): void;
+    /** `numeric` accepts digits only; `alphanumeric` letters and digits (shown upper case).
+     * @default "numeric" */
+    type?: "numeric" | "alphanumeric";
+    /** Splits the boxes into groups with a dash between, e.g. 3 for "123–456". */
+    groupSize?: number;
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Names the code for screen readers.
+     * @default "Verification code" */
+    "aria-label"?: string;
+    /** The form field name; a hidden input carries the whole code. */
+    name?: string;
+    className?: string;
+}
+/**
+ * A one-time code in separate boxes. Typing moves forward, Backspace moves back,
+ * and pasting a code fills every box. The browser can fill it from a text message.
+ */
+export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, name, className, }: InputOTPProps): import("react").JSX.Element;

package/dist/components/InputOTP/InputOTP.d.ts

@@ -0,0 +1,31 @@
+export interface InputOTPProps {
+    /** How many characters the code has.
+     * @default 6 */
+    length?: number;
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    onChange?(value: string): void;
+    /** Called once every box is filled. */
+    onComplete?(value: string): void;
+    /** `numeric` accepts digits only; `alphanumeric` letters and digits (shown upper case).
+     * @default "numeric" */
+    type?: "numeric" | "alphanumeric";
+    /** Splits the boxes into groups with a dash between, e.g. 3 for "123–456". */
+    groupSize?: number;
+    /** @default false */
+    isInvalid?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Names the code for screen readers.
+     * @default "Verification code" */
+    "aria-label"?: string;
+    /** The form field name; a hidden input carries the whole code. */
+    name?: string;
+    className?: string;
+}
+/**
+ * A one-time code in separate boxes. Typing moves forward, Backspace moves back,
+ * and pasting a code fills every box. The browser can fill it from a text message.
+ */
+export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, name, className, }: InputOTPProps): import("react").JSX.Element;

package/dist/components/Kbd/Kbd.d.cts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+/** One keyboard key in running text, with a heavier bottom edge like a real key: <Kbd>⌘</Kbd> <Kbd>K</Kbd>. */
+export declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+/** Code, a path or a command inside a sentence. */
+export declare function Code({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+/** One keyboard key in running text, with a heavier bottom edge like a real key: <Kbd>⌘</Kbd> <Kbd>K</Kbd>. */
+export declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+/** Code, a path or a command inside a sentence. */
+export declare function Code({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/Layout/Layout.d.cts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type JSX, type ReactNode } from "react";
+export type SpaceToken = "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** @default "column" */
+    direction?: "row" | "column";
+    /** The space between children, from the spacing scale.
+     * @default "md" */
+    gap?: SpaceToken;
+    /** Cross-axis alignment. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis alignment. */
+    justify?: "start" | "center" | "end" | "between";
+    /** Lets a row wrap onto more lines.
+     * @default false */
+    wrap?: boolean;
+    /** The element to render.
+     * @default "div" */
+    as?: keyof JSX.IntrinsicElements;
+    children?: ReactNode;
+}
+/** Lays children out in a row or a column with a gap from the spacing scale. */
+export declare function Stack({ direction, gap, align, justify, wrap, as, className, style, children, ...props }: StackProps): JSX.Element;
+export interface SeparatorProps {
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Text in the middle of a horizontal line, such as "or". */
+    label?: ReactNode;
+    /** Space before and after, from the spacing scale.
+     * @default "none" */
+    spacing?: SpaceToken;
+    className?: string;
+}
+/** A hairline between groups of content. Prefer space; use a line when space alone doesn't separate. */
+export declare function Separator({ orientation, label, spacing, className }: SeparatorProps): JSX.Element;
+export interface ScrollShadowProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** How far the fade reaches, in pixels.
+     * @default 32 */
+    size?: number;
+    /** Its height (vertical) or width; it scrolls past this. */
+    maxSize?: number | string;
+    /** Names the area; with it, the area becomes a focusable region so keyboards can scroll it. */
+    "aria-label"?: string;
+    children: ReactNode;
+}
+/** A scrolling area whose edges fade out where there's more to scroll, so nothing looks cut off. */
+export declare function ScrollShadow({ orientation, size, maxSize, className, style, children, "aria-label": ariaLabel, ...props }: ScrollShadowProps): JSX.Element;
+/** Hides content visually but keeps it for screen readers: extra context for an icon, a table caption. */
+export declare function VisuallyHidden({ className, ...props }: HTMLAttributes<HTMLSpanElement>): JSX.Element;

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type JSX, type ReactNode } from "react";
+export type SpaceToken = "none" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** @default "column" */
+    direction?: "row" | "column";
+    /** The space between children, from the spacing scale.
+     * @default "md" */
+    gap?: SpaceToken;
+    /** Cross-axis alignment. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis alignment. */
+    justify?: "start" | "center" | "end" | "between";
+    /** Lets a row wrap onto more lines.
+     * @default false */
+    wrap?: boolean;
+    /** The element to render.
+     * @default "div" */
+    as?: keyof JSX.IntrinsicElements;
+    children?: ReactNode;
+}
+/** Lays children out in a row or a column with a gap from the spacing scale. */
+export declare function Stack({ direction, gap, align, justify, wrap, as, className, style, children, ...props }: StackProps): JSX.Element;
+export interface SeparatorProps {
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Text in the middle of a horizontal line, such as "or". */
+    label?: ReactNode;
+    /** Space before and after, from the spacing scale.
+     * @default "none" */
+    spacing?: SpaceToken;
+    className?: string;
+}
+/** A hairline between groups of content. Prefer space; use a line when space alone doesn't separate. */
+export declare function Separator({ orientation, label, spacing, className }: SeparatorProps): JSX.Element;
+export interface ScrollShadowProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** How far the fade reaches, in pixels.
+     * @default 32 */
+    size?: number;
+    /** Its height (vertical) or width; it scrolls past this. */
+    maxSize?: number | string;
+    /** Names the area; with it, the area becomes a focusable region so keyboards can scroll it. */
+    "aria-label"?: string;
+    children: ReactNode;
+}
+/** A scrolling area whose edges fade out where there's more to scroll, so nothing looks cut off. */
+export declare function ScrollShadow({ orientation, size, maxSize, className, style, children, "aria-label": ariaLabel, ...props }: ScrollShadowProps): JSX.Element;
+/** Hides content visually but keeps it for screen readers: extra context for an icon, a table caption. */
+export declare function VisuallyHidden({ className, ...props }: HTMLAttributes<HTMLSpanElement>): JSX.Element;