mtrl 0.3.8 → 0.4.0

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;

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

@@ -0,0 +1,284 @@
+/**
+ * Time picker display type
+ * @enum {string}
+ */
+export declare enum TIME_PICKER_TYPE {
+    /** Clock dial-based time picker */
+    DIAL = "dial",
+    /** Text input-based time picker */
+    INPUT = "input"
+}
+/**
+ * Time picker orientation
+ * @enum {string}
+ */
+export declare enum TIME_PICKER_ORIENTATION {
+    /** Vertical layout (default on mobile) */
+    VERTICAL = "vertical",
+    /** Horizontal layout */
+    HORIZONTAL = "horizontal"
+}
+/**
+ * Time format (12-hour or 24-hour)
+ * @enum {string}
+ */
+export declare enum TIME_FORMAT {
+    /** 12-hour format with AM/PM */
+    AMPM = "12h",
+    /** 24-hour format */
+    MILITARY = "24h"
+}
+/**
+ * Period of day for 12-hour format
+ * @enum {string}
+ */
+export declare enum TIME_PERIOD {
+    /** Morning */
+    AM = "AM",
+    /** Afternoon/Evening */
+    PM = "PM"
+}
+/**
+ * Configuration interface for the TimePicker component
+ * @category Components
+ */
+export interface TimePickerConfig {
+    /**
+     * Initial time value in 24-hour format (HH:MM)
+     * @example '14:30'
+     */
+    value?: string;
+    /**
+     * Type of time picker to display
+     * @default TIME_PICKER_TYPE.DIAL
+     */
+    type?: TIME_PICKER_TYPE;
+    /**
+     * Time format to use (12h or 24h)
+     * @default TIME_FORMAT.AMPM
+     */
+    format?: TIME_FORMAT;
+    /**
+     * Layout orientation for the time picker
+     * @default TIME_PICKER_ORIENTATION.VERTICAL
+     */
+    orientation?: TIME_PICKER_ORIENTATION;
+    /**
+     * Title text for the time picker
+     * @example 'Select departure time'
+     */
+    title?: string;
+    /**
+     * Whether to show seconds selector
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * Additional CSS classes to add to the time picker
+     * @example 'custom-picker dark-theme'
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Whether to close the picker when time is selected
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Minimum selectable time in 24-hour format (HH:MM)
+     * @example '09:00'
+     */
+    minTime?: string;
+    /**
+     * Maximum selectable time in 24-hour format (HH:MM)
+     * @example '18:00'
+     */
+    maxTime?: string;
+    /**
+     * Step interval for minute selection in minutes
+     * @default 1
+     */
+    minuteStep?: number;
+    /**
+     * Step interval for second selection in seconds
+     * @default 1
+     */
+    secondStep?: number;
+    /**
+     * Custom text for cancel button
+     * @default 'Cancel'
+     */
+    cancelText?: string;
+    /**
+     * Custom text for confirm button
+     * @default 'OK'
+     */
+    confirmText?: string;
+    /**
+     * Whether the time picker is initially visible (for inline mode)
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * CSS selector or HTMLElement to append the time picker to
+     * @default document.body
+     */
+    container?: string | HTMLElement;
+    /**
+     * Custom icon for the clock button
+     */
+    clockIcon?: string;
+    /**
+     * Custom icon for the keyboard button
+     */
+    keyboardIcon?: string;
+    /**
+     * Callback when time is changed
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Callback when time picker is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when time picker is closed
+     */
+    onClose?: () => void;
+    /**
+     * Callback when time is confirmed
+     */
+    onConfirm?: (time: string) => void;
+    /**
+     * Callback when time picker is canceled
+     */
+    onCancel?: () => void;
+}
+/**
+ * Time value object
+ * @category Components
+ */
+export interface TimeValue {
+    /** Hours (0-23) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Seconds (0-59), optional */
+    seconds?: number;
+    /** AM/PM for 12-hour format */
+    period?: TIME_PERIOD;
+}
+/**
+ * TimePicker component interface
+ * @category Components
+ */
+export interface TimePickerComponent {
+    /** The time picker's container DOM element */
+    element: HTMLElement;
+    /** Modal container element */
+    modalElement: HTMLElement;
+    /** Dialog container element */
+    dialogElement: HTMLElement;
+    /** Whether the time picker is currently open */
+    isOpen: boolean;
+    /**
+     * Opens the time picker
+     * @returns The time picker component for chaining
+     */
+    open: () => TimePickerComponent;
+    /**
+     * Closes the time picker
+     * @returns The time picker component for chaining
+     */
+    close: () => TimePickerComponent;
+    /**
+     * Toggles the time picker open/closed state
+     * @returns The time picker component for chaining
+     */
+    toggle: () => TimePickerComponent;
+    /**
+     * Gets the current time value
+     * @returns Current time string in 24-hour format (HH:MM or HH:MM:SS)
+     */
+    getValue: () => string;
+    /**
+     * Gets the current time as a TimeValue object
+     * @returns Current time object with hours, minutes, seconds, and period
+     */
+    getTimeObject: () => TimeValue;
+    /**
+     * Sets the time value
+     * @param time - Time string in 24-hour format (HH:MM or HH:MM:SS)
+     * @returns The time picker component for chaining
+     */
+    setValue: (time: string) => TimePickerComponent;
+    /**
+     * Sets the time picker type (dial or input)
+     * @param type - Time picker type
+     * @returns The time picker component for chaining
+     */
+    setType: (type: TIME_PICKER_TYPE) => TimePickerComponent;
+    /**
+     * Gets the current time picker type
+     * @returns Current time picker type
+     */
+    getType: () => TIME_PICKER_TYPE;
+    /**
+     * Sets the time format (12h or 24h)
+     * @param format - Time format
+     * @returns The time picker component for chaining
+     */
+    setFormat: (format: TIME_FORMAT) => TimePickerComponent;
+    /**
+     * Gets the current time format
+     * @returns Current time format
+     */
+    getFormat: () => TIME_FORMAT;
+    /**
+     * Sets the time picker orientation
+     * @param orientation - Time picker orientation
+     * @returns The time picker component for chaining
+     */
+    setOrientation: (orientation: TIME_PICKER_ORIENTATION) => TimePickerComponent;
+    /**
+     * Gets the current time picker orientation
+     * @returns Current time picker orientation
+     */
+    getOrientation: () => TIME_PICKER_ORIENTATION;
+    /**
+     * Sets the time picker title
+     * @param title - Title text
+     * @returns The time picker component for chaining
+     */
+    setTitle: (title: string) => TimePickerComponent;
+    /**
+     * Gets the current time picker title
+     * @returns Current title text
+     */
+    getTitle: () => string;
+    /**
+     * Destroys the time picker component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the time picker
+     * @param event - Event name ('change', 'open', 'close', etc.)
+     * @param handler - Event handler function
+     * @returns The time picker component for chaining
+     */
+    on: (event: string, handler: Function) => TimePickerComponent;
+    /**
+     * Removes an event listener from the time picker
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The time picker component for chaining
+     */
+    off: (event: string, handler: Function) => TimePickerComponent;
+}

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

