@mt-gloss/ui 0.0.2

package/lib/NumberInput.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+export interface NumberInputProps {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: number;
+    /**
+     * Change handler
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Show stepper buttons
+     * @default true
+     */
+    showStepper?: boolean;
+    /**
+     * Stepper button position
+     * @default 'right'
+     */
+    stepperPosition?: 'right' | 'sides';
+    /**
+     * Format display value
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Parse input back to number
+     */
+    parseValue?: (input: string) => number;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * NumberInput component with stepper buttons
+ *
+ * @example
+ * ```tsx
+ * <NumberInput value={5} onChange={setValue} min={0} max={10} />
+ * <NumberInput step={0.5} formatValue={(v) => `$${v.toFixed(2)}`} />
+ * <NumberInput stepperPosition="sides" />
+ * ```
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Radio.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Whether the radio is checked (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label text displayed next to the radio
+     */
+    label?: React.ReactNode;
+    /**
+     * Description text displayed below the label
+     */
+    description?: React.ReactNode;
+    /**
+     * Helper text displayed below the radio
+     */
+    helperText?: string;
+    /**
+     * Validation/status state
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Size of the radio
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Position of the label relative to the radio
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Radio component for single-choice selection
+ *
+ * Must be used with RadioGroup for proper functionality.
+ * Uses convex physics - radio elevates slightly on hover.
+ *
+ * @example
+ * ```tsx
+ * <Radio name="plan" value="basic" label="Basic Plan" />
+ * <Radio name="plan" value="pro" label="Pro Plan" description="Best for teams" />
+ * <Radio name="plan" value="enterprise" label="Enterprise" disabled />
+ * ```
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/lib/RadioGroup.d.ts

@@ -0,0 +1,163 @@
+import { default as React } from 'react';
+import { RadioProps } from './Radio';
+/**
+ * Option definition for RadioGroup
+ */
+export interface RadioGroupOption<T = string> {
+    /**
+     * Unique value for the option
+     */
+    value: T;
+    /**
+     * Display label for the radio
+     */
+    label: React.ReactNode;
+    /**
+     * Description text below the label
+     */
+    description?: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+}
+export interface RadioGroupProps<T = string> {
+    /**
+     * Selected value (controlled)
+     */
+    value?: T;
+    /**
+     * Default selected value (uncontrolled)
+     */
+    defaultValue?: T;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Array of options to render as radios
+     * If not provided, use Radio children
+     */
+    options?: RadioGroupOption<T>[];
+    /**
+     * Radio children (alternative to options)
+     */
+    children?: React.ReactNode;
+    /**
+     * Layout orientation
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size applied to all radios
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Group label displayed above the radios
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the group
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether a selection is required
+     */
+    required?: boolean;
+    /**
+     * Disable all radios in the group
+     */
+    disabled?: boolean;
+    /**
+     * Name attribute for form submission (required for radio groups)
+     */
+    name: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Context for sharing RadioGroup state with child radios
+ */
+export interface RadioGroupContextValue<T = string> {
+    /**
+     * Currently selected value
+     */
+    value: T | undefined;
+    /**
+     * Select a value
+     */
+    select: (value: T) => void;
+    /**
+     * Check if a value is selected
+     */
+    isSelected: (value: T) => boolean;
+    /**
+     * Group-level props to apply to radios
+     */
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name: string;
+    };
+    /**
+     * Whether radio is in a group
+     */
+    isInGroup: boolean;
+}
+/**
+ * Hook to access RadioGroup context
+ */
+export declare function useRadioGroupContext<T = string>(): RadioGroupContextValue<T> | null;
+/**
+ * RadioGroup component for managing single-choice selections
+ *
+ * Provides context to child radios and manages selected value state.
+ *
+ * @example
+ * ```tsx
+ * // Using options prop
+ * <RadioGroup
+ *   name="plan"
+ *   label="Select a plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/month' },
+ *     { value: 'pro', label: 'Pro', description: '$29/month' },
+ *     { value: 'enterprise', label: 'Enterprise', description: 'Contact us' },
+ *   ]}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Using children
+ * <RadioGroup name="size" label="Select size" orientation="horizontal">
+ *   <Radio value="sm" label="Small" />
+ *   <Radio value="md" label="Medium" />
+ *   <Radio value="lg" label="Large" />
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, className, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+/**
+ * Wrapper to make a Radio work within RadioGroup context
+ */
+export interface GroupRadioProps extends Omit<RadioProps, 'checked' | 'onChange' | 'name'> {
+    /**
+     * Value for this radio within the group
+     */
+    value: string;
+}
+/**
+ * Radio that automatically integrates with RadioGroup context
+ */
+export declare const GroupRadio: React.ForwardRefExoticComponent<GroupRadioProps & React.RefAttributes<HTMLInputElement>>;

package/lib/RangeSlider.d.ts

@@ -0,0 +1,105 @@
+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 />
+ * ```
+ */
+export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Rating.d.ts

@@ -0,0 +1,115 @@
+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
+ * />
+ * ```
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;

package/lib/SegmentedControl.d.ts

@@ -0,0 +1,96 @@
+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}
+ * />
+ * ```
+ */
+export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;