@mt-gloss/ui 0.0.2

package/lib/Select.d.ts

@@ -0,0 +1,205 @@
+import { default as React } from 'react';
+import { IconValue } from './types/icon';
+/**
+ * Configuration for a single select option
+ */
+export interface SelectOption<T = string> {
+    /**
+     * Unique value for selection tracking
+     */
+    value: T;
+    /**
+     * Content to render in the dropdown menu
+     * Can be string for simple cases or ReactNode for rich content
+     */
+    label: React.ReactNode;
+    /**
+     * Optional: Different content for trigger when selected
+     * If not provided, uses `label`
+     * Useful for abbreviated displays in trigger vs full content in menu
+     */
+    triggerLabel?: React.ReactNode;
+    /**
+     * Optional icon (name from sprite or ReactNode)
+     */
+    icon?: IconValue;
+    /**
+     * Optional description/secondary text rendered below the label
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for custom trigger renderer
+ */
+export interface SelectTriggerRenderProps<T = string> {
+    selectedOption: SelectOption<T> | undefined;
+    isOpen: boolean;
+    placeholder: React.ReactNode;
+}
+/**
+ * Props for custom option renderer
+ */
+export interface SelectOptionRenderProps<T = string> {
+    option: SelectOption<T>;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+/**
+ * Option group for grouped options
+ */
+export interface SelectOptionGroup<T = string> {
+    label: string;
+    options: SelectOption<T>[];
+}
+export interface SelectProps<T = string> {
+    /**
+     * Array of selectable options (can be flat or grouped)
+     */
+    options: SelectOption<T>[] | SelectOptionGroup<T>[];
+    /**
+     * Currently selected value(s)
+     */
+    value?: T | T[];
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: T | T[], option: SelectOption<T> | SelectOption<T>[]) => void;
+    /**
+     * Placeholder when no value is selected
+     * @default 'Select...'
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Custom trigger renderer (overrides default)
+     */
+    renderTrigger?: (props: SelectTriggerRenderProps<T>) => React.ReactNode;
+    /**
+     * Custom option renderer (overrides default)
+     */
+    renderOption?: (props: SelectOptionRenderProps<T>) => React.ReactNode;
+    /**
+     * Icon displayed on the left side of the trigger
+     */
+    leftIcon?: IconValue;
+    /**
+     * Icon displayed on the right side of the trigger (replaces chevron if provided)
+     */
+    rightIcon?: IconValue;
+    /**
+     * Icon alignment for multi-line content
+     * @default 'center'
+     */
+    iconAlign?: 'top' | 'center';
+    /**
+     * Whether to show selection indicator (check icon) on selected option
+     * @default true
+     */
+    showSelectionIndicator?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Show clear button when value is selected
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback when cleared
+     */
+    onClear?: () => void;
+    /**
+     * Enable multi-select mode
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * How to display multiple selections in trigger
+     * @default 'chips'
+     */
+    multiDisplayMode?: 'chips' | 'count' | 'text';
+    /**
+     * Max chips to show before collapsing
+     * @default 3
+     */
+    maxChips?: number;
+    /**
+     * Enable search/filter
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder for search input
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Custom filter function
+     */
+    filterOption?: (option: SelectOption<T>, searchValue: string) => boolean;
+    /**
+     * No results message
+     * @default 'No options found'
+     */
+    noResultsMessage?: React.ReactNode;
+    /**
+     * Loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Loading message
+     * @default 'Loading...'
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Enable creating new options from search input
+     * @default false
+     */
+    creatable?: boolean;
+    /**
+     * Callback when a new option is created
+     * Return the new option object, or void to handle externally
+     */
+    onCreateOption?: (inputValue: string) => SelectOption<T> | void;
+    /**
+     * Custom label for the create option row
+     * @default (inputValue) => `Create "${inputValue}"`
+     */
+    createOptionLabel?: (inputValue: string) => React.ReactNode;
+    /**
+     * Validate whether a new option can be created
+     * @default () => true
+     */
+    isValidNewOption?: (inputValue: string, existingOptions: SelectOption<T>[]) => boolean;
+    /**
+     * Callback when search value changes (for async loading)
+     */
+    onSearchChange?: (searchValue: string) => void;
+    /**
+     * Debounce delay for onSearchChange in ms
+     * @default 300
+     */
+    searchDebounce?: number;
+    /**
+     * Callback when dropdown open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+export declare function Select<T = string>({ options, value, onChange, placeholder, renderTrigger, renderOption, leftIcon, rightIcon, iconAlign, showSelectionIndicator, size, disabled, clearable, onClear, multiple, multiDisplayMode, maxChips, searchable, searchPlaceholder, filterOption, noResultsMessage, loading, loadingMessage, creatable, onCreateOption, createOptionLabel, isValidNewOption, onSearchChange, searchDebounce, onOpenChange, className, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+}

package/lib/Slider.d.ts

@@ -0,0 +1,111 @@
+import { default as React } from 'react';
+export interface SliderMark {
+    /**
+     * Value at which to place the mark
+     */
+    value: number;
+    /**
+     * Label to display at the mark
+     */
+    label?: React.ReactNode;
+}
+export interface SliderProps {
+    /**
+     * Current value (controlled)
+     */
+    value?: number;
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: number;
+    /**
+     * Callback when value changes during drag
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback when drag ends (final value)
+     */
+    onChangeEnd?: (value: number) => void;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Show marks on the track
+     * - true: show marks at each step
+     * - array: show marks at specified values
+     */
+    marks?: boolean | SliderMark[];
+    /**
+     * Show current value above thumb
+     */
+    showValue?: boolean;
+    /**
+     * Format the displayed value
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Orientation of the slider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size of the slider
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Label displayed above the slider
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the slider
+     */
+    helperText?: string;
+    /**
+     * Validation/status state
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * ID for the slider (auto-generated if not provided)
+     */
+    id?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+}
+/**
+ * Slider component for selecting a value from a range
+ *
+ * Features concave track with convex thumb using spring physics.
+ * Supports keyboard navigation with arrow keys.
+ *
+ * @example
+ * ```tsx
+ * <Slider value={volume} onChange={setVolume} />
+ * <Slider min={0} max={100} step={10} marks showValue />
+ * <Slider formatValue={(v) => `${v}%`} />
+ * ```
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;

package/lib/SplitButton.d.ts

@@ -0,0 +1,84 @@
+import { default as React } from 'react';
+import { ButtonVariant } from './Button';
+import { IconValue } from './types/icon';
+export interface SplitButtonMenuItem {
+    /**
+     * Menu item label
+     */
+    label: React.ReactNode;
+    /**
+     * Click handler
+     */
+    onClick: () => void;
+    /**
+     * Optional icon
+     */
+    icon?: IconValue;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Render a divider before this item
+     */
+    divider?: boolean;
+}
+export interface SplitButtonProps {
+    /**
+     * Main button content
+     */
+    children: React.ReactNode;
+    /**
+     * Main button click handler
+     */
+    onClick?: () => void;
+    /**
+     * Dropdown menu items
+     */
+    menuItems: SplitButtonMenuItem[];
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Disabled state for both buttons
+     */
+    disabled?: boolean;
+    /**
+     * Icon for dropdown trigger button
+     * @default 'chevron-down'
+     */
+    dropdownIcon?: IconValue;
+    /**
+     * Left icon for main button
+     */
+    leftIcon?: IconValue;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * SplitButton component - main action button with dropdown menu
+ *
+ * @example
+ * ```tsx
+ * <SplitButton
+ *   onClick={() => console.log('Save')}
+ *   menuItems={[
+ *     { label: 'Save as draft', onClick: () => {} },
+ *     { label: 'Save and publish', onClick: () => {} },
+ *     { divider: true, label: 'Delete', onClick: () => {}, icon: 'trash' },
+ *   ]}
+ * >
+ *   Save
+ * </SplitButton>
+ * ```
+ */
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Textarea.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
+    /**
+     * Label text for the textarea
+     */
+    label?: string;
+    /**
+     * Validation/interaction status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error' | 'pending';
+    /**
+     * Helper text displayed below the textarea
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Enable auto-resize based on content
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Minimum rows when auto-resizing
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Maximum rows when auto-resizing
+     * @default 10
+     */
+    maxRows?: number;
+    /**
+     * Show character counter (requires maxLength to be set)
+     * @default false
+     */
+    showCounter?: boolean;
+    /**
+     * Custom counter renderer
+     */
+    renderCounter?: (current: number, max: number) => React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Textarea component with auto-resize support
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="Description" placeholder="Enter description..." />
+ * <Textarea autoResize minRows={2} maxRows={6} />
+ * <Textarea maxLength={500} showCounter />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/TimePicker.d.ts

@@ -0,0 +1,93 @@
+import { default as React } from 'react';
+export interface TimePickerProps {
+    /**
+     * Current time value (HH:mm or HH:mm:ss format)
+     */
+    value?: string;
+    /**
+     * Default time value
+     */
+    defaultValue?: string;
+    /**
+     * Callback when time changes
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Time format
+     * @default '12h'
+     */
+    format?: '12h' | '24h';
+    /**
+     * Whether to show seconds
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * Step in minutes for the dropdown options
+     * @default 30
+     */
+    step?: number;
+    /**
+     * Minimum selectable time (HH:mm format)
+     */
+    minTime?: string;
+    /**
+     * Maximum selectable time (HH:mm format)
+     */
+    maxTime?: string;
+    /**
+     * Placeholder text
+     * @default 'Select time'
+     */
+    placeholder?: string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show clear button
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * ID for the input
+     */
+    id?: string;
+    /**
+     * Name for form submission
+     */
+    name?: string;
+}
+/**
+ * TimePicker - Time selection with dropdown
+ *
+ * Features 12/24 hour format, step intervals, and keyboard support.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   format="12h"
+ *   step={15}
+ * />
+ * ```
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Toggle.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Whether the toggle is on (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Default on state (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when toggle state changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback with just the boolean value (convenience)
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Label text displayed next to the toggle
+     */
+    label?: React.ReactNode;
+    /**
+     * Text displayed inside the track when on
+     */
+    onLabel?: React.ReactNode;
+    /**
+     * Text displayed inside the track when off
+     */
+    offLabel?: React.ReactNode;
+    /**
+     * Helper text displayed below the toggle
+     */
+    helperText?: string;
+    /**
+     * Validation/status state
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Size of the toggle
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Position of the label relative to the toggle
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Toggle/Switch component for boolean on/off states
+ *
+ * Uses spring physics for the thumb movement and smooth color transitions.
+ *
+ * @example
+ * ```tsx
+ * <Toggle label="Enable notifications" />
+ * <Toggle label="Dark mode" defaultChecked />
+ * <Toggle label="Auto-save" onLabel="ON" offLabel="OFF" />
+ * <Toggle label="Feature flag" size="sm" disabled />
+ * ```
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Tooltip.d.ts

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type TooltipVariant = 'dark' | 'light' | 'primary' | 'success' | 'warning' | 'error';
+export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
+export interface TooltipProps {
+    /**
+     * Tooltip content
+     */
+    content: React.ReactNode;
+    /**
+     * Element that triggers the tooltip
+     */
+    children: React.ReactElement;
+    /**
+     * Tooltip placement
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Color variant
+     * @default 'dark'
+     */
+    variant?: TooltipVariant;
+    /**
+     * What triggers the tooltip
+     * @default 'hover'
+     */
+    trigger?: TooltipTrigger;
+    /**
+     * Delay before showing tooltip (ms)
+     * @default 200
+     */
+    delay?: number;
+    /**
+     * Delay before hiding tooltip (ms)
+     * @default 0
+     */
+    hideDelay?: number;
+    /**
+     * Disable the tooltip
+     */
+    disabled?: boolean;
+    /**
+     * Render tooltip in a portal (useful for overflow containers)
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Additional CSS class for tooltip content
+     */
+    className?: string;
+    /**
+     * Max width of tooltip
+     * @default 250
+     */
+    maxWidth?: number;
+    /**
+     * Controlled open state (for trigger='manual')
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Show arrow pointer
+     * @default true
+     */
+    arrow?: boolean;
+}
+/**
+ * Tooltip component for displaying contextual information
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button iconOnly leftIcon="save" aria-label="Save" />
+ * </Tooltip>
+ *
+ * <Tooltip content="This action cannot be undone" placement="bottom" variant="error">
+ *   <Button variant="danger">Delete</Button>
+ * </Tooltip>
+ *
+ * <Tooltip content="Click to copy" trigger="click">
+ *   <Button>Copy to clipboard</Button>
+ * </Tooltip>
+ * ```
+ */
+export declare const Tooltip: React.FC<TooltipProps>;