mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,132 @@
+/**
+ * Navigation variants for the search component
+ */
+export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
+/**
+ * Valid event types for search component
+ */
+export type SearchEventType = 'focus' | 'blur' | 'input' | 'submit' | 'clear' | 'iconClick';
+/**
+ * Configuration options for the search component
+ * @interface SearchConfig
+ */
+export interface SearchConfig {
+    /** The variant of the search component (rail, drawer, bar, modal, or standard) */
+    variant?: NavVariant | string;
+    /** Whether the search component is disabled */
+    disabled?: boolean;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Initial value for the search input */
+    value?: string;
+    /** Leading icon HTML or 'none' to remove */
+    leadingIcon?: string;
+    /** Trailing icon HTML (optional) */
+    trailingIcon?: string;
+    /** Second trailing icon HTML (optional) */
+    trailingIcon2?: string;
+    /** Avatar HTML for trailing avatar (optional) */
+    avatar?: string;
+    /** If true, will show the clear button when the input has text */
+    showClearButton?: boolean;
+    /** Callback function when a search is submitted */
+    onSubmit?: (value: string) => void;
+    /** Callback function when the input value changes */
+    onInput?: (value: string) => void;
+    /** Callback function when the clear button is clicked */
+    onClear?: () => void;
+    /** Suggestions to show when the search is focused (array of strings or objects) */
+    suggestions?: string[] | Array<{
+        text: string;
+        value?: string;
+        icon?: string;
+    }>;
+    /** Whether to show dividers between suggestion groups */
+    showDividers?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Maximum width of the search component in pixels */
+    maxWidth?: number;
+    /** Minimum width of the search component in pixels */
+    minWidth?: number;
+    /** Whether the search component is full-width */
+    fullWidth?: boolean;
+    /** Event handlers for search events */
+    on?: {
+        [key in SearchEventType]?: (event: SearchEvent) => void;
+    };
+}
+/**
+ * Search event data
+ * @interface SearchEvent
+ */
+export interface SearchEvent {
+    /** The search component that triggered the event */
+    search: any;
+    /** Current search value */
+    value: string;
+    /** Original DOM event if available */
+    originalEvent: Event | null;
+    /** Function to prevent default behavior */
+    preventDefault: () => void;
+    /** Whether default behavior was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Search component public API interface
+ * @interface SearchComponent
+ */
+export interface SearchComponent {
+    /** The root element of the search component */
+    element: HTMLElement;
+    /** Sets the search value */
+    setValue: (value: string, triggerEvent?: boolean) => SearchComponent;
+    /** Gets the search value */
+    getValue: () => string;
+    /** Sets placeholder text */
+    setPlaceholder: (text: string) => SearchComponent;
+    /** Gets placeholder text */
+    getPlaceholder: () => string;
+    /** Sets leading icon */
+    setLeadingIcon: (iconHtml: string) => SearchComponent;
+    /** Sets trailing icon */
+    setTrailingIcon: (iconHtml: string) => SearchComponent;
+    /** Sets second trailing icon */
+    setTrailingIcon2: (iconHtml: string) => SearchComponent;
+    /** Sets avatar */
+    setAvatar: (avatarHtml: string) => SearchComponent;
+    /** Shows or hides clear button */
+    showClearButton: (show: boolean) => SearchComponent;
+    /** Updates suggestions */
+    setSuggestions: (suggestions: string[] | Array<{
+        text: string;
+        value?: string;
+        icon?: string;
+    }>) => SearchComponent;
+    /** Shows or hides suggestions */
+    showSuggestions: (show: boolean) => SearchComponent;
+    /** Focuses the search input */
+    focus: () => SearchComponent;
+    /** Blurs the search input */
+    blur: () => SearchComponent;
+    /** Expands the search bar into view mode (if in bar mode) */
+    expand: () => SearchComponent;
+    /** Collapses the search view back to bar mode */
+    collapse: () => SearchComponent;
+    /** Clears the search input */
+    clear: () => SearchComponent;
+    /** Submits the search */
+    submit: () => SearchComponent;
+    /** Enables the search component */
+    enable: () => SearchComponent;
+    /** Disables the search component */
+    disable: () => SearchComponent;
+    /** Checks if search is disabled */
+    isDisabled: () => boolean;
+    /** Adds event listener */
+    on: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
+    /** Removes event listener */
+    off: (event: SearchEventType, handler: (event: SearchEvent) => void) => SearchComponent;
+    /** Destroys the search component and cleans up resources */
+    destroy: () => void;
+}

package/dist/components/segmented-button/config.d.ts

@@ -0,0 +1,65 @@
+import { SegmentedButtonConfig, SelectionMode } from './types';
+/**
+ * Default configuration values for segmented buttons
+ * @internal
+ */
+export declare const DEFAULT_CONFIG: {
+    mode: "single";
+    ripple: true;
+    density: "default";
+};
+/**
+ * Creates the base configuration for Segmented Button component
+ * @param {SegmentedButtonConfig} config - User provided configuration
+ * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
+ * @internal
+ */
+export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig;
+/**
+ * Generates element configuration for the Segmented Button container
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {Object} Element configuration object for withElement
+ * @internal
+ */
+export declare const getContainerConfig: (config: SegmentedButtonConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: {
+        role: string;
+        'aria-label': string;
+        'data-mode': SelectionMode;
+        'data-density': string;
+    };
+    className: string[];
+    interactive: boolean;
+};
+/**
+ * Gets density-specific sizing and spacing values
+ * @param {string} density - The density level
+ * @returns {Object} CSS variables with sizing values
+ * @internal
+ */
+export declare const getDensityStyles: (density: string) => Record<string, string>;
+/**
+ * Generates configuration for a segment element
+ * @param {Object} segment - Segment configuration
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @returns {Object} Element configuration for the segment
+ * @internal
+ */
+export declare const getSegmentConfig: (segment: any, prefix: any, groupDisabled?: boolean) => {
+    tag: string;
+    attributes: {
+        type: string;
+        role: string;
+        disabled: boolean;
+        'aria-pressed': string;
+        value: any;
+    };
+    className: any[];
+    forwardEvents: {
+        click: (component: any) => boolean;
+    };
+    interactive: boolean;
+};

package/dist/components/segmented-button/constants.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Selection modes for segmented buttons
+ */
+export declare const SEGMENTED_BUTTON_MODES: {
+    /** Only one segment can be selected at a time */
+    readonly SINGLE: "single";
+    /** Multiple segments can be selected */
+    readonly MULTI: "multi";
+};
+/**
+ * Density levels for segmented buttons
+ */
+export declare const SEGMENTED_BUTTON_DENSITY: {
+    /** Default size with standard spacing */
+    readonly DEFAULT: "default";
+    /** Reduced size and spacing, more compact */
+    readonly COMFORTABLE: "comfortable";
+    /** Minimal size and spacing, most compact */
+    readonly COMPACT: "compact";
+};
+/**
+ * Segmented button events
+ */
+export declare const SEGMENTED_BUTTON_EVENTS: {
+    /** Fired when selection changes */
+    readonly CHANGE: "change";
+};
+/**
+ * Default configuration values
+ */
+export declare const SEGMENTED_BUTTON_DEFAULTS: {
+    /** Default selection mode */
+    readonly MODE: "single";
+    /** Default density level */
+    readonly DENSITY: "default";
+    /** Whether ripple effect is enabled by default */
+    readonly RIPPLE: true;
+    /** Default ripple animation duration in milliseconds */
+    readonly RIPPLE_DURATION: 300;
+    /** Default ripple animation timing function */
+    readonly RIPPLE_TIMING: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Default ripple opacity values [start, end] */
+    readonly RIPPLE_OPACITY: readonly ["0.2", "0"];
+};
+export declare const DEFAULT_CHECKMARK_ICON = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>";
+/**
+ * Default checkmark icon for selected segments
+ */
+export declare const SEGMENTED_BUTTON_ICONS: {
+    /** Default checkmark icon */
+    readonly CHECKMARK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>";
+};
+/**
+ * CSS classes for segmented button elements
+ */
+export declare const SEGMENTED_BUTTON_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "segmented-button";
+    /** Individual segment */
+    readonly SEGMENT: "segmented-button__segment";
+    /** Selected segment */
+    readonly SELECTED: "segmented-button__segment--selected";
+    /** Disabled segment */
+    readonly DISABLED: "segmented-button__segment--disabled";
+    /** Segment with icon */
+    readonly HAS_ICON: "segmented-button__segment--has-icon";
+    /** Segment icon container */
+    readonly ICON: "segmented-button__icon";
+    /** Segment label text */
+    readonly LABEL: "segmented-button__label";
+    /** Checkmark icon for selected state */
+    readonly CHECKMARK: "segmented-button__checkmark";
+    /** Ripple effect container */
+    readonly RIPPLE: "segmented-button__ripple";
+    /** Single selection mode */
+    readonly SINGLE_MODE: "segmented-button--single";
+    /** Multiple selection mode */
+    readonly MULTI_MODE: "segmented-button--multi";
+    /** Default density */
+    readonly DEFAULT_DENSITY: "segmented-button--density-default";
+    /** Comfortable density */
+    readonly COMFORTABLE_DENSITY: "segmented-button--density-comfortable";
+    /** Compact density */
+    readonly COMPACT_DENSITY: "segmented-button--density-compact";
+};

