mtrl 0.3.8 → 0.3.9

package/dist/components/select/types.d.ts

@@ -0,0 +1,302 @@
+/**
+ * Available Select variants
+ */
+export type SelectVariant = 'filled' | 'outlined';
+/**
+ * Select variant constants
+ */
+export declare const SELECT_VARIANTS: {
+    readonly FILLED: "filled";
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Select option interface
+ */
+export interface SelectOption {
+    /**
+     * Unique identifier for the option
+     */
+    id: string;
+    /**
+     * Display text for the option
+     */
+    text: string;
+    /**
+     * Whether the option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon to display with the option
+     */
+    icon?: string;
+    /**
+     * Whether this option has a submenu
+     */
+    hasSubmenu?: boolean;
+    /**
+     * Optional array of submenu options
+     * Only used when hasSubmenu is true
+     */
+    submenu?: SelectOption[];
+    /**
+     * Additional data associated with the option
+     */
+    data?: any;
+}
+/**
+ * Configuration interface for the Select component
+ */
+export interface SelectConfig {
+    /**
+     * Array of options to display in the select menu
+     */
+    options?: SelectOption[];
+    /**
+     * Currently selected value (option id)
+     */
+    value?: string;
+    /**
+     * Visual variant (filled, outlined)
+     */
+    variant?: SelectVariant | string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Whether select is required
+     */
+    required?: boolean;
+    /**
+     * Whether select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * Menu placement relative to the textfield
+     */
+    placement?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Prefix for class names
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    /**
+     * Event callbacks
+     */
+    on?: {
+        /**
+         * Called when the select value changes
+         */
+        change?: (event: SelectChangeEvent) => void;
+        /**
+         * Called when the select menu opens
+         */
+        open?: (event: SelectEvent) => void;
+        /**
+         * Called when the select menu closes
+         */
+        close?: (event: SelectEvent) => void;
+    };
+}
+/**
+ * Select component interface
+ */
+export interface SelectComponent {
+    /**
+     * The root element of the select
+     */
+    element: HTMLElement;
+    /**
+     * The textfield component
+     */
+    textfield: any;
+    /**
+     * The menu component
+     */
+    menu: any;
+    /**
+     * Gets the select's current value (selected option id)
+     */
+    getValue: () => string | null;
+    /**
+     * Sets the select's value (by option id)
+     * @param value - Option id to select
+     * @returns Select component for chaining
+     */
+    setValue: (value: string) => SelectComponent;
+    /**
+     * Gets the select's current displayed text
+     */
+    getText: () => string;
+    /**
+     * Gets the selected option object
+     */
+    getSelectedOption: () => SelectOption | null;
+    /**
+     * Gets all available options
+     */
+    getOptions: () => SelectOption[];
+    /**
+     * Sets new options
+     * @param options - New options array
+     * @returns Select component for chaining
+     */
+    setOptions: (options: SelectOption[]) => SelectComponent;
+    /**
+     * Opens the select menu
+     * @param interactionType - The type of interaction ('mouse' or 'keyboard')
+     * @returns Select component for chaining
+     */
+    open: (interactionType?: 'mouse' | 'keyboard') => SelectComponent;
+    /**
+     * Closes the select menu
+     * @returns Select component for chaining
+     */
+    close: () => SelectComponent;
+    /**
+     * Checks if the menu is open
+     */
+    isOpen: () => boolean;
+    /**
+     * Adds an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Select component for chaining
+     */
+    on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+    /**
+     * Removes an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Select component for chaining
+     */
+    off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
+    /**
+     * Enables the select
+     * @returns Select component for chaining
+     */
+    enable: () => SelectComponent;
+    /**
+     * Disables the select
+     * @returns Select component for chaining
+     */
+    disable: () => SelectComponent;
+    /**
+     * Destroys the select component
+     */
+    destroy: () => void;
+}
+/**
+ * Select event interface
+ */
+export interface SelectEvent {
+    /**
+     * The select component
+     */
+    select: SelectComponent;
+    /**
+     * Original DOM event if available
+     */
+    originalEvent?: Event;
+    /**
+     * Function to prevent default behavior
+     */
+    preventDefault: () => void;
+    /**
+     * Whether default behavior was prevented
+     */
+    defaultPrevented: boolean;
+}
+/**
+ * Select change event interface
+ */
+export interface SelectChangeEvent extends SelectEvent {
+    /**
+     * The selected option id
+     */
+    value: string;
+    /**
+     * The selected option text
+     */
+    text: string;
+    /**
+     * The complete selected option object
+     */
+    option: SelectOption;
+}
+/**
+ * Select events interface for type-checking
+ * @internal
+ */
+export interface SelectEvents {
+    'change': (event: SelectChangeEvent) => void;
+    'open': (event: SelectEvent) => void;
+    'close': (event: SelectEvent) => void;
+}
+/**
+ * API options interface
+ * @internal
+ */
+export interface ApiOptions {
+    select: {
+        getValue: () => string | null;
+        setValue: (value: string) => any;
+        getText: () => string;
+        getSelectedOption: () => SelectOption | null;
+        getOptions: () => SelectOption[];
+        setOptions: (options: SelectOption[]) => any;
+        open: () => any;
+        close: () => any;
+        isOpen: () => boolean;
+    };
+    events?: {
+        on: <T extends string>(event: T, handler: (event: any) => void) => any;
+        off: <T extends string>(event: T, handler: (event: any) => void) => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Base component interface
+ * @internal
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    textfield?: any;
+    menu?: any;
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    emit?: (event: string, data: any) => void;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    [key: string]: any;
+}

package/dist/components/sheet/api.d.ts

@@ -0,0 +1,37 @@
+import { SheetComponent } from './types';
+interface ApiOptions {
+    state: {
+        open: () => void;
+        close: () => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithElements {
+    element: HTMLElement;
+    container: HTMLElement;
+    content: {
+        setContent: (html: string) => any;
+        getContent: () => string;
+        getElement: () => HTMLElement | null;
+    };
+    title: {
+        setTitle: (text: string) => any;
+        getTitle: () => string;
+        getElement: () => HTMLElement | null;
+    };
+    getClass: (name: string) => string;
+    dragHandle?: {
+        setVisible: (visible: boolean) => any;
+    };
+    initialize?: () => void;
+}
+/**
+ * Enhances a sheet component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Sheet component
+ */
+export declare const withAPI: ({ state, lifecycle }: ApiOptions) => (component: ComponentWithElements) => SheetComponent;
+export {};

package/dist/components/sheet/config.d.ts

@@ -0,0 +1,42 @@
+import { SheetConfig } from './types';
+/**
+ * Default configuration for the Sheet component
+ */
+export declare const defaultConfig: SheetConfig;
+/**
+ * Creates the base configuration for Sheet component
+ * @param {SheetConfig} config - User provided configuration
+ * @returns {SheetConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SheetConfig) => SheetConfig;
+/**
+ * Generates element configuration for the Sheet component
+ * @param {SheetConfig} config - Sheet configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SheetConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Sheet component
+ * @param {Object} comp - Component with state and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    state: {
+        open: () => any;
+        close: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;

package/dist/components/sheet/constants.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Sheet variants
+ */
+export declare const SHEET_VARIANTS: {
+    /** Standard sheet with light elevation */
+    readonly STANDARD: "standard";
+    /** Modal sheet with overlay scrim */
+    readonly MODAL: "modal";
+    /** Expanded sheet that takes full screen */
+    readonly EXPANDED: "expanded";
+};
+/**
+ * Sheet positions
+ */
+export declare const SHEET_POSITIONS: {
+    /** Sheet appears from the bottom of the screen */
+    readonly BOTTOM: "bottom";
+    /** Sheet appears from the top of the screen */
+    readonly TOP: "top";
+    /** Sheet appears from the left of the screen */
+    readonly LEFT: "left";
+    /** Sheet appears from the right of the screen */
+    readonly RIGHT: "right";
+};
+/**
+ * Sheet events
+ */
+export declare const SHEET_EVENTS: {
+    /** Fired when sheet is opened */
+    readonly OPEN: "open";
+    /** Fired when sheet is closed */
+    readonly CLOSE: "close";
+    /** Fired when user starts dragging sheet */
+    readonly DRAG_START: "dragstart";
+    /** Fired when user finishes dragging sheet */
+    readonly DRAG_END: "dragend";
+};
+/**
+ * Sheet elevation levels
+ */
+export declare const SHEET_ELEVATION: {
+    /** Subtle elevation with minimal shadow */
+    readonly LEVEL_1: 1;
+    /** Light elevation with small shadow */
+    readonly LEVEL_2: 2;
+    /** Medium elevation with noticeable shadow */
+    readonly LEVEL_3: 3;
+    /** High elevation with prominent shadow */
+    readonly LEVEL_4: 4;
+    /** Maximum elevation with strong shadow */
+    readonly LEVEL_5: 5;
+};
+/**
+ * Sheet default values
+ */
+export declare const SHEET_DEFAULTS: {
+    /** Default sheet variant */
+    readonly VARIANT: "standard";
+    /** Default position */
+    readonly POSITION: "bottom";
+    /** Whether sheet is open by default */
+    readonly OPEN: false;
+    /** Whether sheet can be dismissed by clicking outside */
+    readonly DISMISSIBLE: true;
+    /** Whether to show drag handle by default */
+    readonly DRAG_HANDLE: true;
+    /** Default elevation level */
+    readonly ELEVATION: 3;
+    /** Default title */
+    readonly TITLE: "";
+    /** Default content */
+    readonly CONTENT: "";
+    /** Default max height */
+    readonly MAX_HEIGHT: "80%";
+    /** Whether gestures are enabled by default */
+    readonly ENABLE_GESTURES: true;
+};
+/**
+ * Sheet animation timing values
+ */
+export declare const SHEET_ANIMATION: {
+    /** Animation duration in milliseconds */
+    readonly DURATION: 300;
+    /** Animation timing function */
+    readonly TIMING: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Animation delay in milliseconds */
+    readonly DELAY: 0;
+};
+/**
+ * Sheet gesture thresholds
+ */
+export declare const SHEET_GESTURE: {
+    /** Minimum velocity to trigger a swipe */
+    readonly MIN_VELOCITY: 0.3;
+    /** Minimum distance to trigger a swipe */
+    readonly MIN_DISTANCE: 30;
+    /** Percentage of height/width to dismiss sheet */
+    readonly DISMISS_THRESHOLD: 0.3;
+};
+/**
+ * CSS classes for sheet elements
+ */
+export declare const SHEET_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "sheet";
+    /** Overlay scrim */
+    readonly SCRIM: "sheet__scrim";
+    /** Main sheet panel */
+    readonly PANEL: "sheet__panel";
+    /** Drag handle */
+    readonly DRAG_HANDLE: "sheet__drag-handle";
+    /** Title container */
+    readonly TITLE: "sheet__title";
+    /** Content container */
+    readonly CONTENT: "sheet__content";
+    /** Standard variant */
+    readonly STANDARD: "sheet--standard";
+    /** Modal variant */
+    readonly MODAL: "sheet--modal";
+    /** Expanded variant */
+    readonly EXPANDED: "sheet--expanded";
+    /** Bottom position */
+    readonly BOTTOM: "sheet--bottom";
+    /** Top position */
+    readonly TOP: "sheet--top";
+    /** Left position */
+    readonly LEFT: "sheet--left";
+    /** Right position */
+    readonly RIGHT: "sheet--right";
+    /** Open state */
+    readonly OPEN: "sheet--open";
+    /** Dragging state */
+    readonly DRAGGING: "sheet--dragging";
+    /** Elevation modifier (sheet--elevation-1) */
+    readonly ELEVATION_PREFIX: "sheet--elevation-";
+};

package/dist/components/sheet/features/content.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds content management functionality to a component
+ * @param {Object} config - Component configuration with optional content
+ * @returns {Function} Higher-order function that adds content to a component
+ */
+export declare const withContent: (config: any) => (component: any) => any;

package/dist/components/sheet/features/gestures.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds gesture support to a component
+ * @param {Object} config - Component configuration
+ * @returns {Function} Higher-order function that adds gestures to a component
+ */
+export declare const withGestures: (config: any) => (component: any) => any;

package/{src/components/sheet/features/index.ts → dist/components/sheet/features/index.d.ts}

@@ -1,6 +1,5 @@
-// src/components/sheet/features/index.ts
 export { withPosition } from './position';
 export { withContent } from './content';
 export { withTitle } from './title';
 export { withState } from './state';
-export { withGestures } from './gestures';
+export { withGestures } from './gestures';

package/dist/components/sheet/features/position.d.ts

@@ -0,0 +1,7 @@
+import { SheetConfig } from '../types';
+/**
+ * Adds position functionality to a component
+ * @param {SheetConfig} config - Component configuration with position
+ * @returns {Function} Higher-order function that adds position to a component
+ */
+export declare const withPosition: (config: SheetConfig) => (component: any) => any;

package/dist/components/sheet/features/state.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds state management functionality to a component
+ * @param {Object} config - Component configuration with initial state
+ * @returns {Function} Higher-order function that adds state to a component
+ */
+export declare const withState: (config: any) => (component: any) => any;

package/dist/components/sheet/features/title.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds title functionality to a component
+ * @param {Object} config - Component configuration with optional title
+ * @returns {Function} Higher-order function that adds title to a component
+ */
+export declare const withTitle: (config: any) => (component: any) => any;

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './sheet';
+export { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES } from './constants';
+export { SheetConfig, SheetComponent } from './types';

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,8 @@
+import { SheetConfig } from './types';
+/**
+ * Creates a new Sheet component
+ * @param {SheetConfig} config - Sheet configuration object
+ * @returns {SheetComponent} Sheet component instance
+ */
+declare const createSheet: (config?: SheetConfig) => any;
+export default createSheet;