@mt-gloss/ui 0.0.9 → 0.0.11

package/lib/wrappers/Actionable/Actionable.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface ActionableProps {
+    /** Called when the child is activated (click or Enter/Space key) */
+    onAction?: (e: React.SyntheticEvent) => void;
+    /** Disable the actionable behavior */
+    disabled?: boolean;
+    /** ARIA role for the wrapped element (default: 'button') */
+    role?: string;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants action behavior (click + keyboard) to any child element.
+ * Adds onClick, onKeyDown (Enter/Space), tabIndex, and role='button'.
+ *
+ * Usage: <Actionable onAction={handleClick}><Card>...</Card></Actionable>
+ */
+export declare const Actionable: React.ForwardRefExoticComponent<ActionableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/AsyncLoader/AsyncLoader.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface AsyncLoaderProps {
+    color?: 'blue' | 'green';
+    isLoading?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * AsyncLoader -- Wrapper tier. SVG perimeter-tracing animation wrapper.
+ * Strips className/style from consumer API.
+ */
+export declare const AsyncLoader: React.ForwardRefExoticComponent<AsyncLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { AsyncLoader as PresetAsyncLoader };
+export type { AsyncLoaderProps as PresetAsyncLoaderProps };

package/lib/wrappers/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ButtonGroupProps {
+    children: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    attached?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+    fullWidth?: boolean;
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+}
+export interface ButtonGroupContextValue {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+    isInGroup: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupContextValue>;
+/**
+ * ButtonGroup -- Wrapper tier. Groups related buttons with context propagation.
+ * Locked-down API (no className/style).
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroup as PresetButtonGroup };
+export type { ButtonGroupProps as PresetButtonGroupProps };

package/lib/wrappers/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export interface CheckboxGroupOption<T = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    helperText?: string;
+}
+export interface CheckboxGroupProps<T = string> {
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
+    options?: CheckboxGroupOption<T>[];
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    helperText?: string;
+    status?: 'default' | 'success' | 'error';
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+}
+export interface CheckboxGroupContextValue<T = string> {
+    values: T[];
+    toggle: (value: T) => void;
+    isSelected: (value: T) => boolean;
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name?: string;
+    };
+    isInGroup: boolean;
+}
+export declare function useCheckboxGroupContext<T = string>(): CheckboxGroupContextValue<T> | null;
+/**
+ * CheckboxGroup -- Wrapper tier. Manages multiple checkbox selections.
+ * Locked-down API (no className/style).
+ */
+export declare function CheckboxGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxGroup {
+    var displayName: string;
+}
+export interface GroupCheckboxProps {
+    value: string;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    helperText?: string;
+}
+export declare const GroupCheckbox: React.ForwardRefExoticComponent<GroupCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { CheckboxGroup as PresetCheckboxGroup };
+export type { CheckboxGroupProps as PresetCheckboxGroupProps };

package/lib/wrappers/Dismissible/Dismissible.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface DismissibleProps {
+    /** Called when the element should be dismissed */
+    onDismiss?: () => void;
+    /** Dismiss on Escape key press (default: true) */
+    dismissOnEscape?: boolean;
+    /** Dismiss on click outside the element (default: true) */
+    dismissOnClickOutside?: boolean;
+    /** Show a close button (renders an X button as first child, not via cloneElement) */
+    showCloseButton?: boolean;
+    /** Disable dismiss behavior */
+    disabled?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants dismiss behavior to any child element.
+ * Adds Escape key listener, click-outside detection, and optional close button.
+ *
+ * Usage: <Dismissible onDismiss={handleClose}><Panel>...</Panel></Dismissible>
+ *
+ * Note: Uses native DOM event listeners (not Floating UI) since Dismissible
+ * doesn't need floating/positioning. For positioned overlays, use BaseOverlay instead.
+ */
+export declare const Dismissible: React.ForwardRefExoticComponent<DismissibleProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/Expandable/Expandable.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ExpandableProps {
+    /** Whether the content is expanded */
+    expanded: boolean;
+    /** Optional trigger element rendered before the expandable content */
+    trigger?: React.ReactNode;
+    /** Called when the trigger is clicked (for controlled expand/collapse) */
+    onToggle?: () => void;
+    /** Animation duration in seconds (default: 0.2) */
+    duration?: number;
+    children: React.ReactNode;
+}
+/**
+ * Functional Wrapper: animated expand/collapse toggle.
+ * Uses Framer Motion AnimatePresence for smooth height animation.
+ * Falls back to basic show/hide if framer-motion is not installed.
+ *
+ * Usage:
+ *   <Expandable expanded={isOpen} trigger={<Button onClick={toggle}>Toggle</Button>}>
+ *     <div>Collapsible content here</div>
+ *   </Expandable>
+ */
+export declare const Expandable: React.ForwardRefExoticComponent<ExpandableProps & React.RefAttributes<HTMLDivElement>>;

package/lib/wrappers/InputGroup/InputGroup.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface InputGroupProps {
+    children: React.ReactNode;
+    attached?: boolean;
+}
+export interface InputAddonProps {
+    children: React.ReactNode;
+    position?: 'left' | 'right';
+}
+/**
+ * InputGroup -- Wrapper tier. Groups inputs with addons.
+ * Locked-down API (no className/style).
+ */
+export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * InputAddon -- Wrapper tier. Prepend/append content to inputs.
+ */
+export declare const InputAddon: React.ForwardRefExoticComponent<InputAddonProps & React.RefAttributes<HTMLSpanElement>>;
+export { InputGroup as PresetInputGroup, InputAddon as PresetInputAddon };
+export type { InputGroupProps as PresetInputGroupProps, InputAddonProps as PresetInputAddonProps };

package/lib/wrappers/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export interface RadioGroupOption<T = string> {
+    value: T;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<T = string> {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    options?: RadioGroupOption<T>[];
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    helperText?: string;
+    status?: 'default' | 'success' | 'error';
+    required?: boolean;
+    disabled?: boolean;
+    name: string;
+}
+export interface RadioGroupContextValue<T = string> {
+    value: T | undefined;
+    select: (value: T) => void;
+    isSelected: (value: T) => boolean;
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name: string;
+    };
+    isInGroup: boolean;
+}
+export declare function useRadioGroupContext<T = string>(): RadioGroupContextValue<T> | null;
+/**
+ * RadioGroup -- Wrapper tier. Manages single-choice selections.
+ * Locked-down API (no className/style).
+ */
+export declare function RadioGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+export interface GroupRadioProps {
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const GroupRadio: React.ForwardRefExoticComponent<GroupRadioProps & React.RefAttributes<HTMLInputElement>>;
+export { RadioGroup as PresetRadioGroup };
+export type { RadioGroupProps as PresetRadioGroupProps };

package/lib/wrappers/Selectable/Selectable.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface SelectableProps {
+    /** Whether the child is currently selected */
+    selected?: boolean;
+    /** Called when selection state should change */
+    onSelect?: (selected: boolean, e: React.SyntheticEvent) => void;
+    /** Disable selection */
+    disabled?: boolean;
+    /** Show a checkbox indicator alongside the child */
+    showCheckbox?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants selection behavior to any child element.
+ * Adds click toggle, aria-selected, and optional checkbox indicator.
+ *
+ * Usage: <Selectable selected={isSelected} onSelect={handleSelect}><Card>...</Card></Selectable>
+ */
+export declare const Selectable: React.ForwardRefExoticComponent<SelectableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/Sortable/Sortable.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface SortableProps {
+    /** Unique ID for this sortable item (must match SortableContext items) */
+    id: string | number;
+    /** Disable drag behavior */
+    disabled?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants drag-to-reorder behavior to any child element.
+ * Requires @dnd-kit/sortable as optional peer dep. Falls back to passthrough if not installed.
+ *
+ * IMPORTANT: Consumer must wrap the list in DndContext + SortableContext from @dnd-kit/core.
+ * This wrapper only handles individual item sortable behavior.
+ *
+ * Usage:
+ *   <DndContext onDragEnd={handleDragEnd}>
+ *     <SortableContext items={ids}>
+ *       {items.map(item => (
+ *         <Sortable id={item.id} key={item.id}>
+ *           <Card>{item.name}</Card>
+ *         </Sortable>
+ *       ))}
+ *     </SortableContext>
+ *   </DndContext>
+ */
+export declare const Sortable: React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/SortableZones/SortableZones.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { ZoneConfig } from './useSortableZones';
+export interface SortableZonesProps<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    onZoneChange?: (zones: ZoneConfig<T>[]) => void;
+    /** Render the zone container. Receives zone key and the zone's current items. */
+    renderZone: (zoneKey: string, items: T[]) => React.ReactNode;
+    /** Render a single item inside a zone. */
+    renderItem: (item: T) => React.ReactNode;
+    /** Render the drag overlay (floating item while dragging). Falls back to renderItem if omitted. */
+    renderDragOverlay?: (item: T) => React.ReactNode;
+}
+/**
+ * SortableZones — multi-zone drag/drop wrapper on top of @dnd-kit/core.
+ *
+ * Supports within-zone reorder and cross-zone drag with optional maxItems cap per zone.
+ * Uses useSortableZones hook for state management.
+ * Falls back to passive rendering if @dnd-kit/core is not installed.
+ *
+ * Generic over T extends { id: string }. No reptime-specific types. D-04, D-06, D-11 compliant.
+ */
+export declare function SortableZones<T extends {
+    id: string;
+}>(props: SortableZonesProps<T>): React.ReactElement;
+export declare namespace SortableZones {
+    var displayName: string;
+}
+export type { ZoneConfig, UseSortableZonesConfig, SortableZonesState } from './useSortableZones';
+export { useSortableZones } from './useSortableZones';
+export type { ZoneKey } from './useSortableZones';

package/lib/wrappers/SortableZones/index.d.ts

@@ -0,0 +1,4 @@
+export { SortableZones } from './SortableZones';
+export type { SortableZonesProps } from './SortableZones';
+export { useSortableZones } from './useSortableZones';
+export type { ZoneConfig, ZoneKey, UseSortableZonesConfig, SortableZonesState } from './useSortableZones';

package/lib/wrappers/SortableZones/useSortableZones.d.ts

@@ -0,0 +1,66 @@
+export type ZoneKey = string;
+export interface ZoneConfig<T extends {
+    id: string;
+}> {
+    zoneKey: ZoneKey;
+    items: T[];
+    maxItems?: number;
+}
+export interface SortableZonesState<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    activeZone: ZoneKey | null;
+    activeItem: T | null;
+    getZoneProps: (zoneKey: ZoneKey) => {
+        id: string;
+        'data-zone-key': string;
+    };
+    getItemProps: (item: T) => {
+        id: string;
+        'data-item-id': string;
+        'data-zone-key': ZoneKey;
+    };
+}
+export interface UseSortableZonesConfig<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    onZoneChange?: (zones: ZoneConfig<T>[]) => void;
+}
+/**
+ * useSortableZones — zone-aware multi-container drag/drop state hook.
+ *
+ * Pure React hook (useState, useCallback). Does NOT import DndContext —
+ * SortableZones.tsx connects the event handlers to DndContext callbacks.
+ *
+ * Uncontrolled by default: zones state is initialised from config.zones and
+ * managed internally. Call onZoneChange to sync back to parent.
+ *
+ * Generic over T extends { id: string }. No reptime-specific types. D-06, D-04, D-11 compliant.
+ */
+export declare function useSortableZones<T extends {
+    id: string;
+}>(config: UseSortableZonesConfig<T>): SortableZonesState<T> & {
+    handleDragStart: (event: {
+        active: {
+            id: string;
+        };
+    }) => void;
+    handleDragOver: (event: {
+        active: {
+            id: string;
+        };
+        over: {
+            id: string;
+        } | null;
+    }) => void;
+    handleDragEnd: (event: {
+        active: {
+            id: string;
+        };
+        over: {
+            id: string;
+        } | null;
+    }) => void;
+};

package/lib/wrappers/Transition/Transition.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { AnimationPresetName } from '../../utils/animations';
+interface AnimatedElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    'data-state'?: string;
+}
+export interface TransitionProps {
+    show: boolean;
+    animation?: AnimationPresetName | {
+        enter: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+        exit: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+    };
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    unmountOnExit?: boolean;
+    onEnter?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExited?: () => void;
+    children: React.ReactElement<AnimatedElementProps>;
+}
+/**
+ * Transition -- Wrapper tier. Self-contained enter/exit animation.
+ * Strips className/style from consumer API.
+ */
+export declare function Transition({ show, animation, duration: customDuration, easing: customEasing, delay, unmountOnExit, onEnter, onEntered, onExit, onExited, children, ...rest }: TransitionProps): React.ReactElement<AnimatedElementProps, string | React.JSXElementConstructor<any>> | null;
+export declare namespace Transition {
+    var displayName: string;
+}
+export interface TransitionGroupProps {
+    children: React.ReactNode;
+}
+/**
+ * TransitionGroup -- Wrapper tier. Container for animated lists.
+ */
+export declare function TransitionGroup({ children }: TransitionGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TransitionGroup {
+    var displayName: string;
+}
+export { Transition as PresetTransition, TransitionGroup as PresetTransitionGroup };
+export type { TransitionProps as PresetTransitionProps, TransitionGroupProps as PresetTransitionGroupProps };

package/lib/wrappers/index.d.ts

@@ -0,0 +1,25 @@
+export { mergeRefs, mergeHandlers } from './utils';
+export { Actionable } from './Actionable/Actionable';
+export type { ActionableProps } from './Actionable/Actionable';
+export { Selectable } from './Selectable/Selectable';
+export type { SelectableProps } from './Selectable/Selectable';
+export { Dismissible } from './Dismissible/Dismissible';
+export type { DismissibleProps } from './Dismissible/Dismissible';
+export { Sortable } from './Sortable/Sortable';
+export type { SortableProps } from './Sortable/Sortable';
+export { Expandable } from './Expandable/Expandable';
+export type { ExpandableProps } from './Expandable/Expandable';
+export { ButtonGroup, ButtonGroupContext } from './ButtonGroup/ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupContextValue } from './ButtonGroup/ButtonGroup';
+export { InputGroup, InputAddon } from './InputGroup/InputGroup';
+export type { InputGroupProps, InputAddonProps } from './InputGroup/InputGroup';
+export { CheckboxGroup, useCheckboxGroupContext, GroupCheckbox } from './CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxGroupOption, CheckboxGroupContextValue, GroupCheckboxProps } from './CheckboxGroup/CheckboxGroup';
+export { RadioGroup, useRadioGroupContext, GroupRadio } from './RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioGroupOption, RadioGroupContextValue, GroupRadioProps } from './RadioGroup/RadioGroup';
+export { AsyncLoader } from './AsyncLoader/AsyncLoader';
+export type { AsyncLoaderProps } from './AsyncLoader/AsyncLoader';
+export { Transition, TransitionGroup } from './Transition/Transition';
+export type { TransitionProps, TransitionGroupProps } from './Transition/Transition';
+export { SortableZones, useSortableZones } from './SortableZones';
+export type { SortableZonesProps, ZoneConfig, ZoneKey, UseSortableZonesConfig, SortableZonesState } from './SortableZones';

package/lib/wrappers/utils.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+/**
+ * Merge multiple React refs into one. Supports callback refs and RefObjects.
+ */
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined | null)[]): React.RefCallback<T>;
+/**
+ * Chain two event handlers. Calls child handler first, then wrapper handler.
+ * If child handler calls e.preventDefault(), wrapper handler still runs.
+ */
+export declare function mergeHandlers<E extends React.SyntheticEvent>(childHandler?: ((e: E) => void) | null, wrapperHandler?: ((e: E) => void) | null): ((e: E) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mt-gloss/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "publishConfig": {
     "access": "restricted"
@@ -20,12 +20,31 @@
       },
       "default": "./index.js"
     },
+    "./internals": {
+      "import": {
+        "types": "./internals.d.ts",
+        "default": "./internals.js"
+      },
+      "default": "./internals.js"
+    },
+    "./catalog": {
+      "import": {
+        "types": "./catalog.d.ts",
+        "default": "./catalog.js"
+      },
+      "require": {
+        "types": "./catalog.d.ts",
+        "default": "./catalog.js"
+      },
+      "default": "./catalog.js"
+    },
     "./styles.css": "./index.css"
   },
   "files": [
-    "index.js",
-    "index.d.ts",
-    "index.css",
+    "*.js",
+    "*.d.ts",
+    "*.css",
+    "lib/**/*.js",
     "lib/**/*.d.ts",
     "README.md"
   ],
@@ -41,7 +60,10 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "date-fns": "^3.0.0 || ^4.0.0",
-    "@mt-gloss/utils": ">=0.0.1"
+    "@mt-gloss/utils": ">=0.0.1",
+    "@floating-ui/react": ">=0.27.0",
+    "framer-motion": ">=12.0.0",
+    "zod": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@mui/material": {
@@ -76,6 +98,15 @@
     },
     "@mui/x-date-pickers-pro": {
       "optional": true
+    },
+    "@floating-ui/react": {
+      "optional": true
+    },
+    "framer-motion": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   },
   "optionalDependencies": {