material 1.0.4 → 3.0.0-next.1

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

@@ -0,0 +1,158 @@
+/**
+ * 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 the committed time changes: on OK, or setValue */
+    readonly CHANGE: "change";
+    /** Fired as the dial, fields or AM/PM change the draft, while open */
+    readonly INPUT: "input";
+    /** 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";
+};
+/**
+ * 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[];
+};
+/**
+ * Element class selectors for time picker components
+ * @category Components
+ */
+export declare const TIMEPICKER_SELECTORS: {
+    /** Main container selector */
+    readonly CONTAINER: ".mtrl-time-picker";
+    /** 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 face selector */
+    readonly DIAL_FACE: ".mtrl-time-picker__dial-face";
+    /** Clock centre dot selector */
+    readonly DIAL_CENTER: ".mtrl-time-picker__dial-centre";
+    /** 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;
+    /** 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: the default of the `open` option */
+    readonly 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>";
+};

package/dist/components/timepicker/constants.js

@@ -0,0 +1,84 @@
+export const TIMEPICKER_TYPES = {
+    DIAL: 'dial',
+    INPUT: 'input'
+};
+export const TIMEPICKER_ORIENTATIONS = {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal'
+};
+export const TIMEPICKER_FORMATS = {
+    AMPM: '12h',
+    MILITARY: '24h'
+};
+export const TIMEPICKER_PERIODS = {
+    AM: 'AM',
+    PM: 'PM'
+};
+export const TIMEPICKER_EVENTS = {
+    CHANGE: 'change',
+    INPUT: 'input',
+    OPEN: 'open',
+    CLOSE: 'close',
+    CONFIRM: 'confirm',
+    CANCEL: 'cancel'
+};
+export const TIMEPICKER_VALUES = {
+    HOURS_12: Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)),
+    HOURS_24: Array.from({ length: 24 }, (_, i) => i),
+    MINUTES: Array.from({ length: 60 }, (_, i) => i),
+    SECONDS: Array.from({ length: 60 }, (_, i) => i)
+};
+export const TIMEPICKER_SELECTORS = {
+    CONTAINER: '.mtrl-time-picker',
+    DIALOG: '.mtrl-time-picker__dialog',
+    TITLE: '.mtrl-time-picker__title',
+    CONTENT: '.mtrl-time-picker__content',
+    DIAL: '.mtrl-time-picker__dial',
+    DIAL_FACE: '.mtrl-time-picker__dial-face',
+    DIAL_CENTER: '.mtrl-time-picker__dial-centre',
+    DIAL_NUMBERS: '.mtrl-time-picker__dial-numbers',
+    DIAL_NUMBER: '.mtrl-time-picker__dial-number',
+    INPUT_CONTAINER: '.mtrl-time-picker__input-container',
+    HOURS_INPUT: '.mtrl-time-picker__hours',
+    MINUTES_INPUT: '.mtrl-time-picker__minutes',
+    SECONDS_INPUT: '.mtrl-time-picker__seconds',
+    SEPARATOR: '.mtrl-time-picker__separator',
+    PERIOD_CONTAINER: '.mtrl-time-picker__period',
+    PERIOD_AM: '.mtrl-time-picker__period-am',
+    PERIOD_PM: '.mtrl-time-picker__period-pm',
+    ACTIONS: '.mtrl-time-picker__actions',
+    TOGGLE_TYPE_BUTTON: '.mtrl-time-picker__toggle-type',
+    CANCEL_BUTTON: '.mtrl-time-picker__cancel',
+    CONFIRM_BUTTON: '.mtrl-time-picker__confirm'
+};
+export const TIMEPICKER_ICONS = {
+    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">
+    <circle cx="12" cy="12" r="10"></circle>
+    <polyline points="12 6 12 12 16 14"></polyline>
+  </svg>`,
+    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">
+    <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+    <line x1="6" y1="8" x2="6" y2="8"></line>
+    <line x1="10" y1="8" x2="10" y2="8"></line>
+    <line x1="14" y1="8" x2="14" y2="8"></line>
+    <line x1="18" y1="8" x2="18" y2="8"></line>
+    <line x1="6" y1="12" x2="6" y2="12"></line>
+    <line x1="10" y1="12" x2="10" y2="12"></line>
+    <line x1="14" y1="12" x2="14" y2="12"></line>
+    <line x1="18" y1="12" x2="18" y2="12"></line>
+    <line x1="6" y1="16" x2="18" y2="16"></line>
+  </svg>`
+};
+export const TIMEPICKER_DEFAULTS = {
+    TYPE: TIMEPICKER_TYPES.DIAL,
+    FORMAT: TIMEPICKER_FORMATS.AMPM,
+    ORIENTATION: TIMEPICKER_ORIENTATIONS.VERTICAL,
+    SHOW_SECONDS: false,
+    MINUTE_STEP: 1,
+    SECOND_STEP: 1,
+    CANCEL_TEXT: 'Cancel',
+    CONFIRM_TEXT: 'OK',
+    OPEN: false,
+    CLOCK_ICON: TIMEPICKER_ICONS.CLOCK,
+    KEYBOARD_ICON: TIMEPICKER_ICONS.KEYBOARD
+};

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

