tensile 0.1.0

package/dist/Sheet.d.ts

@@ -0,0 +1,12 @@
+type SheetProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    side: "bottom" | "left" | "right";
+    header: React.ReactNode;
+    children: React.ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+};
+export declare function Sheet({ open, onOpenChange, side, header, children, className, ...label }: SheetProps): import("react").JSX.Element;
+export {};

package/dist/SliderTrack.d.ts

@@ -0,0 +1,18 @@
+type SliderTrackProps = {
+    value: [number] | [number, number];
+    onValueChange: (index: number, value: number) => void;
+    min: number;
+    max: number;
+    step: number;
+    labels: string[];
+    formatValue: (value: number) => string;
+    id?: string;
+    labelledBy?: string;
+    describedBy?: string;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function SliderTrack({ className, ...props }: SliderTrackProps): import("react").JSX.Element;
+export {};

package/dist/calendar.d.ts

@@ -0,0 +1,12 @@
+export type DateRange = {
+    start: string;
+    end: string;
+};
+export declare function toDate(day: string): Date;
+export declare function toDay(date: Date): string;
+export declare function addMonths(date: Date, months: number): Date;
+export declare function monthDays(date: Date, firstDayOfWeek: number): string[];
+export declare function keyboardDay(day: string, key: string, firstDayOfWeek: number): string | undefined;
+export declare function clampDay(day: string, min?: string, max?: string): string;
+export declare function orderedRange(first: string, second: string): DateRange;
+export declare function isInRange(day: string, range: DateRange): boolean;

package/dist/color.d.ts

@@ -0,0 +1,16 @@
+type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function hexToRgb(hex: string): Rgb;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+export declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+export declare function parseHex(text: string): string | null;
+export {};

package/dist/components/actions/ActionMenu.d.ts

@@ -0,0 +1,12 @@
+import { type MenuAction } from "../../Menu";
+export type ActionMenuProps = {
+    actions: MenuAction[];
+    onAction: (action: MenuAction) => void;
+    label?: string;
+    menuLabel?: string;
+    trigger?: React.ReactNode;
+    /** `sm` is the 32 px trigger for dense rows, e.g. an icon trigger in a table. */
+    size?: "md" | "sm";
+    className?: string;
+};
+export declare function ActionMenu({ actions, onAction, label, menuLabel, trigger, size, className }: ActionMenuProps): import("react").JSX.Element;

package/dist/components/actions/Button.d.ts

@@ -0,0 +1,12 @@
+export type ButtonProps = React.ComponentProps<"button"> & {
+    children: React.ReactNode;
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "md" | "sm";
+};
+export declare const base = "inline-flex items-center justify-center whitespace-nowrap rounded-control font-medium outline-offset-2 focus-visible:outline-2 focus-visible:outline-focus enabled:press disabled:opacity-40";
+export declare const variants: {
+    primary: string;
+    secondary: string;
+    ghost: string;
+};
+export declare function Button({ children, variant, size, type, className, ...props }: ButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+type Command = {
+    label: string;
+    icon?: React.ReactNode;
+};
+export type CommandPaletteProps = {
+    commands: Command[];
+    onSelect: (command: Command) => void;
+    label?: string;
+    placeholder?: string;
+    listLabel?: string;
+    emptyText?: string;
+    className?: string;
+};
+export declare function CommandPalette({ commands, onSelect, label, placeholder, listLabel, emptyText, className, }: CommandPaletteProps): import("react").JSX.Element;
+export {};

package/dist/components/actions/CopyButton.d.ts

@@ -0,0 +1,8 @@
+export type CopyButtonProps = {
+    /** Text written to the clipboard. */
+    value: string;
+    label?: string;
+    copiedLabel?: string;
+    className?: string;
+};
+export declare function CopyButton({ value, label, copiedLabel, className }: CopyButtonProps): import("react").JSX.Element;

package/dist/components/actions/HoldButton.d.ts

@@ -0,0 +1,11 @@
+export type HoldButtonProps = {
+    done: boolean;
+    /** Called when the fill reaches the end; set `done` to show the check. */
+    onDone: () => void;
+    children?: string;
+    doneLabel?: string;
+    /** How long to hold, in ms. */
+    duration?: number;
+    className?: string;
+};
+export declare function HoldButton({ done, onDone, children, doneLabel, duration, className, }: HoldButtonProps): import("react").JSX.Element;

package/dist/components/actions/IconButton.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from "./Button";
+export type IconButtonProps = ButtonProps & {
+    label: string;
+};
+export declare function IconButton({ label, children, variant, size, type, className, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/actions/MorphButton.d.ts

@@ -0,0 +1,6 @@
+export type MorphButtonProps = Omit<React.ComponentProps<"button">, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> & {
+    status: "idle" | "loading" | "success";
+    loadingLabel?: string;
+    successLabel?: string;
+};
+export declare function MorphButton({ status, children, loadingLabel, successLabel, type, disabled, className, "aria-label": label, ...props }: MorphButtonProps): import("react").JSX.Element;

package/dist/components/actions/SelectionBar.d.ts

@@ -0,0 +1,12 @@
+export type SelectionBarProps = {
+    /** The number of selected items; 0 hides the bar. */
+    count: number;
+    onClear: () => void;
+    /** The actions, e.g. ghost Buttons. */
+    children: React.ReactNode;
+    label?: string;
+    countLabel?: (count: number) => string;
+    clearLabel?: string;
+    className?: string;
+};
+export declare function SelectionBar({ count, onClear, children, label, countLabel, clearLabel, className, }: SelectionBarProps): import("react").JSX.Element;

package/dist/components/actions/SwipeButton.d.ts

@@ -0,0 +1,9 @@
+export type SwipeButtonProps = {
+    /** The done state. Set it to true in `onConfirm`, and back to false to let the user swipe again. */
+    confirmed: boolean;
+    onConfirm: () => void;
+    label?: string;
+    confirmedLabel?: string;
+    className?: string;
+};
+export declare function SwipeButton({ confirmed, onConfirm, label, confirmedLabel, className, }: SwipeButtonProps): import("react").JSX.Element;

package/dist/components/actions/Toolbar.d.ts

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

package/dist/components/data-display/Avatar.d.ts

@@ -0,0 +1,14 @@
+export type AvatarProps = {
+    /** The accessible name, and the source of the initials. */
+    name: string;
+    src?: string;
+    /** 24, 32 or 44 px. */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+export declare const sizes: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare function Avatar({ name, src, size, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/data-display/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+export type AvatarGroupProps = {
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    /** How many avatars show before the rest collapse into a "+N" circle. */
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    /** Accessible name of the list. */
+    label?: string;
+    /** Accessible name of the "+N" circle. */
+    moreLabel?: (count: number) => string;
+    className?: string;
+};
+export declare function AvatarGroup({ people, max, size, label, moreLabel, className, }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/data-display/BarChart.d.ts

@@ -0,0 +1,13 @@
+type Bar = {
+    label: string;
+    value: number;
+};
+export type BarChartProps = {
+    data: Bar[];
+    formatValue?: (value: number) => string;
+    /** Accessible summary of the chart. */
+    label?: string;
+    className?: string;
+};
+export declare function BarChart({ data, formatValue, label, className, }: BarChartProps): import("react").JSX.Element;
+export {};

package/dist/components/data-display/DataTable.d.ts

@@ -0,0 +1,32 @@
+import type { MenuAction } from "../../Menu";
+import { type TableProps, type TableSort } from "./Table";
+export type DataTableProps<Row> = Omit<TableProps<Row>, "columns" | "sort"> & {
+    columns: (TableProps<Row>["columns"][number] & {
+        sortable?: boolean;
+    })[];
+    sort: TableSort | null;
+    onSortChange: (sort: TableSort) => void;
+    /** Keys of the selected rows (from `rowKey`), on every page. */
+    selection: string[];
+    onSelectionChange: (selection: string[]) => void;
+    /** Current page, from 1 to `pageCount`. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** The actions in each row's menu; without it, there is no actions column. */
+    rowActions?: (row: Row) => MenuAction[];
+    onRowAction?: (row: Row, action: MenuAction) => void;
+    emptyText?: string;
+    selectAllLabel?: string;
+    selectRowLabel?: (row: Row) => string;
+    /** Describes the sortable column headers. */
+    sortLabel?: string;
+    /** The actions column's header, for screen readers. */
+    actionsLabel?: string;
+    rowActionsLabel?: (row: Row) => string;
+    paginationLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    pageLabel?: (page: number) => string;
+};
+export declare function DataTable<Row>({ columns, rows, rowKey, caption, sort, onSortChange, selection, onSelectionChange, page, pageCount, onPageChange, loading, rowActions, onRowAction, emptyText, empty, selectAllLabel, selectRowLabel, sortLabel, actionsLabel, rowActionsLabel, paginationLabel, previousPageLabel, nextPageLabel, pageLabel, className, }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/components/data-display/DescriptionList.d.ts

@@ -0,0 +1,8 @@
+export type DescriptionListProps = {
+    items: {
+        label: string;
+        value: React.ReactNode;
+    }[];
+    className?: string;
+};
+export declare function DescriptionList({ items, className }: DescriptionListProps): import("react").JSX.Element;

package/dist/components/data-display/DonutChart.d.ts

@@ -0,0 +1,17 @@
+type Segment = {
+    label: string;
+    value: number;
+};
+export type DonutChartProps = {
+    data: Segment[];
+    formatValue?: (value: number) => string;
+    /** Accessible summary of the chart. */
+    label?: string;
+    /** Shown in the center above the total. */
+    totalLabel?: string;
+    /** Read out for a segment, given its label and formatted value. */
+    segmentLabel?: (label: string, value: string) => string;
+    className?: string;
+};
+export declare function DonutChart({ data, formatValue, label, totalLabel, segmentLabel, className, }: DonutChartProps): import("react").JSX.Element;
+export {};

package/dist/components/data-display/Icon.d.ts

@@ -0,0 +1,9 @@
+export type IconProps = {
+    /** Shapes on a 24 × 24 grid, e.g. `<path d="…" />`. */
+    children: React.ReactNode;
+    /** Rendered size in px. The stroke follows it, so every line renders at 1.5 px. */
+    size?: number;
+    className?: string;
+};
+/** A line icon in the current text color, hidden from screen readers: the control around it carries the name. */
+export declare function Icon({ children, size, className }: IconProps): import("react").JSX.Element;

package/dist/components/data-display/Kbd.d.ts

@@ -0,0 +1,2 @@
+export type KbdProps = React.ComponentProps<"kbd">;
+export declare function Kbd({ className, ...props }: KbdProps): import("react").JSX.Element;

package/dist/components/data-display/LineChart.d.ts

@@ -0,0 +1,13 @@
+type Point = {
+    label: string;
+    value: number;
+};
+export type LineChartProps = {
+    data: Point[];
+    formatValue?: (value: number) => string;
+    /** Accessible summary of the chart. */
+    label?: string;
+    className?: string;
+};
+export declare function LineChart({ data, formatValue, label, className, }: LineChartProps): import("react").JSX.Element;
+export {};

package/dist/components/data-display/List.d.ts

@@ -0,0 +1,16 @@
+export type ListProps = {
+    items: {
+        id: string;
+        title: string;
+        description?: React.ReactNode;
+        leading?: React.ReactNode;
+        trailing?: React.ReactNode;
+    }[];
+    /** Names the list when no visible heading does. */
+    label?: string;
+    className?: string;
+};
+export declare function ListContent({ item }: {
+    item: ListProps["items"][number];
+}): import("react").JSX.Element;
+export declare function List({ items, label, className }: ListProps): import("react").JSX.Element;

package/dist/components/data-display/NumberTicker.d.ts

@@ -0,0 +1,6 @@
+export type NumberTickerProps = {
+    value: number;
+    format?: (value: number) => string;
+    className?: string;
+};
+export declare function NumberTicker({ value, format, className }: NumberTickerProps): import("react").JSX.Element;

package/dist/components/data-display/StatTile.d.ts

@@ -0,0 +1,15 @@
+export type StatTileProps = {
+    value: number;
+    /** Change as a fraction: 0.12 is up 12%, -0.04 is down 4%. */
+    change: number;
+    label?: string;
+    formatValue?: (value: number) => string;
+    /** Gets the signed change; the default shows only its size. */
+    formatChange?: (change: number) => string;
+    /** Read out instead of the up arrow, given the formatted change. */
+    upLabel?: (change: string) => string;
+    /** Read out instead of the down arrow, given the formatted change. */
+    downLabel?: (change: string) => string;
+    className?: string;
+};
+export declare function StatTile({ value, change, label, formatValue, formatChange, upLabel, downLabel, className, }: StatTileProps): import("react").JSX.Element;

package/dist/components/data-display/Table.d.ts

@@ -0,0 +1,27 @@
+export type TableSort = {
+    key: string;
+    direction: "ascending" | "descending";
+};
+export type TableProps<Row> = {
+    columns: {
+        key: string;
+        header: React.ReactNode;
+        /** The cell's content; without it, the cell shows `row[key]`. Cells keep to one line unless their content sets `whitespace-normal`. */
+        cell?: (row: Row) => React.ReactNode;
+        align?: "start" | "end";
+        /** The column's cells are row headers, which name their rows. */
+        rowHeader?: boolean;
+    }[];
+    rows: Row[];
+    rowKey: (row: Row) => string;
+    /** Names the table for screen readers; not shown. */
+    caption: string;
+    /** Marks the sorted column's header with `aria-sort`. */
+    sort?: TableSort | null;
+    /** Shows placeholder rows instead of `rows` and marks the table busy. */
+    loading?: boolean;
+    /** Fills one row spanning every column when there are no rows. */
+    empty?: React.ReactNode;
+    className?: string;
+};
+export declare function Table<Row>({ columns, rows, rowKey, caption, sort, loading, empty, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/data-display/Tag.d.ts

@@ -0,0 +1,9 @@
+export type TagProps = {
+    label: string;
+    icon?: React.ReactNode;
+    /** Shows a remove button beside the label that calls it. */
+    onRemove?: () => void;
+    removeLabel?: (label: string) => string;
+    className?: string;
+};
+export declare function Tag({ label, icon, onRemove, removeLabel, className, }: TagProps): import("react").JSX.Element;

package/dist/components/data-display/Timeline.d.ts

@@ -0,0 +1,13 @@
+export type TimelineProps = {
+    items: {
+        id: string;
+        title: string;
+        description?: React.ReactNode;
+        time?: string;
+        icon?: React.ReactNode;
+    }[];
+    /** Names the list when no visible heading does. */
+    label?: string;
+    className?: string;
+};
+export declare function Timeline({ items, label, className }: TimelineProps): import("react").JSX.Element;

package/dist/components/data-display/TreeView.d.ts

@@ -0,0 +1,18 @@
+type Item = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    children?: Item[];
+};
+export type TreeViewProps = {
+    items: Item[];
+    value: string | null;
+    onValueChange: (value: string) => void;
+    /** Values of the open parents. */
+    expanded: string[];
+    onExpandedChange: (expanded: string[]) => void;
+    label?: string;
+    className?: string;
+};
+export declare function TreeView({ items, value, onValueChange, expanded, onExpandedChange, label, className }: TreeViewProps): import("react").JSX.Element;
+export {};

package/dist/components/feedback/Alert.d.ts

@@ -0,0 +1,7 @@
+export type AlertProps = {
+    status: "info" | "warning" | "success";
+    title?: string;
+    description?: string;
+    className?: string;
+};
+export declare function Alert({ status, title, description, className, }: AlertProps): import("react").JSX.Element;

package/dist/components/feedback/Badge.d.ts

@@ -0,0 +1,9 @@
+export type BadgeProps = {
+    /** A count, or null for something new without a number. 0 hides the badge. */
+    count: number | null;
+    format?: (value: number) => string;
+    /** Text for screen readers. */
+    label?: (count: number | null) => string;
+    className?: string;
+};
+export declare function Badge({ count, format, label, className, }: BadgeProps): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+export type EmptyStateProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+};
+export declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/feedback/LoadingState.d.ts

@@ -0,0 +1,6 @@
+export type LoadingStateProps = {
+    label?: string;
+    description?: React.ReactNode;
+    className?: string;
+};
+export declare function LoadingState({ label, description, className }: LoadingStateProps): import("react").JSX.Element;

package/dist/components/feedback/NotificationList.d.ts

@@ -0,0 +1,21 @@
+export type NotificationListProps = {
+    notifications: {
+        id: string;
+        title: string;
+        description?: React.ReactNode;
+        time: React.ReactNode;
+        read?: boolean;
+        avatar?: {
+            name: string;
+            src?: string;
+        };
+    }[];
+    onRead: (id: string) => void;
+    onDismiss: (id: string) => void;
+    label?: string;
+    emptyText?: string;
+    readLabel?: (title: string) => string;
+    dismissLabel?: (title: string) => string;
+    className?: string;
+};
+export declare function NotificationList({ notifications, onRead, onDismiss, label, emptyText, readLabel, dismissLabel, className, }: NotificationListProps): import("react").JSX.Element;

package/dist/components/feedback/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+export type ProgressBarProps = {
+    /** 0..1, or null while the length is unknown. */
+    value: number | null;
+    label?: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+};
+export declare function ProgressBar({ value, label, formatValue, className, }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/feedback/ProgressRing.d.ts

@@ -0,0 +1,10 @@
+export type ProgressRingProps = {
+    /** 0..1 */
+    value: number;
+    label?: string;
+    formatValue?: (value: number) => string;
+    /** Read out instead of the value once it reaches 1. */
+    doneLabel?: string;
+    className?: string;
+};
+export declare function ProgressRing({ value, label, formatValue, doneLabel, className, }: ProgressRingProps): import("react").JSX.Element;

package/dist/components/feedback/Skeleton.d.ts

@@ -0,0 +1,5 @@
+export type SkeletonProps = {
+    /** Size and radius, e.g. `h-4 w-48 rounded-full`. */
+    className?: string;
+};
+export declare function Skeleton({ className }: SkeletonProps): import("react").JSX.Element;

package/dist/components/feedback/Spinner.d.ts

@@ -0,0 +1,7 @@
+export type SpinnerProps = {
+    /** Rendered size in px. The stroke follows it, so the arc renders at 1.5 px. */
+    size?: number;
+    className?: string;
+};
+/** A turning arc in the current text color. It's decorative: give the busy control or region its own name or status text. It stops turning when `--motion-duration-scale` is 0. */
+export declare function Spinner({ size, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/feedback/StatusBadge.d.ts

@@ -0,0 +1,6 @@
+export type StatusBadgeProps = {
+    status: "info" | "success" | "warning" | "neutral";
+    label: string;
+    className?: string;
+};
+export declare function StatusBadge({ status, label, className }: StatusBadgeProps): import("react").JSX.Element;

package/dist/components/feedback/Toast.d.ts

@@ -0,0 +1,6 @@
+export type ToastProps = {
+    status: "loading" | "success";
+    children?: string;
+    className?: string;
+};
+export declare function Toast({ status, children, className }: ToastProps): import("react").JSX.Element;

package/dist/components/feedback/ToastStack.d.ts

@@ -0,0 +1,13 @@
+export type ToastStackProps = {
+    /** Oldest first: the last toast is in front. */
+    toasts: {
+        id: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    onDismiss: (id: string) => void;
+    label?: string;
+    dismissLabel?: (label: string) => string;
+    className?: string;
+};
+export declare function ToastStack({ toasts, onDismiss, label, dismissLabel, className, }: ToastStackProps): import("react").JSX.Element;

package/dist/components/inputs/Checkbox.d.ts

@@ -0,0 +1,7 @@
+export type CheckboxProps = Omit<React.ComponentProps<"input">, "type" | "checked" | "onChange" | "children"> & {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label?: string;
+    indeterminate?: boolean;
+};
+export declare function Checkbox({ checked, onCheckedChange, label, indeterminate, disabled, className, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/inputs/CheckboxGroup.d.ts

@@ -0,0 +1,15 @@
+export type CheckboxGroupProps = {
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    label?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function CheckboxGroup({ options, value, onValueChange, label, id, name, disabled, className, }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/components/inputs/ColorPicker.d.ts

@@ -0,0 +1,16 @@
+export type ColorPickerProps = {
+    /** A lowercase "#rrggbb" color. */
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    areaLabel?: string;
+    hueLabel?: string;
+    hexLabel?: string;
+    /** The area knob's value text, from saturation and brightness between 0 and 1. */
+    formatArea?: (saturation: number, brightness: number) => string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function ColorPicker({ value, onValueChange, label, areaLabel, hueLabel, hexLabel, formatArea, id, name, disabled, className, }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/inputs/ColorSwatches.d.ts

@@ -0,0 +1,16 @@
+export type ColorSwatchesProps = {
+    options: {
+        value: string;
+        label: string;
+        color: string;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function ColorSwatches({ options, value, onValueChange, label, id, name, disabled, required, className, }: ColorSwatchesProps): import("react").JSX.Element;

package/dist/components/inputs/Combobox.d.ts

@@ -0,0 +1,18 @@
+export type ComboboxProps = {
+    options: {
+        value: string;
+        label: string;
+        icon?: React.ReactNode;
+    }[];
+    value: string | null;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    emptyText?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare function Combobox({ options, value, onValueChange, placeholder, label, emptyText, id, name, disabled, required, className, }: ComboboxProps): import("react").JSX.Element;