mtrl 0.3.8 → 0.4.0

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;

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

@@ -0,0 +1,250 @@
+/**
+ * Sheet variants
+ */
+export declare const SHEET_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly MODAL: "modal";
+    readonly EXPANDED: "expanded";
+};
+/**
+ * Sheet positions
+ */
+export declare const SHEET_POSITIONS: {
+    readonly BOTTOM: "bottom";
+    readonly TOP: "top";
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+};
+/**
+ * Sheet events
+ */
+export declare const SHEET_EVENTS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+    readonly DRAG_START: "dragstart";
+    readonly DRAG_END: "dragend";
+};
+/**
+ * Configuration interface for the Sheet component
+ * @category Components
+ */
+export interface SheetConfig {
+    /**
+     * Sheet variant that determines visual styling
+     * @default 'standard'
+     */
+    variant?: keyof typeof SHEET_VARIANTS | string;
+    /**
+     * Sheet position on the screen
+     * @default 'bottom'
+     */
+    position?: keyof typeof SHEET_POSITIONS | string;
+    /**
+     * Whether the sheet is initially open
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether the sheet can be dismissed by clicking the scrim
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Whether to show a drag handle
+     * @default true
+     */
+    dragHandle?: boolean;
+    /**
+     * Content for the sheet
+     * @example '<div>Sheet content</div>'
+     */
+    content?: string;
+    /**
+     * Title for the sheet
+     * @example 'Sheet Title'
+     */
+    title?: string;
+    /**
+     * Additional CSS classes to add to the sheet
+     * @example 'custom-sheet settings-panel'
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Elevation level for the sheet (1-5)
+     * @default 3
+     */
+    elevation?: number;
+    /**
+     * Maximum height of the sheet (CSS value)
+     * @example '80%'
+     */
+    maxHeight?: string;
+    /**
+     * Whether to enable gesture-based interactions
+     * @default true
+     */
+    enableGestures?: boolean;
+    /**
+     * Callback when sheet is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when sheet is closed
+     */
+    onClose?: () => void;
+}
+/**
+ * Content API interface for managing sheet content
+ * @category Components
+ */
+export interface ContentAPI {
+    /**
+     * Sets the content HTML
+     * @param html - HTML string for the content
+     * @returns The content API for chaining
+     */
+    setContent: (html: string) => ContentAPI;
+    /**
+     * Gets the current content HTML
+     * @returns HTML string for the content
+     */
+    getContent: () => string;
+    /**
+     * Gets the content DOM element
+     * @returns The content element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Title API interface for managing sheet title
+ * @category Components
+ */
+export interface TitleAPI {
+    /**
+     * Sets the title content
+     * @param text - Title text
+     * @returns The title API for chaining
+     */
+    setTitle: (text: string) => TitleAPI;
+    /**
+     * Gets the current title text
+     * @returns Sheet title text
+     */
+    getTitle: () => string;
+    /**
+     * Gets the title DOM element
+     * @returns The title element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Sheet component interface
+ * @category Components
+ */
+export interface SheetComponent {
+    /** The sheet's root DOM element */
+    element: HTMLElement;
+    /** The sheet's container DOM element */
+    container: HTMLElement;
+    /** API for managing sheet content */
+    content: ContentAPI;
+    /** API for managing sheet title */
+    title: TitleAPI;
+    /** API for managing sheet state */
+    state: {
+        /** Opens the sheet */
+        open: () => void;
+        /** Closes the sheet */
+        close: () => void;
+        /** Checks if the sheet is open */
+        isOpen: () => boolean;
+    };
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Opens the sheet
+     * @returns The sheet component for chaining
+     */
+    open: () => SheetComponent;
+    /**
+     * Closes the sheet
+     * @returns The sheet component for chaining
+     */
+    close: () => SheetComponent;
+    /**
+     * Sets the sheet content
+     * @param html - Content HTML
+     * @returns The sheet component for chaining
+     */
+    setContent: (html: string) => SheetComponent;
+    /**
+     * Gets the sheet content HTML
+     * @returns Content HTML
+     */
+    getContent: () => string;
+    /**
+     * Sets the sheet title
+     * @param text - Title text
+     * @returns The sheet component for chaining
+     */
+    setTitle: (text: string) => SheetComponent;
+    /**
+     * Gets the sheet title text
+     * @returns Title text
+     */
+    getTitle: () => string;
+    /**
+     * Enables or disables the drag handle
+     * @param enabled - Whether to show the drag handle
+     * @returns The sheet component for chaining
+     */
+    setDragHandle: (enabled: boolean) => SheetComponent;
+    /**
+     * Sets the maximum height of the sheet
+     * @param height - CSS value for max height
+     * @returns The sheet component for chaining
+     */
+    setMaxHeight: (height: string) => SheetComponent;
+    /**
+     * Destroys the sheet component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the sheet
+     * @param event - Event name ('open', 'close', etc.)
+     * @param handler - Event handler function
+     * @returns The sheet component for chaining
+     */
+    on: (event: string, handler: Function) => SheetComponent;
+    /**
+     * Removes an event listener from the sheet
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The sheet component for chaining
+     */
+    off: (event: string, handler: Function) => SheetComponent;
+    /**
+     * Adds CSS classes to the sheet element
+     * @param classes - One or more class names to add
+     * @returns The sheet component for chaining
+     */
+    addClass: (...classes: string[]) => SheetComponent;
+}

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

@@ -0,0 +1,57 @@
+import { SliderComponent } from './types';
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+    slider: {
+        setValue: (value: number, triggerEvent?: boolean) => any;
+        getValue: () => number;
+        setSecondValue: (value: number, triggerEvent?: boolean) => any;
+        getSecondValue: () => number | null;
+        setMin: (min: number) => any;
+        getMin: () => number;
+        setMax: (max: number) => any;
+        getMax: () => number;
+        setStep: (step: number) => any;
+        getStep: () => number;
+        regenerateTicks: () => any;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    appearance: {
+        setColor: (color: string) => void;
+        getColor: () => string;
+        setSize: (size: string) => void;
+        getSize: () => string;
+        showTicks: (show: boolean) => void;
+        showCurrentValue: (show: boolean) => void;
+    };
+    text: {
+        setText: (text: string) => void;
+        getText: () => string;
+    };
+    icon: {
+        setIcon: (html: string) => void;
+        getIcon: () => string;
+    };
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a slider component with a streamlined API
+ * @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 Slider component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: {
+    element: HTMLElement;
+}) => SliderComponent;
+export {};

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

@@ -0,0 +1,75 @@
+import { SliderConfig } from './types';
+/**
+ * Default configuration for the Slider component
+ */
+export declare const defaultConfig: SliderConfig;
+/**
+ * Creates the base configuration for Slider component
+ * @param {SliderConfig} config - User provided configuration
+ * @returns {SliderConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SliderConfig) => SliderConfig;
+/**
+ * Generates element configuration for the Slider component
+ * @param {SliderConfig} config - Slider configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SliderConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: 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 Slider component
+ * @param {Object} comp - Component with slider features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    slider: {
+        setValue: (v: any, t: any) => any;
+        getValue: () => any;
+        setSecondValue: (v: any, t: any) => any;
+        getSecondValue: () => any;
+        setMin: (m: any) => any;
+        getMin: () => any;
+        setMax: (m: any) => any;
+        getMax: () => any;
+        setStep: (s: any) => any;
+        getStep: () => any;
+        regenerateTicks: () => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    appearance: {
+        setColor: (c: any) => any;
+        getColor: () => any;
+        setSize: (s: any) => any;
+        getSize: () => any;
+        showTicks: (s: any) => any;
+        showCurrentValue: (s: any) => any;
+    };
+    text: {
+        setText: (t: any) => any;
+        getText: () => any;
+    };
+    icon: {
+        setIcon: (h: any) => any;
+        getIcon: () => any;
+    };
+    events: {
+        on: (e: any, h: any) => any;
+        off: (e: any, h: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};