@ceebee/ui 0.3.3 → 0.5.0

package/dist/client.d.ts

@@ -148,7 +148,7 @@ interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
     /** Marks invalid when used outside a Field; inside one, the Field decides. */
     invalid?: boolean;
 }
-declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+declare const Input: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     invalid?: boolean;
 }
@@ -208,10 +208,18 @@ interface RadioGroupProps<T extends string = string> {
     /** Names the group for assistive technology when it is not inside a Field. */
     label?: string;
     direction?: 'column' | 'row';
+    /**
+     * `segmented` draws the group as one track of adjoining cells instead of a
+     * list of dots. Appearance and geometry only — the role, the keyboard, and
+     * the value it reports are a radiogroup's either way (ADR 0014). Reach for it
+     * where the options are few enough to show at once, which is where a dropdown
+     * is the wrong control anyway.
+     */
+    variant?: 'list' | 'segmented';
     disabled?: boolean;
     className?: string;
 }
-declare function RadioGroup<T extends string = string>({ options, value, defaultValue, onValueChange, name, label, direction, disabled, className, }: RadioGroupProps<T>): react.JSX.Element;
+declare function RadioGroup<T extends string = string>({ options, value, defaultValue, onValueChange, name, label, direction, variant, disabled, className, }: RadioGroupProps<T>): react.JSX.Element;
 interface SwitchProps {
     label: ReactNode;
     checked?: boolean;
@@ -231,26 +239,48 @@ interface ComboboxOption {
     value: string;
     label: string;
     description?: ReactNode;
+    disabled?: boolean;
 }
+/**
+ * Fetches the options for a query. Receiving one puts the AutoComplete in async mode:
+ * the built-in match is switched off, because whatever answered the query has
+ * already decided what matches and filtering the reply again would drop rows whose
+ * label does not happen to contain what was typed.
+ *
+ * The `signal` aborts when a newer query supersedes this one. Replies are also
+ * discarded by sequence, so a slow "a" landing after a fast "abc" cannot overwrite
+ * the newer list — the failure that makes an async picker show the wrong rows.
+ */
+type ComboboxLoader = (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;
 interface ComboboxProps {
-    items: ComboboxOption[];
+    /** The whole list, filtered in the browser. Omit when `loadItems` is given. */
+    items?: ComboboxOption[];
+    /** Asks somewhere else for the options instead of holding them all (ADR 0006). */
+    loadItems?: ComboboxLoader;
+    /** How long typing has to stop before `loadItems` is asked. */
+    loadDelay?: number;
     value?: string | null;
     defaultValue?: string | null;
     onValueChange?: (value: string | null) => void;
     placeholder?: string;
     /** Shown when the query matches nothing. */
     emptyMessage?: ReactNode;
+    /** Shown while `loadItems` is outstanding. */
+    loadingMessage?: ReactNode;
+    /** Shown when `loadItems` rejects. */
+    errorMessage?: ReactNode;
     size?: Size;
     disabled?: boolean;
     invalid?: boolean;
     name?: string;
+    id?: string;
     className?: string;
 }
 /**
  * A Select you can type into. Reach for it past roughly a dozen options — below that, scanning a
  * list is faster than typing, and Select is the simpler component.
  */
-declare function Combobox({ items, value, defaultValue, onValueChange, placeholder, emptyMessage, size, disabled, invalid, name, className, }: ComboboxProps): react.JSX.Element;
+declare function AutoComplete({ items, loadItems, loadDelay, value, defaultValue, onValueChange, placeholder, emptyMessage, loadingMessage, errorMessage, size, disabled, invalid, name, id, className, }: ComboboxProps): react.JSX.Element;
 
 interface DateInputProps {
     value?: Date | null;
@@ -271,7 +301,7 @@ interface DateInputProps {
  * Typing and picking, both. Typing is what fast people do and what a date of birth needs; the
  * calendar is for "the second Tuesday" questions a text field cannot answer.
  */
-declare function DateInput({ value, defaultValue, onValueChange, min, max, format, weekStartsOn, size, disabled, invalid, placeholder, className, }: DateInputProps): react.JSX.Element;
+declare function DatePicker({ value, defaultValue, onValueChange, min, max, format, weekStartsOn, size, disabled, invalid, placeholder, className, }: DateInputProps): react.JSX.Element;
 
 /** Date arithmetic for the picker. Pure, and dealing only in local calendar days. */
 interface DayCell {
@@ -325,10 +355,10 @@ interface TimeInputProps {
     className?: string;
 }
 /**
- * The DateInput's sibling. Typing accepts what people actually type — `9`, `0930`, `9:30`,
+ * The DatePicker's sibling. Typing accepts what people actually type — `9`, `0930`, `9:30`,
  * `9pm` — and the list is a convenience on top, never the only way to answer.
  */
-declare function TimeInput({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, placeholder, className, }: TimeInputProps): react.JSX.Element;
+declare function TimePicker({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, placeholder, className, }: TimeInputProps): react.JSX.Element;
 
 /** File acceptance rules, kept pure: what gets rejected and why is worth asserting. */
 interface FileRules {
@@ -355,7 +385,7 @@ declare function partitionFiles(incoming: File[], existing: File[], rules: FileR
 /** The " — PDF up to 5 MB" tail under the drop zone. Empty when there is nothing to say. */
 declare function describeAccept(rules: FileRules): string;
 
-interface FileDropProps extends FileRules {
+interface UploadProps extends FileRules {
     onFilesChange: (files: File[]) => void;
     files?: File[];
     /** Rejections are surfaced rather than swallowed — a file that vanishes silently reads as a bug. */
@@ -367,7 +397,7 @@ interface FileDropProps extends FileRules {
     children?: ReactNode;
     className?: string;
 }
-declare function FileDrop({ onFilesChange, files, onReject, accept, maxSize, maxFiles, multiple, disabled, children, className, }: FileDropProps): react.JSX.Element;
+declare function Upload({ onFilesChange, files, onReject, accept, maxSize, maxFiles, multiple, disabled, children, className, }: UploadProps): react.JSX.Element;
 
 /** Numeric input arithmetic, kept pure so the awkward cases are asserted, not hoped for. */
 interface NumberBounds {
@@ -404,7 +434,7 @@ interface NumberInputProps extends NumberBounds {
  * A text input that speaks numbers, not `<input type="number">`: that one scrolls its value
  * away under the wheel, accepts 'e' and '+', and formats inconsistently across locales.
  */
-declare function NumberInput({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, name, placeholder, suffix, className, }: NumberInputProps): react.JSX.Element;
+declare function InputNumber({ value, defaultValue, onValueChange, min, max, step, size, disabled, invalid, name, placeholder, suffix, className, }: NumberInputProps): react.JSX.Element;
 
 interface DialogProps {
     open?: boolean;
@@ -426,9 +456,28 @@ interface DialogProps {
  * (ADR 0003). Enter and exit are CSS transitions driven by Base UI's own state attributes,
  * because Base UI owns this element's mount lifecycle — motion is used where we own it.
  */
-declare function Dialog({ open, defaultOpen, onOpenChange, title, description, children, footer, size, placement, trigger, className, }: DialogProps): react.JSX.Element;
+declare function Modal({ open, defaultOpen, onOpenChange, title, description, children, footer, size, placement, trigger, className, }: DialogProps): react.JSX.Element;
 declare const DialogClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    /** The element that opens it. Omit for a fully controlled drawer. */
+    trigger?: ReactNode;
+    className?: string;
+}
+/**
+ * Modal navigation or task panel anchored to the inline end edge. Base UI supplies
+ * focus trapping, dismissal, scroll locking, and accessible dialog semantics.
+ */
+declare function Drawer({ open, defaultOpen, onOpenChange, title, description, children, footer, trigger, className, }: DrawerProps): react.JSX.Element;
+declare const DrawerClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.AlertDialogCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
 /** Command matching and ranking. Pure — search that ranks badly is a bug you can only see in a test. */
 interface Command {
     id: string;
@@ -515,9 +564,70 @@ interface TooltipProps {
     /** Plain text. A tooltip that needs markup is a Popover — screen readers read this as a label. */
     label: string;
     side?: Side;
+    align?: Align;
+    /** Distance from the anchor, in px. */
+    sideOffset?: number;
+    showArrow?: boolean;
     delay?: number;
 }
-declare function Tooltip({ children, label, side, delay }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ children, label, side, align, sideOffset, showArrow, delay, }: TooltipProps): react.JSX.Element;
+
+interface TagProps {
+    children: ReactNode;
+    tone?: Tone;
+    variant?: 'soft' | 'solid' | 'outline';
+    size?: 'sm' | 'md';
+    icon?: ReactNode;
+    /** Makes the tag itself pressable — filtering by it, or opening what it names. */
+    onClick?: () => void;
+    /** Whether a pressable tag is currently on. Reported as `aria-pressed`. */
+    pressed?: boolean;
+    /** Adds a control that takes the tag away. Not the same as pressing it. */
+    onClose?: () => void;
+    /** Render something else in the tag's place — a router's own Link. */
+    render?: ReactElement;
+    className?: string;
+}
+/**
+ * A label you can do something to.
+ *
+ * `Badge` is the one you cannot: it says what something is and nothing more, and
+ * its own note says that a label which can be pressed or removed is this instead.
+ * That is the whole boundary between them — not the size, not the colour, but
+ * whether there is anything to press (ADR 0014). They share the look and differ
+ * in what they are.
+ *
+ * Pressing and removing are also two different things, so they are two props. A
+ * tag that filters by its own value and a tag that takes itself off a list are
+ * not the same gesture, and one component that guessed which you meant would be
+ * wrong half the time.
+ */
+declare function Tag({ children, tone, variant, size, icon, onClick, pressed, onClose, render, className, }: TagProps): react.JSX.Element;
+
+interface RateProps {
+    /** 0 means nothing chosen, which is different from choosing the lowest score. */
+    value: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    size?: number;
+    /** Shows a score without offering to change it. */
+    readOnly?: boolean;
+    /** Names the group when it is not inside a Field. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A score out of a few, set by pressing one of them.
+ *
+ * A radiogroup, not a row of buttons: exactly one of a small visible set is the
+ * definition of one, and it buys the arrow keys and the announced position for
+ * free. Read-only it is not a group at all — there is nothing to choose, so it
+ * is an image with a label saying what it shows.
+ *
+ * Pressing the current score again clears it. Nought stars and one star are
+ * different answers, and without this there is no way back to the first.
+ */
+declare function Rate({ value, onValueChange, count, size, readOnly, label, className, }: RateProps): react.JSX.Element;
 
 interface AlertProps {
     title?: ReactNode;
@@ -596,15 +706,25 @@ interface MenuItem {
     checked?: boolean;
     onSelect?: () => void;
 }
-interface DropdownMenuProps {
-    trigger: ReactElement;
+interface MenuSection {
+    label?: ReactNode;
     items: MenuItem[];
+}
+interface DropdownMenuBaseProps {
+    trigger: ReactElement;
     align?: 'start' | 'center' | 'end';
     side?: 'top' | 'right' | 'bottom' | 'left';
     className?: string;
 }
+type DropdownMenuProps = DropdownMenuBaseProps & ({
+    items: MenuItem[];
+    sections?: never;
+} | {
+    items?: never;
+    sections: MenuSection[];
+});
 /** Typeahead, roving focus, and dismissal are Base UI's; the surface and the rhythm are ours. */
-declare function DropdownMenu({ trigger, items, align, side, className }: DropdownMenuProps): react.JSX.Element;
+declare function Dropdown({ trigger, items, sections, align, side, className }: DropdownMenuProps): react.JSX.Element;
 
 interface NavItem {
     label: ReactNode;
@@ -637,7 +757,7 @@ interface SidebarProps {
  */
 declare function Sidebar({ sections, header, footer, collapsed, onCollapsedChange, className }: SidebarProps): react.JSX.Element;
 interface TopBarProps {
-    /** Page title, or a Breadcrumbs trail. */
+    /** Page title, or a Breadcrumb trail. */
     title?: ReactNode;
     subtitle?: ReactNode;
     /** Search, filters — anything that belongs in the middle. */
@@ -697,7 +817,7 @@ interface DataTableProps<Row> {
     sort?: SortState | null;
     onSortChange?: (sort: SortState | null) => void;
     onRowClick?: (row: Row) => void;
-    /** Rendered in place of the body when there are no rows — an EmptyState, usually. */
+    /** Rendered in place of the body when there are no rows — an Empty, usually. */
     empty?: ReactNode;
     className?: string;
 }
@@ -705,8 +825,8 @@ interface DataTableProps<Row> {
  * A table, not a grid: no virtualisation, no column resizing, no editing. It renders rows and
  * sorts by a column, and anything past that is a product feature rather than a design system one.
  */
-declare function DataTable<Row>({ columns, rows, rowKey, label, sort, onSortChange, onRowClick, empty, className, }: DataTableProps<Row>): react.JSX.Element;
-declare namespace DataTable {
+declare function Table<Row>({ columns, rows, rowKey, label, sort, onSortChange, onRowClick, empty, className, }: DataTableProps<Row>): react.JSX.Element;
+declare namespace Table {
     var Skeleton: typeof DataTableSkeleton;
 }
 interface DataTableSkeletonProps {
@@ -929,4 +1049,4 @@ interface StaggerProps {
 /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
 declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type Align, type AutoplayConditions, Button, type ButtonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, DataTable, type DataTableProps, type DataTableSkeletonProps, DateInput, type DateInputProps, type DayCell, Dialog, DialogClose, type DialogProps, DropdownMenu, type DropdownMenuProps, type DurationToken, Field, type FieldProps, FileDrop, type FileDropProps, type FileRules, Image, type ImageProps, type Labels, LabelsProvider, type LabelsProviderProps, type MenuItem, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, NumberInput, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, type SortDirection, type SortState, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, TextInput, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, TimeInput, type TimeInputProps, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
+export { Alert, type AlertProps, type Align, AutoComplete, type AutoplayConditions, Button, type ButtonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, type Column, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, type DataTableProps, type DataTableSkeletonProps, type DateInputProps, DatePicker, type DayCell, DialogClose, type DialogProps, Drawer, DrawerClose, type DrawerProps, Dropdown, type DropdownMenuProps, type DurationToken, Field, type FieldProps, type FileRules, Image, type ImageProps, Input, InputNumber, type Labels, LabelsProvider, type LabelsProviderProps, type MenuItem, type MenuSection, Modal, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, Rate, type RateProps, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, type SortDirection, type SortState, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Table, Tabs, type TabsProps, Tag, type TagProps, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, type TimeInputProps, TimePicker, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, Upload, type UploadProps, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };