@mt-gloss/ui 0.0.9 → 0.0.11

package/lib/primitives/Card.d.ts

@@ -1,140 +1,22 @@
-import { default as React } from 'react';
-export type CardVariant = 'elevated' | 'outlined' | 'filled';
+/**
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
+ */
+export { PresetCard as Card } from '../presets/PresetCard/PresetCard';
+export { PresetCardMedia as CardMedia } from '../presets/PresetCard/PresetCard';
+export { PresetCardHeader as CardHeader } from '../presets/PresetCard/PresetCard';
+export { PresetCardTitle as CardTitle } from '../presets/PresetCard/PresetCard';
+export { PresetCardSubtitle as CardSubtitle } from '../presets/PresetCard/PresetCard';
+export { PresetCardBody as CardBody } from '../presets/PresetCard/PresetCard';
+export { PresetCardActions as CardActions } from '../presets/PresetCard/PresetCard';
+export { PresetCardFooter as CardFooter } from '../presets/PresetCard/PresetCard';
+export type { PresetCardProps as CardProps, PresetCardVariant as CardVariant } from '../presets/PresetCard/PresetCard';
+export type { PresetCardMediaProps as CardMediaProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardHeaderProps as CardHeaderProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardTitleProps as CardTitleProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardSubtitleProps as CardSubtitleProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardBodyProps as CardBodyProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardActionsProps as CardActionsProps } from '../presets/PresetCard/PresetCard';
+export type { PresetCardFooterProps as CardFooterProps } from '../presets/PresetCard/PresetCard';
 export type CardSize = 'sm' | 'md' | 'lg';
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Visual style variant
-     * - elevated: Default style with shadow (default)
-     * - outlined: Border-focused, no shadow
-     * - filled: Subtle background fill
-     */
-    variant?: CardVariant;
-    /**
-     * Size of the card (affects padding)
-     */
-    size?: CardSize;
-    /**
-     * Whether the card should have interactive hover effects
-     */
-    interactive?: boolean;
-    /**
-     * Whether the card is in a selected state
-     */
-    selected?: boolean;
-    /**
-     * Content of the card
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * Card component - flexible container for grouping related content
- *
- * DOM Structure: `<div class="gloss-card">`
- *
- * @example
- * ```tsx
- * <Card variant="elevated" interactive>
- *   <CardHeader>
- *     <CardTitle>Title</CardTitle>
- *   </CardHeader>
- *   <CardBody>Content here</CardBody>
- *   <CardFooter>Actions</CardFooter>
- * </Card>
- * ```
- */
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Image source URL
-     */
-    src?: string;
-    /**
-     * Alt text for the image
-     */
-    alt?: string;
-    /**
-     * Height of the media container
-     */
-    height?: number | string;
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardMedia - media/image section of a card
- *
- * DOM Structure: `<div class="gloss-card__media">`
- */
-export declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardHeader - header section of a card
- *
- * DOM Structure: `<div class="gloss-card__header">`
- */
-export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * HTML heading level (h1-h6)
-     */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardTitle - title element for card headers
- *
- * DOM Structure: `<h3 class="gloss-card__title">`
- */
-export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-export interface CardSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardSubtitle - subtitle element for card headers
- *
- * DOM Structure: `<p class="gloss-card__subtitle">`
- */
-export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
-export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardBody - main content section of a card
- *
- * DOM Structure: `<div class="gloss-card__body">`
- */
-export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Alignment of actions
-     */
-    align?: 'start' | 'center' | 'end' | 'between';
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardActions - inline action area (different from Footer, no background)
- *
- * DOM Structure: `<div class="gloss-card__actions">`
- */
-export declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * CardFooter - footer/action section of a card (with background)
- *
- * DOM Structure: `<div class="gloss-card__footer">`
- */
-export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

package/lib/primitives/Checkbox.d.ts

@@ -1,70 +1,6 @@
-import { default as React } from 'react';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-    /**
-     * Whether the checkbox is checked (controlled)
-     */
-    checked?: boolean;
-    /**
-     * Default checked state (uncontrolled)
-     */
-    defaultChecked?: boolean;
-    /**
-     * Whether the checkbox is in an indeterminate state
-     * (represents a partially-selected parent of a group)
-     */
-    indeterminate?: boolean;
-    /**
-     * Callback when checked state changes
-     */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Callback with just the boolean value (convenience)
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Label text displayed next to the checkbox
-     */
-    label?: React.ReactNode;
-    /**
-     * Helper text displayed below the checkbox
-     */
-    helperText?: string;
-    /**
-     * Validation/status state
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error';
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Size of the checkbox
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Position of the label relative to the checkbox
-     * @default 'right'
-     */
-    labelPosition?: 'left' | 'right';
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Checkbox component for boolean input with label support
- *
- * Supports controlled/uncontrolled modes, indeterminate state, and form integration.
- * Uses convex physics - checkbox elevates slightly on hover.
- *
- * @example
- * ```tsx
- * <Checkbox label="Accept terms" />
- * <Checkbox label="Subscribe" defaultChecked />
- * <Checkbox label="Select all" indeterminate />
- * <Checkbox label="Agree" status="error" helperText="Required" />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetCheckbox as Checkbox } from '../presets/PresetCheckbox/PresetCheckbox';
+export type { PresetCheckboxProps as CheckboxProps } from '../presets/PresetCheckbox/PresetCheckbox';

package/lib/primitives/CheckboxGroup.d.ts

@@ -1,162 +1,6 @@
-import { default as React } from 'react';
-import { CheckboxProps } from './Checkbox';
 /**
- * Option definition for CheckboxGroup
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-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>>;
+export { CheckboxGroup, useCheckboxGroupContext, GroupCheckbox } from '../wrappers/CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxGroupOption, CheckboxGroupContextValue, GroupCheckboxProps } from '../wrappers/CheckboxGroup/CheckboxGroup';

package/lib/primitives/Chip.d.ts

@@ -1,68 +1,7 @@
-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>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;
+export { PresetChip as Chip } from '../presets/PresetChip/PresetChip';
+export type { PresetChipProps as ChipProps, PresetChipVariant as ChipVariant, PresetChipColor as ChipColor } from '../presets/PresetChip/PresetChip';
+export type ChipSize = 'sm' | 'md' | 'lg';

package/lib/primitives/ColorPicker.d.ts

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

package/lib/primitives/DatePicker.d.ts

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