@@ -0,0 +1,74 @@
+import { TimeValue, TIME_PERIOD, TIME_FORMAT } from './types';
+/**
+ * Pads a number with leading zeros to ensure two-digit format
+ * @param {number} num - Number to pad
+ * @returns {string} Padded number string
+ */
+export declare const padZero: (num: number) => string;
+/**
+ * Converts a time string to a TimeValue object
+ * @param {string} timeString - Time string in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {TIME_FORMAT} format - Time format (12h or 24h)
+ * @returns {TimeValue} Parsed time value
+ */
+export declare const parseTime: (timeString: string, format: TIME_FORMAT) => TimeValue;
+/**
+ * Formats a TimeValue object as a time string
+ * @param {TimeValue} timeValue - Time value to format
+ * @param {boolean} use24HourFormat - Whether to use 24-hour format
+ * @returns {string} Formatted time string
+ */
+export declare const formatTime: (timeValue: TimeValue, use24HourFormat: boolean) => string;
+/**
+ * Converts 12-hour format to 24-hour format
+ * @param {number} hours - Hours in 12-hour format (1-12)
+ * @param {TIME_PERIOD} period - Period (AM or PM)
+ * @returns {number} Hours in 24-hour format (0-23)
+ */
+export declare const convertTo24Hour: (hours: number, period: TIME_PERIOD) => number;
+/**
+ * Converts 24-hour format to 12-hour format
+ * @param {number} hours24 - Hours in 24-hour format (0-23)
+ * @returns {object} Object with hours in 12-hour format and period
+ */
+export declare const convertTo12Hour: (hours24: number) => {
+    hours: number;
+    period: TIME_PERIOD;
+};
+/**
+ * Calculates angle for clock dial based on time value
+ * @param {number} value - Time value (hour 0-23 or minute/second 0-59)
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @returns {number} Angle in degrees
+ */
+export declare const getAngle: (value: number, max: number) => number;
+/**
+ * Calculates coordinates for a point on a circle
+ * @param {number} radius - Circle radius
+ * @param {number} angle - Angle in degrees
+ * @returns {object} Coordinates { x, y }
+ */
+export declare const getCoordinates: (radius: number, angle: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Calculates time value from click position on dial
+ * @param {number} centerX - X coordinate of the dial center
+ * @param {number} centerY - Y coordinate of the dial center
+ * @param {number} clickX - X coordinate of the click position
+ * @param {number} clickY - Y coordinate of the click position
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @param {number} innerRadius - Inner radius for 24-hour clock inner ring
+ * @param {number} outerRadius - Outer radius for dial
+ * @returns {number} Calculated time value
+ */
+export declare const getTimeFromPosition: (centerX: number, centerY: number, clickX: number, clickY: number, max: number, innerRadius?: number, outerRadius?: number) => number;
+/**
+ * Checks if a time is within min/max constraints
+ * @param {TimeValue} time - Time value to check
+ * @param {string} minTime - Minimum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {string} maxTime - Maximum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @returns {boolean} Whether the time is within constraints
+ */
+export declare const isTimeWithinConstraints: (time: TimeValue, minTime?: string, maxTime?: string) => boolean;

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

@@ -0,0 +1,18 @@
+import { TooltipComponent } from './types';
+interface ApiOptions {
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithElements {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+}
+/**
+ * Enhances a tooltip component with API methods
+ * @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 Tooltip component
+ */
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithElements) => TooltipComponent;
+export default withAPI;