@mt-gloss/ui 0.0.9 → 0.0.10

package/lib/primitives/SplitButton.d.ts

@@ -1,84 +1,6 @@
-import { default as React } from 'react';
-import { ButtonVariant } from './Button';
-import { IconValue } from '../types/icon';
-export interface SplitButtonMenuItem {
-    /**
-     * Menu item label
-     */
-    label: React.ReactNode;
-    /**
-     * Click handler
-     */
-    onClick: () => void;
-    /**
-     * Optional icon
-     */
-    icon?: IconValue;
-    /**
-     * Disabled state
-     */
-    disabled?: boolean;
-    /**
-     * Render a divider before this item
-     */
-    divider?: boolean;
-}
-export interface SplitButtonProps {
-    /**
-     * Main button content
-     */
-    children: React.ReactNode;
-    /**
-     * Main button click handler
-     */
-    onClick?: () => void;
-    /**
-     * Dropdown menu items
-     */
-    menuItems: SplitButtonMenuItem[];
-    /**
-     * Button variant
-     * @default 'primary'
-     */
-    variant?: ButtonVariant;
-    /**
-     * Button size
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Disabled state for both buttons
-     */
-    disabled?: boolean;
-    /**
-     * Icon for dropdown trigger button
-     * @default 'chevron-down'
-     */
-    dropdownIcon?: IconValue;
-    /**
-     * Left icon for main button
-     */
-    leftIcon?: IconValue;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * SplitButton component - main action button with dropdown menu
- *
- * @example
- * ```tsx
- * <SplitButton
- *   onClick={() => console.log('Save')}
- *   menuItems={[
- *     { label: 'Save as draft', onClick: () => {} },
- *     { label: 'Save and publish', onClick: () => {} },
- *     { divider: true, label: 'Delete', onClick: () => {}, icon: 'trash' },
- *   ]}
- * >
- *   Save
- * </SplitButton>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLDivElement>>;
+export { SplitButton } from '../composites/overlay/SplitButton/SplitButton';
+export type { SplitButtonProps, SplitButtonMenuItem } from '../composites/overlay/SplitButton/SplitButton';

package/lib/primitives/Textarea.d.ts

@@ -1,59 +1,6 @@
-import { default as React } from 'react';
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'prefix'> {
-    /**
-     * Label text for the textarea
-     */
-    label?: string;
-    /**
-     * Validation/interaction status
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error' | 'pending';
-    /**
-     * Helper text displayed below the textarea
-     */
-    helperText?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Enable auto-resize based on content
-     * @default false
-     */
-    autoResize?: boolean;
-    /**
-     * Minimum rows when auto-resizing
-     * @default 3
-     */
-    minRows?: number;
-    /**
-     * Maximum rows when auto-resizing
-     * @default 10
-     */
-    maxRows?: number;
-    /**
-     * Show character counter (requires maxLength to be set)
-     * @default false
-     */
-    showCounter?: boolean;
-    /**
-     * Custom counter renderer
-     */
-    renderCounter?: (current: number, max: number) => React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Textarea component with auto-resize support
- *
- * @example
- * ```tsx
- * <Textarea label="Description" placeholder="Enter description..." />
- * <Textarea autoResize minRows={2} maxRows={6} />
- * <Textarea maxLength={500} showCounter />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { PresetTextarea as Textarea } from '../presets/PresetTextarea/PresetTextarea';
+export type { PresetTextareaProps as TextareaProps } from '../presets/PresetTextarea/PresetTextarea';

package/lib/primitives/TimePicker.d.ts

@@ -1,93 +1,6 @@
-import { default as React } from 'react';
-export interface TimePickerProps {
-    /**
-     * Current time value (HH:mm or HH:mm:ss format)
-     */
-    value?: string;
-    /**
-     * Default time value
-     */
-    defaultValue?: string;
-    /**
-     * Callback when time changes
-     */
-    onChange?: (time: string) => void;
-    /**
-     * Time format
-     * @default '12h'
-     */
-    format?: '12h' | '24h';
-    /**
-     * Whether to show seconds
-     * @default false
-     */
-    showSeconds?: boolean;
-    /**
-     * Step in minutes for the dropdown options
-     * @default 30
-     */
-    step?: number;
-    /**
-     * Minimum selectable time (HH:mm format)
-     */
-    minTime?: string;
-    /**
-     * Maximum selectable time (HH:mm format)
-     */
-    maxTime?: string;
-    /**
-     * Placeholder text
-     * @default 'Select time'
-     */
-    placeholder?: string;
-    /**
-     * 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;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * ID for the input
-     */
-    id?: string;
-    /**
-     * Name for form submission
-     */
-    name?: string;
-}
 /**
- * TimePicker - Time selection with dropdown
- *
- * Features 12/24 hour format, step intervals, and keyboard support.
- *
- * @example
- * ```tsx
- * <TimePicker
- *   value={time}
- *   onChange={setTime}
- *   format="12h"
- *   step={15}
- * />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetTimePicker as TimePicker } from '../presets/PresetTimePicker/PresetTimePicker';
+export type { PresetTimePickerProps as TimePickerProps } from '../presets/PresetTimePicker/PresetTimePicker';

package/lib/primitives/Toggle.d.ts

@@ -1,68 +1,6 @@
-import { default as React } from 'react';
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-    /**
-     * Whether the toggle is on (controlled)
-     */
-    checked?: boolean;
-    /**
-     * Default on state (uncontrolled)
-     */
-    defaultChecked?: boolean;
-    /**
-     * Callback when toggle 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 toggle
-     */
-    label?: React.ReactNode;
-    /**
-     * Text displayed inside the track when on
-     */
-    onLabel?: React.ReactNode;
-    /**
-     * Text displayed inside the track when off
-     */
-    offLabel?: React.ReactNode;
-    /**
-     * Helper text displayed below the toggle
-     */
-    helperText?: string;
-    /**
-     * Validation/status state
-     * @default 'default'
-     */
-    status?: 'default' | 'success' | 'error';
-    /**
-     * Size of the toggle
-     * @default 'md'
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Position of the label relative to the toggle
-     * @default 'right'
-     */
-    labelPosition?: 'left' | 'right';
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
 /**
- * Toggle/Switch component for boolean on/off states
- *
- * Uses spring physics for the thumb movement and smooth color transitions.
- *
- * @example
- * ```tsx
- * <Toggle label="Enable notifications" />
- * <Toggle label="Dark mode" defaultChecked />
- * <Toggle label="Auto-save" onLabel="ON" offLabel="OFF" />
- * <Toggle label="Feature flag" size="sm" disabled />
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export { PresetToggle as Toggle } from '../presets/PresetToggle/PresetToggle';
+export type { PresetToggleProps as ToggleProps } from '../presets/PresetToggle/PresetToggle';

package/lib/primitives/Tooltip.d.ts

@@ -1,89 +1,9 @@
-import { default as React } from 'react';
+/**
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
+ */
+export { PresetTooltip as Tooltip } from '../presets/PresetTooltip/PresetTooltip';
+export type { PresetTooltipProps as TooltipProps } from '../presets/PresetTooltip/PresetTooltip';
 export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type TooltipVariant = 'dark' | 'light' | 'primary' | 'success' | 'warning' | 'error';
 export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
-export interface TooltipProps {
-    /**
-     * Tooltip content
-     */
-    content: React.ReactNode;
-    /**
-     * Element that triggers the tooltip
-     */
-    children: React.ReactElement;
-    /**
-     * Tooltip placement
-     * @default 'top'
-     */
-    placement?: TooltipPlacement;
-    /**
-     * Color variant
-     * @default 'dark'
-     */
-    variant?: TooltipVariant;
-    /**
-     * What triggers the tooltip
-     * @default 'hover'
-     */
-    trigger?: TooltipTrigger;
-    /**
-     * Delay before showing tooltip (ms)
-     * @default 200
-     */
-    delay?: number;
-    /**
-     * Delay before hiding tooltip (ms)
-     * @default 0
-     */
-    hideDelay?: number;
-    /**
-     * Disable the tooltip
-     */
-    disabled?: boolean;
-    /**
-     * Render tooltip in a portal (useful for overflow containers)
-     * @default true
-     */
-    portal?: boolean;
-    /**
-     * Additional CSS class for tooltip content
-     */
-    className?: string;
-    /**
-     * Max width of tooltip
-     * @default 250
-     */
-    maxWidth?: number;
-    /**
-     * Controlled open state (for trigger='manual')
-     */
-    open?: boolean;
-    /**
-     * Callback when open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Show arrow pointer
-     * @default true
-     */
-    arrow?: boolean;
-}
-/**
- * Tooltip component for displaying contextual information
- *
- * @example
- * ```tsx
- * <Tooltip content="Save your changes">
- *   <Button iconOnly leftIcon="save" aria-label="Save" />
- * </Tooltip>
- *
- * <Tooltip content="This action cannot be undone" placement="bottom" variant="error">
- *   <Button variant="danger">Delete</Button>
- * </Tooltip>
- *
- * <Tooltip content="Click to copy" trigger="click">
- *   <Button>Copy to clipboard</Button>
- * </Tooltip>
- * ```
- */
-export declare const Tooltip: React.FC<TooltipProps>;

package/lib/primitives/Transition.d.ts

@@ -1,107 +1,6 @@
-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>
- * ```
+ * @deprecated Import directly from '@mt-gloss/ui' instead.
+ * This file will be removed in Phase 23.
  */
-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 {};
+export { Transition, TransitionGroup } from '../wrappers/Transition/Transition';
+export type { TransitionProps, TransitionGroupProps } from '../wrappers/Transition/Transition';

package/lib/primitives/dashboard/MetricCard/CardBack.d.ts

@@ -1,10 +1,25 @@
+/** A single dimension entry for dimension-chooser mode (D-11). */
+export interface DimensionEntry {
+    id: string;
+    label: string;
+}
 export interface CardBackProps {
     currentTimeframe?: string;
     onSelectTimeframe?: (presetId: string) => void;
     title?: string;
-    mode?: 'single' | 'stacked';
+    mode?: 'single' | 'stacked' | 'dimension-chooser';
     currentStackedTimeframes?: string[];
     onSelectStackedTimeframes?: (timeframes: string[]) => void;
+    /**
+     * Dimensions to display in 'dimension-chooser' mode.
+     * Clicking a dimension calls onBeginConfig with its id.
+     */
+    dimensions?: DimensionEntry[];
+    /**
+     * Called when a dimension is selected in 'dimension-chooser' mode.
+     * Receives the selected dimension's id.
+     */
+    onBeginConfig?: (dimensionId: string) => void;
 }
 /**
  * CardBack - Back face of the 3D flipped card.
@@ -26,6 +41,6 @@ export interface CardBackProps {
  * ```
  */
 export declare const CardBack: {
-    ({ currentTimeframe, onSelectTimeframe, title, mode, currentStackedTimeframes, onSelectStackedTimeframes, }: CardBackProps): import("react/jsx-runtime").JSX.Element;
+    ({ currentTimeframe, onSelectTimeframe, title, mode, currentStackedTimeframes, onSelectStackedTimeframes, dimensions, onBeginConfig, }: CardBackProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/primitives/dashboard/MetricCard/CardShell.d.ts

@@ -17,6 +17,6 @@ import { CardShellProps } from './types';
  * ```
  */
 export declare const CardShell: {
-    ({ children, colSpan, isStale, isRetrying, beta, disabled, style, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, enableQuickSettings, onUpdateTimeframe, instanceTimeframe, cardTitle, onViewAsStack, onUnstack, isStackedGroup, onUpdateStackedTimeframes, instanceStackedTimeframes, isGraphActive, isTableActive, isGraphCard, canExpand, cardRef: externalCardRef, }: CardShellProps): import("react/jsx-runtime").JSX.Element;
+    ({ contentSlot, children, colSpan, isStale, isRetrying, beta, disabled, style, accentRing, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, enableQuickSettings, onUpdateTimeframe, instanceTimeframe, cardTitle, onViewAsStack, onUnstack, isStackedGroup, onUpdateStackedTimeframes, instanceStackedTimeframes, isGraphActive, isTableActive, isGraphCard, canExpand, cardRef: externalCardRef, }: CardShellProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/primitives/dashboard/MetricCard/EdgeHoverHandle.d.ts

@@ -0,0 +1,20 @@
+import { ResizeState } from './useEdgeHoverResize';
+export interface EdgeHoverHandleProps {
+    state: ResizeState;
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+    /** Which card edge the handle is positioned on. Default: 'right' */
+    edge?: 'right' | 'left';
+    ariaLabel?: string;
+}
+/**
+ * EdgeHoverHandle — Corner/edge handle affordance for the resize gesture.
+ *
+ * Visibility is derived from resize state: only visible when state is
+ * 'handle-visible' or 'dragging'. Invisible at 'idle' to avoid colliding
+ * with the chip-menu click target on the value/row area.
+ *
+ * Motion contract (AN-06): opacity transitions driven by edge-hover.scss
+ * using enterMs=180ms (enter) / exitMs=120ms (exit via ghost-preview).
+ */
+export declare const EdgeHoverHandle: import('react').ForwardRefExoticComponent<EdgeHoverHandleProps & import('react').RefAttributes<HTMLButtonElement>>;

package/lib/primitives/dashboard/MetricCard/GhostPreview.d.ts

@@ -0,0 +1,24 @@
+export interface GhostPreviewProps {
+    /** Whether the ghost overlay is currently visible (active during drag). */
+    visible: boolean;
+    /** The target column span being previewed. */
+    targetColSpan: 1 | 2 | 3;
+    /** AN-06 enter duration in ms. Default: 180ms */
+    enterMs?: number;
+    /** AN-06 exit duration in ms. Default: 120ms */
+    exitMs?: number;
+}
+/**
+ * GhostPreview — Dashed outline overlay rendered during an active resize drag.
+ *
+ * Provides visual feedback of the target card size before the user commits
+ * by releasing the pointer. Uses the same ghost-preview vocabulary as the
+ * existing chart-area resize affordance.
+ *
+ * Hidden via aria-hidden — purely decorative visual feedback.
+ * Motion contract (AN-06): enter 180ms, exit 120ms.
+ */
+export declare function GhostPreview({ visible, targetColSpan, enterMs, exitMs, }: GhostPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace GhostPreview {
+    var displayName: string;
+}

package/lib/primitives/dashboard/MetricCard/GutterActions.d.ts

@@ -21,13 +21,23 @@ export interface GutterActionsProps {
     onUnstack?: () => void;
     canExpand?: boolean;
     isGraphCard?: boolean;
-    colSpan?: 1 | 2;
+    colSpan?: 1 | 2 | 3;
     isGraphActive?: boolean;
     isTableActive?: boolean;
     /** Label for graph pill button (injected, no registry dependency). */
     graphLabel?: string;
     /** Label for details pill button (injected, no registry dependency). */
     detailsLabel?: string;
+    /**
+     * Pill variant:
+     * - 'default': standard pill with graph/details/more controls
+     * - 'config': replaces 'more' with Save (Check) + Cancel (Close) pills (D-10)
+     */
+    variant?: 'default' | 'config';
+    /** Called when Save pill is clicked in config variant. */
+    onConfigSave?: () => void;
+    /** Called when Cancel pill is clicked in config variant. */
+    onConfigCancel?: () => void;
 }
 /**
  * GutterActions - Pill + overflow menu interaction system.
@@ -51,6 +61,6 @@ export interface GutterActionsProps {
  * ```
  */
 export declare const GutterActions: {
-    ({ visible, menuOpen, onMenuToggle, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, onQuickSettings, onFlipBack, isFlipped, onViewAsStack, onUnstack, canExpand, isGraphCard, colSpan, isGraphActive, isTableActive, graphLabel, detailsLabel, }: GutterActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ visible, menuOpen, onMenuToggle, onGraph, onDetails, onCustomize, onRemove, onWhatsThis, onExpand, onShrink, onMove, onReplace, onNavigate, onRetry, onRefresh, onQuickSettings, onFlipBack, isFlipped, onViewAsStack, onUnstack, canExpand, isGraphCard, colSpan, isGraphActive, isTableActive, graphLabel, detailsLabel, variant, onConfigSave, onConfigCancel, }: GutterActionsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/primitives/dashboard/MetricCard/MetricCard.d.ts

@@ -1,32 +1,4 @@
 import { MetricCardProps } from './types';
-/**
- * MetricCard -- Unified display component handling 9 variants via props.
- *
- * All variants share a Zone A/B/C layout:
- *   Zone A (Label): Fixed 28px height, 10.5px uppercase
- *   Zone B (Value): flex:1, dynamic font size based on formatted string length
- *   Zone C (Subtitle + Trend): flex row, min-height 18px
- *
- * Renders as a fragment -- CardShell provides the outer container with padding,
- * flex column, and hover states.
- *
- * Props use a discriminated union keyed on `variant`. Each variant carries its
- * own required extra fields (e.g. sparklineData for sparkline, segments for segmented).
- *
- * @example
- * ```tsx
- * import { MetricCard } from '@mt-gloss/ui';
- *
- * <MetricCard
- *   variant="standard"
- *   label="Total Revenue"
- *   value={125430}
- *   valueFormat={{ prefix: '$', abbreviated: true }}
- *   trend={{ value: 12.5, direction: 'up' }}
- *   subtitle="MTD"
- * />
- * ```
- */
 export declare const MetricCard: {
     (props: MetricCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;