@mt-gloss/ui 0.0.6 → 0.0.8

package/lib/composites/cards/BarChartCard.d.ts

@@ -0,0 +1,43 @@
+/** Props for the BarChartCard composite (wraps BarsVariant). */
+export interface BarChartCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Bar chart data points */
+    barData: number[];
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Accent color for bars */
+    accentColor?: string;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const BarChartCard: {
+    (props: BarChartCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/ComparisonCard.d.ts

@@ -0,0 +1,46 @@
+/** Props for the ComparisonCard composite (wraps VersusVariant). */
+export interface ComparisonCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value (optional since versus shows dual values) */
+    value?: number | string | null;
+    /** Comparison data with current and prior period values */
+    comparison: {
+        current: number | string;
+        prior: number | string;
+        currentLabel?: string;
+        priorLabel?: string;
+    };
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const ComparisonCard: {
+    (props: ComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/DirectionCard.d.ts

@@ -0,0 +1,43 @@
+/** Props for the DirectionCard composite (wraps ArrowVariant). */
+export interface DirectionCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Arrow pointing direction */
+    direction: 'up' | 'down';
+    /** Arrow visual shape */
+    shape?: 'chevron' | 'triple' | 'bars';
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const DirectionCard: {
+    (props: DirectionCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/DistributionCard.d.ts

@@ -0,0 +1,45 @@
+/** Props for the DistributionCard composite (wraps DonutVariant). */
+export interface DistributionCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Current donut value */
+    donutValue: number;
+    /** Maximum donut value (100% ring) */
+    donutMax?: number;
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Accent color for donut */
+    accentColor?: string;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const DistributionCard: {
+    (props: DistributionCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/HighlightCard.d.ts

@@ -0,0 +1,41 @@
+/** Props for the HighlightCard composite (wraps HighlightVariant). */
+export interface HighlightCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Semantic highlight color (hex or CSS variable) */
+    highlightColor: string;
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const HighlightCard: {
+    (props: HighlightCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/ProgressCard.d.ts

@@ -0,0 +1,43 @@
+/** Props for the ProgressCard composite (wraps ObjectArrowVariant). */
+export interface ProgressCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Current progress value */
+    progressValue: number;
+    /** Maximum progress value */
+    progressMax: number;
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const ProgressCard: {
+    (props: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/SegmentCard.d.ts

@@ -0,0 +1,45 @@
+/** Props for the SegmentCard composite (wraps SegmentedVariant). */
+export interface SegmentCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Segment data for segmented bar visualization */
+    segments: Array<{
+        value: number;
+        color: string;
+        label?: string;
+    }>;
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const SegmentCard: {
+    (props: SegmentCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/SimpleMetricCard.d.ts

@@ -0,0 +1,39 @@
+/** Props for the SimpleMetricCard composite (wraps StandardVariant). */
+export interface SimpleMetricCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const SimpleMetricCard: {
+    (props: SimpleMetricCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/TrendCard.d.ts

@@ -0,0 +1,43 @@
+/** Props for the TrendCard composite (wraps SparklineVariant). */
+export interface TrendCardProps {
+    /** KPI label displayed in the card header */
+    label: string;
+    /** Primary metric value */
+    value?: number | string | null;
+    /** Sparkline data points for trend visualization */
+    trendData: number[];
+    /** Optional value formatting */
+    format?: {
+        prefix?: string;
+        suffix?: string;
+        abbreviated?: boolean;
+    };
+    /** Trend direction and magnitude */
+    trend?: {
+        value: number;
+        direction: 'up' | 'down' | 'flat';
+        label?: string;
+    } | null;
+    /** Secondary descriptive text */
+    subtitle?: string;
+    /** Show as loading state */
+    loading?: boolean;
+    /** Show as error state */
+    error?: boolean;
+    /** Show as empty/no-data state */
+    empty?: boolean;
+    /** Whether data is stale (triggers blur animation) */
+    stale?: boolean;
+    /** Accent color for sparkline */
+    accentColor?: string;
+    /** Open detail graph view */
+    onDetails?: () => void;
+    /** Remove card from grid */
+    onRemove?: () => void;
+    /** Navigate to source data */
+    onNavigate?: () => void;
+}
+export declare const TrendCard: {
+    (props: TrendCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/composites/cards/index.d.ts

@@ -0,0 +1,18 @@
+export { TrendCard } from './TrendCard';
+export type { TrendCardProps } from './TrendCard';
+export { BarChartCard } from './BarChartCard';
+export type { BarChartCardProps } from './BarChartCard';
+export { DistributionCard } from './DistributionCard';
+export type { DistributionCardProps } from './DistributionCard';
+export { HighlightCard } from './HighlightCard';
+export type { HighlightCardProps } from './HighlightCard';
+export { DirectionCard } from './DirectionCard';
+export type { DirectionCardProps } from './DirectionCard';
+export { ProgressCard } from './ProgressCard';
+export type { ProgressCardProps } from './ProgressCard';
+export { ComparisonCard } from './ComparisonCard';
+export type { ComparisonCardProps } from './ComparisonCard';
+export { SegmentCard } from './SegmentCard';
+export type { SegmentCardProps } from './SegmentCard';
+export { SimpleMetricCard } from './SimpleMetricCard';
+export type { SimpleMetricCardProps } from './SimpleMetricCard';

package/lib/composites/forms/PasswordInput.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+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 {
+    /** Current password value */
+    value?: string;
+    /** Default password value (uncontrolled) */
+    defaultValue?: string;
+    /** Change handler */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Blur handler */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Field label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Validation status */
+    status?: 'default' | 'success' | 'error' | 'pending';
+    /** Helper/error text below field */
+    helperText?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** CSS class name */
+    className?: string;
+    /** Auto-complete hint */
+    autoComplete?: string;
+    /** 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 → composites/forms}/PhoneInput.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { InputProps } from '../Input';
 export interface Country {
     /**
      * ISO 3166-1 alpha-2 country code
@@ -19,39 +18,38 @@ export interface Country {
      */
     format?: string;
 }
-export interface PhoneInputProps extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'leftIcon'> {
-    /**
-     * Current value in E.164 format (e.g., +14155551234)
-     */
+export interface PhoneInputProps {
+    /** Current value in E.164 format (e.g., +14155551234) */
     value?: string;
-    /**
-     * Default value
-     */
+    /** Default value */
     defaultValue?: string;
-    /**
-     * Callback when value changes
-     * Returns E.164 formatted value
-     */
+    /** Callback when value changes. Returns E.164 formatted value */
     onChange?: (value: string) => void;
-    /**
-     * Default selected country code
-     * @default 'US'
-     */
+    /** Field label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Validation status */
+    status?: 'default' | 'success' | 'error' | 'pending';
+    /** Helper/error text below field */
+    helperText?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** CSS class name */
+    className?: string;
+    /** Default selected country code @default 'US' */
     defaultCountry?: string;
-    /**
-     * List of countries to show in selector
-     * Uses default list if not provided
-     */
+    /** List of countries to show in selector. Uses default list if not provided */
     countries?: Country[];
-    /**
-     * Whether to show country selector
-     * @default true
-     */
+    /** Whether to show country selector @default true */
     showCountrySelect?: boolean;
-    /**
-     * Format for display
-     * @default 'national'
-     */
+    /** Format for display @default 'national' */
     format?: 'national' | 'international';
 }
 /**

package/lib/composites/forms/SearchInput.d.ts

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+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 {
+    /** Current search value */
+    value?: string;
+    /** Default search value (uncontrolled) */
+    defaultValue?: string;
+    /** Change handler */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Key down handler */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Focus handler */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Blur handler */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Field label */
+    label?: string;
+    /** Placeholder text @default 'Search...' */
+    placeholder?: string;
+    /** Validation status */
+    status?: 'default' | 'success' | 'error' | 'pending';
+    /** Helper/error text below field */
+    helperText?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** CSS class name */
+    className?: string;
+    /** Auto-complete hint */
+    autoComplete?: string;
+    /** 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/composites/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cards';
+export * from './forms';

package/lib/compositions/index.d.ts

@@ -0,0 +1,3 @@
+export type { PatternMetadata, PatternPropDefinition, PatternCategory, PatternRecord, } from './types';
+export * from './forms';
+export * from './feedback';

package/lib/{Button.d.ts → primitives/Button.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconSlotProps } from './types/icon';
+import { IconSlotProps } from '../types/icon';
 import { TooltipPlacement } from './Tooltip';
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'danger-outline';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, IconSlotProps {

package/lib/{Link.d.ts → primitives/Link.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconValue } from './types/icon';
+import { IconValue } from '../types/icon';
 export type LinkVariant = 'default' | 'muted' | 'danger';
 export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     /**