package/dist/components/segmented-button/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as createSegmentedButton } from './segmented-button';
+export { SelectionMode, Density } from './types';
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';
+export { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from './constants';

package/dist/components/segmented-button/segment.d.ts

@@ -0,0 +1,15 @@
+import { SegmentConfig, Segment } from './types';
+/**
+ * Creates a segment for the segmented button using the button component
+ * @param {SegmentConfig} config - Segment configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - Component prefix
+ * @param {boolean} groupDisabled - Whether the entire group is disabled
+ * @param {Object} options - Additional options
+ * @returns {Segment} Segment object
+ * @internal
+ */
+export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: {
+    ripple: boolean;
+    rippleConfig: {};
+}) => Segment;

package/dist/components/segmented-button/segmented-button.d.ts

@@ -0,0 +1,49 @@
+import { SegmentedButtonConfig, SegmentedButtonComponent } from './types';
+/**
+ * Creates a new Segmented Button component
+ *
+ * The Segmented Button component provides a group of related buttons that can
+ * be used for selection and filtering. It supports single or multiple selection modes,
+ * configurable density, disabled states, and event handling.
+ *
+ * @param {SegmentedButtonConfig} config - Segmented Button configuration
+ * @returns {SegmentedButtonComponent} Segmented Button component instance
+ *
+ * @example
+ * // Create a segmented button with three segments in single selection mode
+ * const viewToggle = createSegmentedButton({
+ *   segments: [
+ *     { text: 'Day', value: 'day', selected: true },
+ *     { text: 'Week', value: 'week' },
+ *     { text: 'Month', value: 'month' }
+ *   ],
+ *   mode: SelectionMode.SINGLE
+ * });
+ *
+ * // Listen for selection changes
+ * viewToggle.on('change', (event) => {
+ *   console.log('Selected view:', event.value[0]);
+ *   updateCalendarView(event.value[0]);
+ * });
+ *
+ * @example
+ * // Create a compact multi-select segmented button with icons
+ * const filterOptions = createSegmentedButton({
+ *   segments: [
+ *     {
+ *       icon: '<svg>...</svg>',
+ *       text: 'Filter 1',
+ *       value: 'filter1'
+ *     },
+ *     {
+ *       icon: '<svg>...</svg>',
+ *       text: 'Filter 2',
+ *       value: 'filter2'
+ *     }
+ *   ],
+ *   mode: SelectionMode.MULTI,
+ *   density: Density.COMPACT
+ * });
+ */
+declare const createSegmentedButton: (config?: SegmentedButtonConfig) => SegmentedButtonComponent;
+export default createSegmentedButton;

