mtrl 0.3.7 → 0.3.9

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

@@ -0,0 +1,217 @@
+/**
+ * Available Textfield variants
+ */
+export type TextfieldVariant = 'filled' | 'outlined';
+/**
+ * Textfield variant constants
+ */
+export declare const TEXTFIELD_VARIANTS: {
+    readonly FILLED: "filled";
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Available Textfield sizes
+ */
+export type TextfieldSize = 'small' | 'medium' | 'large';
+/**
+ * Textfield size constants
+ */
+export declare const TEXTFIELD_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+/**
+ * Available Textfield states
+ */
+export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+/**
+ * Available Textfield types
+ */
+export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
+/**
+ * Textfield type constants
+ */
+export declare const TEXTFIELD_TYPES: {
+    readonly TEXT: "text";
+    readonly PASSWORD: "password";
+    readonly EMAIL: "email";
+    readonly NUMBER: "number";
+    readonly TEL: "tel";
+    readonly URL: "url";
+    readonly SEARCH: "search";
+    readonly MULTILINE: "multiline";
+};
+/**
+ * Configuration interface for the Textfield component
+ */
+export interface TextfieldConfig {
+    /** Input type (text, password, email, etc.) */
+    type?: TextfieldTypes | string;
+    /** Visual variant (filled, outlined) */
+    variant?: TextfieldVariant | string;
+    /** Input name attribute */
+    name?: string;
+    /** Label text */
+    label?: string;
+    /** Initial value */
+    value?: string;
+    /** Whether input is required */
+    required?: boolean;
+    /** Whether textfield is disabled */
+    disabled?: boolean;
+    /** Whether textfield is readonly */
+    readonly?: boolean;
+    /** Maximum input length */
+    maxLength?: number;
+    /** Input pattern for validation */
+    pattern?: string;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Leading icon HTML content */
+    leadingIcon?: string;
+    /** Trailing icon HTML content */
+    trailingIcon?: string;
+    /** Supporting text content */
+    supportingText?: string;
+    /** Whether supporting text indicates an error */
+    error?: boolean;
+    /** Prefix text to display before the input */
+    prefixText?: string;
+    /** Suffix text to display after the input */
+    suffixText?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Prefix for class names */
+    prefix?: string;
+    /** Component name */
+    componentName?: string;
+}
+/**
+ * Textfield component interface
+ */
+export interface TextfieldComponent {
+    /** The root element of the textfield */
+    element: HTMLElement;
+    /** The input element */
+    input: HTMLInputElement | HTMLTextAreaElement;
+    /** Gets the textfield's value */
+    getValue: () => string;
+    /** Sets the textfield's value */
+    setValue: (value: string) => TextfieldComponent;
+    /** Sets an attribute on the input element */
+    setAttribute: (name: string, value: string) => TextfieldComponent;
+    /** Gets an attribute from the input element */
+    getAttribute: (name: string) => string | null;
+    /** Removes an attribute from the input element */
+    removeAttribute: (name: string) => TextfieldComponent;
+    /** Sets the textfield's variant (filled or outlined) */
+    setVariant: (variant: TextfieldVariant) => TextfieldComponent;
+    /** Gets the textfield's current variant */
+    getVariant: () => TextfieldVariant;
+    /** Sets the textfield's label text */
+    setLabel: (text: string) => TextfieldComponent;
+    /** Gets the textfield's label text */
+    getLabel: () => string;
+    /** Leading icon element (if present) */
+    leadingIcon: HTMLElement | null;
+    /** Sets the leading icon HTML content */
+    setLeadingIcon: (html: string) => TextfieldComponent;
+    /** Removes the leading icon */
+    removeLeadingIcon: () => TextfieldComponent;
+    /** Trailing icon element (if present) */
+    trailingIcon: HTMLElement | null;
+    /** Sets the trailing icon HTML content */
+    setTrailingIcon: (html: string) => TextfieldComponent;
+    /** Removes the trailing icon */
+    removeTrailingIcon: () => TextfieldComponent;
+    /** Supporting text element (if present) */
+    supportingTextElement: HTMLElement | null;
+    /** Sets the supporting text content */
+    setSupportingText: (text: string, isError?: boolean) => TextfieldComponent;
+    /** Removes the supporting text */
+    removeSupportingText: () => TextfieldComponent;
+    /** Prefix text element (if present) */
+    prefixTextElement: HTMLElement | null;
+    /** Sets the prefix text content */
+    setPrefixText: (text: string) => TextfieldComponent;
+    /** Removes the prefix text */
+    removePrefixText: () => TextfieldComponent;
+    /** Suffix text element (if present) */
+    suffixTextElement: HTMLElement | null;
+    /** Sets the suffix text content */
+    setSuffixText: (text: string) => TextfieldComponent;
+    /** Removes the suffix text */
+    removeSuffixText: () => TextfieldComponent;
+    /** Manually update element positions (useful after DOM changes) */
+    updatePositions: () => TextfieldComponent;
+    /** Adds event listener */
+    on: (event: string, handler: Function) => TextfieldComponent;
+    /** Removes event listener */
+    off: (event: string, handler: Function) => TextfieldComponent;
+    /** Enables the textfield */
+    enable: () => TextfieldComponent;
+    /** Disables the textfield */
+    disable: () => TextfieldComponent;
+    /** Destroys the textfield component and cleans up resources */
+    destroy: () => void;
+}
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    config?: {
+        prefix?: string;
+        componentName?: string;
+        [key: string]: any;
+    };
+    getValue?: () => string;
+    setValue?: (value: string) => any;
+    setAttribute?: (name: string, value: string) => any;
+    getAttribute?: (name: string) => string | null;
+    removeAttribute?: (name: string) => any;
+    label?: {
+        setText: (content: string) => any;
+        getText: () => string;
+    };
+    leadingIcon?: HTMLElement | null;
+    setLeadingIcon?: (html: string) => any;
+    removeLeadingIcon?: () => any;
+    trailingIcon?: HTMLElement | null;
+    setTrailingIcon?: (html: string) => any;
+    removeTrailingIcon?: () => any;
+    supportingTextElement?: HTMLElement | null;
+    setSupportingText?: (text: string, isError?: boolean) => any;
+    removeSupportingText?: () => any;
+    prefixTextElement?: HTMLElement | null;
+    setPrefixText?: (text: string) => any;
+    removePrefixText?: () => any;
+    suffixTextElement?: HTMLElement | null;
+    setSuffixText?: (text: string) => any;
+    removeSuffixText?: () => any;
+    updateElementPositions?: () => any;
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    [key: string]: any;
+}

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

