@mt-gloss/ui 0.0.9 → 0.0.10

package/lib/primitives/RangeSlider.d.ts

@@ -1,105 +1,6 @@
-import { default as React } from 'react';
-import { SliderMark } from './Slider';
-export interface RangeSliderProps {
-    /**
-     * Current range value [min, max] (controlled)
-     */
-    value?: [number, number];
-    /**
-     * Default range value (uncontrolled)
-     */
-    defaultValue?: [number, number];
-    /**
-     * Callback when range changes during drag
-     */
-    onChange?: (value: [number, number]) => void;
-    /**
-     * Callback when drag ends (final value)
-     */
-    onChangeEnd?: (value: [number, number]) => void;
-    /**
-     * Minimum value
-     * @default 0
-     */
-    min?: number;
-    /**
-     * Maximum value
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Step increment
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Minimum distance between thumbs
-     * @default 0
-     */
-    minDistance?: number;
-    /**
-     * Show marks on the track
-     */
-    marks?: boolean | SliderMark[];
-    /**
-     * Show current values above thumbs
-     */
-    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;
-}
 /**
- * RangeSlider component for selecting a range of values
- *
- * Features two draggable thumbs for selecting min/max range.
- * Supports keyboard navigation with arrow keys.
- *
- * @example
- * ```tsx
- * <RangeSlider value={priceRange} onChange={setPriceRange} />
- * <RangeSlider min={0} max={1000} step={50} minDistance={100} />
- * <RangeSlider formatValue={(v) => `$${v}`} showValue />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetRangeSlider as RangeSlider } from '../presets/PresetRangeSlider/PresetRangeSlider';
+export type { PresetRangeSliderProps as RangeSliderProps } from '../presets/PresetRangeSlider/PresetRangeSlider';

package/lib/primitives/Rating.d.ts

@@ -1,115 +1,6 @@
-import { default as React } from 'react';
-export interface RatingProps {
-    /**
-     * Current rating value (controlled)
-     */
-    value?: number;
-    /**
-     * Default rating value
-     * @default 0
-     */
-    defaultValue?: number;
-    /**
-     * Callback when rating changes
-     */
-    onChange?: (value: number) => void;
-    /**
-     * Maximum rating value
-     * @default 5
-     */
-    max?: number;
-    /**
-     * Icon for filled state
-     * @default 'star'
-     */
-    icon?: string;
-    /**
-     * Icon for empty state
-     * @default 'star'
-     */
-    emptyIcon?: string;
-    /**
-     * Icon for half-filled state (requires allowHalf)
-     * @default 'star'
-     */
-    halfIcon?: string;
-    /**
-     * Allow half-star ratings
-     * @default false
-     */
-    allowHalf?: boolean;
-    /**
-     * Allow clearing the rating by clicking current value
-     * @default false
-     */
-    allowClear?: boolean;
-    /**
-     * Read-only mode (no interaction)
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Size of the rating stars
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Color of filled stars
-     * @default '#f59e0b' (amber)
-     */
-    color?: string;
-    /**
-     * Show rating value as text
-     * @default false
-     */
-    showValue?: boolean;
-    /**
-     * Format the displayed value
-     */
-    formatValue?: (value: number) => string;
-    /**
-     * Label text
-     */
-    label?: string;
-    /**
-     * Helper text
-     */
-    helperText?: string;
-    /**
-     * Validation status
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error';
-    /**
-     * Whether the rating is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * ID for the input
-     */
-    id?: string;
-    /**
-     * Name for form submission
-     */
-    name?: string;
-}
 /**
- * Rating - Star rating component
- *
- * Features customizable icons, half-star support, and hover preview.
- *
- * @example
- * ```tsx
- * <Rating
- *   value={rating}
- *   onChange={setRating}
- *   max={5}
- *   allowHalf
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetRating as Rating } from '../presets/PresetRating/PresetRating';
+export type { PresetRatingProps as RatingProps } from '../presets/PresetRating/PresetRating';

package/lib/primitives/SegmentedControl.d.ts

@@ -1,96 +1,6 @@
-import { default as React } from 'react';
-import { IconValue } from '../types/icon';
-export interface SegmentedControlOption {
-    /**
-     * Unique value for this option
-     */
-    value: string;
-    /**
-     * Display label for the option
-     */
-    label: React.ReactNode;
-    /**
-     * Icon to display before the label
-     */
-    icon?: IconValue;
-    /**
-     * Whether this option is disabled
-     */
-    disabled?: boolean;
-}
-export interface SegmentedControlProps {
-    /**
-     * Array of options to display
-     */
-    options: SegmentedControlOption[];
-    /**
-     * Currently selected value (controlled)
-     */
-    value?: string;
-    /**
-     * Default selected value (uncontrolled)
-     */
-    defaultValue?: string;
-    /**
-     * Callback when selection changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Size of the control
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Whether the control spans full width of container
-     */
-    fullWidth?: boolean;
-    /**
-     * Whether the entire control is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Label displayed above the control
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the control
-     */
-    helperText?: string;
-    /**
-     * Validation/status state
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error';
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Name attribute for form submission
-     */
-    name?: string;
-    /**
-     * ID for the control (auto-generated if not provided)
-     */
-    id?: string;
-}
 /**
- * SegmentedControl for single selection from a small set of options
- *
- * Features a sliding indicator with spring physics for smooth transitions.
- * Supports keyboard navigation with arrow keys.
- *
- * @example
- * ```tsx
- * <SegmentedControl
- *   options={[
- *     { value: 'day', label: 'Day' },
- *     { value: 'week', label: 'Week' },
- *     { value: 'month', label: 'Month' },
- *   ]}
- *   value={view}
- *   onChange={setView}
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export { PresetSegmentedControl as SegmentedControl } from '../presets/PresetSegmentedControl/PresetSegmentedControl';
+export type { PresetSegmentedControlProps as SegmentedControlProps, SegmentedControlOption } from '../presets/PresetSegmentedControl/PresetSegmentedControl';

package/lib/primitives/Select.d.ts

@@ -1,205 +1,7 @@
-import { default as React } from 'react';
-import { IconValue } from '../types/icon';
 /**
- * Configuration for a single select option
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-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;
-}
+export { PresetSelect as Select } from '../presets/PresetSelect/PresetSelect';
+export type { PresetSelectProps as SelectProps } from '../presets/PresetSelect/PresetSelect';
+export type { SelectOption, SelectOptionGroup, SelectTriggerRenderProps, SelectOptionRenderProps } from '../presets/PresetSelect/PresetSelect';

package/lib/primitives/Slider.d.ts

@@ -1,111 +1,6 @@
-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}%`} />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetSlider as Slider } from '../presets/PresetSlider/PresetSlider';
+export type { PresetSliderProps as SliderProps, SliderMark } from '../presets/PresetSlider/PresetSlider';