@mt-gloss/ui 0.0.9 → 0.0.11

package/lib/primitives/DateRangePicker.d.ts

@@ -1,109 +1,6 @@
-import { default as React } from 'react';
-export interface DateRange {
-    start: Date | null;
-    end: Date | null;
-}
-export interface DateRangePreset {
-    label: string;
-    range: DateRange;
-}
-export interface DateRangePickerProps {
-    /**
-     * Current date range (controlled)
-     */
-    value?: DateRange;
-    /**
-     * Default date range (uncontrolled)
-     */
-    defaultValue?: DateRange;
-    /**
-     * Callback when range changes
-     */
-    onChange?: (range: DateRange) => void;
-    /**
-     * Minimum selectable date
-     */
-    minDate?: Date;
-    /**
-     * Maximum selectable date
-     */
-    maxDate?: Date;
-    /**
-     * Maximum number of days in range
-     */
-    maxDays?: number;
-    /**
-     * Preset date ranges
-     */
-    presets?: DateRangePreset[];
-    /**
-     * Whether to show presets panel
-     * @default false
-     */
-    showPresets?: boolean;
-    /**
-     * Date format for display
-     * @default 'MM/DD/YYYY'
-     */
-    format?: string;
-    /**
-     * Placeholder text
-     * @default 'Select dates'
-     */
-    placeholder?: string;
-    /**
-     * First day of the week
-     * @default 0
-     */
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * 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;
-}
 /**
- * DateRangePicker - Date range selection with dual calendar
- *
- * Features preset ranges, two-month view, and keyboard support.
- *
- * @example
- * ```tsx
- * <DateRangePicker
- *   value={dateRange}
- *   onChange={setDateRange}
- *   showPresets
- *   presets={customPresets}
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetDateRangePicker as DateRangePicker } from '../presets/PresetDateRangePicker/PresetDateRangePicker';
+export type { PresetDateRangePickerProps as DateRangePickerProps, DateRange, DateRangePreset } from '../presets/PresetDateRangePicker/PresetDateRangePicker';

package/lib/primitives/Dropdown.d.ts

@@ -1,65 +1,6 @@
-import { default as React } from 'react';
-export interface DropdownItem {
-    label: string;
-    value: string;
-    icon?: string;
-}
-export interface DropdownProps {
-    /**
-     * Trigger element (ReactNode) or text for the dropdown
-     */
-    trigger?: React.ReactNode;
-    /**
-     * Array of dropdown items
-     */
-    items: DropdownItem[];
-    /**
-     * Currently selected value
-     */
-    value?: string;
-    /**
-     * Callback when selection changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Dropdown component with concave trigger and convex menu
- *
- * @deprecated Use `Select` component instead for rich content support.
- * The Select component supports arbitrary ReactNode content in options,
- * multi-line displays, icons, and custom render functions.
- *
- * DOM Structure:
- * - `.gloss-dropdown` wrapper
- * - `.gloss-dropdown__trigger` (with `--active` when open)
- * - `.gloss-dropdown__menu` (conditionally rendered)
- * - `.gloss-dropdown__item` (with `--selected` for active item)
- *
- * @example
- * ```tsx
- * // Deprecated usage:
- * <Dropdown
- *   items={[
- *     { label: 'Active', value: 'active' },
- *     { label: 'Pending', value: 'pending' }
- *   ]}
- *   value="active"
- *   onChange={(val) => console.log(val)}
- * />
- *
- * // Migrate to Select:
- * <Select
- *   options={[
- *     { label: 'Active', value: 'active' },
- *     { label: 'Pending', value: 'pending' }
- *   ]}
- *   value="active"
- *   onChange={(val) => console.log(val)}
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Dropdown: React.FC<DropdownProps>;
+export { Dropdown } from '../composites/overlay/Dropdown/Dropdown';
+export type { DropdownProps, DropdownItem } from '../composites/overlay/Dropdown/Dropdown';

package/lib/primitives/FileUpload.d.ts

@@ -1,109 +1,6 @@
-import { default as React } from 'react';
-export interface FileUploadFile {
-    file: File;
-    id: string;
-    progress?: number;
-    error?: string;
-    preview?: string;
-}
-export interface FileUploadProps {
-    /**
-     * Current files (controlled)
-     */
-    value?: FileUploadFile[];
-    /**
-     * Callback when files change
-     */
-    onChange?: (files: FileUploadFile[]) => void;
-    /**
-     * Accepted file types (e.g., 'image/*', '.pdf')
-     */
-    accept?: string;
-    /**
-     * Maximum file size in bytes
-     */
-    maxSize?: number;
-    /**
-     * Maximum number of files
-     */
-    maxFiles?: number;
-    /**
-     * Allow multiple file selection
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Display variant
-     * @default 'dropzone'
-     */
-    variant?: 'dropzone' | 'button' | 'compact';
-    /**
-     * Show file previews (for images)
-     * @default true
-     */
-    showPreview?: boolean;
-    /**
-     * Custom preview renderer
-     */
-    renderPreview?: (file: FileUploadFile) => React.ReactNode;
-    /**
-     * Text displayed in dropzone
-     * @default 'Drag and drop files here, or click to browse'
-     */
-    dropzoneText?: string;
-    /**
-     * Button text for button variant
-     * @default 'Upload file'
-     */
-    buttonText?: string;
-    /**
-     * Label text
-     */
-    label?: string;
-    /**
-     * Helper text
-     */
-    helperText?: string;
-    /**
-     * Validation status
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error';
-    /**
-     * Whether the upload is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Callback when validation error occurs
-     */
-    onError?: (error: string) => void;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * ID for the input
-     */
-    id?: string;
-    /**
-     * Name for form submission
-     */
-    name?: string;
-}
 /**
- * FileUpload - File upload with drag and drop support
- *
- * Features dropzone, file previews, progress indicators, and validation.
- *
- * @example
- * ```tsx
- * <FileUpload
- *   accept="image/*"
- *   maxSize={5 * 1024 * 1024}
- *   maxFiles={3}
- *   multiple
- *   onChange={handleFiles}
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetFileUpload as FileUpload } from '../presets/PresetFileUpload/PresetFileUpload';
+export type { PresetFileUploadProps as FileUploadProps, FileUploadFile } from '../presets/PresetFileUpload/PresetFileUpload';

package/lib/primitives/Form.d.ts

@@ -1,119 +1,6 @@
-import { default as React } from 'react';
-export interface FormErrors {
-    [key: string]: string | undefined;
-}
-export interface FormTouched {
-    [key: string]: boolean;
-}
-export interface FormContextValue {
-    /**
-     * Form values
-     */
-    values: Record<string, unknown>;
-    /**
-     * Form errors
-     */
-    errors: FormErrors;
-    /**
-     * Touched fields
-     */
-    touched: FormTouched;
-    /**
-     * Whether form is submitting
-     */
-    isSubmitting: boolean;
-    /**
-     * Whether form is valid
-     */
-    isValid: boolean;
-    /**
-     * Set a field value
-     */
-    setFieldValue: (name: string, value: unknown) => void;
-    /**
-     * Set a field error
-     */
-    setFieldError: (name: string, error: string | undefined) => void;
-    /**
-     * Mark a field as touched
-     */
-    setFieldTouched: (name: string, touched?: boolean) => void;
-    /**
-     * Get field props for binding to input
-     */
-    getFieldProps: (name: string) => {
-        value: unknown;
-        onChange: (value: unknown) => void;
-        onBlur: () => void;
-        name: string;
-        error: string | undefined;
-        touched: boolean;
-    };
-}
-export declare function useFormContext(): FormContextValue;
-export interface FormProps<T extends Record<string, unknown>> {
-    /**
-     * Initial form values
-     */
-    initialValues: T;
-    /**
-     * Validation function
-     */
-    validate?: (values: T) => FormErrors | Promise<FormErrors>;
-    /**
-     * Submit handler
-     */
-    onSubmit: (values: T) => void | Promise<void>;
-    /**
-     * Validate on change
-     * @default true
-     */
-    validateOnChange?: boolean;
-    /**
-     * Validate on blur
-     * @default true
-     */
-    validateOnBlur?: boolean;
-    /**
-     * Form children (can be render prop)
-     */
-    children: React.ReactNode | ((context: FormContextValue) => React.ReactNode);
-    /**
-     * Additional class name
-     */
-    className?: string;
-    /**
-     * Prevent default form submission
-     * @default true
-     */
-    preventDefault?: boolean;
-}
 /**
- * Form component with validation and state management
- *
- * @example
- * ```tsx
- * <Form
- *   initialValues={{ email: '', password: '' }}
- *   validate={(values) => {
- *     const errors: FormErrors = {};
- *     if (!values.email) errors.email = 'Required';
- *     if (!values.password) errors.password = 'Required';
- *     return errors;
- *   }}
- *   onSubmit={(values) => console.log(values)}
- * >
- *   <FormField name="email" label="Email">
- *     <Input />
- *   </FormField>
- *   <FormField name="password" label="Password">
- *     <Input type="password" />
- *   </FormField>
- *   <Button type="submit">Submit</Button>
- * </Form>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare function Form<T extends Record<string, unknown>>({ initialValues, validate, onSubmit, validateOnChange, validateOnBlur, children, className, preventDefault, }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Form {
-    var displayName: string;
-}
+export { ContainerForm as Form, useFormContext } from '../containers/ContainerForm/ContainerForm';
+export type { ContainerFormProps as FormProps, FormContextValue, FormErrors, FormTouched } from '../containers/ContainerForm/ContainerForm';

package/lib/primitives/FormField.d.ts

@@ -1,69 +1,6 @@
-import { default as React } from 'react';
-interface FormControlProps {
-    id?: string;
-    name?: string;
-    value?: unknown;
-    onChange?: (value: unknown) => void;
-    onBlur?: (event: React.FocusEvent) => void;
-    status?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
-    'aria-required'?: boolean;
-}
-export interface FormFieldProps {
-    /**
-     * Field name (must match a key in form values)
-     */
-    name: string;
-    /**
-     * Field label
-     */
-    label?: React.ReactNode;
-    /**
-     * Helper text shown below the field
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Whether the field is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Child form control (Input, Select, Textarea, etc.)
-     */
-    children: React.ReactElement<FormControlProps>;
-    /**
-     * Additional class name
-     */
-    className?: string;
-    /**
-     * Label position
-     * @default 'top'
-     */
-    labelPosition?: 'top' | 'left' | 'right';
-    /**
-     * Hide the label visually (still accessible)
-     * @default false
-     */
-    hideLabel?: boolean;
-}
 /**
- * FormField component for wrapping form controls
- *
- * Automatically connects to Form context for:
- * - Value binding
- * - Error display
- * - Touched state
- * - Accessibility (labels, descriptions)
- *
- * @example
- * ```tsx
- * <Form initialValues={{ email: '' }} onSubmit={handleSubmit}>
- *   <FormField name="email" label="Email" required helperText="We'll never share your email">
- *     <Input type="email" placeholder="Enter your email" />
- *   </FormField>
- * </Form>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const FormField: React.FC<FormFieldProps>;
-export {};
+export { ContainerFormField as FormField } from '../containers/ContainerFormField/ContainerFormField';
+export type { ContainerFormFieldProps as FormFieldProps } from '../containers/ContainerFormField/ContainerFormField';

package/lib/primitives/Input.d.ts

@@ -1,89 +1,6 @@
-import { default as React } from 'react';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'onCopy'> {
-    /**
-     * Label text for the input
-     */
-    label?: string;
-    /**
-     * Validation/interaction status
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error' | 'pending';
-    /**
-     * Helper text displayed below the input
-     */
-    helperText?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Icon or element displayed on the left side of the input
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Icon or element displayed on the right side of the input
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Vertical alignment of icons relative to input
-     * @default 'center'
-     */
-    iconAlign?: 'top' | 'center';
-    /**
-     * Shows clear button when input has value
-     * @default false
-     */
-    clearable?: boolean;
-    /**
-     * Callback when clear button is clicked
-     */
-    onClear?: () => void;
-    /**
-     * Shows copy button to copy input value
-     * @default false
-     */
-    copyable?: boolean;
-    /**
-     * Callback after successful copy
-     */
-    onCopy?: (value: string) => void;
-    /**
-     * Show character counter (requires maxLength to be set)
-     * @default false
-     */
-    showCounter?: boolean;
-    /**
-     * Custom counter renderer
-     */
-    renderCounter?: (current: number, max: number) => React.ReactNode;
-    /**
-     * @deprecated Use leftIcon instead
-     * Prefix text or element displayed before the input (e.g., "$" for currency)
-     */
-    prefix?: React.ReactNode;
-    /**
-     * @deprecated Use rightIcon instead
-     * Suffix text or element displayed after the input
-     */
-    suffix?: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Input component with label, status indicators, and helper text
- *
- * DOM Structure:
- * - If label/helper present: wraps in `.gloss-input-anatomy`
- * - Input: `<input class="gloss-input gloss-input--{status}">`
- *
- * @example
- * ```tsx
- * <Input label="Email" placeholder="name@example.com" />
- * <Input label="Username" status="success" helperText="Available!" />
- * <Input label="Password" status="error" helperText="Too short" required />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetInput as Input } from '../presets/PresetInput/PresetInput';
+export type { PresetInputProps as InputProps } from '../presets/PresetInput/PresetInput';

package/lib/primitives/InputGroup.d.ts

@@ -1,59 +1,6 @@
-import { default as React } from 'react';
-export interface InputGroupProps {
-    /**
-     * Child elements (Inputs, InputAddons, Buttons)
-     */
-    children: React.ReactNode;
-    /**
-     * Visual style for connected inputs (removes gaps, merges borders)
-     * @default false
-     */
-    attached?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-export interface InputAddonProps {
-    /**
-     * Addon content (text, icon, etc.)
-     */
-    children: React.ReactNode;
-    /**
-     * Position in group (affects border radius)
-     * @default 'left'
-     */
-    position?: 'left' | 'right';
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * InputGroup component for grouping inputs with addons
- *
- * @example
- * ```tsx
- * <InputGroup attached>
- *   <InputAddon position="left">https://</InputAddon>
- *   <Input placeholder="example.com" />
- * </InputGroup>
- *
- * <InputGroup attached>
- *   <InputAddon position="left">$</InputAddon>
- *   <Input type="number" placeholder="0.00" />
- *   <InputAddon position="right">.00</InputAddon>
- * </InputGroup>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * InputAddon component for prepending/appending content to inputs
- *
- * @example
- * ```tsx
- * <InputAddon position="left">@</InputAddon>
- * <InputAddon position="right">.com</InputAddon>
- * ```
- */
-export declare const InputAddon: React.ForwardRefExoticComponent<InputAddonProps & React.RefAttributes<HTMLSpanElement>>;
+export { InputGroup, InputAddon } from '../wrappers/InputGroup/InputGroup';
+export type { InputGroupProps, InputAddonProps } from '../wrappers/InputGroup/InputGroup';