@@ -0,0 +1,24 @@
+import { TimePickerComponent, TimePickerConfig, TimeValue } from './types';
+interface ApiOptions {
+    events: {
+        on: (event: string, handler: Function) => any;
+        off: (event: string, handler: Function) => any;
+        emit: (event: string, data?: any) => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Creates the API for TimePicker component
+ *
+ * @param baseComponent - Base component with element and events
+ * @param modalElement - Modal overlay element
+ * @param dialogElement - Dialog content element
+ * @param timeValue - Current time value
+ * @param config - Component configuration
+ * @param options - API options with events and lifecycle methods
+ * @returns TimePicker component API
+ */
+export declare const createTimePickerAPI: (baseComponent: any, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions) => TimePickerComponent;
+export {};

package/dist/components/timepicker/clockdial.d.ts

@@ -0,0 +1,34 @@
+import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE } from './types';
+/**
+ * Interface for Clock Dial rendering options
+ */
+export interface ClockDialOptions {
+    type: TIME_PICKER_TYPE;
+    format: TIME_FORMAT;
+    showSeconds: boolean;
+    prefix: string;
+    activeSelector: 'hour' | 'minute' | 'second';
+}
+/**
+ * Renders a clock dial on canvas with improved visual design
+ * @param {HTMLCanvasElement} canvas - Canvas element to render on
+ * @param {TimeValue} timeValue - Current time value
+ * @param {ClockDialOptions} options - Rendering options
+ */
+export declare const renderClockDial: (canvas: HTMLCanvasElement, timeValue: TimeValue, options: ClockDialOptions) => void;
+/**
+ * Get time value from click coordinates on the canvas
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @param {number} x - Click X coordinate relative to canvas
+ * @param {number} y - Click Y coordinate relative to canvas
+ * @param {ClockDialOptions} options - Clock dial options
+ * @returns {number | null} Selected value or null if not valid
+ */
+export declare const getTimeValueFromClick: (canvas: HTMLCanvasElement, x: number, y: number, options: ClockDialOptions) => number | null;
+/**
+ * Update the clock dial when theme changes (to be called by external code)
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @param {TimeValue} timeValue - Current time value
+ * @param {ClockDialOptions} options - Rendering options
+ */
+export declare const updateClockDialTheme: (canvas: HTMLCanvasElement, timeValue: TimeValue, options: ClockDialOptions) => void;

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

@@ -0,0 +1,75 @@
+import { TimePickerConfig } from './types';
+/**
+ * Default configuration for the TimePicker component
+ */
+export declare const defaultConfig: TimePickerConfig;
+/**
+ * Creates the base configuration for TimePicker component
+ * @param {TimePickerConfig} config - User provided configuration
+ * @returns {TimePickerConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: TimePickerConfig) => TimePickerConfig;
+/**
+ * Generates element configuration for the TimePicker container
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getContainerConfig: (config: TimePickerConfig) => {
+    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;
+};
+/**
+ * Generates element configuration for the TimePicker modal
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getModalConfig: (config: TimePickerConfig) => {
+    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;
+};
+/**
+ * Generates element configuration for the TimePicker dialog
+ * @param {TimePickerConfig} config - TimePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getDialogConfig: (config: TimePickerConfig) => {
+    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 TimePicker component
+ * @param {Object} comp - Component with events and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    events: {
+        on: (event: string, handler: Function) => any;
+        off: (event: string, handler: Function) => any;
+        emit: (event: string, data?: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,266 @@
+/**
+ * Time picker display types
+ * @category Components
+ */
+export declare const TIMEPICKER_TYPES: {
+    /** Clock dial-based time picker */
+    readonly DIAL: "dial";
+    /** Text input-based time picker */
+    readonly INPUT: "input";
+};
+/**
+ * Time picker orientations
+ * @category Components
+ */
+export declare const TIMEPICKER_ORIENTATIONS: {
+    /** Vertical layout (default on mobile) */
+    readonly VERTICAL: "vertical";
+    /** Horizontal layout */
+    readonly HORIZONTAL: "horizontal";
+};
+/**
+ * Time formats
+ * @category Components
+ */
+export declare const TIMEPICKER_FORMATS: {
+    /** 12-hour format with AM/PM */
+    readonly AMPM: "12h";
+    /** 24-hour format */
+    readonly MILITARY: "24h";
+};
+/**
+ * Time periods for 12-hour format
+ * @category Components
+ */
+export declare const TIMEPICKER_PERIODS: {
+    /** Morning */
+    readonly AM: "AM";
+    /** Afternoon/Evening */
+    readonly PM: "PM";
+};
+/**
+ * Time picker event types
+ * @category Components
+ */
+export declare const TIMEPICKER_EVENTS: {
+    /** Fired when time value changes */
+    readonly CHANGE: "change";
+    /** Fired when time picker opens */
+    readonly OPEN: "open";
+    /** Fired when time picker closes */
+    readonly CLOSE: "close";
+    /** Fired when time is confirmed */
+    readonly CONFIRM: "confirm";
+    /** Fired when time picker is canceled */
+    readonly CANCEL: "cancel";
+};
+/**
+ * Visual constants for the clock dial
+ * @category Components
+ */
+export declare const TIMEPICKER_DIAL: {
+    /** Diameter of the clock dial in pixels */
+    readonly DIAMETER: 256;
+    /** Inner radius for hour numbers (for 24h format) */
+    readonly INNER_RADIUS: 65;
+    /** Outer radius for hour/minute numbers */
+    readonly OUTER_RADIUS: 110;
+    /** Size of the number elements */
+    readonly NUMBER_SIZE: 40;
+    /** Size of the center dot */
+    readonly CENTER_SIZE: 8;
+    /** Size of the clock hand */
+    readonly HAND_SIZE: 36;
+    /** Width of the track elements */
+    readonly TRACK_WIDTH: 2;
+};
+/**
+ * Time constants used for generating clock numbers and validation
+ * @category Components
+ */
+export declare const TIMEPICKER_VALUES: {
+    /** Hours for 12-hour format (1-12) */
+    readonly HOURS_12: number[];
+    /** Hours for 24-hour format (0-23) */
+    readonly HOURS_24: number[];
+    /** Minutes (0-59) */
+    readonly MINUTES: number[];
+    /** Seconds (0-59) */
+    readonly SECONDS: number[];
+};
+/**
+ * Z-index values for different parts of the time picker
+ * @category Components
+ */
+export declare const TIMEPICKER_Z_INDEX: {
+    /** Z-index for the modal backdrop */
+    readonly MODAL: 1050;
+    /** Z-index for the dialog element */
+    readonly DIALOG: 1051;
+};
+/**
+ * Element class selectors for time picker components
+ * @category Components
+ */
+export declare const TIMEPICKER_SELECTORS: {
+    /** Main container selector */
+    readonly CONTAINER: ".mtrl-time-picker";
+    /** Modal backdrop selector */
+    readonly MODAL: ".mtrl-time-picker-modal";
+    /** Dialog container selector */
+    readonly DIALOG: ".mtrl-time-picker-dialog";
+    /** Title element selector */
+    readonly TITLE: ".mtrl-time-picker-title";
+    /** Content container selector */
+    readonly CONTENT: ".mtrl-time-picker-content";
+    /** Clock dial container selector */
+    readonly DIAL: ".mtrl-time-picker-dial";
+    /** Clock dial canvas selector */
+    readonly DIAL_CANVAS: ".mtrl-time-picker-dial-canvas";
+    /** Clock dial face selector */
+    readonly DIAL_FACE: ".mtrl-time-picker-dial-face";
+    /** Clock hand selector */
+    readonly DIAL_HAND: ".mtrl-time-picker-dial-hand";
+    /** Clock center dot selector */
+    readonly DIAL_CENTER: ".mtrl-time-picker-dial-center";
+    /** Clock numbers container selector */
+    readonly DIAL_NUMBERS: ".mtrl-time-picker-dial-numbers";
+    /** Individual number element selector */
+    readonly DIAL_NUMBER: ".mtrl-time-picker-dial-number";
+    /** Input container selector */
+    readonly INPUT_CONTAINER: ".mtrl-time-picker-input-container";
+    /** Hours input selector */
+    readonly HOURS_INPUT: ".mtrl-time-picker-hours";
+    /** Minutes input selector */
+    readonly MINUTES_INPUT: ".mtrl-time-picker-minutes";
+    /** Seconds input selector */
+    readonly SECONDS_INPUT: ".mtrl-time-picker-seconds";
+    /** Time separator selector */
+    readonly SEPARATOR: ".mtrl-time-picker-separator";
+    /** AM/PM selector container */
+    readonly PERIOD_CONTAINER: ".mtrl-time-picker-period";
+    /** AM button selector */
+    readonly PERIOD_AM: ".mtrl-time-picker-period-am";
+    /** PM button selector */
+    readonly PERIOD_PM: ".mtrl-time-picker-period-pm";
+    /** Actions container selector */
+    readonly ACTIONS: ".mtrl-time-picker-actions";
+    /** Toggle type button selector */
+    readonly TOGGLE_TYPE_BUTTON: ".mtrl-time-picker-toggle-type";
+    /** Cancel button selector */
+    readonly CANCEL_BUTTON: ".mtrl-time-picker-cancel";
+    /** Confirm button selector */
+    readonly CONFIRM_BUTTON: ".mtrl-time-picker-confirm";
+};
+/**
+ * Default icons for the time picker
+ * @category Components
+ */
+export declare const TIMEPICKER_ICONS: {
+    /** Default clock icon */
+    readonly CLOCK: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n    <polyline points=\"12 6 12 12 16 14\"></polyline>\n  </svg>";
+    /** Default keyboard icon */
+    readonly KEYBOARD: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" ry=\"2\"></rect>\n    <line x1=\"6\" y1=\"8\" x2=\"6\" y2=\"8\"></line>\n    <line x1=\"10\" y1=\"8\" x2=\"10\" y2=\"8\"></line>\n    <line x1=\"14\" y1=\"8\" x2=\"14\" y2=\"8\"></line>\n    <line x1=\"18\" y1=\"8\" x2=\"18\" y2=\"8\"></line>\n    <line x1=\"6\" y1=\"12\" x2=\"6\" y2=\"12\"></line>\n    <line x1=\"10\" y1=\"12\" x2=\"10\" y2=\"12\"></line>\n    <line x1=\"14\" y1=\"12\" x2=\"14\" y2=\"12\"></line>\n    <line x1=\"18\" y1=\"12\" x2=\"18\" y2=\"12\"></line>\n    <line x1=\"6\" y1=\"16\" x2=\"18\" y2=\"16\"></line>\n  </svg>";
+};
+/**
+ * Default configuration values for the time picker
+ * @category Components
+ */
+export declare const TIMEPICKER_DEFAULTS: {
+    /** Default picker type */
+    readonly TYPE: "dial";
+    /** Default time format */
+    readonly FORMAT: "12h";
+    /** Default orientation */
+    readonly ORIENTATION: "vertical";
+    /** Whether to show seconds selector */
+    readonly SHOW_SECONDS: false;
+    /** Whether to close picker when time is selected */
+    readonly CLOSE_ON_SELECT: true;
+    /** Step interval for minute selection */
+    readonly MINUTE_STEP: 1;
+    /** Step interval for second selection */
+    readonly SECOND_STEP: 1;
+    /** Default cancel button text */
+    readonly CANCEL_TEXT: "Cancel";
+    /** Default confirm button text */
+    readonly CONFIRM_TEXT: "OK";
+    /** Whether picker is initially open */
+    readonly IS_OPEN: false;
+    /** Default clock icon */
+    readonly CLOCK_ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n    <polyline points=\"12 6 12 12 16 14\"></polyline>\n  </svg>";
+    /** Default keyboard icon */
+    readonly KEYBOARD_ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" ry=\"2\"></rect>\n    <line x1=\"6\" y1=\"8\" x2=\"6\" y2=\"8\"></line>\n    <line x1=\"10\" y1=\"8\" x2=\"10\" y2=\"8\"></line>\n    <line x1=\"14\" y1=\"8\" x2=\"14\" y2=\"8\"></line>\n    <line x1=\"18\" y1=\"8\" x2=\"18\" y2=\"8\"></line>\n    <line x1=\"6\" y1=\"12\" x2=\"6\" y2=\"12\"></line>\n    <line x1=\"10\" y1=\"12\" x2=\"10\" y2=\"12\"></line>\n    <line x1=\"14\" y1=\"12\" x2=\"14\" y2=\"12\"></line>\n    <line x1=\"18\" y1=\"12\" x2=\"18\" y2=\"12\"></line>\n    <line x1=\"6\" y1=\"16\" x2=\"18\" y2=\"16\"></line>\n  </svg>";
+};
+/**
+ * CSS class names used by the time picker component
+ * @category Components
+ */
+export declare const TIMEPICKER_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "time-picker";
+    /** Open state class */
+    readonly OPEN: "time-picker--open";
+    /** Modal backdrop class */
+    readonly MODAL: "time-picker-modal";
+    /** Dialog container class */
+    readonly DIALOG: "time-picker-dialog";
+    /** Dialog with dial type class */
+    readonly DIALOG_DIAL: "time-picker-dialog--dial";
+    /** Dialog with input type class */
+    readonly DIALOG_INPUT: "time-picker-dialog--input";
+    /** Dialog with vertical orientation class */
+    readonly DIALOG_VERTICAL: "time-picker-dialog--vertical";
+    /** Dialog with horizontal orientation class */
+    readonly DIALOG_HORIZONTAL: "time-picker-dialog--horizontal";
+    /** Dialog with 12-hour format class */
+    readonly DIALOG_12H: "time-picker-dialog--12h";
+    /** Dialog with 24-hour format class */
+    readonly DIALOG_24H: "time-picker-dialog--24h";
+    /** Title element class */
+    readonly TITLE: "time-picker-title";
+    /** Content container class */
+    readonly CONTENT: "time-picker-content";
+    /** Dial container class */
+    readonly DIAL: "time-picker-dial";
+    /** Dial canvas class */
+    readonly DIAL_CANVAS: "time-picker-dial-canvas";
+    /** Dial face class */
+    readonly DIAL_FACE: "time-picker-dial-face";
+    /** Dial hand class */
+    readonly DIAL_HAND: "time-picker-dial-hand";
+    /** Dial center dot class */
+    readonly DIAL_CENTER: "time-picker-dial-center";
+    /** Dial numbers container class */
+    readonly DIAL_NUMBERS: "time-picker-dial-numbers";
+    /** Individual dial number class */
+    readonly DIAL_NUMBER: "time-picker-dial-number";
+    /** Active dial number class */
+    readonly DIAL_NUMBER_ACTIVE: "time-picker-dial-number--active";
+    /** Input container class */
+    readonly INPUT_CONTAINER: "time-picker-input-container";
+    /** Hours input class */
+    readonly HOURS_INPUT: "time-picker-hours";
+    /** Minutes input class */
+    readonly MINUTES_INPUT: "time-picker-minutes";
+    /** Seconds input class */
+    readonly SECONDS_INPUT: "time-picker-seconds";
+    /** Time separator class */
+    readonly SEPARATOR: "time-picker-separator";
+    /** Period container class */
+    readonly PERIOD_CONTAINER: "time-picker-period";
+    /** AM button class */
+    readonly PERIOD_AM: "time-picker-period-am";
+    /** PM button class */
+    readonly PERIOD_PM: "time-picker-period-pm";
+    /** Active period button class */
+    readonly PERIOD_ACTIVE: "time-picker-period--active";
+    /** Actions container class */
+    readonly ACTIONS: "time-picker-actions";
+    /** Toggle type button class */
+    readonly TOGGLE_TYPE: "time-picker-toggle-type";
+    /** Cancel button class */
+    readonly CANCEL: "time-picker-cancel";
+    /** Confirm button class */
+    readonly CONFIRM: "time-picker-confirm";
+};

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

@@ -0,0 +1,4 @@
+export { default } from './timepicker';
+export { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_DIAL, TIMEPICKER_VALUES, TIMEPICKER_Z_INDEX, TIMEPICKER_SELECTORS, TIMEPICKER_ICONS, TIMEPICKER_DEFAULTS, TIMEPICKER_CLASSES } from './constants';
+export type { TimePickerConfig, TimePickerComponent, TimeValue } from './types';
+export { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from './types';

package/dist/components/timepicker/render.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerConfig, TimeValue } from './types';
+/**
+ * Renders the time picker dialog
+ * @param {HTMLElement} container - Dialog container element
+ * @param {TimeValue} timeValue - Current time value
+ * @param {TimePickerConfig} config - Time picker configuration
+ * @param {Function} onTimeChange - Optional callback when time changes
+ */
+export declare const renderTimePicker: (container: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, onTimeChange?: (key: "hours" | "minutes" | "seconds", value: number) => void) => void;

package/dist/components/timepicker/timepicker.d.ts

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