@mt-gloss/ui 0.0.2

package/lib/CheckboxGroup.d.ts

@@ -0,0 +1,162 @@
+import { default as React } from 'react';
+import { CheckboxProps } from './Checkbox';
+/**
+ * Option definition for CheckboxGroup
+ */
+export interface CheckboxGroupOption<T = string> {
+    /**
+     * Unique value for the option
+     */
+    value: T;
+    /**
+     * Display label for the checkbox
+     */
+    label: React.ReactNode;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Helper text for this specific option
+     */
+    helperText?: string;
+}
+export interface CheckboxGroupProps<T = string> {
+    /**
+     * Selected values (controlled)
+     */
+    value?: T[];
+    /**
+     * Default selected values (uncontrolled)
+     */
+    defaultValue?: T[];
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: T[]) => void;
+    /**
+     * Array of options to render as checkboxes
+     * If not provided, use Checkbox children
+     */
+    options?: CheckboxGroupOption<T>[];
+    /**
+     * Checkbox children (alternative to options)
+     */
+    children?: React.ReactNode;
+    /**
+     * Layout orientation
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size applied to all checkboxes
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Group label displayed above the checkboxes
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the group
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether at least one option is required
+     */
+    required?: boolean;
+    /**
+     * Disable all checkboxes in the group
+     */
+    disabled?: boolean;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Context for sharing CheckboxGroup state with child checkboxes
+ */
+export interface CheckboxGroupContextValue<T = string> {
+    /**
+     * Currently selected values
+     */
+    values: T[];
+    /**
+     * Toggle a value's selection state
+     */
+    toggle: (value: T) => void;
+    /**
+     * Check if a value is selected
+     */
+    isSelected: (value: T) => boolean;
+    /**
+     * Group-level props to apply to checkboxes
+     */
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name?: string;
+    };
+    /**
+     * Whether checkbox is in a group
+     */
+    isInGroup: boolean;
+}
+/**
+ * Hook to access CheckboxGroup context
+ */
+export declare function useCheckboxGroupContext<T = string>(): CheckboxGroupContextValue<T> | null;
+/**
+ * CheckboxGroup component for managing multiple checkbox selections
+ *
+ * Provides context to child checkboxes and manages selected values state.
+ *
+ * @example
+ * ```tsx
+ * // Using options prop
+ * <CheckboxGroup
+ *   label="Select toppings"
+ *   options={[
+ *     { value: 'cheese', label: 'Extra Cheese' },
+ *     { value: 'pepperoni', label: 'Pepperoni' },
+ *     { value: 'mushrooms', label: 'Mushrooms' },
+ *   ]}
+ *   onChange={(values) => console.log(values)}
+ * />
+ *
+ * // Using children
+ * <CheckboxGroup label="Preferences" orientation="horizontal">
+ *   <Checkbox value="newsletter" label="Subscribe to newsletter" />
+ *   <Checkbox value="updates" label="Receive product updates" />
+ * </CheckboxGroup>
+ * ```
+ */
+export declare function CheckboxGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, className, }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxGroup {
+    var displayName: string;
+}
+/**
+ * Wrapper to make a Checkbox work within CheckboxGroup context
+ * This is used when rendering Checkbox children in a group
+ */
+export interface GroupCheckboxProps extends Omit<CheckboxProps, 'checked' | 'onChange'> {
+    /**
+     * Value for this checkbox within the group
+     */
+    value: string;
+}
+/**
+ * Checkbox that automatically integrates with CheckboxGroup context
+ */
+export declare const GroupCheckbox: React.ForwardRefExoticComponent<GroupCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Chip.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+export type ChipVariant = 'default' | 'filled' | 'outlined';
+export type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    /**
+     * Visual style variant
+     */
+    variant?: ChipVariant;
+    /**
+     * Color theme
+     */
+    color?: ChipColor;
+    /**
+     * Size of the chip
+     */
+    size?: ChipSize;
+    /**
+     * Whether the chip can be deleted (shows X button)
+     */
+    deletable?: boolean;
+    /**
+     * Callback when delete button is clicked
+     */
+    onDelete?: () => void;
+    /**
+     * Whether the chip is clickable/selectable
+     */
+    clickable?: boolean;
+    /**
+     * Click handler for clickable chips
+     */
+    onClick?: () => void;
+    /**
+     * Whether the chip is in selected state
+     */
+    selected?: boolean;
+    /**
+     * Whether the chip is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Content of the chip
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Chip component - interactive tag/pill for filtering, selection, and input
+ *
+ * DOM Structure: `<span class="gloss-chip">`
+ *
+ * @example
+ * ```tsx
+ * <Chip>Default</Chip>
+ * <Chip color="primary" clickable onClick={() => {}}>Clickable</Chip>
+ * <Chip deletable onDelete={() => {}}>Removable</Chip>
+ * <Chip icon={<Icon name="tag" />}>With Icon</Chip>
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/ColorPicker.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export interface ColorPickerProps {
+    /**
+     * Current color value (controlled)
+     * Accepts hex, rgb(), or hsl() format
+     */
+    value?: string;
+    /**
+     * Default color value
+     * @default '#3b82f6'
+     */
+    defaultValue?: string;
+    /**
+     * Callback when color changes
+     */
+    onChange?: (color: string) => void;
+    /**
+     * Output format
+     * @default 'hex'
+     */
+    format?: ColorFormat;
+    /**
+     * Whether to show alpha channel
+     * @default false
+     */
+    showAlpha?: boolean;
+    /**
+     * Preset color swatches
+     */
+    presets?: string[];
+    /**
+     * Display variant
+     * @default 'compact'
+     */
+    variant?: 'compact' | 'full' | 'inline';
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * ID for the input
+     */
+    id?: string;
+    /**
+     * Name for form submission
+     */
+    name?: string;
+}
+/**
+ * ColorPicker - Color selection with various modes
+ *
+ * Features hue/saturation picker, presets, and multiple formats.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={color}
+ *   onChange={setColor}
+ *   format="hex"
+ *   presets={['#ff0000', '#00ff00', '#0000ff']}
+ * />
+ * ```
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLInputElement>>;

package/lib/DatePicker.d.ts

@@ -0,0 +1,102 @@
+import { default as React } from 'react';
+export interface DatePickerProps {
+    /**
+     * Current selected date (controlled)
+     */
+    value?: Date | null;
+    /**
+     * Default selected date (uncontrolled)
+     */
+    defaultValue?: Date | null;
+    /**
+     * Callback when date changes
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Array of dates that cannot be selected
+     */
+    disabledDates?: Date[];
+    /**
+     * Function to determine if a date is disabled
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Date format for display
+     * @default 'MM/DD/YYYY'
+     */
+    format?: string;
+    /**
+     * Placeholder text
+     * @default 'Select date'
+     */
+    placeholder?: string;
+    /**
+     * First day of the week (0 = Sunday, 1 = Monday)
+     * @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;
+    /**
+     * Icon displayed in the input
+     * @default 'calendar'
+     */
+    leftIcon?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * ID for the input
+     */
+    id?: string;
+    /**
+     * Name for form submission
+     */
+    name?: string;
+}
+/**
+ * DatePicker - Date selection with calendar dropdown
+ *
+ * Features month/year navigation, keyboard support, disabled dates,
+ * and customizable date formatting.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   minDate={new Date()}
+ *   label="Start date"
+ * />
+ * ```
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

package/lib/DateRangePicker.d.ts

@@ -0,0 +1,109 @@
+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}
+ * />
+ * ```
+ */
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;

package/lib/Dropdown.d.ts

@@ -0,0 +1,65 @@
+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)}
+ * />
+ * ```
+ */
+export declare const Dropdown: React.FC<DropdownProps>;

package/lib/FileUpload.d.ts

@@ -0,0 +1,109 @@
+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}
+ * />
+ * ```
+ */
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;