@mt-gloss/ui 0.0.7 → 0.0.9

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { InputProps } from '../../primitives/Input';
 export interface PasswordStrengthRule {
     /**
      * Unique identifier for the rule
@@ -15,45 +14,50 @@ export interface PasswordStrengthRule {
     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
-     */
+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
-     */
+    /** Whether to show the password strength indicator @default false */
     showStrength?: boolean;
-    /**
-     * Pre-calculated password strength (if you want to control it externally)
-     */
+    /** Pre-calculated password strength (if you want to control it externally) */
     strength?: PasswordStrength;
-    /**
-     * Custom strength calculation rules
-     * If not provided, uses default rules
-     */
+    /** Custom strength calculation rules. If not provided, uses default rules */
     strengthRules?: PasswordStrengthRule[];
-    /**
-     * Whether to show a generate password button
-     * @default false
-     */
+    /** Whether to show a generate password button @default false */
     showGenerate?: boolean;
-    /**
-     * Callback when generate button is clicked
-     * If not provided, uses built-in generator
-     */
+    /** Callback when generate button is clicked. If not provided, uses built-in generator */
     onGenerate?: (password: string) => void;
-    /**
-     * Length of generated password
-     * @default 16
-     */
+    /** Length of generated password @default 16 */
     generateLength?: number;
-    /**
-     * Whether to show rule checklist
-     * @default false
-     */
+    /** Whether to show rule checklist @default false */
     showRules?: boolean;
 }
 /**

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { InputProps } from '../../primitives/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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { InputProps } from '../../primitives/Input';
 export interface SearchSuggestion {
     /**
      * Unique identifier for the suggestion
@@ -18,46 +17,56 @@ export interface SearchSuggestion {
      */
     icon?: string;
 }
-export interface SearchInputProps extends Omit<InputProps, 'leftIcon' | 'rightIcon' | 'clearable'> {
-    /**
-     * Callback when search is triggered (Enter key or search button)
-     */
+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 delay in milliseconds for onChange @default 0 */
     debounce?: number;
-    /**
-     * Whether a search is currently in progress
-     */
+    /** Whether a search is currently in progress */
     isSearching?: boolean;
-    /**
-     * List of suggestions to display in dropdown
-     */
+    /** List of suggestions to display in dropdown */
     suggestions?: SearchSuggestion[];
-    /**
-     * Callback when a suggestion is selected
-     */
+    /** Callback when a suggestion is selected */
     onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
-    /**
-     * Whether to show suggestions dropdown
-     * @default false
-     */
+    /** Whether to show suggestions dropdown @default false */
     showSuggestions?: boolean;
-    /**
-     * Show keyboard shortcut hint (e.g., Cmd+K)
-     */
+    /** Show keyboard shortcut hint (e.g., Cmd+K) */
     showShortcut?: boolean;
-    /**
-     * Keyboard shortcut key (works with Cmd/Ctrl)
-     * @default 'k'
-     */
+    /** 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
-     */
+    /** Whether the search input should always show clear button when has value @default true */
     clearable?: boolean;
 }
 /**

package/lib/composites/index.d.ts

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