@mt-gloss/ui 0.0.2

package/lib/Transition.d.ts

@@ -0,0 +1,107 @@
+import { default as React } from 'react';
+import { AnimationPresetName } from './utils/animations';
+interface AnimatedElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    'data-state'?: string;
+}
+export interface TransitionProps {
+    /**
+     * Whether the component is visible
+     */
+    show: boolean;
+    /**
+     * Animation preset name or custom config
+     */
+    animation?: AnimationPresetName | {
+        enter: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+        exit: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+    };
+    /**
+     * Animation duration in ms
+     * @default 200
+     */
+    duration?: number;
+    /**
+     * CSS easing function
+     * @default 'ease-out'
+     */
+    easing?: string;
+    /**
+     * Delay before animation starts
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Whether to unmount when hidden
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Callback when enter animation starts
+     */
+    onEnter?: () => void;
+    /**
+     * Callback when enter animation ends
+     */
+    onEntered?: () => void;
+    /**
+     * Callback when exit animation starts
+     */
+    onExit?: () => void;
+    /**
+     * Callback when exit animation ends
+     */
+    onExited?: () => void;
+    /**
+     * Child element to animate
+     */
+    children: React.ReactElement<AnimatedElementProps>;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Transition component for declarative enter/exit animations
+ *
+ * @example
+ * ```tsx
+ * <Transition show={isOpen} animation="fadeScale">
+ *   <div className="dropdown">Content</div>
+ * </Transition>
+ *
+ * <Transition
+ *   show={visible}
+ *   animation={{
+ *     enter: { from: { opacity: 0 }, to: { opacity: 1 } },
+ *     exit: { from: { opacity: 1 }, to: { opacity: 0 } }
+ *   }}
+ *   duration={300}
+ * >
+ *   <div>Custom animation</div>
+ * </Transition>
+ * ```
+ */
+export declare const Transition: React.FC<TransitionProps>;
+/**
+ * TransitionGroup component for managing lists with animations
+ */
+export interface TransitionGroupProps {
+    /**
+     * Child Transition components
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+export declare const TransitionGroup: React.FC<TransitionGroupProps>;
+export {};

package/lib/composed/AddressSelect.d.ts

@@ -0,0 +1,132 @@
+import { default as React } from 'react';
+/**
+ * Address data structure
+ */
+export interface Address {
+    /**
+     * Unique identifier for the address
+     */
+    id: string;
+    /**
+     * Optional label for the address (e.g., "Home", "Office", "Store")
+     */
+    label?: string;
+    /**
+     * Company or person name
+     */
+    name: string;
+    /**
+     * Street address line 1
+     */
+    street: string;
+    /**
+     * Street address line 2 (apartment, suite, etc.)
+     */
+    street2?: string;
+    /**
+     * City
+     */
+    city: string;
+    /**
+     * State/Province code
+     */
+    state: string;
+    /**
+     * ZIP/Postal code
+     */
+    zip: string;
+    /**
+     * Country (optional, defaults to USA)
+     */
+    country?: string;
+    /**
+     * Whether this is the default address
+     */
+    isDefault?: boolean;
+}
+export interface AddressSelectProps {
+    /**
+     * Available addresses
+     */
+    addresses: Address[];
+    /**
+     * Currently selected address ID
+     */
+    value?: string;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (addressId: string, address: Address) => void;
+    /**
+     * Placeholder text
+     * @default 'Select address...'
+     */
+    placeholder?: string;
+    /**
+     * Format for displaying address in trigger
+     * - 'short': Single line with label/street and city
+     * - 'full': Multi-line with complete address
+     * @default 'short'
+     */
+    triggerFormat?: 'short' | 'full';
+    /**
+     * Whether to show "Add new address" option
+     * @default false
+     */
+    showAddNew?: boolean;
+    /**
+     * Callback when "Add new address" is clicked
+     */
+    onAddNew?: () => void;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+/**
+ * Address select wrapper
+ *
+ * Configures the Select component to display multi-line addresses
+ * with proper formatting and visual hierarchy.
+ *
+ * @example
+ * ```tsx
+ * <AddressSelect
+ *   addresses={[
+ *     {
+ *       id: '1',
+ *       label: 'Store',
+ *       name: 'Morrison & Sons',
+ *       street: '445 Main Street',
+ *       city: 'San Francisco',
+ *       state: 'CA',
+ *       zip: '94102',
+ *       isDefault: true
+ *     },
+ *     {
+ *       id: '2',
+ *       label: 'Office',
+ *       name: 'Morrison & Sons',
+ *       street: '892 Market St',
+ *       street2: 'Suite 400',
+ *       city: 'San Francisco',
+ *       state: 'CA',
+ *       zip: '94103'
+ *     }
+ *   ]}
+ *   value={selectedId}
+ *   onChange={(id, address) => setSelectedId(id)}
+ *   triggerFormat="full"
+ * />
+ * ```
+ */
+export declare const AddressSelect: React.FC<AddressSelectProps>;

package/lib/composed/PasswordInput.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input';
+export interface PasswordStrengthRule {
+    /**
+     * Unique identifier for the rule
+     */
+    id: string;
+    /**
+     * Display label for the rule
+     */
+    label: string;
+    /**
+     * Validation function
+     */
+    validate: (password: string) => boolean;
+}
+export type PasswordStrength = 'weak' | 'fair' | 'good' | 'strong';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'rightIcon'> {
+    /**
+     * Whether to show the visibility toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+    /**
+     * Whether to show the password strength indicator
+     * @default false
+     */
+    showStrength?: boolean;
+    /**
+     * Pre-calculated password strength (if you want to control it externally)
+     */
+    strength?: PasswordStrength;
+    /**
+     * Custom strength calculation rules
+     * If not provided, uses default rules
+     */
+    strengthRules?: PasswordStrengthRule[];
+    /**
+     * Whether to show a generate password button
+     * @default false
+     */
+    showGenerate?: boolean;
+    /**
+     * Callback when generate button is clicked
+     * If not provided, uses built-in generator
+     */
+    onGenerate?: (password: string) => void;
+    /**
+     * Length of generated password
+     * @default 16
+     */
+    generateLength?: number;
+    /**
+     * Whether to show rule checklist
+     * @default false
+     */
+    showRules?: boolean;
+}
+/**
+ * PasswordInput - Specialized input for password entry
+ *
+ * Features visibility toggle, strength indicator, rule checklist,
+ * and password generation.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput
+ *   label="Password"
+ *   showStrength
+ *   showRules
+ *   showGenerate
+ * />
+ * ```
+ */
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/composed/PaymentMethodSelect.d.ts

@@ -0,0 +1,96 @@
+import { default as React } from 'react';
+/**
+ * Supported payment card types
+ */
+export type CardType = 'visa' | 'mastercard' | 'amex' | 'generic';
+/**
+ * Payment method data structure
+ */
+export interface PaymentMethod {
+    /**
+     * Unique identifier for the payment method
+     */
+    id: string;
+    /**
+     * Card network type
+     */
+    type: CardType;
+    /**
+     * Last 4 digits of the card number
+     */
+    last4: string;
+    /**
+     * Expiration date (e.g., "12/25")
+     */
+    expiry?: string;
+    /**
+     * Cardholder name
+     */
+    holderName?: string;
+    /**
+     * Whether this is the default payment method
+     */
+    isDefault?: boolean;
+}
+export interface PaymentMethodSelectProps {
+    /**
+     * Available payment methods
+     */
+    methods: PaymentMethod[];
+    /**
+     * Currently selected method ID
+     */
+    value?: string;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (methodId: string, method: PaymentMethod) => void;
+    /**
+     * Placeholder text
+     * @default 'Select card...'
+     */
+    placeholder?: string;
+    /**
+     * Whether to show "Add new card" option
+     * @default false
+     */
+    showAddNew?: boolean;
+    /**
+     * Callback when "Add new card" is clicked
+     */
+    onAddNew?: () => void;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+/**
+ * Payment method select wrapper
+ *
+ * Configures the Select component to display credit cards with icons
+ * and masked numbers in a user-friendly format.
+ *
+ * @example
+ * ```tsx
+ * <PaymentMethodSelect
+ *   methods={[
+ *     { id: '1', type: 'visa', last4: '4242', expiry: '12/25' },
+ *     { id: '2', type: 'mastercard', last4: '5555', expiry: '06/26' }
+ *   ]}
+ *   value={selectedId}
+ *   onChange={(id, method) => setSelectedId(id)}
+ *   showAddNew
+ *   onAddNew={() => openAddCardModal()}
+ * />
+ * ```
+ */
+export declare const PaymentMethodSelect: React.FC<PaymentMethodSelectProps>;

package/lib/composed/PhoneInput.d.ts

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input';
+export interface Country {
+    /**
+     * ISO 3166-1 alpha-2 country code
+     */
+    code: string;
+    /**
+     * Country name
+     */
+    name: string;
+    /**
+     * Dial code (e.g., +1, +44)
+     */
+    dialCode: string;
+    /**
+     * Phone number format mask (# for digit)
+     * e.g., '(###) ###-####' for US
+     */
+    format?: string;
+}
+export interface PhoneInputProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'leftIcon'> {
+    /**
+     * Current value in E.164 format (e.g., +14155551234)
+     */
+    value?: string;
+    /**
+     * Default value
+     */
+    defaultValue?: string;
+    /**
+     * Callback when value changes
+     * Returns E.164 formatted value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Default selected country code
+     * @default 'US'
+     */
+    defaultCountry?: string;
+    /**
+     * List of countries to show in selector
+     * Uses default list if not provided
+     */
+    countries?: Country[];
+    /**
+     * Whether to show country selector
+     * @default true
+     */
+    showCountrySelect?: boolean;
+    /**
+     * Format for display
+     * @default 'national'
+     */
+    format?: 'national' | 'international';
+}
+/**
+ * PhoneInput - International phone number input with country selector
+ *
+ * Features country selection, automatic formatting, and E.164 output.
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   value={phone}
+ *   onChange={setPhone}
+ *   defaultCountry="US"
+ * />
+ * ```
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/composed/SearchInput.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input';
+export interface SearchSuggestion {
+    /**
+     * Unique identifier for the suggestion
+     */
+    id: string;
+    /**
+     * Display text for the suggestion
+     */
+    label: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Optional icon name
+     */
+    icon?: string;
+}
+export interface SearchInputProps extends Omit<InputProps, 'leftIcon' | 'rightIcon' | 'clearable'> {
+    /**
+     * Callback when search is triggered (Enter key or search button)
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Debounce delay in milliseconds for onChange
+     * @default 0
+     */
+    debounce?: number;
+    /**
+     * Whether a search is currently in progress
+     */
+    isSearching?: boolean;
+    /**
+     * List of suggestions to display in dropdown
+     */
+    suggestions?: SearchSuggestion[];
+    /**
+     * Callback when a suggestion is selected
+     */
+    onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
+    /**
+     * Whether to show suggestions dropdown
+     * @default false
+     */
+    showSuggestions?: boolean;
+    /**
+     * Show keyboard shortcut hint (e.g., Cmd+K)
+     */
+    showShortcut?: boolean;
+    /**
+     * Keyboard shortcut key (works with Cmd/Ctrl)
+     * @default 'k'
+     */
+    shortcutKey?: string;
+    /**
+     * Whether the search input should always show clear button when has value
+     * @default true
+     */
+    clearable?: boolean;
+}
+/**
+ * SearchInput - Specialized input for search functionality
+ *
+ * Features search icon, debounced onChange, suggestions dropdown,
+ * keyboard shortcut support, and loading state.
+ *
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   placeholder="Search..."
+ *   onSearch={(query) => searchProducts(query)}
+ *   suggestions={suggestions}
+ *   onSuggestionSelect={handleSelect}
+ *   showShortcut
+ * />
+ * ```
+ */
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/composed/TagInput.d.ts

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+export interface TagInputProps {
+    /**
+     * Current tags (controlled)
+     */
+    value?: string[];
+    /**
+     * Default tags (uncontrolled)
+     */
+    defaultValue?: string[];
+    /**
+     * Callback when tags change
+     */
+    onChange?: (tags: string[]) => void;
+    /**
+     * Characters that trigger tag creation
+     * @default [',', 'Enter']
+     */
+    separator?: string[];
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number;
+    /**
+     * Maximum length per tag
+     */
+    maxLength?: number;
+    /**
+     * Allow duplicate tags
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Validate tag before adding
+     * Return true if valid, string for error message
+     */
+    validateTag?: (tag: string) => boolean | string;
+    /**
+     * Suggestions for autocomplete
+     */
+    suggestions?: string[];
+    /**
+     * Placeholder text
+     * @default 'Add tags...'
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * ID for the input
+     */
+    id?: string;
+    /**
+     * Name for form submission
+     */
+    name?: string;
+}
+/**
+ * TagInput - Multi-value chip input with validation
+ *
+ * Features tag creation, deletion, validation, suggestions,
+ * and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   value={tags}
+ *   onChange={setTags}
+ *   maxTags={5}
+ *   placeholder="Add skills..."
+ * />
+ * ```
+ */
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/composed/index.d.ts

@@ -0,0 +1,12 @@
+export { PaymentMethodSelect } from './PaymentMethodSelect';
+export type { PaymentMethodSelectProps, PaymentMethod, CardType, } from './PaymentMethodSelect';
+export { AddressSelect } from './AddressSelect';
+export type { AddressSelectProps, Address } from './AddressSelect';
+export { SearchInput } from './SearchInput';
+export type { SearchInputProps, SearchSuggestion } from './SearchInput';
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps, PasswordStrength, PasswordStrengthRule, } from './PasswordInput';
+export { TagInput } from './TagInput';
+export type { TagInputProps } from './TagInput';
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, Country } from './PhoneInput';