@mt-gloss/ui 0.0.9 → 0.0.11

package/lib/base/BaseTimePicker/BaseTimePicker.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { ColorValue } from '../../dictionary/color';
+import { SpacingValue } from '../../dictionary/spacing';
+import { RadiusValue } from '../../dictionary/radius';
+export interface BaseTimePickerDefinition {
+    bg?: ColorValue | string;
+    borderColor?: ColorValue | string;
+    radius?: RadiusValue | string;
+    elevation?: string;
+    padding?: SpacingValue | string;
+    cellHeight?: string;
+}
+interface BaseTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    definition?: BaseTimePickerDefinition;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Structural time picker with scrollable column layout.
+ * No time generation or selection logic -- Preset layer handles that.
+ */
+export declare function BaseTimePicker({ definition, className, style, children, ...rest }: BaseTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BaseTimePicker {
+    var displayName: string;
+}
+interface BaseTimePickerColumnProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Scrollable column for hour/minute/period selection.
+ */
+export declare function BaseTimePickerColumn({ className, style, children, ...rest }: BaseTimePickerColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BaseTimePickerColumn {
+    var displayName: string;
+}
+interface BaseTimePickerCellProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {
+    className?: string;
+    style?: React.CSSProperties;
+    selected?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Individual time option cell.
+ */
+export declare function BaseTimePickerCell({ className, style, selected, disabled, children, ...rest }: BaseTimePickerCellProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BaseTimePickerCell {
+    var displayName: string;
+}
+export {};

package/lib/base/BaseTitle/BaseTitle.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { BaseTypographyDefinition } from '../BaseTypography/BaseTypography';
+import { PolymorphicProps } from '../types';
+export type BaseTitleDefinition = BaseTypographyDefinition;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface BaseTitleProps {
+    definition?: BaseTitleDefinition;
+    level?: HeadingLevel;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Semantic heading wrapper around BaseTypography. Defaults to <h2>.
+ * Use `level` prop to select h1-h6.
+ */
+export declare const BaseTitle: {
+    <C extends React.ElementType = "h2">(props: PolymorphicProps<C, BaseTitleProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/base/BaseToast/BaseToast.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { ColorValue } from '../../dictionary/color';
+import { ElevationValue } from '../../dictionary/elevation';
+import { RadiusValue } from '../../dictionary/radius';
+import { SpacingValue } from '../../dictionary/spacing';
+import { ZIndexValue } from '../../dictionary/z-index';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+export interface BaseToastDefinition {
+    bg?: ColorValue | string;
+    shadow?: ElevationValue | string;
+    radius?: RadiusValue | string;
+    padding?: SpacingValue | string;
+    zIndex?: ZIndexValue | string;
+    position?: ToastPosition;
+    /** Auto-dismiss duration in ms. 0 = no auto-dismiss. */
+    duration?: number;
+}
+interface BaseToastProps {
+    definition?: BaseToastDefinition;
+    open: boolean;
+    onDismiss?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Positioned notification with auto-dismiss timer.
+ * Composes BaseOverlay for portal rendering. Position is CSS-driven (fixed).
+ */
+export declare function BaseToast({ definition, open, onDismiss, className, style, children, }: BaseToastProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BaseToast {
+    var displayName: string;
+}
+export {};

package/lib/base/BaseToggle/BaseToggle.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ColorValue } from '../../dictionary/color';
+export interface BaseToggleDefinition {
+    trackBg?: ColorValue | string;
+    trackBgActive?: ColorValue | string;
+    thumbBg?: ColorValue | string;
+    trackWidth?: string;
+    trackHeight?: string;
+    thumbSize?: string;
+}
+export interface BaseToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'style'> {
+    definition?: BaseToggleDefinition;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Structural toggle/switch chassis with hidden input + track + thumb.
+ * No colors, no animations -- those belong in the Preset layer.
+ */
+export declare const BaseToggle: React.ForwardRefExoticComponent<BaseToggleProps & React.RefAttributes<HTMLInputElement>>;

package/lib/base/BaseTooltip/BaseTooltip.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { ColorValue } from '../../dictionary/color';
+import { RadiusValue } from '../../dictionary/radius';
+import { SpacingValue } from '../../dictionary/spacing';
+export interface BaseTooltipDefinition {
+    bg?: ColorValue | string;
+    color?: ColorValue | string;
+    radius?: RadiusValue | string;
+    padding?: SpacingValue | string;
+    fontSize?: string;
+    maxWidth?: string;
+    arrowSize?: string;
+}
+interface BaseTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    definition?: BaseTooltipDefinition;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * @internal
+ * Structural tooltip container. Self-contained (no BaseOverlay dependency).
+ * Positioning and show/hide logic live in the Preset layer.
+ */
+export declare const BaseTooltip: React.ForwardRefExoticComponent<BaseTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/base/BaseTypography/BaseTypography.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { PolymorphicProps } from '../types';
+import { TypographyValue } from '../../dictionary/typography';
+import { ColorValue } from '../../dictionary/color';
+export interface BaseTypographyDefinition {
+    fontFamily?: TypographyValue | string;
+    fontSize?: TypographyValue | string;
+    fontWeight?: TypographyValue | string;
+    lineHeight?: TypographyValue | string;
+    letterSpacing?: string;
+    color?: ColorValue | string;
+    align?: 'left' | 'center' | 'right';
+    truncate?: boolean;
+    wrap?: 'normal' | 'nowrap' | 'balance';
+}
+interface BaseTypographyProps {
+    definition?: BaseTypographyDefinition;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Text rendering primitive with Dictionary-driven font, size, weight, and color.
+ */
+export declare function BaseTypography<C extends React.ElementType = 'span'>(props: PolymorphicProps<C, BaseTypographyProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace BaseTypography {
+    var displayName: string;
+}
+export {};

package/lib/base/BaseValue/BaseValue.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { BaseTypographyDefinition } from '../BaseTypography/BaseTypography';
+import { PolymorphicProps } from '../types';
+export type BaseValueDefinition = BaseTypographyDefinition;
+interface BaseValueProps {
+    definition?: BaseValueDefinition;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * @internal
+ * Semantic data value wrapper around BaseTypography. Defaults to <span>.
+ * Adds data-role="value" for SCSS targeting and tabular-nums for alignment.
+ */
+export declare const BaseValue: {
+    <C extends React.ElementType = "span">(props: PolymorphicProps<C, BaseValueProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/base/index.d.ts

@@ -0,0 +1,65 @@
+export { BaseBox } from './BaseBox/BaseBox';
+export { BaseStack } from './BaseStack/BaseStack';
+export { BaseDivider } from './BaseDivider/BaseDivider';
+export { BaseTypography } from './BaseTypography/BaseTypography';
+export { BaseIcon } from './BaseIcon/BaseIcon';
+export { BaseOverlay } from './BaseOverlay/BaseOverlay';
+export { BaseTable, BaseTableHead, BaseTableBody, BaseTableRow, BaseTableCell } from './BaseTable/BaseTable';
+export { BaseButton } from './BaseButton/BaseButton';
+export { BaseInput } from './BaseInput/BaseInput';
+export { BaseTextarea } from './BaseTextarea/BaseTextarea';
+export { BaseCheckbox } from './BaseCheckbox/BaseCheckbox';
+export { BaseRadio } from './BaseRadio/BaseRadio';
+export { BaseToggle } from './BaseToggle/BaseToggle';
+export { BaseSelect, BaseSelectTrigger, BaseSelectDropdown, BaseSelectOption, BaseSelectGroup } from './BaseSelect/BaseSelect';
+export { BaseSlider } from './BaseSlider/BaseSlider';
+export { BaseCard, BaseCardHeader, BaseCardBody, BaseCardFooter, BaseCardMedia, BaseCardTitle, BaseCardSubtitle, BaseCardActions } from './BaseCard/BaseCard';
+export { BaseAccordion, BaseAccordionItem, BaseAccordionTrigger, BaseAccordionContent } from './BaseAccordion/BaseAccordion';
+export { BaseMenu, BaseMenuGroup, BaseMenuItem, BaseMenuDivider } from './BaseMenu/BaseMenu';
+export { BaseTooltip } from './BaseTooltip/BaseTooltip';
+export { BaseRating } from './BaseRating/BaseRating';
+export { BaseSegmentedControl } from './BaseSegmentedControl/BaseSegmentedControl';
+export { BaseDatePicker, BaseDatePickerHeader, BaseDatePickerCalendar, BaseDatePickerDay } from './BaseDatePicker/BaseDatePicker';
+export { BaseTimePicker, BaseTimePickerColumn, BaseTimePickerCell } from './BaseTimePicker/BaseTimePicker';
+export { BaseDateRangePicker, BaseDateRangePickerDay } from './BaseDateRangePicker/BaseDateRangePicker';
+export { BaseNumberInput } from './BaseNumberInput/BaseNumberInput';
+export { BaseMaskedInput } from './BaseMaskedInput/BaseMaskedInput';
+export { BaseFileUpload, BaseFileUploadList, BaseFileUploadItem } from './BaseFileUpload/BaseFileUpload';
+export { BaseColorPicker, BaseColorPickerSaturation, BaseColorPickerHue, BaseColorPickerAlpha, BaseColorPickerSwatch } from './BaseColorPicker/BaseColorPicker';
+export { BaseRangeSlider } from './BaseRangeSlider/BaseRangeSlider';
+export { BaseBadge } from './BaseBadge/BaseBadge';
+export { BaseChip } from './BaseChip/BaseChip';
+export { BaseLink } from './BaseLink/BaseLink';
+export type { BaseBoxDefinition } from './BaseBox/BaseBox';
+export type { BaseStackDefinition } from './BaseStack/BaseStack';
+export type { BaseDividerDefinition } from './BaseDivider/BaseDivider';
+export type { BaseTypographyDefinition } from './BaseTypography/BaseTypography';
+export type { BaseIconDefinition } from './BaseIcon/BaseIcon';
+export type { BaseOverlayDefinition } from './BaseOverlay/BaseOverlay';
+export type { BaseTableDefinition, BaseTableHeadDefinition, BaseTableRowDefinition, BaseTableCellDefinition } from './BaseTable/BaseTable';
+export type { BaseButtonDefinition } from './BaseButton/BaseButton';
+export type { BaseInputDefinition } from './BaseInput/BaseInput';
+export type { BaseTextareaDefinition } from './BaseTextarea/BaseTextarea';
+export type { BaseCheckboxDefinition } from './BaseCheckbox/BaseCheckbox';
+export type { BaseRadioDefinition } from './BaseRadio/BaseRadio';
+export type { BaseToggleDefinition } from './BaseToggle/BaseToggle';
+export type { BaseSelectDefinition, BaseSelectDropdownDefinition } from './BaseSelect/BaseSelect';
+export type { BaseSliderDefinition } from './BaseSlider/BaseSlider';
+export type { BaseCardDefinition, BaseCardHeaderDefinition, BaseCardBodyDefinition, BaseCardFooterDefinition } from './BaseCard/BaseCard';
+export type { BaseAccordionDefinition } from './BaseAccordion/BaseAccordion';
+export type { BaseMenuDefinition, BaseMenuItemDefinition } from './BaseMenu/BaseMenu';
+export type { BaseTooltipDefinition } from './BaseTooltip/BaseTooltip';
+export type { BaseRatingDefinition } from './BaseRating/BaseRating';
+export type { BaseSegmentedControlDefinition } from './BaseSegmentedControl/BaseSegmentedControl';
+export type { BaseDatePickerDefinition, BaseDatePickerDayDefinition } from './BaseDatePicker/BaseDatePicker';
+export type { BaseTimePickerDefinition } from './BaseTimePicker/BaseTimePicker';
+export type { BaseDateRangePickerDefinition } from './BaseDateRangePicker/BaseDateRangePicker';
+export type { BaseNumberInputDefinition } from './BaseNumberInput/BaseNumberInput';
+export type { BaseMaskedInputDefinition } from './BaseMaskedInput/BaseMaskedInput';
+export type { BaseFileUploadDefinition } from './BaseFileUpload/BaseFileUpload';
+export type { BaseColorPickerDefinition } from './BaseColorPicker/BaseColorPicker';
+export type { BaseRangeSliderDefinition } from './BaseRangeSlider/BaseRangeSlider';
+export type { BaseBadgeDefinition } from './BaseBadge/BaseBadge';
+export type { BaseChipDefinition } from './BaseChip/BaseChip';
+export type { BaseLinkDefinition } from './BaseLink/BaseLink';
+export { applyDefinition } from './utils';

package/lib/base/types.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * @internal
+ * Polymorphic component type helpers for Base Primitives.
+ */
+export type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+export type PolymorphicProps<C extends React.ElementType, Props = object> = Props & AsProp<C> & Omit<React.ComponentPropsWithRef<C>, keyof Props | 'as'>;

package/lib/base/utils.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+/**
+ * @internal
+ * Maps a definition object to CSS custom properties (--_*) and data attributes.
+ *
+ * cssVarMap: maps definition key -> CSS custom property name
+ *   e.g., { bg: '--_bg', color: '--_color', padding: '--_padding' }
+ *
+ * dataAttrMap: maps definition key -> data attribute name (for enum values)
+ *   e.g., { display: 'data-display', direction: 'data-direction' }
+ *
+ * booleanAttrs: definition keys that become boolean data attributes (presence = true)
+ *   e.g., ['disabled', 'loading', 'truncate']
+ */
+export declare function applyDefinition<D extends object>(definition: D | undefined, cssVarMap: Partial<Record<keyof D, string>>, dataAttrMap?: Partial<Record<keyof D, string>>, booleanAttrs?: (keyof D)[]): {
+    style: React.CSSProperties;
+    dataAttrs: Record<string, string | boolean>;
+};

package/lib/composites/controls/ThresholdRamp/ThresholdRamp.d.ts

@@ -0,0 +1,24 @@
+export interface ThresholdStop {
+    id: string;
+    value: number;
+    colorToken?: string;
+    color?: string;
+    label?: string;
+    disabled?: boolean;
+}
+export interface ThresholdRampProps {
+    stops: ThresholdStop[];
+    onChange: (stops: ThresholdStop[]) => void;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+}
+/**
+ * ThresholdRamp — composite control for Phase A reconfig.
+ * Renders a token-driven gradient strip with draggable stop handles.
+ * Generic — no reptime domain strings. D-01, D-10, D-11 compliant.
+ */
+export declare function ThresholdRamp({ stops, onChange, min, max, disabled, }: ThresholdRampProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThresholdRamp {
+    var displayName: string;
+}

package/lib/composites/controls/ThresholdRamp/index.d.ts

@@ -0,0 +1,2 @@
+export { ThresholdRamp } from './ThresholdRamp';
+export type { ThresholdRampProps, ThresholdStop } from './ThresholdRamp';

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

@@ -0,0 +1 @@
+export * from './ThresholdRamp';

package/lib/composites/dashboard/QuickConfigPanel/QuickConfigPanel.d.ts

@@ -0,0 +1,14 @@
+import { QuickConfigPanelProps } from './types';
+/**
+ * QuickConfigPanel — opaque-props panel composite.
+ *
+ * Renders an array of `QuickConfigSection` items supplied by the consumer.
+ * Provides header + pill-menu chrome (Save / Cancel buttons).
+ *
+ * D-01: Generic — no reptime/entityType/metricInfo domain knowledge.
+ * D-03: Panel width uses CSS var `--gloss-slot-width` (MetricGroupContainer slot sizing reuse; 180px fallback).
+ * D-19: NOT a modal — role is not "dialog"; no aria-modal; no focus trap.
+ * AN-01: `will-change: transform` on root element; panel transitions use transform/opacity only.
+ */
+export declare function QuickConfigPanel({ sections, onCommit, onCancel, anchorRect: _anchorRect, // accepted for position math by consumer — not used internally
+title, }: QuickConfigPanelProps): import("react/jsx-runtime").JSX.Element;

package/lib/composites/dashboard/QuickConfigPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { QuickConfigPanel } from './QuickConfigPanel';
+export type { QuickConfigSection, QuickConfigPanelProps } from './types';

package/lib/composites/dashboard/QuickConfigPanel/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+/**
+ * A single section of the QuickConfigPanel.
+ * Consumers supply an opaque render function — the panel does not know what content renders.
+ * D-02: generic shape; no reptime domain strings.
+ */
+export interface QuickConfigSection {
+    /** Unique identifier for the section; used as React key */
+    id: string;
+    /** Human-readable section heading rendered in the panel chrome */
+    label: string;
+    /** Returns the ReactNode to mount inside this section */
+    render: () => ReactNode;
+}
+/**
+ * Props for QuickConfigPanel.
+ * D-01: opaque — no reptime/entityType/metricInfo semantics.
+ * D-03: anchorRect provides DOMRect for position math via MetricGroupContainer slot sizing.
+ * D-19: Panel is NOT a modal — role is not "dialog".
+ */
+export interface QuickConfigPanelProps {
+    /** Sections to render in the panel body */
+    sections: QuickConfigSection[];
+    /** Fired when the user clicks the Save pill */
+    onCommit: () => void;
+    /** Fired when the user clicks the Cancel pill */
+    onCancel: () => void;
+    /**
+     * DOMRect of the anchor card — used for extrude position math (D-03).
+     * Panel does not crash when undefined; layout defaults apply.
+     */
+    anchorRect?: DOMRect;
+    /**
+     * Panel title shown in the header chrome.
+     * Defaults to "Configure" when omitted.
+     */
+    title?: string;
+}

package/lib/composites/data/DataTable.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export interface DataTableColumn<T> {
+    key: keyof T & string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: T[keyof T & string], row: T) => React.ReactNode;
+}
+export interface DataTableProps<T> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Row data */
+    data: T[];
+    /** Unique key for each row */
+    rowKey: keyof T & string;
+    /** Custom header cell rendering */
+    headerSlot?: (column: DataTableColumn<T>) => React.ReactNode;
+    /** Custom cell rendering */
+    cellSlot?: (column: DataTableColumn<T>, row: T) => React.ReactNode;
+    /** Custom row action rendering */
+    rowActionSlot?: (row: T) => React.ReactNode;
+    /** Empty state content */
+    emptySlot?: React.ReactNode;
+    /** Footer content */
+    footerSlot?: React.ReactNode;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Selected row keys */
+    selectedKeys?: Set<string>;
+    /** Selection change handler */
+    onSelectionChange?: (keys: Set<string>) => void;
+    /** Active sort column key */
+    sortColumn?: string;
+    /** Active sort direction */
+    sortDirection?: 'asc' | 'desc';
+    /** Sort change handler */
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    /** Current page (1-based) */
+    page?: number;
+    /** Rows per page */
+    pageSize?: number;
+    /** Total number of rows (for pagination info) */
+    totalCount?: number;
+    /** Page change handler */
+    onPageChange?: (page: number) => void;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Alternate row striping */
+    striped?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * DataTable composite -- typed column definitions with sort, pagination,
+ * selection, loading skeletons, and named slots.
+ */
+export declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}

package/lib/composites/data/PinToMetric/PinToMetric.d.ts

@@ -0,0 +1,11 @@
+import { PinToMetricProps } from './types';
+/**
+ * PinToMetric — pin-icon button that opens an aggregation picker popover.
+ *
+ * VO-03: filterPayload is opaque; component never reads its shape.
+ * D-03: when disabled=true, returns null entirely (no button rendered).
+ */
+export declare function PinToMetric({ filterDescription, filterPayload: _filterPayload, onConfirm, disabled, }: PinToMetricProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PinToMetric {
+    var displayName: string;
+}

package/lib/composites/data/PinToMetric/index.d.ts

@@ -0,0 +1,2 @@
+export { PinToMetric } from './PinToMetric';
+export type { PinToMetricProps, AggregationType } from './types';

package/lib/composites/data/PinToMetric/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * PinToMetric types.
+ *
+ * filterPayload is typed `unknown` (IP-06, VO-03) — the component never inspects it.
+ * The caller owns the domain type and receives it back via onConfirm.
+ */
+export type AggregationType = 'count' | 'total' | 'average';
+export interface PinToMetricProps {
+    /** Human-readable description of the active filters (e.g. "Status: Open, Retailer: Acme") */
+    filterDescription: string;
+    /** Opaque filter payload — passed through to onConfirm; never inspected by gloss (VO-03) */
+    filterPayload: unknown;
+    /** Called when user confirms aggregation selection */
+    onConfirm: (aggregation: AggregationType) => void;
+    /** When true, button is absent entirely (caller detects no-filters state) */
+    disabled?: boolean;
+}

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

@@ -0,0 +1,4 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableColumn } from './DataTable';
+export { PinToMetric } from './PinToMetric';
+export type { PinToMetricProps, AggregationType } from './PinToMetric';

package/lib/composites/index.d.ts

@@ -1,2 +1,7 @@
 export * from './cards';
 export * from './forms';
+export * from './inputs';
+export * from './data';
+export * from './overlay';
+export * from './navigation';
+export * from './controls';

package/lib/composites/inputs/Autocomplete.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export interface AutocompleteProps<T = string> {
+    /** Available options to filter from */
+    options: T[];
+    /** Currently selected value */
+    value?: T | null;
+    /** Called when a value is selected */
+    onChange?: (value: T | null) => void;
+    /** Extract display label from option */
+    getOptionLabel?: (option: T) => string;
+    /** Async search callback (debounced 300ms internally) */
+    onSearch?: (query: string) => void;
+    /** Custom result item rendering */
+    resultSlot?: (option: T, isHighlighted: boolean) => React.ReactNode;
+    /** Content to show when no matches found */
+    emptySlot?: React.ReactNode;
+    /** Content to show while loading */
+    loadingSlot?: React.ReactNode;
+    placeholder?: string;
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    errorText?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Autocomplete composite -- Input + Popover with filtered results, keyboard navigation,
+ * and debounced search. Uses named slot props (no children).
+ */
+export declare function Autocomplete<T = string>(props: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Autocomplete {
+    var displayName: string;
+}

package/lib/composites/inputs/EntityPicker.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export interface EntityPickerEntity {
+    id: string;
+    label: string;
+    description?: string;
+    avatarUrl?: string;
+    icon?: string;
+}
+export interface EntityPickerProps {
+    /** Available entities to search */
+    entities: EntityPickerEntity[];
+    /** Currently selected entity */
+    value?: EntityPickerEntity | null;
+    /** Selection change handler */
+    onChange?: (entity: EntityPickerEntity | null) => void;
+    /** Async search handler */
+    onSearch?: (query: string) => void;
+    /** Custom result item rendering */
+    resultSlot?: (entity: EntityPickerEntity, isHighlighted: boolean) => React.ReactNode;
+    /** Custom selected entity display */
+    selectedSlot?: (entity: EntityPickerEntity) => React.ReactNode;
+    placeholder?: string;
+    label?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * EntityPicker composite -- wraps Autocomplete with avatar/icon display for entity search and selection.
+ * Uses named slot props (no children).
+ */
+export declare function EntityPicker({ entities, value, onChange, onSearch, resultSlot, selectedSlot, placeholder, label, isLoading, disabled, size, className, }: EntityPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace EntityPicker {
+    var displayName: string;
+}

package/lib/composites/inputs/FilterChip.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface FilterValue {
+    key: string;
+    label: string;
+    value: string | number | boolean;
+}
+export interface FilterChipProps {
+    /** The filter this chip represents */
+    filter: FilterValue;
+    /** Whether the filter is currently active */
+    active?: boolean;
+    /** Called when chip is clicked (toggle active) */
+    onToggle?: (filter: FilterValue) => void;
+    /** Called when chip is removed */
+    onRemove?: (filter: FilterValue) => void;
+    /** Custom label rendering */
+    labelSlot?: (filter: FilterValue) => React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * FilterChip -- Composite wrapping PresetChip with typed filter semantics.
+ * Enforces Slot compliance (D-04): no children prop.
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLDivElement>>;