mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,114 @@
+/**
+ * Radio states for styling and behavior
+ */
+export declare const RADIO_STATES: {
+    /** Radio is selected */
+    readonly CHECKED: "checked";
+    /** Radio is not selected */
+    readonly UNCHECKED: "unchecked";
+    /** Radio is disabled */
+    readonly DISABLED: "disabled";
+    /** Radio has keyboard focus */
+    readonly FOCUSED: "focused";
+};
+/**
+ * Radio layout directions
+ */
+export declare const RADIO_DIRECTIONS: {
+    /** Radios stacked vertically */
+    readonly VERTICAL: "vertical";
+    /** Radios arranged horizontally */
+    readonly HORIZONTAL: "horizontal";
+};
+/**
+ * Radio variants
+ */
+export declare const RADIO_VARIANTS: {
+    /** Standard radio button */
+    readonly STANDARD: "standard";
+    /** Filled radio button */
+    readonly FILLED: "filled";
+    /** Outlined radio button */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Radio label positions
+ */
+export declare const RADIO_LABEL_POSITIONS: {
+    /** Label to the right of the radio (default) */
+    readonly RIGHT: "right";
+    /** Label to the left of the radio */
+    readonly LEFT: "left";
+};
+/**
+ * Radio size options
+ */
+export declare const RADIO_SIZES: {
+    /** Small radio button */
+    readonly SMALL: "small";
+    /** Standard radio button */
+    readonly MEDIUM: "medium";
+    /** Large radio button */
+    readonly LARGE: "large";
+};
+/**
+ * Radio events
+ */
+export declare const RADIO_EVENTS: {
+    /** Fired when a radio button is selected */
+    readonly CHANGE: "change";
+    /** Fired when a radio is focused */
+    readonly FOCUS: "focus";
+    /** Fired when a radio loses focus */
+    readonly BLUR: "blur";
+};
+/**
+ * Default configuration values
+ */
+export declare const RADIO_DEFAULTS: {
+    /** Default radio variant */
+    readonly VARIANT: "standard";
+    /** Default radio direction */
+    readonly DIRECTION: "vertical";
+    /** Default label position */
+    readonly LABEL_POSITION: "right";
+    /** Default radio size */
+    readonly SIZE: "medium";
+};
+/**
+ * CSS classes for radio elements
+ */
+export declare const RADIO_CLASSES: {
+    /** Container for radio group */
+    readonly GROUP: "radio-group";
+    /** Individual radio button */
+    readonly RADIO: "radio";
+    /** Radio input element */
+    readonly INPUT: "radio__input";
+    /** Radio label */
+    readonly LABEL: "radio__label";
+    /** Radio control (the circular part) */
+    readonly CONTROL: "radio__control";
+    /** The inner dot of the radio */
+    readonly DOT: "radio__dot";
+    /** Radio focus ring */
+    readonly FOCUS_RING: "radio__focus-ring";
+    /** Radio ripple effect */
+    readonly RIPPLE: "radio__ripple";
+    /** Checked state */
+    readonly CHECKED: "radio--checked";
+    /** Disabled state */
+    readonly DISABLED: "radio--disabled";
+    /** Focus state */
+    readonly FOCUSED: "radio--focused";
+    /** Label right position */
+    readonly LABEL_RIGHT: "radio--label-right";
+    /** Label left position */
+    readonly LABEL_LEFT: "radio--label-left";
+    /** Small size */
+    readonly SMALL: "radio--small";
+    /** Medium size */
+    readonly MEDIUM: "radio--medium";
+    /** Large size */
+    readonly LARGE: "radio--large";
+};

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

@@ -0,0 +1,3 @@
+export { default } from './radios';
+export { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';
+export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES } from './constants';

package/dist/components/radios/radio.d.ts

@@ -0,0 +1,8 @@
+import { RadiosConfig } from './types';
+/**
+ * Creates a feature that adds radio functionality to a component
+ * @param {RadiosConfig} config - Configuration with radio options
+ * @returns {Function} Higher-order function that adds radio to component
+ */
+export declare const withRadio: (config: RadiosConfig) => (component: any) => any;
+export default withRadio;

package/dist/components/radios/radios.d.ts

@@ -0,0 +1,8 @@
+import { RadiosConfig, RadiosComponent } from './types';
+/**
+ * Creates a new Radios component
+ * @param {RadiosConfig} config - Radios configuration object
+ * @returns {RadiosComponent} Radios component instance
+ */
+declare const createRadios: (config: RadiosConfig) => RadiosComponent;
+export default createRadios;

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

@@ -0,0 +1,189 @@
+/**
+ * Configuration for a radio option in the Radios component
+ * @category Components
+ */
+export interface RadioOptionConfig {
+    /**
+     * Radio input value attribute
+     * @example 'option1'
+     */
+    value: string;
+    /**
+     * Radio label text content
+     * @example 'Option 1'
+     */
+    label: string;
+    /**
+     * Whether the radio is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to position the label before the radio
+     * @default false
+     */
+    labelBefore?: boolean;
+}
+/**
+ * Configuration interface for the Radios component
+ * @category Components
+ */
+export interface RadiosConfig {
+    /**
+     * Radio input name attribute used for grouping radios
+     * @example 'options'
+     */
+    name: string;
+    /**
+     * Array of radio option configurations
+     */
+    options?: RadioOptionConfig[];
+    /**
+     * Initial selected value
+     */
+    value?: string;
+    /**
+     * Layout direction for radio buttons
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Whether the entire group is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Additional CSS classes to add to the radios component
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: 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];
+    };
+}
+/**
+ * Interface for a single radio in the Radios component
+ * @category Components
+ */
+export interface RadioItem {
+    /** The radio container element */
+    element: HTMLElement;
+    /** The actual radio input element */
+    input: HTMLInputElement;
+    /** The label element */
+    label: HTMLLabelElement;
+    /** The radio option configuration */
+    config: RadioOptionConfig;
+    /** Destroys the radio and removes event listeners */
+    destroy: () => void;
+}
+/**
+ * Radios component interface
+ * @category Components
+ */
+export interface RadiosComponent {
+    /** The radios container DOM element */
+    element: HTMLElement;
+    /** Array of radio items in the group */
+    radios: RadioItem[];
+    /** 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;
+    /**
+     * Gets the radios component name
+     * @returns Selected radio value or empty string if none selected
+     */
+    getValue: () => string;
+    /**
+     * Sets the radios component value (selects a radio)
+     * @param value - Value to select
+     * @returns The radios component for chaining
+     */
+    setValue: (value: string) => RadiosComponent;
+    /**
+     * Gets the selected radio option's configuration
+     * @returns The selected radio option config or null
+     */
+    getSelected: () => RadioOptionConfig | null;
+    /**
+     * Adds a radio option to the radios component
+     * @param option - Radio option configuration
+     * @returns The radios component for chaining
+     */
+    addOption: (option: RadioOptionConfig) => RadiosComponent;
+    /**
+     * Removes a radio option from the radios component
+     * @param value - Value of the radio to remove
+     * @returns The radios component for chaining
+     */
+    removeOption: (value: string) => RadiosComponent;
+    /**
+     * Enables the radios component
+     * @returns The radios component for chaining
+     */
+    enable: () => RadiosComponent;
+    /**
+     * Disables the radios component
+     * @returns The radios component for chaining
+     */
+    disable: () => RadiosComponent;
+    /**
+     * Enables a specific radio option
+     * @param value - Value of the radio to enable
+     * @returns The radios component for chaining
+     */
+    enableOption: (value: string) => RadiosComponent;
+    /**
+     * Disables a specific radio option
+     * @param value - Value of the radio to disable
+     * @returns The radios component for chaining
+     */
+    disableOption: (value: string) => RadiosComponent;
+    /**
+     * Destroys the radios component and all radio items
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the radios component
+     * @param event - Event name ('change')
+     * @param handler - Event handler function
+     * @returns The radios component for chaining
+     */
+    on: (event: string, handler: Function) => RadiosComponent;
+    /**
+     * Removes an event listener from the radios component
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The radios component for chaining
+     */
+    off: (event: string, handler: Function) => RadiosComponent;
+}

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

@@ -0,0 +1,55 @@
+import { SearchComponent } from './types';
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+    search: {
+        setValue: (value: string, triggerEvent?: boolean) => any;
+        getValue: () => string;
+        setPlaceholder: (text: string) => any;
+        getPlaceholder: () => string;
+        focus: () => any;
+        blur: () => any;
+        expand: () => any;
+        collapse: () => any;
+        clear: () => any;
+        submit: () => any;
+        setSuggestions: (suggestions: any[]) => any;
+        showSuggestions: (show: boolean) => any;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    appearance: {
+        setColor: (color: string) => void;
+        getColor: () => string;
+        setSize: (size: string) => void;
+        getSize: () => string;
+    };
+    icons: {
+        setLeadingIcon: (iconHtml: string) => void;
+        setTrailingIcon: (iconHtml: string) => void;
+        setTrailingIcon2: (iconHtml: string) => void;
+        setAvatar: (avatarHtml: string) => void;
+        showClearButton: (show: boolean) => void;
+    };
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a search 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 Search component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: {
+    element: HTMLElement;
+}) => SearchComponent;
+export {};

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

@@ -0,0 +1,73 @@
+import { SearchConfig } from './types';
+/**
+ * Default configuration for the Search component
+ */
+export declare const defaultConfig: SearchConfig;
+/**
+ * Creates the base configuration for Search component
+ * @param {SearchConfig} config - User provided configuration
+ * @returns {SearchConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SearchConfig) => SearchConfig;
+/**
+ * Generates element configuration for the Search component
+ * @param {SearchConfig} config - Search configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SearchConfig) => {
+    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 Search component
+ * @param {Object} comp - Component with search features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    search: {
+        setValue: (v: any, t: any) => any;
+        getValue: () => any;
+        setPlaceholder: (p: any) => any;
+        getPlaceholder: () => any;
+        focus: () => any;
+        blur: () => any;
+        expand: () => any;
+        collapse: () => any;
+        clear: () => any;
+        submit: () => any;
+        setSuggestions: (s: any) => any;
+        showSuggestions: (s: any) => any;
+    };
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    appearance: {
+        setColor: (c: any) => any;
+        getColor: () => any;
+        setSize: (s: any) => any;
+        getSize: () => any;
+    };
+    icons: {
+        setLeadingIcon: (i: any) => any;
+        setTrailingIcon: (i: any) => any;
+        setTrailingIcon2: (i: any) => any;
+        setAvatar: (a: any) => any;
+        showClearButton: (s: any) => any;
+    };
+    events: {
+        on: (e: any, h: any) => any;
+        off: (e: any, h: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};

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

@@ -0,0 +1,128 @@
+/**
+ * Search component variants
+ */
+export declare const SEARCH_VARIANTS: {
+    /** Standard search box */
+    readonly STANDARD: "standard";
+    /** Search in bar layout */
+    readonly BAR: "bar";
+    /** Search in rail layout */
+    readonly RAIL: "rail";
+    /** Search in drawer layout */
+    readonly DRAWER: "drawer";
+    /** Modal search that expands to take focus */
+    readonly MODAL: "modal";
+};
+/**
+ * Search component states
+ */
+export declare const SEARCH_STATES: {
+    /** Search is focused */
+    readonly FOCUSED: "focused";
+    /** Search is expanded (for bar or modal variants) */
+    readonly EXPANDED: "expanded";
+    /** Search is collapsed (for bar or modal variants) */
+    readonly COLLAPSED: "collapsed";
+    /** Search has content */
+    readonly POPULATED: "populated";
+    /** Search is disabled */
+    readonly DISABLED: "disabled";
+    /** Search is showing suggestions */
+    readonly SUGGESTING: "suggesting";
+};
+/**
+ * Search component events
+ */
+export declare const SEARCH_EVENTS: {
+    /** Fired when search input is focused */
+    readonly FOCUS: "focus";
+    /** Fired when search input loses focus */
+    readonly BLUR: "blur";
+    /** Fired when input value changes */
+    readonly INPUT: "input";
+    /** Fired when search is submitted */
+    readonly SUBMIT: "submit";
+    /** Fired when search is cleared */
+    readonly CLEAR: "clear";
+    /** Fired when an icon is clicked */
+    readonly ICON_CLICK: "iconClick";
+};
+/**
+ * Default search icons (standard set)
+ */
+export declare const SEARCH_ICONS: {
+    /** Default search icon */
+    readonly SEARCH: "<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=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
+    /** Clear/close icon */
+    readonly CLEAR: "<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=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
+    /** Back arrow icon */
+    readonly BACK: "<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=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
+    /** Settings/options icon */
+    readonly SETTINGS: "<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=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>";
+};
+/**
+ * Default configuration values
+ */
+export declare const SEARCH_DEFAULTS: {
+    /** Default variant */
+    readonly VARIANT: "standard";
+    /** Default placeholder text */
+    readonly PLACEHOLDER: "Search";
+    /** Default value */
+    readonly VALUE: "";
+    /** Default leading icon */
+    readonly LEADING_ICON: "<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=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
+    /** Whether to show clear button by default */
+    readonly SHOW_CLEAR_BUTTON: true;
+    /** Default max width (in pixels) */
+    readonly MAX_WIDTH: 480;
+    /** Default min width (in pixels) */
+    readonly MIN_WIDTH: 240;
+    /** Whether the component is full width by default */
+    readonly FULL_WIDTH: false;
+    /** Whether to show dividers between suggestion groups */
+    readonly SHOW_DIVIDERS: true;
+};
+/**
+ * CSS classes for search component elements
+ */
+export declare const SEARCH_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "search";
+    /** Variant modifier class prefix */
+    readonly VARIANT_PREFIX: "search--";
+    /** Search input element */
+    readonly INPUT: "search__input";
+    /** Leading icon container */
+    readonly LEADING_ICON: "search__leading-icon";
+    /** Trailing icon container */
+    readonly TRAILING_ICON: "search__trailing-icon";
+    /** Second trailing icon container */
+    readonly TRAILING_ICON2: "search__trailing-icon2";
+    /** Avatar container */
+    readonly AVATAR: "search__avatar";
+    /** Clear button */
+    readonly CLEAR_BUTTON: "search__clear-button";
+    /** Suggestions container */
+    readonly SUGGESTIONS: "search__suggestions";
+    /** Individual suggestion item */
+    readonly SUGGESTION_ITEM: "search__suggestion-item";
+    /** Suggestion divider */
+    readonly SUGGESTION_DIVIDER: "search__suggestion-divider";
+    /** Suggestion icon */
+    readonly SUGGESTION_ICON: "search__suggestion-icon";
+    /** Suggestion text */
+    readonly SUGGESTION_TEXT: "search__suggestion-text";
+    /** Focused state */
+    readonly FOCUSED: "search--focused";
+    /** Expanded state */
+    readonly EXPANDED: "search--expanded";
+    /** Populated state (has value) */
+    readonly POPULATED: "search--populated";
+    /** Disabled state */
+    readonly DISABLED: "search--disabled";
+    /** Full width modifier */
+    readonly FULL_WIDTH: "search--full-width";
+    /** Showing suggestions state */
+    readonly SUGGESTING: "search--suggesting";
+};

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

@@ -1,4 +1,3 @@
-// src/components/search/features/index.ts
 export { withStructure } from './structure';
 export { withStates } from './states';
-export { withSearch } from './search';
+export { withSearch } from './search';

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

@@ -0,0 +1,7 @@
+import { SearchConfig } from '../types';
+/**
+ * Add main search functionality to component
+ * @param config Search configuration
+ * @returns Component enhancer with search functionality
+ */
+export declare const withSearch: (config: SearchConfig) => (component: any) => any;

package/dist/components/search/features/states.d.ts

@@ -0,0 +1,8 @@
+import { SearchConfig } from '../types';
+/**
+ * Add state management features to search component
+ *
+ * @param config Search configuration
+ * @returns Component enhancer with state management features
+ */
+export declare const withStates: (config: SearchConfig) => (component: any) => any;

package/dist/components/search/features/structure.d.ts

@@ -0,0 +1,7 @@
+import { SearchConfig } from '../types';
+/**
+ * Creates the search component DOM structure
+ * @param config Search configuration
+ * @returns Component enhancer with DOM structure
+ */
+export declare const withStructure: (config: SearchConfig) => (component: any) => any;

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

@@ -0,0 +1,3 @@
+export { default } from './search';
+export type { SearchConfig, SearchComponent, SearchEvent } from './types';
+export { SEARCH_VARIANTS, SEARCH_STATES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES } from './constants';

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

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