mtrl 0.3.8 → 0.3.9

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;

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

@@ -0,0 +1,113 @@
+/**
+ * Select variants
+ */
+export declare const SELECT_VARIANTS: {
+    /** Filled select field with solid background */
+    readonly FILLED: "filled";
+    /** Outlined select field with border */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Select menu placement options
+ */
+export declare const SELECT_PLACEMENT: {
+    /** Menu appears below the select field, aligned to the left edge */
+    readonly BOTTOM_START: "bottom-start";
+    /** Menu appears below the select field, centered */
+    readonly BOTTOM: "bottom";
+    /** Menu appears below the select field, aligned to the right edge */
+    readonly BOTTOM_END: "bottom-end";
+    /** Menu appears above the select field, aligned to the left edge */
+    readonly TOP_START: "top-start";
+    /** Menu appears above the select field, centered */
+    readonly TOP: "top";
+    /** Menu appears above the select field, aligned to the right edge */
+    readonly TOP_END: "top-end";
+};
+/**
+ * Select interaction types
+ */
+export declare const SELECT_INTERACTION: {
+    /** Interaction via mouse or touch */
+    readonly MOUSE: "mouse";
+    /** Interaction via keyboard */
+    readonly KEYBOARD: "keyboard";
+};
+/**
+ * Select event names
+ */
+export declare const SELECT_EVENTS: {
+    /** Fired when selected option changes */
+    readonly CHANGE: "change";
+    /** Fired when options menu opens */
+    readonly OPEN: "open";
+    /** Fired when options menu closes */
+    readonly CLOSE: "close";
+};
+/**
+ * Default icons for select
+ */
+export declare const SELECT_ICONS: {
+    /** Dropdown arrow icon */
+    readonly DROPDOWN: "<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=\"M7 10l5 5 5-5z\"/></svg>";
+    /** Checkmark icon for selected item */
+    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>";
+};
+/**
+ * Default configuration values
+ */
+export declare const SELECT_DEFAULTS: {
+    /** Default variant */
+    readonly VARIANT: "filled";
+    /** Default menu placement */
+    readonly PLACEMENT: "bottom-start";
+    /** Default label */
+    readonly LABEL: "Select";
+    /** Default value */
+    readonly VALUE: "";
+    /** Whether the select is required by default */
+    readonly REQUIRED: false;
+    /** Whether the select is disabled by default */
+    readonly DISABLED: false;
+    /** Default supporting text */
+    readonly SUPPORTING_TEXT: "";
+    /** Whether in error state by default */
+    readonly ERROR: false;
+};
+/**
+ * CSS classes for select elements
+ */
+export declare const SELECT_CLASSES: {
+    /** Container element */
+    readonly CONTAINER: "select";
+    /** Textfield element */
+    readonly TEXTFIELD: "select__textfield";
+    /** Dropdown icon */
+    readonly DROPDOWN_ICON: "select__dropdown-icon";
+    /** Menu container */
+    readonly MENU: "select__menu";
+    /** Menu item */
+    readonly MENU_ITEM: "select__menu-item";
+    /** Selected menu item */
+    readonly MENU_ITEM_SELECTED: "select__menu-item--selected";
+    /** Disabled menu item */
+    readonly MENU_ITEM_DISABLED: "select__menu-item--disabled";
+    /** Menu item checkmark */
+    readonly MENU_ITEM_CHECKMARK: "select__menu-item-checkmark";
+    /** Menu item icon */
+    readonly MENU_ITEM_ICON: "select__menu-item-icon";
+    /** Menu item text */
+    readonly MENU_ITEM_TEXT: "select__menu-item-text";
+    /** Filled variant */
+    readonly FILLED: "select--filled";
+    /** Outlined variant */
+    readonly OUTLINED: "select--outlined";
+    /** Open state */
+    readonly OPEN: "select--open";
+    /** Disabled state */
+    readonly DISABLED: "select--disabled";
+    /** Required state */
+    readonly REQUIRED: "select--required";
+    /** Error state */
+    readonly ERROR: "select--error";
+};

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

@@ -0,0 +1,13 @@
+import { SelectConfig, BaseComponent } from './types';
+/**
+ * Creates a textfield for the select component
+ * @param config - Select configuration
+ * @returns Function that enhances a component with textfield functionality
+ */
+export declare const withTextfield: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+/**
+ * Creates a menu for the select component
+ * @param config - Select configuration
+ * @returns Function that enhances a component with menu functionality
+ */
+export declare const withMenu: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;

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

@@ -1,38 +1,25 @@
-// src/components/select/index.ts
-
 /**
  * Select Component Module
- * 
+ *
  * The Select component provides a dropdown select control,
  * combining a textfield and menu for a complete selection interface.
- * 
+ *
  * @module components/select
  * @category Components
  */
-
-// Export main component factory
 export { default } from './select';
-
-// Export types and interfaces
-export type { 
-  SelectConfig, 
-  SelectComponent,
-  SelectOption,
-  SelectEvent,
-  SelectChangeEvent
-} from './types';
-
+export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent } from './types';
 /**
  * Constants for select configuration
- * 
+ *
  * @example
  * import { createSelect, SELECT_VARIANTS } from 'mtrl';
- * 
+ *
  * const select = createSelect({
  *   variant: SELECT_VARIANTS.OUTLINED,
  *   options: [...]
  * });
- * 
+ *
  * @category Components
  */
-export { SELECT_VARIANTS } from './types';
+export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from './constants';

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

@@ -0,0 +1,36 @@
+import { SelectConfig, SelectComponent } from './types';
+/**
+ * Creates a new Select component with the specified configuration.
+ *
+ * The Select component implements a Material Design dropdown select control,
+ * combining a textfield and menu to provide a user-friendly selection interface.
+ *
+ * @param {SelectConfig} config - Configuration options for the select
+ *  This must include an array of selection options. See {@link SelectConfig} for all available options.
+ *
+ * @returns {SelectComponent} A fully configured select component
+ *
+ * @throws {Error} Throws an error if select creation fails
+ *
+ * @example
+ * // Create a simple country select
+ * const countrySelect = createSelect({
+ *   label: 'Country',
+ *   options: [
+ *     { id: 'us', text: 'United States' },
+ *     { id: 'ca', text: 'Canada' },
+ *     { id: 'mx', text: 'Mexico' }
+ *   ],
+ *   value: 'us' // Pre-select United States
+ * });
+ *
+ * // Add to the DOM
+ * document.body.appendChild(countrySelect.element);
+ *
+ * // Listen for changes
+ * countrySelect.on('change', (event) => {
+ *   console.log(`Selected: ${event.value} (${event.text})`);
+ * });
+ */
+declare const createSelect: (config: SelectConfig) => SelectComponent;
+export default createSelect;