package/dist/components/segmented-button/types.d.ts

@@ -0,0 +1,257 @@
+/**
+ * Segmented button selection mode
+ * @category Components
+ */
+export declare enum SelectionMode {
+    /** Only one segment can be selected at a time */
+    SINGLE = "single",
+    /** Multiple segments can be selected */
+    MULTI = "multi"
+}
+/**
+ * Density options for segmented button
+ * Controls the overall sizing and spacing of the component.
+ * @category Components
+ */
+export declare enum Density {
+    /** Default size with standard spacing */
+    DEFAULT = "default",
+    /** Reduced size and spacing, more compact */
+    COMFORTABLE = "comfortable",
+    /** Minimal size and spacing, most compact */
+    COMPACT = "compact"
+}
+/**
+ * Event types for segmented button
+ */
+export type SegmentedButtonEventType = 'change';
+/**
+ * Event data for segmented button events
+ */
+export interface SegmentedButtonEvent {
+    /** The segmented button component that triggered the event */
+    segmentedButton: SegmentedButtonComponent;
+    /** The selected segments */
+    selected: Segment[];
+    /** Values of the selected segments */
+    values: string[];
+    /** Original DOM event if available */
+    originalEvent: Event | null;
+    /** Function to prevent default behavior */
+    preventDefault: () => void;
+    /** Whether default behavior was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Configuration for a single segment within a segmented button
+ * @category Components
+ */
+export interface SegmentConfig {
+    /**
+     * Text content for the segment
+     * @example 'Day'
+     */
+    text?: string;
+    /**
+     * Icon HTML content
+     * @example '<svg>...</svg>'
+     */
+    icon?: string;
+    /**
+     * Whether this segment is initially selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Value associated with this segment
+     */
+    value?: string;
+    /**
+     * Whether this segment is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class names for this segment
+     */
+    class?: string;
+    /**
+     * Custom icon to display when segment is selected (replaces default checkmark)
+     */
+    checkmarkIcon?: string;
+}
+/**
+ * Configuration interface for the Segmented Button component
+ * @category Components
+ */
+export interface SegmentedButtonConfig {
+    /**
+     * Selection mode for the segmented button group
+     * @default SelectionMode.SINGLE
+     */
+    mode?: SelectionMode;
+    /**
+     * Array of segment configurations
+     */
+    segments?: SegmentConfig[];
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Whether the entire segmented button is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class for the segmented button container
+     */
+    class?: string;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Density setting that controls the component's size and spacing
+     * @default Density.DEFAULT
+     */
+    density?: Density | string;
+    /**
+     * Ripple effect configuration
+     */
+    rippleConfig?: {
+        /** Duration of the ripple animation in milliseconds */
+        duration?: number;
+        /** Timing function for the ripple animation */
+        timing?: string;
+        /** Opacity values for ripple start and end [start, end] */
+        opacity?: [string, string];
+    };
+    /**
+     * Event handlers for segmented button events
+     */
+    on?: {
+        [key in SegmentedButtonEventType]?: (event: SegmentedButtonEvent) => void;
+    };
+}
+/**
+ * Interface for a segment within a segmented button
+ * @category Components
+ */
+export interface Segment {
+    /** The segment's DOM element */
+    element: HTMLElement;
+    /** The segment's value */
+    value: string;
+    /**
+     * Gets whether the segment is selected
+     */
+    isSelected: () => boolean;
+    /**
+     * Sets the segment's selected state
+     * @param selected - Whether the segment should be selected
+     */
+    setSelected: (selected: boolean) => void;
+    /**
+     * Gets whether the segment is disabled
+     */
+    isDisabled: () => boolean;
+    /**
+     * Sets the segment's disabled state
+     * @param disabled - Whether the segment should be disabled
+     */
+    setDisabled: (disabled: boolean) => void;
+    /**
+     * Destroys the segment and cleans up resources
+     */
+    destroy: () => void;
+}
+/**
+ * Segmented Button component interface
+ * @category Components
+ */
+export interface SegmentedButtonComponent {
+    /** The component's container DOM element */
+    element: HTMLElement;
+    /** Array of segment objects */
+    segments: Segment[];
+    /**
+     * Gets the selected segment(s)
+     * @returns An array of selected segments
+     */
+    getSelected: () => Segment[];
+    /**
+     * Gets the values of selected segment(s)
+     * @returns An array of selected segment values
+     */
+    getValue: () => string[];
+    /**
+     * Selects a segment by its value
+     * @param value - The value of the segment to select
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    select: (value: string) => SegmentedButtonComponent;
+    /**
+     * Deselects a segment by its value
+     * @param value - The value of the segment to deselect
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    deselect: (value: string) => SegmentedButtonComponent;
+    /**
+     * Enables the segmented button
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    enable: () => SegmentedButtonComponent;
+    /**
+     * Disables the segmented button
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    disable: () => SegmentedButtonComponent;
+    /**
+     * Enables a specific segment by its value
+     * @param value - The value of the segment to enable
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    enableSegment: (value: string) => SegmentedButtonComponent;
+    /**
+     * Disables a specific segment by its value
+     * @param value - The value of the segment to disable
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    disableSegment: (value: string) => SegmentedButtonComponent;
+    /**
+     * Sets the density of the segmented button
+     * @param density - The density level to set
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    setDensity: (density: Density | string) => SegmentedButtonComponent;
+    /**
+     * Gets the current density setting
+     * @returns The current density
+     */
+    getDensity: () => string;
+    /**
+     * Adds an event listener to the segmented button
+     * @param event - Event name ('change', etc.)
+     * @param handler - Event handler function
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    on: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
+    /**
+     * Removes an event listener from the segmented button
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The SegmentedButtonComponent for chaining
+     */
+    off: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
+    /**
+     * Destroys the component and cleans up resources
+     */
+    destroy: () => void;
+}

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

@@ -0,0 +1,8 @@
+import { SelectComponent, ApiOptions } from './types';
+/**
+ * Enhances a select component with API methods
+ * @param options - API configuration options
+ * @returns Higher-order function that adds API methods to component
+ * @internal
+ */
+export declare const withAPI: (options: ApiOptions) => (component: any) => SelectComponent;

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

@@ -0,0 +1,18 @@
+import { SelectConfig, BaseComponent, ApiOptions } from './types';
+/**
+ * Default configuration for the Select component
+ */
+export declare const defaultConfig: SelectConfig;
+/**
+ * Creates the base configuration for Select component
+ * @param {SelectConfig} config - User provided configuration
+ * @returns {SelectConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SelectConfig) => SelectConfig;
+/**
+ * Creates API configuration for the Select component
+ * @param {BaseComponent} comp - Component with select features
+ * @returns {ApiOptions} API configuration object
+ */
+export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export default defaultConfig;