@mt-gloss/ui 0.0.9 → 0.0.11

package/lib/primitives/Link.d.ts

@@ -1,69 +1,6 @@
-import { default as React } from 'react';
-import { IconValue } from '../types/icon';
-export type LinkVariant = 'default' | 'muted' | 'danger';
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-    /**
-     * URL the link points to
-     */
-    href?: string;
-    /**
-     * Visual style variant
-     * @default 'default'
-     */
-    variant?: LinkVariant;
-    /**
-     * Size of the link text
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Icon displayed before the link text
-     */
-    leftIcon?: IconValue;
-    /**
-     * Icon displayed after the link text
-     */
-    rightIcon?: IconValue;
-    /**
-     * Opens link in new tab with security attributes (adds external-link icon)
-     */
-    external?: boolean;
-    /**
-     * Disabled state - prevents interaction
-     */
-    disabled?: boolean;
-    /**
-     * Underline behavior
-     * @default 'hover'
-     */
-    underline?: 'always' | 'hover' | 'none';
-    /**
-     * Render as different element (e.g., for Next.js Link integration)
-     * When using with Next.js, pass the Link component from next/link as `as`
-     * and spread href and other props through
-     */
-    as?: React.ElementType;
-    /**
-     * Content of the link
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Link component for navigation with consistent styling
- *
- * Features underline animations, icons, and external link handling.
- * Can be composed with framework-specific link components using the `as` prop.
- *
- * @example
- * ```tsx
- * <Link href="/about">About Us</Link>
- * <Link href="https://example.com" external>External Site</Link>
- * <Link href="/settings" leftIcon="settings">Settings</Link>
- * <Link variant="muted" size="sm">Learn more</Link>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { PresetLink as Link } from '../presets/PresetLink/PresetLink';
+export type { PresetLinkProps as LinkProps, PresetLinkVariant as LinkVariant } from '../presets/PresetLink/PresetLink';

package/lib/primitives/MaskedInput.d.ts

@@ -1,95 +1,6 @@
-import { default as React } from 'react';
-import { default as IMask } from 'imask';
-import { InputProps } from './Input';
 /**
- * Mask configuration options
- * @see https://imask.js.org/guide.html
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export interface MaskConfig {
-    /**
-     * Mask pattern string (e.g., '0000 0000 0000 0000' for credit card)
-     * '0' = digit, 'a' = letter, '*' = any character
-     */
-    mask: string | RegExp | NumberConstructor | Array<string | RegExp | {
-        mask: string;
-        [key: string]: unknown;
-    }>;
-    /**
-     * Placeholder character for unfilled positions
-     * @default '_'
-     */
-    placeholderChar?: string;
-    /**
-     * Whether to show placeholder characters (lazy mode hides unfilled)
-     * @default true
-     */
-    lazy?: boolean;
-    /**
-     * Custom definitions for mask characters
-     * @example { '#': /[0-9]/ }
-     */
-    definitions?: Record<string, RegExp>;
-    /**
-     * Whether to include mask characters in the value
-     * false = masked value, true = unmasked value, 'typed' = typed value
-     * @default false
-     */
-    unmask?: boolean | 'typed';
-    /**
-     * Additional imask options
-     */
-    [key: string]: unknown;
-}
-type IMaskInstance = ReturnType<typeof IMask>;
-/**
- * Built-in mask presets for common use cases
- */
-export declare const MaskPresets: Record<string, MaskConfig>;
-export type MaskPresetName = keyof typeof MaskPresets;
-export interface MaskedInputProps extends Omit<InputProps, 'onChange' | 'value'> {
-    /**
-     * Mask configuration object or preset name
-     */
-    mask: MaskConfig | MaskPresetName;
-    /**
-     * Current value (can be masked or unmasked depending on mask config)
-     */
-    value?: string;
-    /**
-     * Callback with unmasked value when input is accepted
-     */
-    onAccept?: (value: string, maskRef: IMaskInstance) => void;
-    /**
-     * Callback when mask is complete
-     */
-    onComplete?: (value: string, maskRef: IMaskInstance) => void;
-    /**
-     * Standard onChange for form compatibility (fires with masked value)
-     */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-/**
- * Input component with built-in masking support
- *
- * Wraps the base Input component with imask integration for
- * formatted input like credit cards, phone numbers, dates, etc.
- *
- * @example
- * ```tsx
- * // Using a preset
- * <MaskedInput
- *   mask="creditCard"
- *   label="Card Number"
- *   onAccept={(value) => setCardNumber(value)}
- * />
- *
- * // Custom mask
- * <MaskedInput
- *   mask={{ mask: '000-000-0000' }}
- *   label="Phone"
- *   onAccept={(value) => setPhone(value)}
- * />
- * ```
- */
-export declare const MaskedInput: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export { PresetMaskedInput as MaskedInput, MaskPresets } from '../presets/PresetMaskedInput/PresetMaskedInput';
+export type { PresetMaskedInputProps as MaskedInputProps, MaskConfig, MaskPresetName } from '../presets/PresetMaskedInput/PresetMaskedInput';

package/lib/primitives/Menu.d.ts

@@ -1,132 +1,13 @@
-import { default as React } from 'react';
-import { AccordionShowCount } from './Accordion';
-export type MenuLevel = 0 | 1 | 2;
-export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Content of the menu (MenuGroup or MenuItem components)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * Menu - navigation container with collapsible groups
- *
- * DOM Structure: `<nav class="gloss-menu">`
- *
- * @example
- * ```tsx
- * <Menu>
- *   <MenuGroup label="Components" showCount="never">
- *     <MenuGroup label="Input" showCount="collapsed-only">
- *       <MenuItem href="/input" icon={<Icon name="input" />}>Text</MenuItem>
- *     </MenuGroup>
- *   </MenuGroup>
- * </Menu>
- * ```
- */
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLElement>>;
-export interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Label text for the group header
-     */
-    label: string;
-    /**
-     * Icon to display on the left side of the header
-     */
-    icon?: React.ReactNode;
-    /**
-     * Whether the group is expanded by default
-     */
-    defaultOpen?: boolean;
-    /**
-     * Controlled open state
-     */
-    open?: boolean;
-    /**
-     * Callback when open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * When to show the item count badge
-     */
-    showCount?: AccordionShowCount;
-    /**
-     * Whether the group is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Content of the group (MenuItem or nested MenuGroup)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * MenuGroup - collapsible section within Menu
- *
- * DOM Structure: `<div class="gloss-menu-group">`
- */
-export declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<HTMLDivElement>>;
-export interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * URL for the item (renders as anchor if provided)
-     */
-    href?: string;
-    /**
-     * Custom component to render as (e.g., Next.js Link)
-     * When provided with href, renders the component with href prop
-     */
-    as?: React.ElementType;
-    /**
-     * Icon to display on the left side
-     */
-    icon?: React.ReactNode;
-    /**
-     * Whether the item is currently active/selected
-     */
-    active?: boolean;
-    /**
-     * Whether the item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Click handler (for non-link items)
-     */
-    onClick?: (e: React.MouseEvent) => void;
-    /**
-     * Content of the item
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * MenuItem - individual navigation item
- *
- * DOM Structure: `<a class="gloss-menu-item">` or `<button class="gloss-menu-item">`
- *
- * @example
- * // With Next.js Link
- * import Link from 'next/link';
- * <MenuItem as={Link} href="/dashboard" icon={<Icon name="home" />}>Dashboard</MenuItem>
- */
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLElement>>;
-export interface MenuDividerProps extends React.HTMLAttributes<HTMLHRElement> {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * MenuDivider - visual separator between menu items
- *
- * DOM Structure: `<hr class="gloss-menu-divider">`
- */
-export declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps & React.RefAttributes<HTMLHRElement>>;
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
+ */
+export { PresetMenu as Menu } from '../presets/PresetMenu/PresetMenu';
+export { PresetMenuGroup as MenuGroup } from '../presets/PresetMenu/PresetMenu';
+export { PresetMenuItem as MenuItem } from '../presets/PresetMenu/PresetMenu';
+export { PresetMenuDivider as MenuDivider } from '../presets/PresetMenu/PresetMenu';
+export type { PresetMenuProps as MenuProps } from '../presets/PresetMenu/PresetMenu';
+export type { PresetMenuGroupProps as MenuGroupProps } from '../presets/PresetMenu/PresetMenu';
+export type { PresetMenuItemProps as MenuItemProps } from '../presets/PresetMenu/PresetMenu';
+export type MenuDividerProps = Record<string, unknown>;
+export type MenuLevel = 0 | 1 | 2;

package/lib/primitives/NumberInput.d.ts

@@ -1,81 +1,6 @@
-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" />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetNumberInput as NumberInput } from '../presets/PresetNumberInput/PresetNumberInput';
+export type { PresetNumberInputProps as NumberInputProps } from '../presets/PresetNumberInput/PresetNumberInput';

package/lib/primitives/Radio.d.ts

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

package/lib/primitives/RadioGroup.d.ts

@@ -1,163 +1,6 @@
-import { default as React } from 'react';
-import { RadioProps } from './Radio';
 /**
- * Option definition for RadioGroup
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-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>>;
+export { RadioGroup, useRadioGroupContext, GroupRadio } from '../wrappers/RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioGroupOption, RadioGroupContextValue, GroupRadioProps } from '../wrappers/RadioGroup/RadioGroup';