@@ -0,0 +1,35 @@
+import { TimeValue, type TimeFormat } from "./types.js";
+/** Which part of the time the dial is setting. */
+export type DialSelector = "hour" | "minute" | "second";
+export interface DialOptions {
+    prefix: string;
+    format: TimeFormat;
+    /**
+     * A value picked on the dial. `final` is false while a pointer drags and true
+     * when it is released or a key selects; `pointer` says which it was.
+     */
+    onSelect: (value: number, final: boolean, pointer: boolean) => void;
+    /**
+     * Whether a value can be picked (minTime, maxTime and the steps, FLO-281).
+     * Numbers it rejects are disabled; all can be picked without it.
+     */
+    allowed?: (selector: DialSelector, value: number) => boolean;
+}
+export interface Dial {
+    element: HTMLElement;
+    /** Shows a time on the dial for the part being set. */
+    update: (time: TimeValue, selector: DialSelector) => void;
+}
+/** How a value on the dial is named: "9 o'clock", "20 hours", "15 minutes". */
+export declare const nameFor: (selector: DialSelector, format: TimeFormat, value: number) => string;
+/**
+ * The clock dial, in the DOM (FLO-279). It was a canvas: hidden from assistive
+ * tech, unreachable by keyboard, click-only, and coloured from the document root.
+ *
+ * The face is a listbox of its labelled numbers. The arrows move between them and
+ * wrap (crossing the 24-hour rings in order), and Enter or Space selects, as in
+ * Compose. A pointer can click or drag. One animated angle and radius place the
+ * track, the handle and an on-primary copy of the labels clipped to the handle,
+ * so they move together on the default spatial spring, the short way round.
+ */
+export declare const createDial: (options: DialOptions) => Dial;

package/dist/components/timepicker/dial.js

