open-mcp-app-ui 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 /**
  * Shared types for open-mcp-app-ui.
@@ -140,6 +140,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: Size;
     /** Show a loading spinner and disable interaction. */
     loading?: boolean;
+    /**
+     * Custom spinner element shown when `loading` is true.
+     * Receives a ReactNode so callers can pass any SVG or component.
+     * Falls back to a built-in circle spinner when omitted.
+     */
+    loadingIcon?: ReactNode;
     /** Button content. */
     children: ReactNode;
 }
@@ -204,45 +210,72 @@ interface SelectOption {
     label?: string;
     /** Whether this option is disabled. */
     disabled?: boolean;
+    /** Secondary description text below the label. */
+    description?: string;
+}
+interface SelectOptionGroup {
+    /** Group label shown as the optgroup heading. */
+    label: string;
+    /** Options within this group. */
+    options: SelectOption[];
 }
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+/** Options can be flat or grouped. */
+type SelectOptions = SelectOption[] | SelectOptionGroup[];
+interface SelectProps {
     /** Label displayed above the select. */
     label?: string;
-    /** Options to display. */
-    options: SelectOption[];
-    /** Placeholder text shown as the first disabled option. */
+    /** Options to display. Supports flat arrays or grouped arrays. */
+    options: SelectOptions;
+    /** Controlled value. */
+    value?: string;
+    /** Called when the selection changes. */
+    onChange?: (value: string) => void;
+    /** Placeholder text when no value is selected. */
     placeholder?: string;
-    /** Error message. When set, the select shows an error style. */
+    /** Error message — shows error styling. */
     error?: string;
     /** Helper text displayed below the select. */
     helperText?: string;
     /** Select size. */
     size?: Size;
+    /** Expand to full width. */
+    block?: boolean;
+    /** Disables the select. */
+    disabled?: boolean;
+    /** ID for the trigger element. */
+    id?: string;
+    /** Additional CSS class. */
+    className?: string;
 }
 /**
- * Dropdown select with label and error handling.
+ * Custom dropdown select with keyboard navigation and check marks.
  *
  * @example
  * ```tsx
  * <Select
  *   label="Status"
- *   placeholder="Choose status..."
+ *   placeholder="Choose..."
+ *   value={status}
+ *   onChange={setStatus}
  *   options={[
  *     { value: "active", label: "Active" },
  *     { value: "archived", label: "Archived" },
  *   ]}
- *   onChange={(e) => setStatus(e.target.value)}
  * />
  * ```
  */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     /** Label displayed next to the checkbox. */
     label?: string;
 }
 /**
- * Accessible checkbox with optional label.
+ * Accessible checkbox with animated checkmark and optional label.
+ *
+ * Supports both controlled (`checked` + `onChange`) and uncontrolled
+ * (`defaultChecked`) usage. The visual state tracks the native input
+ * so animations stay in sync.
  *
  * @example
  * ```tsx
@@ -271,13 +304,307 @@ interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onC
  */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface RadioGroupProps {
+    /** Controlled selected value. */
+    value: string;
+    /** Called when the selection changes. */
+    onChange: (value: string) => void;
+    /** Accessible label for the group. */
+    "aria-label": string;
+    /** Layout direction of radio items. */
+    direction?: "row" | "col";
+    /** Disables the entire group. */
+    disabled?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Radio option group with animated selection indicator.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={size} onChange={setSize} aria-label="Size">
+ *   <RadioGroup.Item value="sm">Small</RadioGroup.Item>
+ *   <RadioGroup.Item value="md">Medium</RadioGroup.Item>
+ *   <RadioGroup.Item value="lg">Large</RadioGroup.Item>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>> & {
+    Item: typeof RadioGroupItem;
+};
+interface RadioGroupItemProps {
+    /** Option value. */
+    value: string;
+    /** Disables this individual item. */
+    disabled?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A single radio option within a RadioGroup.
+ * Uses a hidden native radio input for accessibility.
+ */
+declare function RadioGroupItem({ value, disabled: itemDisabled, className, children, }: RadioGroupItemProps): react_jsx_runtime.JSX.Element;
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Label displayed above the slider. */
+    label?: string;
+    /** Current value (controlled). */
+    value?: number;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Step increment. */
+    step?: number;
+    /** Show the current value next to the slider. */
+    showValue?: boolean;
+    /** Format function for the displayed value. */
+    formatValue?: (value: number) => string;
+    /** Helper text below the slider. */
+    helperText?: string;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * Range slider with optional label and value display.
+ *
+ * @example
+ * ```tsx
+ * <Slider label="Volume" value={vol} min={0} max={100} onChange={e => setVol(+e.target.value)} />
+ * <Slider label="Opacity" value={0.5} min={0} max={1} step={0.1} showValue />
+ * ```
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * TagInput — Multi-tag input with keyboard navigation and validation.
+ *
+ * Allows users to enter multiple values as "tags" via typing and pressing
+ * Enter (or a custom delimiter). Tags can be removed by clicking their
+ * close button or by pressing Backspace. Supports duplicate detection with
+ * a shake animation, custom validation, and max tag limits.
+ */
+interface Tag {
+    /** Tag display value. */
+    value: string;
+    /** Whether this tag passed validation. */
+    valid: boolean;
+}
+interface TagInputProps {
+    /** Label displayed above the input. */
+    label?: string;
+    /** Controlled tag list. */
+    value?: Tag[];
+    /** Default tags for uncontrolled mode. */
+    defaultValue?: Tag[];
+    /** Called when tags change. */
+    onChange?: (tags: Tag[]) => void;
+    /** Validation function — return false to mark a tag as invalid. */
+    validator?: (value: string) => boolean;
+    /** Characters that trigger tag creation (besides Enter). */
+    delimiters?: string[];
+    /** Maximum number of tags allowed. */
+    maxTags?: number;
+    /** Placeholder text when no tags are present. */
+    placeholder?: string;
+    /** Disables the input. */
+    disabled?: boolean;
+    /** Error message shown below the input. */
+    error?: string;
+    /** Helper text shown below the input. */
+    helperText?: string;
+    /** Size variant. */
+    size?: "sm" | "md" | "lg";
+    /** ID for the input element. */
+    id?: string;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * Multi-tag input with validation and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   label="Tags"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Add a tag..."
+ *   maxTags={5}
+ * />
+ * ```
+ */
+declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * DatePicker — Custom calendar dropdown for date selection.
+ *
+ * Replaces native <input type="date"> with a fully styled calendar
+ * popup that respects the MCP Apps spec CSS variables. The calendar
+ * opens below the trigger input and supports month/year navigation,
+ * min/max constraints, and keyboard interaction.
+ */
+interface DatePickerProps {
+    /** Label displayed above the input. */
+    label?: string;
+    /** Current date value (YYYY-MM-DD string). */
+    value?: string;
+    /** Called when the user selects a date. Receives YYYY-MM-DD string. */
+    onChange?: (value: string) => void;
+    /** Minimum selectable date (YYYY-MM-DD). */
+    min?: string;
+    /** Maximum selectable date (YYYY-MM-DD). */
+    max?: string;
+    /** Placeholder text shown when no date is selected. */
+    placeholder?: string;
+    /** Helper text below the input. */
+    helperText?: string;
+    /** Error message — replaces helperText and shows error styling. */
+    error?: string;
+    /** Disables the picker. */
+    disabled?: boolean;
+    /** Additional CSS class for the outer container. */
+    className?: string;
+    /** Input id for label association. */
+    id?: string;
+}
+/**
+ * Custom date picker with a calendar dropdown.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker label="Start date" value={date} onChange={setDate} />
+ * <DatePicker label="Birthday" min="1900-01-01" max="2010-12-31" />
+ * ```
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DateRangePicker — Dual custom calendar dropdowns for selecting a date range.
+ *
+ * Renders two DatePicker triggers (start / end) with coordinated min/max
+ * constraints so the end date can never precede the start date.
+ * Uses the same custom calendar dropdown as DatePicker for consistent styling.
+ */
+interface DateRangePickerProps {
+    /** Label displayed above the picker pair. */
+    label?: string;
+    /** Start date value (YYYY-MM-DD string). */
+    startDate?: string;
+    /** End date value (YYYY-MM-DD string). */
+    endDate?: string;
+    /** Called when either date changes. */
+    onChange: (range: {
+        startDate: string;
+        endDate: string;
+    }) => void;
+    /** Minimum selectable date for the start input. */
+    min?: string;
+    /** Maximum selectable date for the end input. */
+    max?: string;
+    /** Labels for the individual inputs. */
+    startLabel?: string;
+    endLabel?: string;
+    /** Placeholder text for inputs. */
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    /** Helper text below the picker. */
+    helperText?: string;
+    /** Error message — replaces helperText and shows error styling. */
+    error?: string;
+    /** Disables both inputs. */
+    disabled?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * Date range picker using two coordinated DatePicker calendars.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   label="Trip dates"
+ *   startDate={range.startDate}
+ *   endDate={range.endDate}
+ *   onChange={setRange}
+ * />
+ * ```
+ */
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ToggleGroupProps {
+    /** Currently selected value. */
+    value: string;
+    /** Called when a new option is selected. */
+    onChange: (value: string) => void;
+    /** Accessible label for the group. */
+    "aria-label": string;
+    /** Size variant. */
+    size?: "sm" | "md" | "lg";
+    /** Disable the entire group. */
+    disabled?: boolean;
+    /** Expand to full width with equal-width options. */
+    block?: boolean;
+    /** Fully rounded pill shape. */
+    pill?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Segmented toggle group with animated sliding indicator.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup value={view} onChange={setView} aria-label="View mode">
+ *   <ToggleGroup.Option value="grid">Grid</ToggleGroup.Option>
+ *   <ToggleGroup.Option value="list">List</ToggleGroup.Option>
+ * </ToggleGroup>
+ * ```
+ */
+declare const ToggleGroup: react.ForwardRefExoticComponent<ToggleGroupProps & react.RefAttributes<HTMLDivElement>> & {
+    Option: typeof ToggleGroupOption;
+};
+interface ToggleGroupOptionProps {
+    /** Option value. */
+    value: string;
+    /** Disable this individual option. */
+    disabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * A single option inside a ToggleGroup. This component exists purely
+ * for API ergonomics — the actual rendering is handled by the parent
+ * ToggleGroup which reads the Option's props.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup.Option value="grid">Grid</ToggleGroup.Option>
+ * ```
+ */
+declare function ToggleGroupOption(_props: ToggleGroupOptionProps): React.ReactElement | null;
+
+/** Visual style of the alert. */
+type AlertVariant = "outline" | "soft" | "solid";
 interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /** Semantic color variant. */
-    variant?: SemanticVariant;
+    /** Semantic color. */
+    color?: SemanticVariant;
+    /** Visual variant style. */
+    variant?: AlertVariant;
     /** Bold title displayed above the body text. */
     title?: string;
-    /** Alert body content. */
+    /** Alert body content / description. */
     children: ReactNode;
+    /** Actions rendered on the right (or below on small widths). */
+    actions?: ReactNode;
+    /** Force actions placement — by default it auto-detects. */
+    actionsPlacement?: "end" | "bottom";
+    /** Custom indicator/icon element. Set to false to hide. */
+    indicator?: ReactNode | false;
     /** Show a dismiss button. */
     dismissible?: boolean;
     /** Called when the dismiss button is clicked. */
@@ -288,12 +615,15 @@ interface AlertProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * ```tsx
- * <Alert variant="success" title="Saved">Your changes have been saved.</Alert>
- * <Alert variant="danger" dismissible>Something went wrong.</Alert>
- * <Alert variant="info">Tip: You can drag items to reorder.</Alert>
+ * <Alert color="success" title="Saved">Your changes have been saved.</Alert>
+ * <Alert color="danger" variant="solid" dismissible>Something went wrong.</Alert>
+ * <Alert color="info" variant="soft">Tip: You can drag items to reorder.</Alert>
+ * <Alert color="warning" variant="outline" actions={<Button size="sm">Retry</Button>}>
+ *   Connection lost.
+ * </Alert>
  * ```
  */
-declare const Alert: ({ variant, title, children, dismissible, onDismiss, className, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element | null;
+declare const Alert: ({ color, variant, title, children, actions, actionsPlacement, indicator, dismissible, onDismiss, className, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element | null;
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Semantic color variant. */
@@ -313,6 +643,125 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare const Badge: ({ variant, children, className, ...rest }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
+interface MenuProps {
+    children: ReactNode;
+    /** Additional CSS class for the container. */
+    className?: string;
+}
+/**
+ * Dropdown menu container. Compose with Menu.Trigger, Menu.Content,
+ * Menu.Item, and Menu.Separator.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger><Button>Open</Button></Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onSelect={() => console.log("Edit")}>Edit</Menu.Item>
+ *     <Menu.Separator />
+ *     <Menu.Item onSelect={() => console.log("Delete")} danger>Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ */
+declare const Menu: (({ children, className }: MenuProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    Separator: typeof MenuSeparator;
+    CheckboxItem: typeof MenuCheckboxItem;
+    Label: typeof MenuLabel;
+};
+interface MenuTriggerProps {
+    children: ReactNode;
+    /** @internal — injected by Menu. */
+    _toggle?: () => void;
+}
+/**
+ * Wraps the trigger element that opens the menu on click.
+ */
+declare function MenuTrigger({ children, _toggle }: MenuTriggerProps): react_jsx_runtime.JSX.Element;
+interface MenuContentProps {
+    children: ReactNode;
+    /** Preferred alignment relative to the trigger. */
+    align?: "start" | "center" | "end";
+    /** Width of the menu. */
+    width?: number | string;
+    /** Minimum width. */
+    minWidth?: number | string;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * The dropdown content panel. Only rendered when the menu is open.
+ * Uses a smooth scale+fade entry animation and an elevated surface style.
+ */
+declare function MenuContent({ children, align, width, minWidth, className, }: MenuContentProps): react_jsx_runtime.JSX.Element | null;
+interface MenuItemProps {
+    children: ReactNode;
+    /** Called when the item is selected. */
+    onSelect?: () => void;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** Danger styling (red text). */
+    danger?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * A single actionable menu item with hover highlight.
+ */
+declare function MenuItem({ children, onSelect, disabled, danger, className, }: MenuItemProps): react_jsx_runtime.JSX.Element;
+interface MenuCheckboxItemProps {
+    children: ReactNode;
+    /** Whether the item is checked. */
+    checked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+}
+/**
+ * A checkbox-style menu item that toggles a boolean state.
+ */
+declare function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, className, }: MenuCheckboxItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal line between menu item groups.
+ */
+declare function MenuSeparator(): react_jsx_runtime.JSX.Element;
+interface MenuLabelProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Non-interactive label/heading within a menu section.
+ */
+declare function MenuLabel({ children, className }: MenuLabelProps): react_jsx_runtime.JSX.Element;
+
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Currently active tab value. */
+    value: string;
+    /** Called when a tab is clicked. */
+    onChange: (value: string) => void;
+    /** Tab items (should be Tabs.Tab elements). */
+    children: ReactNode;
+}
+interface TabProps {
+    /** Unique value identifying this tab. Matched against Tabs.value. */
+    value: string;
+    /** Tab label. */
+    children: ReactNode;
+    /** Disables the tab. */
+    disabled?: boolean;
+    /** Additional CSS class. */
+    className?: string;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>> & {
+    Tab: ({ value, children, disabled, className }: TabProps) => react_jsx_runtime.JSX.Element;
+};
+
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** Visual style. "default" has border+shadow, "ghost" is borderless. */
     variant?: "default" | "ghost";
@@ -692,4 +1141,37 @@ interface DividerProps extends HTMLAttributes<HTMLHRElement> {
  */
 declare const Divider: ({ spacing, className, ...rest }: DividerProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, AppLayout, type AppLayoutProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, type DisplayMode, Divider, type DividerProps, Heading, type HeadingProps, type HeadingSize, Input, type InputProps, Select, type SelectOption, type SelectProps, type SemanticVariant, Show, type ShowProps, type Size, Switch, type SwitchProps, Text, type TextProps, Textarea, type TextareaProps, type UseDisplayModeReturn, useDisplayMode };
+/**
+ * CodeBlock — Syntax-highlighted code display with copy button.
+ *
+ * Uses react-syntax-highlighter (PrismLight) for real syntax coloring.
+ * Token colors are mapped to MCP Apps spec CSS variables so they adapt
+ * to whichever host platform the app runs on.
+ *
+ * Languages are registered on demand — only the ones imported here are
+ * available. The set matches the most common languages for MCP Apps.
+ */
+interface CodeBlockProps {
+    /** Code content to display. */
+    children: string;
+    /** Language for syntax highlighting (e.g. "tsx", "python", "bash"). */
+    language?: string;
+    /** Show a copy button. */
+    copyable?: boolean;
+    /** Show line numbers. */
+    showLineNumbers?: boolean;
+    /** Additional CSS class for the outer container. */
+    className?: string;
+}
+/**
+ * Syntax-highlighted code block with copy functionality.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="bash">{`npm install open-mcp-app-ui`}</CodeBlock>
+ * <CodeBlock language="tsx" showLineNumbers>{someCode}</CodeBlock>
+ * ```
+ */
+declare const CodeBlock: ({ children, language, copyable, showLineNumbers, className, }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, type AlertVariant, AppLayout, type AppLayoutProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DisplayMode, Divider, type DividerProps, Heading, type HeadingProps, type HeadingSize, Input, type InputProps, Menu, type MenuCheckboxItemProps, type MenuContentProps, type MenuItemProps, type MenuLabelProps, type MenuProps, RadioGroup, type RadioGroupItemProps, type RadioGroupProps, Select, type SelectOption, type SelectOptionGroup, type SelectOptions, type SelectProps, type SemanticVariant, Show, type ShowProps, type Size, Slider, type SliderProps, Switch, type SwitchProps, type TabProps, Tabs, type TabsProps, type Tag, TagInput, type TagInputProps, Text, type TextProps, Textarea, type TextareaProps, ToggleGroup, type ToggleGroupOptionProps, type ToggleGroupProps, type UseDisplayModeReturn, useDisplayMode };