@agent-factory-platform/ui-kit 0.2.0

package/dist/components/badge.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef } from "react";
+/** Avatar badge — logo image, or pastel circle with 2-letter Ink monogram. */
+export declare function AvatarBadge({ initials, tint, size, className, src, alt, }: {
+    initials: string;
+    tint?: string;
+    size?: number;
+    className?: string;
+    /** When set, render a circular logo/photo instead of initials. */
+    src?: string;
+    alt?: string;
+}): import("react").JSX.Element;
+export type ResourceIconProps = {
+    label: string;
+    fallback: string;
+    sources?: string[];
+    tint?: string;
+    size?: number;
+    className?: string;
+};
+/**
+ * Resource icon with ordered image fallbacks and a deterministic
+ * monogram. The image and fallback are mutually exclusive, so transparent or
+ * failed remote assets never leave visual residue behind the logo.
+ */
+export declare function ResourceIcon({ label, fallback, sources, tint, size, className }: ResourceIconProps): import("react").JSX.Element;
+export type TagTone = "neutral" | "warm" | "cool" | "success" | "danger" | "warning";
+export type TagScale = "micro" | "compact" | "default";
+export type TagProps = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+    children: React.ReactNode;
+    tone?: TagTone;
+    size?: TagScale;
+};
+/** Tag pill — fully rounded, tinted, low-emphasis label. */
+export declare function Tag({ children, tone, size, className, ...props }: TagProps): import("react").JSX.Element;

package/dist/components/button-group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function ButtonGroup({ label, children, orientation, className }: {
+    label: string;
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -0,0 +1,30 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "accent" | "secondary" | "ghost" | "success" | "danger" | "text";
+export type ButtonSize = "compact" | "default" | "touch" | "icon";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: ReactNode;
+}
+/**
+ * Canonical command button. Use `compact` in dense application chrome, `default` in
+ * product forms, and `touch` for primary mobile actions. Icon-only buttons must
+ * provide an accessible name through `aria-label` or `title`.
+ */
+export declare function Button({ asChild, variant, size, className, children, type, ...props }: ButtonProps): import("react").JSX.Element;
+/** Keeps related commands aligned and allows actions to wrap on narrow screens. */
+export declare function ActionGroup({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface PressableProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    active?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Unstyled interactive ownership boundary for router links and custom rows.
+ * It removes browser pointer-focus outlines while preserving the UIKit
+ * focus-visible ring for keyboard navigation.
+ */
+export declare const Pressable: import("react").ForwardRefExoticComponent<PressableProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/card.d.ts

@@ -0,0 +1,25 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+type Tone = "plain" | "warm" | "cool";
+type Density = "none" | "compact" | "default";
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    /** Preserve semantic product elements such as `article` while UIKit owns the frame. */
+    asChild?: boolean;
+    as?: Extract<ElementType, "div" | "article" | "section" | "li">;
+    tone?: Tone;
+    density?: Density;
+    children: ReactNode;
+}
+/**
+ * Framed content unit. Keep page sections unframed; use cards for repeated
+ * entities or genuinely bounded tools. `compact` is for dense workspace tiles.
+ */
+export declare function Card({ asChild, as, tone, density, className, children, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardTitle({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CardLabel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/chart-frame.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export type ChartStatus = "live" | "stale" | "loading" | "error";
+export type ChartFrameProps = Omit<ComponentPropsWithoutRef<"figure">, "title"> & {
+    title: ReactNode;
+    summary: string;
+    status?: ChartStatus;
+    statusLabel?: string;
+    toolbar?: ReactNode;
+    legend?: ReactNode;
+};
+/** Stable shell for engine-owned chart canvases, SVGs, toolbars and evidence. */
+export declare function ChartFrame({ title, summary, status, statusLabel, toolbar, legend, className, children, ...props }: ChartFrameProps): import("react").JSX.Element;

package/dist/components/color-picker.d.ts

@@ -0,0 +1,18 @@
+export interface ColorPickerLabels {
+    trigger: string;
+    dialog: string;
+    hex: string;
+    hue: string;
+    saturation: string;
+    presets: string;
+    close: string;
+}
+export interface ColorPickerProps {
+    value: `#${string}`;
+    onChange: (value: `#${string}`) => void;
+    labels: ColorPickerLabels;
+    presets?: readonly `#${string}`[];
+    disabled?: boolean;
+}
+/** Locale-neutral precise color input with quick presets and HSV controls. */
+export declare function ColorPicker({ value, onChange, labels, presets, disabled }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/combobox.d.ts

@@ -0,0 +1,18 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    meta?: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    value: string;
+    options: readonly ComboboxOption[];
+    onValueChange: (value: string) => void;
+    label: string;
+    resultsLabel: string;
+    placeholder?: string;
+    emptyText: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Combobox({ value, options, onValueChange, label, resultsLabel, placeholder, emptyText, disabled, className, }: ComboboxProps): import("react").JSX.Element;

package/dist/components/command-dialog.d.ts

@@ -0,0 +1,26 @@
+import type { KeyboardEventHandler, ReactNode, Ref } from "react";
+export type CommandDialogFilter<T extends string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type CommandDialogProps<T extends string> = {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    query: string;
+    onQueryChange: (value: string) => void;
+    placeholder: string;
+    inputRef?: Ref<HTMLInputElement>;
+    busy?: boolean;
+    filters: CommandDialogFilter<T>[];
+    filter: T;
+    onFilterChange: (value: T) => void;
+    filterAriaLabel: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    className?: string;
+};
+/** Search/command overlay chrome; callers own providers, rows and execution. */
+export declare function CommandDialog<T extends string>({ open, onClose, title, query, onQueryChange, placeholder, inputRef, busy, filters, filter, onFilterChange, filterAriaLabel, children, footer, onKeyDown, className, }: CommandDialogProps<T>): import("react").JSX.Element;

package/dist/components/confirm-dialog.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { type ButtonVariant } from "./button";
+/**
+ * Reusable confirmation dialog for destructive / irreversible actions. Built on
+ * the shared `Modal` primitive, so it inherits the responsive shape, scrim +
+ * Esc/backdrop close, focus trap, and aria-modal chrome. The caller owns the
+ * `open` state and the action; this only gates it behind an explicit Confirm.
+ *
+ * `confirmVariant` selects the command tone. `busy`
+ * disables both buttons (and shows nothing else) while an async `onConfirm`
+ * resolves, so a slow request can't be double-fired or cancelled mid-flight.
+ * Token-only styling — no raw hex (theme-check gate).
+ */
+export declare function ConfirmDialog({ open, onClose, title, message, body, confirmLabel, cancelLabel, closeLabel, onConfirm, confirmVariant, busy, busyLabel, confirmDisabled, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    /** Body copy explaining the consequence of confirming. */
+    message: string;
+    /** Optional rich content rendered below the message (e.g. a diff preview). */
+    body?: ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    /** Accessible label for the title-bar close icon; defaults to `cancelLabel`. */
+    closeLabel?: string;
+    /** Run on confirm; may be async — keep `busy` true until it settles. */
+    onConfirm: () => void | Promise<void>;
+    /** Command tone, including destructive removes / deletes / signs out. */
+    confirmVariant?: Extract<ButtonVariant, "primary" | "accent" | "danger">;
+    /** Disable both buttons while an async confirm is in flight. */
+    busy?: boolean;
+    /** Confirm-button label while `busy` (defaults to `confirmLabel`). */
+    busyLabel?: string;
+    /** Disable only the confirm button (e.g. validation); cancel stays available. */
+    confirmDisabled?: boolean;
+}): import("react").JSX.Element;

package/dist/components/data-table.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface DataTableColumn<T> {
+    id: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    sortValue?: (row: T) => string | number;
+    align?: "left" | "right";
+    resizeLabel?: string;
+}
+export declare function DataTable<T>({ label, columns, rows, rowKey, emptyText, }: {
+    label: string;
+    columns: readonly DataTableColumn<T>[];
+    rows: readonly T[];
+    rowKey: (row: T) => string;
+    emptyText: string;
+}): import("react").JSX.Element;

package/dist/components/date-time.d.ts

@@ -0,0 +1,39 @@
+export interface CalendarProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    label: string;
+    locale: string;
+    weekdayLabels: readonly string[];
+    previousMonthLabel: string;
+    nextMonthLabel: string;
+    dateLabel?: (value: string) => string;
+    minimum?: string;
+    maximum?: string;
+    className?: string;
+}
+export declare function Calendar({ value, onValueChange, label, locale, weekdayLabels, previousMonthLabel, nextMonthLabel, dateLabel, minimum, maximum, className, }: CalendarProps): import("react").JSX.Element;
+export interface DatePickerProps extends Omit<CalendarProps, "label" | "className"> {
+    label: string;
+    calendarLabel: string;
+    placeholder: string;
+    displayValue?: (value: string) => string;
+}
+export declare function DatePicker({ value, onValueChange, label, calendarLabel, placeholder, displayValue, ...calendarProps }: DatePickerProps): import("react").JSX.Element;
+export declare function DateRangePicker({ start, end, onChange, startLabel, endLabel, ...calendarProps }: Omit<DatePickerProps, "value" | "onValueChange" | "label" | "minimum" | "maximum"> & {
+    start: string;
+    end: string;
+    onChange: (range: {
+        start: string;
+        end: string;
+    }) => void;
+    startLabel: string;
+    endLabel: string;
+}): import("react").JSX.Element;
+export declare function TimeField({ label, value, onValueChange, timezone, minimum, maximum, }: {
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    timezone: string;
+    minimum?: string;
+    maximum?: string;
+}): import("react").JSX.Element;

package/dist/components/disclosure.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export declare function Accordion({ value, title, children, }: {
+    value: string;
+    title: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Collapsible({ title, children }: {
+    title: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/drawer.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+type AccessibleDrawerName = {
+    title: string;
+    ariaLabel?: string;
+} | {
+    title?: undefined;
+    ariaLabel: string;
+};
+export type DrawerProps = AccessibleDrawerName & {
+    open: boolean;
+    onClose: () => void;
+    closeLabel?: string;
+    description?: ReactNode;
+    children: ReactNode;
+    /** Sticky action area pinned below the scrollable body. */
+    footer?: ReactNode;
+    /** Desktop width: `sm` 380px · `md` 460px · `lg` 560px · `xl` 860px. */
+    size?: "sm" | "md" | "lg" | "xl";
+    bare?: boolean;
+    side?: "left" | "right";
+    mobilePlacement?: "bottom" | "side";
+    rootClassName?: string;
+    panelClassName?: string;
+};
+/**
+ * Agent Factory side drawer — a panel that slides in from the right (desktop) / bottom
+ * (mobile). Use for secondary, scrollable surfaces that shouldn't steal the
+ * whole viewport like a modal: filters, detail side-views, config. Chrome only
+ * (scrim, sliding panel, title + close, optional sticky footer); the caller
+ * composes the body. AnimatePresence drives the slide via motion tokens, so it
+ * respects reduced-motion. a11y: portal to <body>, role/aria-modal, Esc + scrim
+ * close, body scroll-lock, focus moves into the panel on open. Token-only.
+ */
+export declare function Drawer({ open, onClose, title, ariaLabel, closeLabel, description, children, footer, size, bare, side, mobilePlacement, rootClassName, panelClassName, }: DrawerProps): import("react").ReactPortal | null;
+export {};

package/dist/components/dropdown-select.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type DropdownSelectOption = {
+    value: string;
+    label: ReactNode;
+    textValue?: string;
+    leading?: ReactNode;
+    meta?: ReactNode;
+    disabled?: boolean;
+};
+export declare function DropdownSelect({ value, options, onChange, ariaLabel, placeholder, disabled, density, menuAlign, portaled, className, }: {
+    value: string;
+    options: DropdownSelectOption[];
+    onChange: (value: string) => void;
+    ariaLabel: string;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    density?: "compact" | "default";
+    menuAlign?: "start" | "end";
+    /** Render the menu at the document root when an overflow-clipped workspace owns the trigger. */
+    portaled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/field.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from "react";
+type FieldControlProps = {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+};
+export interface FieldProps {
+    label: ReactNode;
+    children: ReactElement<FieldControlProps>;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+export declare function Field({ label, children, hint, error, required, className }: FieldProps): import("react").JSX.Element;
+export {};

package/dist/components/floating-window.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+/**
+ * A non-modal floating window — draggable by its header, resizable from the
+ * bottom-right corner, and pinnable. Unlike {@link Modal} it has NO scrim and
+ * does NOT lock page scroll: the page stays fully interactive underneath, so a
+ * user can keep interacting with the application while it floats above it.
+ *
+ * Narrow viewports (<640px): collapses to a near-fullscreen bottom sheet — drag /
+ * resize / pin are desktop-only affordances and get in the way of touch.
+ *
+ * - **Drag** — pointer-down on the header; `setPointerCapture` keeps the move
+ *   stream flowing even when the cursor leaves the header, so fast drags stick.
+ * - **Resize** — the corner grip scales the box (min bounds enforced); the
+ *   content (a `ResponsiveContainer` chart) re-fits, so resize == zoom.
+ * - **Pin** — when pinned the window persists (Esc is ignored); unpinned, Esc
+ *   closes it. Position/size survive across closes so re-opening feels sticky.
+ *
+ * Token-only styling (theme-check clean), portalled to <body> so it escapes any
+ * transformed/backdrop-blur ancestor that would otherwise clip a fixed child.
+ */
+export declare function FloatingWindow({ open, onClose, title, children, initialW, initialH, minW, minH, pinLabel, unpinLabel, closeLabel, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    initialW?: number;
+    initialH?: number;
+    minW?: number;
+    minH?: number;
+    pinLabel?: string;
+    unpinLabel?: string;
+    closeLabel?: string;
+}): import("react").ReactPortal | null;

package/dist/components/heading.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/**
+ * Display headings — page identity and editorial openers only.
+ * `display` 72 · `lg` 56 · `base` 40. Product panels use Subheading.
+ */
+export declare function Heading({ level, as: As, className, children, }: {
+    level?: "display" | "lg" | "base";
+    as?: "h1" | "h2";
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Product subheading — 20px, reserved for page/section hierarchy. */
+export declare function Subheading({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/hover-tip.d.ts

@@ -0,0 +1,23 @@
+/**
+ * HoverTip — a hover popover rendered through a portal so it's never clipped by a
+ * scroll container. It stays open while the pointer is over EITHER the anchor or
+ * the panel (a short close delay bridges the gap between them), so long lists can
+ * be hovered and scrolled. Hover/focus to open; supplementary info, so no focus
+ * trap. The panel is scrollable when tall.
+ *
+ * Positioning is viewport-clamped (and flips above near the bottom edge) so tips
+ * next to the composer send button are never truncated.
+ */
+import { type ReactNode } from "react";
+export type HoverTipVariant = "panel" | "hint";
+export declare function HoverTip({ content, children, width, variant, }: {
+    content: ReactNode;
+    children: ReactNode;
+    /**
+     * Panel width in px. For `hint`, used as max-width so longer copy (e.g. context
+     * meter) can wrap instead of overflowing the viewport.
+     */
+    width?: number;
+    /** `panel` = rich popover; `hint` = compact label under the anchor. */
+    variant?: HoverTipVariant;
+}): import("react").JSX.Element;

package/dist/components/icon-tip.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/**
+ * Icon-only control — every icon button MUST expose a hover tooltip so intent is
+ * clear in both light and dark mode (native `title` alone is not enough).
+ */
+export declare function IconTip({ label, children, }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/input-group.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement, type ReactNode } from "react";
+type GroupControlProps = {
+    className?: string;
+};
+export declare function InputGroup({ label, start, end, children, className }: {
+    label: string;
+    start?: ReactNode;
+    end?: ReactNode;
+    children: ReactElement<GroupControlProps>;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/input-otp.d.ts

@@ -0,0 +1,11 @@
+export interface InputOtpProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    label: string;
+    length?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    inputMode?: "numeric" | "text";
+    className?: string;
+}
+export declare function InputOtp({ value, onValueChange, label, length, disabled, invalid, inputMode, className, }: InputOtpProps): import("react").JSX.Element;

package/dist/components/input.d.ts

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+export type FieldDensity = "compact" | "default" | "touch";
+export type TextareaVariant = "outlined" | "bare";
+/** Bordered field with the balanced product density. */
+export declare const fieldInputClass: string;
+export declare const fieldTextareaClass: string;
+export declare const Input: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    density?: FieldDensity;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    variant?: TextareaVariant;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/item.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare function ItemList({ label, children, className }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Item({ className, density, ...props }: HTMLAttributes<HTMLLIElement> & {
+    density?: "compact" | "touch";
+}): import("react").JSX.Element;
+export declare function ItemMedia({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function ItemContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ItemTitle({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function ItemDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function ItemMeta({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ItemAction({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare function KbdGroup({ label, children, className }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/line-chart.d.ts

@@ -0,0 +1,12 @@
+export declare function LineChart({ current, previous, width, height, ariaLabel, }: {
+    current: number[];
+    previous?: number[];
+    width?: number;
+    height?: number;
+    ariaLabel: string;
+}): import("react").JSX.Element;
+/** Donut with a Rust stroke — the canonical warm-card visualization. */
+export declare function Donut({ pct, size }: {
+    pct: number;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/components/listbox.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ListboxProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    children: ReactNode;
+}
+export declare function Listbox({ label, className, children, ...props }: ListboxProps): import("react").JSX.Element;
+export interface ListboxOptionProps extends HTMLAttributes<HTMLElement> {
+    selected: boolean;
+    disabled?: boolean;
+    asChild?: boolean;
+    children: ReactNode;
+}
+export declare function ListboxOption({ selected, disabled, asChild, className, children, ...props }: ListboxOptionProps): import("react").JSX.Element;

package/dist/components/live-value.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type LiveValueDirection = "up" | "down";
+export interface LiveValueProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Raw numeric value used only for direction comparison. */
+    value?: number | null;
+    children: ReactNode;
+}
+/**
+ * Stable live-number presentation that briefly signals movement before
+ * returning to the caller's normal text color. Initial and invalid values do
+ * not flash; repeated ticks in the same direction restart the animation.
+ */
+export declare function LiveValue({ value, children, className, ...props }: LiveValueProps): import("react").JSX.Element;

package/dist/components/modal.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+type AccessibleDialogName = {
+    title: string;
+    ariaLabel?: string;
+} | {
+    title?: undefined;
+    ariaLabel: string;
+};
+export type ModalProps = AccessibleDialogName & {
+    open: boolean;
+    onClose: () => void;
+    closeLabel?: string;
+    children: ReactNode;
+    /** Sticky action area pinned below the scrollable body. */
+    footer?: ReactNode;
+    /** Desktop width: `sm` 420px, `command` 680px, `lg` 820px, or `xl` 720px. */
+    size?: "sm" | "command" | "lg" | "xl" | "wide" | "full";
+    /** Render children straight into the panel (no title/padding) so the caller
+     * owns the internal chrome. `title` remains the accessible name unless an
+     * explicit `ariaLabel` is supplied. */
+    bare?: boolean;
+    sheetUntilPx?: number;
+    placement?: "responsive" | "center" | "bottom";
+    rootClassName?: string;
+    panelClassName?: string;
+};
+/**
+ * Agent Factory modal primitive with one responsive behavior:
+ * - **Mobile** (`<sm`): bottom sheet — full-width, pinned to the bottom edge,
+ *   rounded top, respects the safe-area inset.
+ *   **Desktop**: centered dialog card with the overlay radius token.
+ * AnimatePresence drives the scrim fade + panel rise (motion tokens, so it
+ * respects reduced-motion). Built-in a11y: role/aria-modal, Esc to close,
+ * scrim-click to close, body scroll-lock, focus moves into the dialog on open
+ * and is restored on close. Token-only styling — no raw hex, no borders >1px.
+ *
+ * Compose content with the page's own elements; this only owns the chrome
+ * (overlay, panel, optional title + close button).
+ */
+export declare function Modal({ open, onClose, title, ariaLabel, closeLabel, children, footer, size, bare, 
+/** Viewport width (px) at which the modal becomes a centered card; below stays bottom sheet. */
+sheetUntilPx, placement, rootClassName, panelClassName, }: ModalProps): import("react").ReactPortal | null;
+export {};

package/dist/components/multi-select.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export interface MultiSelectOption<T extends string> {
+    value: T;
+    label: string;
+    meta?: ReactNode;
+    disabled?: boolean;
+}
+export declare function MultiSelect<T extends string>({ value, options, onValueChange, label, valueLabel, }: {
+    value: T[];
+    options: readonly MultiSelectOption<T>[];
+    onValueChange: (value: T[]) => void;
+    label: string;
+    valueLabel: (selected: readonly MultiSelectOption<T>[]) => ReactNode;
+}): import("react").JSX.Element;

package/dist/components/native-select.d.ts

@@ -0,0 +1,12 @@
+import type { SelectHTMLAttributes } from "react";
+export interface NativeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "onChange"> {
+    label: string;
+    options: readonly NativeSelectOption[];
+    onChange: (value: string) => void;
+}
+export declare function NativeSelect({ label, options, onChange, className, ...props }: NativeSelectProps): import("react").JSX.Element;