@@ -0,0 +1,175 @@
+import { TIME_FORMAT } from "./types.js";
+import { activeElementOf } from "../../core/dom/focus.js";
+const OUTER = 101;
+const INNER = 69;
+const itemsFor = (selector, format) => {
+    if (selector !== "hour") {
+        return Array.from({ length: 12 }, (_, i) => ({ value: i * 5, text: String(i * 5).padStart(2, "0"), angle: i * 30, radius: OUTER }));
+    }
+    if (format === TIME_FORMAT.MILITARY) {
+        return Array.from({ length: 24 }, (_, h) => ({ value: h, text: h === 0 ? "00" : String(h), angle: (h % 12) * 30, radius: h < 12 ? OUTER : INNER }));
+    }
+    return Array.from({ length: 12 }, (_, i) => ({ value: i || 12, text: String(i || 12), angle: i * 30, radius: OUTER }));
+};
+const dialValue = (time, selector, format) => selector === "minute" ? time.minutes
+    : selector === "second" ? time.seconds ?? 0
+        : format === TIME_FORMAT.MILITARY ? time.hours : time.hours % 12 || 12;
+export const nameFor = (selector, format, value) => selector === "minute" ? `${value} minutes`
+    : selector === "second" ? `${value} seconds`
+        : format === TIME_FORMAT.MILITARY ? `${value} hours` : `${value} o'clock`;
+let dials = 0;
+export const createDial = (options) => {
+    const { prefix, format } = options;
+    const cls = (name) => `${prefix}-time-picker__${name}`;
+    const id = `${prefix}-time-picker-dial-${++dials}`;
+    const element = document.createElement("div");
+    element.className = cls("dial-face");
+    element.setAttribute("role", "listbox");
+    const numbers = document.createElement("div");
+    numbers.className = cls("dial-numbers");
+    const track = document.createElement("div");
+    track.className = cls("dial-track");
+    const centre = document.createElement("div");
+    centre.className = cls("dial-centre");
+    const handle = document.createElement("div");
+    handle.className = cls("dial-handle");
+    const selected = document.createElement("div");
+    selected.className = `${cls("dial-numbers")} ${cls("dial-numbers--selected")}`;
+    for (const part of [track, centre, handle, selected])
+        part.setAttribute("aria-hidden", "true");
+    element.append(numbers, track, centre, handle, selected);
+    let selector = null;
+    let items = [];
+    let angle = 0;
+    let current = 0;
+    const place = (el, item) => {
+        const radians = (item.angle * Math.PI) / 180;
+        el.style.setProperty(`--${prefix}-time-picker-x`, `${Math.round(Math.sin(radians) * item.radius * 100) / 100}px`);
+        el.style.setProperty(`--${prefix}-time-picker-y`, `${Math.round(-Math.cos(radians) * item.radius * 100) / 100}px`);
+    };
+    const build = (next) => {
+        selector = next;
+        items = itemsFor(next, format);
+        element.setAttribute("aria-label", next === "hour" ? "Hour" : next === "minute" ? "Minute" : "Second");
+        numbers.replaceChildren(...items.map((item, index) => {
+            const option = document.createElement("span");
+            option.className = cls("dial-number");
+            if (item.radius === INNER)
+                option.classList.add(cls("dial-number--inner"));
+            option.id = `${id}-${index}`;
+            option.setAttribute("role", "option");
+            option.setAttribute("aria-label", nameFor(next, format, item.value));
+            option.dataset.value = String(item.value);
+            option.textContent = item.text;
+            place(option, item);
+            return option;
+        }));
+        selected.replaceChildren(...items.map(item => {
+            const copy = document.createElement("span");
+            copy.className = cls("dial-number");
+            if (item.radius === INNER)
+                copy.classList.add(cls("dial-number--inner"));
+            copy.textContent = item.text;
+            place(copy, item);
+            return copy;
+        }));
+        element.classList.remove(cls("dial-face--swap"));
+        void element.offsetWidth;
+        element.classList.add(cls("dial-face--swap"));
+    };
+    const nearest = (value) => {
+        const exact = items.findIndex(item => item.value === value);
+        if (exact >= 0)
+            return exact;
+        return Math.round(value / 5) % items.length;
+    };
+    const update = (time, next) => {
+        const focused = activeElementOf(element);
+        const refocus = next !== selector && numbers.contains(focused);
+        if (next !== selector)
+            build(next);
+        current = dialValue(time, next, format);
+        const index = items.findIndex(item => item.value === current);
+        const target = next === "hour" ? items[nearest(current)] : { angle: current * 6, radius: OUTER };
+        const delta = ((target.angle - (angle % 360)) % 360 + 540) % 360 - 180;
+        angle += delta;
+        element.style.setProperty(`--${prefix}-time-picker-angle`, `${angle}deg`);
+        element.style.setProperty(`--${prefix}-time-picker-radius`, `${target.radius}px`);
+        handle.classList.toggle(cls("dial-handle--between"), index < 0);
+        const stop = nearest(current);
+        numbers.querySelectorAll("[role=option]").forEach((option, i) => {
+            option.setAttribute("aria-selected", String(i === index));
+            if (options.allowed?.(next, items[i].value) === false)
+                option.setAttribute("aria-disabled", "true");
+            else
+                option.removeAttribute("aria-disabled");
+            if (option !== focused)
+                option.tabIndex = i === stop ? 0 : -1;
+        });
+        if (refocus)
+            numbers.querySelector('[tabindex="0"]')?.focus({ preventScroll: true });
+    };
+    const valueAt = (event) => {
+        const box = element.getBoundingClientRect();
+        const dx = event.clientX - (box.left + box.width / 2);
+        const dy = event.clientY - (box.top + box.height / 2);
+        const degrees = ((Math.atan2(dx, -dy) * 180) / Math.PI + 360) % 360;
+        if (selector !== "hour")
+            return Math.round(degrees / 6) % 60;
+        const step = Math.round(degrees / 30) % 12;
+        if (format === TIME_FORMAT.MILITARY)
+            return Math.hypot(dx, dy) < (OUTER + INNER) / 2 ? step + 12 : step;
+        return step || 12;
+    };
+    let dragging = false;
+    element.addEventListener("pointerdown", event => {
+        if (event.button !== 0)
+            return;
+        dragging = true;
+        element.setPointerCapture?.(event.pointerId);
+        element.classList.add(cls("dial-face--dragging"));
+        options.onSelect(valueAt(event), false, true);
+    });
+    element.addEventListener("pointermove", event => {
+        if (dragging)
+            options.onSelect(valueAt(event), false, true);
+    });
+    const release = (event) => {
+        if (!dragging)
+            return;
+        dragging = false;
+        element.classList.remove(cls("dial-face--dragging"));
+        options.onSelect(valueAt(event), true, true);
+    };
+    element.addEventListener("pointerup", release);
+    element.addEventListener("pointercancel", () => {
+        dragging = false;
+        element.classList.remove(cls("dial-face--dragging"));
+    });
+    element.addEventListener("keydown", event => {
+        const options_ = Array.from(numbers.querySelectorAll("[role=option]"));
+        const index = options_.indexOf(event.target);
+        if (index < 0)
+            return;
+        let next = index;
+        if (event.key === "ArrowRight" || event.key === "ArrowDown")
+            next = (index + 1) % options_.length;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
+            next = (index - 1 + options_.length) % options_.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = options_.length - 1;
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            options.onSelect(items[index].value, true, false);
+            return;
+        }
+        else
+            return;
+        event.preventDefault();
+        options_.forEach((option, i) => { option.tabIndex = i === next ? 0 : -1; });
+        options_[next].focus();
+    });
+    return { element, update };
+};

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

@@ -0,0 +1,5 @@
+export { default, default as createTimePicker } from "./timepicker.js";
+export { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_VALUES, TIMEPICKER_SELECTORS, TIMEPICKER_ICONS, TIMEPICKER_DEFAULTS } from "./constants.js";
+export type { TimePickerConfig, TimePickerComponent, TimeValue, TimePickerEvents, TimePickerValueEvent, TimePickerInputEvent, TimePickerTapPayload, TimePickerSwipePayload } from "./types.js";
+export { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from "./types.js";
+export type { TimeFormat, TimePickerType, TimePickerOrientation } from "./types.js";

package/dist/components/timepicker/index.js

@@ -0,0 +1,3 @@
+export { default, default as createTimePicker } from "./timepicker.js";
+export { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_VALUES, TIMEPICKER_SELECTORS, TIMEPICKER_ICONS, TIMEPICKER_DEFAULTS } from "./constants.js";
+export { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from "./types.js";

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

@@ -0,0 +1,9 @@
+import { ResolvedTimePickerConfig, TimeValue } from "./types.js";
+/**
+ * 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: ResolvedTimePickerConfig, onTimeChange?: (key: "hours" | "minutes" | "seconds", value: number) => void) => void;