@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/TimeField/composables/useTimeField.js

@@ -0,0 +1,147 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
+import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
+import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
+import { cn as f, isFieldOverlayDialog as p, resolveFieldOverlay as m, resolveFieldShowFooter as h, splitComponentProps as g } from "@bridge-ui/core";
+import { get as _, isNil as v, omit as y } from "es-toolkit/compat";
+import { colorProps as b } from "@bridge-ui/core/Tokens/Listbox";
+//#region src/Components/TimeField/composables/useTimeField.ts
+var x = [
+	"ampm",
+	"classes",
+	"maxTime",
+	"minTime",
+	"overlay",
+	"interval",
+	"timeZone",
+	"clearable",
+	"showFooter",
+	"customProps",
+	"showSeconds",
+	"defaultValue",
+	"disableTimes"
+];
+function S(e, t, n, r, i) {
+	return v(e) ? "" : t.formatTime(e, n, {
+		ampm: r,
+		showSeconds: i
+	});
+}
+function C(C, w, T) {
+	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => g({
+		props: {
+			...E,
+			...C
+		},
+		bridgeKeys: x
+	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !v(I.value)), z = c(() => m(P.value.overlay, k.mobile)), B = c(() => p(z.value) ? "w-full shadow-none" : void 0), ee = (e) => {
+		M.value = e instanceof HTMLElement ? e : null;
+	};
+	function V(e) {
+		j.value = e, T(e ? "open" : "close");
+	}
+	let H = c(() => y(N.value.inheritedAttrs, ["class"])), U = c(() => {
+		let e = g({
+			bridgeKeys: o,
+			props: H.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: s, ...c } = P.value.customProps ?? {};
+		return {
+			...e,
+			endIcon: t,
+			classes: P.value.classes,
+			customProps: {
+				...c,
+				container: i(c.container, {}, {
+					ref: ee,
+					class: f({ "cursor-pointer": !C.disabled && !C.readonly }),
+					onClick: (e) => {
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || V(!0);
+					}
+				})
+			}
+		};
+	}), W = s(() => U.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		showErrorIcon: !0
+	}, { componentName: "TimeField" }), G = c(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = c(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function q(e) {
+		w.value = e, T("change", e);
+	}
+	let J = c(() => h(P.value.showFooter, k.mobile));
+	function Y(e) {
+		q(e), V(!1);
+	}
+	function X() {
+		V(!1);
+	}
+	function Z(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), V(!1));
+	}
+	function Q(e) {
+		e.preventDefault();
+	}
+	let $ = c(() => i({
+		readonly: !0,
+		value: K.value,
+		onFocus: (e) => {
+			W.inputBind.value.onFocus?.(e), V(!0);
+		},
+		onKeydown: (e) => {
+			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
+		}
+	}, void 0, W.inputBind.value)), te = c(() => P.value.overlay), ne = c(() => {
+		let e = P.value.customProps?.menu;
+		return {
+			modal: P.value.customProps?.modal,
+			drawer: P.value.customProps?.drawer,
+			menu: {
+				anchorEl: M.value,
+				placement: "bottom-start",
+				...e,
+				classes: {
+					...e?.classes,
+					content: f("min-w-0", e?.classes?.content)
+				}
+			}
+		};
+	}), re = c(() => P.value.customProps?.timePicker), ie = c(() => a(W.merged.value.size)), ae = c(() => _(b, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	return {
+		open: j,
+		overlay: te,
+		hasValue: R,
+		timeOnly: P,
+		formField: W,
+		inputBind: $,
+		clearable: L,
+		clearBind: c(() => i({}, {}, {
+			tabindex: 0,
+			role: "button",
+			"data-field-clear": !0,
+			onMousedown: Q,
+			class: f({
+				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+				[ae.value]: !0,
+				[P.value.classes?.clear ?? ""]: !0
+			})
+		})),
+		clearValue: Z,
+		modelValue: I,
+		showFooter: J,
+		pickerClass: B,
+		containerRef: M,
+		clearIconSize: ie,
+		showClearIcon: G,
+		handleOpenChange: V,
+		handlePickerChange: Y,
+		handlePickerCancel: X,
+		overlayCustomProps: ne,
+		timePickerCustomProps: re
+	};
+}
+//#endregion
+export { C as useTimeField };

package/dist/Components/TimeField/index.d.ts

@@ -0,0 +1,3 @@
+export { useTimeField } from './composables/useTimeField';
+export type { TimeFieldClasses, TimeFieldCustomProps, TimeFieldEmits, TimeFieldOwnProps, TimeFieldProps, TimeFieldSlots, } from './timeField.types';
+export { default as TimeField } from './TimeField.vue';

package/dist/Components/TimeField/index.js

@@ -0,0 +1,3 @@
+import { useTimeField as e } from "./composables/useTimeField.js";
+import t from "./TimeField.js";
+export { t as TimeField, e as useTimeField };

package/dist/Components/TimeField/timeField.types.d.ts

@@ -0,0 +1,155 @@
+import { InputHTMLAttributes } from 'vue';
+import { DisableTimesInput, FieldOverlayMode, MergeHtmlProps, TimeValue } from '@bridge-ui/core';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
+import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
+import { TimePickerCustomProps } from '../TimePicker/timePicker.types';
+export interface TimeFieldClasses extends FormFieldClasses {
+    /**
+     * Classes merged onto the clear control.
+     */
+    clear?: string;
+}
+export interface TimeFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `TimeField`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nested `Drawer` when overlay resolves to drawer.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<Pick<DrawerOwnProps, "blur" | "size" | "classes" | "placement" | "transition" | "customProps">>;
+    /**
+     * Props forwarded to the floating `Menu` when overlay resolves to menu.
+     *
+     * @default undefined
+     */
+    menu?: Partial<Pick<MenuOwnProps, "shadow" | "classes" | "rounded" | "placement" | "customProps">>;
+    /**
+     * Props forwarded to the nested `Modal` when overlay resolves to modal.
+     *
+     * @default undefined
+     */
+    modal?: Partial<Pick<ModalOwnProps, "blur" | "size" | "align" | "classes" | "transition" | "customProps">>;
+    /**
+     * Props forwarded to the nested `TimePicker`.
+     *
+     * @default undefined
+     */
+    timePicker?: TimePickerCustomProps;
+}
+export interface TimeFieldEmits {
+    /**
+     * Emitted when the selected time changes.
+     */
+    change: [value: null | TimeValue];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+}
+export interface TimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "classes" | "customProps"> {
+    /**
+     * Uses a 12-hour clock with an AM/PM column.
+     *
+     * @default false
+     */
+    ampm?: boolean;
+    /**
+     * Classes for field / input regions.
+     *
+     * @default undefined
+     */
+    classes?: TimeFieldClasses;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: TimeFieldCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | TimeValue;
+    /**
+     * Times that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableTimes?: DisableTimesInput;
+    /**
+     * Minute step between options.
+     *
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * Latest selectable time.
+     *
+     * @default undefined
+     */
+    maxTime?: Date;
+    /**
+     * Earliest selectable time.
+     *
+     * @default undefined
+     */
+    minTime?: Date;
+    /**
+     * Which overlay shell opens the picker. `auto` uses `menu` on desktop and
+     * `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
+    /**
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
+     * on mobile.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * Shows seconds in the panel and formatted value.
+     *
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+}
+export interface TimeFieldSlots extends FormFieldSlots {}
+export type TimeFieldProps = MergeHtmlProps<TimeFieldOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     *
+     * @default undefined
+     */
+    modelValue?: null | TimeValue;
+};

package/dist/Components/TimePanel/TimePanel.js

@@ -0,0 +1,5 @@
+import e from "./TimePanel.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/TimePanel/TimePanel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/TimePanel/TimePanel.vue.d.ts

@@ -0,0 +1,8 @@
+import { TimePanelOwnProps } from './timePanel.types';
+declare const __VLS_export: import('vue').DefineComponent<TimePanelOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<TimePanelOwnProps> & Readonly<{
+    onChange?: ((value: Date | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { useTimePanel as e } from "./composables/useTimePanel.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, nextTick as c, normalizeProps as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, watch as _ } from "vue";
+import { observeTimePanelSelectedScroll as v } from "@bridge-ui/core";
+//#region src/Components/TimePanel/TimePanel.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "TimePanel",
+	props: {
+		ampm: { type: Boolean },
+		classes: {},
+		color: {},
+		customProps: {},
+		disabled: { type: Boolean },
+		disableTimes: {},
+		interval: {},
+		maxTime: {},
+		minTime: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		showSeconds: { type: Boolean },
+		timeZone: {},
+		tokens: {},
+		value: {}
+	},
+	emits: ["change"],
+	setup(a, { emit: y }) {
+		let b = y, x = p(null), { rootBind: S, hourItems: C, columnBind: w, getHourBind: T, minuteItems: E, secondItems: D, showSeconds: O, showMeridiem: k, getMinuteBind: A, getSecondBind: j, meridiemItems: M, getMeridiemBind: N } = e(a, {
+			ampm: !1,
+			interval: 1,
+			rounded: "md",
+			color: "primary",
+			showSeconds: !1
+		}, b), P = null;
+		function F() {
+			P?.(), P = null;
+			let e = x.value;
+			e && (P = v(e));
+		}
+		return d(() => {
+			c(F);
+		}), u(() => {
+			P?.(), P = null;
+		}), _(() => [
+			C.value,
+			E.value,
+			D.value,
+			M.value
+		], () => {
+			c(F);
+		}), (e, a) => (f(), r("div", s({
+			ref_key: "rootRef",
+			ref: x
+		}, g(S)), [
+			i("div", l(o(g(w))), [(f(!0), r(t, null, m(g(C), (e) => (f(), r("button", s({ key: `hour-${e.value}` }, { ref_for: !0 }, g(T)(e)), h(e.label), 17))), 128))], 16),
+			i("div", l(o(g(w))), [(f(!0), r(t, null, m(g(E), (e) => (f(), r("button", s({ key: `minute-${e.value}` }, { ref_for: !0 }, g(A)(e)), h(e.label), 17))), 128))], 16),
+			g(O) ? (f(), r("div", l(s({ key: 0 }, g(w))), [(f(!0), r(t, null, m(g(D), (e) => (f(), r("button", s({ key: `second-${e.value}` }, { ref_for: !0 }, g(j)(e)), h(e.label), 17))), 128))], 16)) : n("", !0),
+			g(k) ? (f(), r("div", l(s({ key: 1 }, g(w))), [(f(!0), r(t, null, m(g(M), (e) => (f(), r("button", s({ key: `meridiem-${e.value}` }, { ref_for: !0 }, g(N)(e)), h(e.label), 17))), 128))], 16)) : n("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { y as default };

package/dist/Components/TimePanel/composables/useTimePanel.d.ts

@@ -0,0 +1,58 @@
+import { MaybeRefOrGetter } from 'vue';
+import { resolveCalendarDayInteractionState, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { TimePanelOwnProps } from '../timePanel.types';
+type TimePanelLibDefaults = LibDefaultsShape<TimePanelOwnProps, "ampm" | "color" | "rounded" | "interval" | "showSeconds">;
+type TimePanelMerged = MergeLibDefaults<TimePanelOwnProps, TimePanelLibDefaults>;
+/**
+ * Minimum outer width of one TimePanel scroll column (`w-12` tiles + scrollbar).
+ * Keep DateTime width sizers in sync with this class.
+ */
+export declare const TIME_PANEL_COLUMN_WIDTH_CLASS = "w-[3.75rem]";
+export declare const TIME_PANEL_COLUMN_MIN_WIDTH_CLASS = "min-w-[3.75rem]";
+export type TimePanelItem = {
+    disabled: boolean;
+    label: string;
+    selected: boolean;
+    state: ReturnType<typeof resolveCalendarDayInteractionState>;
+    value: "AM" | "PM" | number;
+};
+/**
+ * Builds hour / minute / second / AM-PM columns and tile binds for `TimePanel`.
+ */
+export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>, libDefaults: TimePanelLibDefaults, emit: (event: "change", value: Date | null) => void): {
+    merged: import('vue').ComputedRef<TimePanelMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    hourItems: import('vue').ComputedRef<TimePanelItem[]>;
+    columnBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    getHourBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+    }>;
+    minuteItems: import('vue').ComputedRef<TimePanelItem[]>;
+    secondItems: import('vue').ComputedRef<TimePanelItem[]>;
+    displayDate: import('vue').ComputedRef<Date>;
+    showSeconds: import('vue').ComputedRef<boolean>;
+    showMeridiem: import('vue').ComputedRef<boolean>;
+    getMinuteBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+    }>;
+    getSecondBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+    }>;
+    meridiemItems: import('vue').ComputedRef<TimePanelItem[]>;
+    getMeridiemBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+    }>;
+};
+export {};

package/dist/Components/TimePanel/composables/useTimePanel.js

@@ -0,0 +1,180 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, toValue as o, useAttrs as s } from "vue";
+import { buildHourOptions as c, buildMinuteOptions as l, buildSecondOptions as u, cn as d, isTimeDisabled as f, mergeBridgeUILayeredClasses as p, resolveCalendarDayInteractionState as m, snapMinutes as ee, splitComponentProps as h, to12Hour as g, to24Hour as _, toMeridiem as v } from "@bridge-ui/core";
+import { get as y, omit as b } from "es-toolkit/compat";
+import { colorProps as x, roundedProps as S } from "@bridge-ui/core/Tokens/Time";
+//#region src/Components/TimePanel/composables/useTimePanel.ts
+var C = [
+	"ampm",
+	"color",
+	"value",
+	"tokens",
+	"classes",
+	"maxTime",
+	"minTime",
+	"rounded",
+	"disabled",
+	"interval",
+	"readOnly",
+	"timeZone",
+	"customProps",
+	"showSeconds",
+	"disableTimes"
+], w = "w-[3.75rem]", T = "min-w-[3.75rem]";
+function E(w, E, D) {
+	let O = s(), k = e(), A = t(), j = a(() => h({
+		bridgeKeys: C,
+		props: {
+			...O,
+			...o(w)
+		}
+	})), { merged: M } = r({
+		libDefaults: E,
+		props: () => j.value.componentProps
+	}), N = a(() => M.value.customProps), P = a(() => b(j.value.inheritedAttrs, ["onChange"])), F = i({
+		props: () => j.value.componentProps,
+		entry: a(() => {})
+	}), I = a(() => A(M.value.timeZone)), L = a(() => p(x, M.value.tokens?.color)), R = a(() => {
+		let e = p(S, M.value.tokens?.rounded);
+		return y(e, M.value.rounded);
+	}), z = a(() => y(L.value, M.value.color)), B = a(() => {
+		let e = M.value.value ?? k.value.now(I.value), t = ee(k.value.getMinutes(e, I.value), M.value.interval), n = M.value.showSeconds ? k.value.getSeconds(e, I.value) : 0, r = k.value.setHours(e, k.value.getHours(e, I.value), I.value);
+		return r = k.value.setMinutes(r, t, I.value), r = k.value.setSeconds(r, n, I.value), r;
+	}), V = a(() => c({ ampm: M.value.ampm })), te = a(() => l({ interval: M.value.interval })), H = a(() => u()), U = a(() => v(k.value.getHours(B.value, I.value))), W = (e) => !!M.value.disabled || f(e, {
+		adapter: k.value,
+		context: I.value,
+		maxTime: M.value.maxTime,
+		minTime: M.value.minTime,
+		disableTimes: M.value.disableTimes
+	}), G = (e) => {
+		M.value.disabled || M.value.readOnly || W(e) || D("change", e);
+	}, K = (e) => {
+		let t = M.value.ampm ? _(e, U.value) : e, n = k.value.setHours(B.value, t, I.value);
+		n = k.value.setMinutes(n, k.value.getMinutes(B.value, I.value), I.value), G(n);
+	}, q = (e) => {
+		let t = k.value.setMinutes(B.value, e, I.value);
+		G(t);
+	}, J = (e) => {
+		let t = k.value.setSeconds(B.value, e, I.value);
+		G(t);
+	}, Y = (e) => {
+		let t = g(k.value.getHours(B.value, I.value)), n = _(t, e), r = k.value.setHours(B.value, n, I.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value), G(r);
+	}, X = a(() => {
+		let e = k.value.getHours(B.value, I.value), t = M.value.ampm ? g(e) : e;
+		return V.value.map((e) => {
+			let n = M.value.ampm ? _(e, U.value) : e, r = k.value.setHours(B.value, n, I.value);
+			r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value);
+			let i = W(r), a = e === t;
+			return {
+				state: m({
+					disabled: i,
+					selected: a,
+					readOnly: M.value.readOnly
+				}),
+				selected: a,
+				value: e,
+				disabled: i || !!M.value.readOnly,
+				label: M.value.ampm ? String(e) : String(e).padStart(2, "0")
+			};
+		});
+	}), Z = a(() => {
+		let e = k.value.getMinutes(B.value, I.value);
+		return te.value.map((t) => {
+			let n = k.value.setMinutes(B.value, t, I.value), r = W(n), i = t === e;
+			return {
+				state: m({
+					disabled: r,
+					selected: i,
+					readOnly: M.value.readOnly
+				}),
+				selected: i,
+				value: t,
+				label: String(t).padStart(2, "0"),
+				disabled: r || !!M.value.readOnly
+			};
+		});
+	}), Q = a(() => {
+		if (!M.value.showSeconds) return [];
+		let e = k.value.getSeconds(B.value, I.value);
+		return H.value.map((t) => {
+			let n = k.value.setSeconds(B.value, t, I.value), r = W(n), i = t === e;
+			return {
+				state: m({
+					disabled: r,
+					selected: i,
+					readOnly: M.value.readOnly
+				}),
+				selected: i,
+				value: t,
+				label: String(t).padStart(2, "0"),
+				disabled: r || !!M.value.readOnly
+			};
+		});
+	}), ne = a(() => M.value.ampm ? ["AM", "PM"].map((e) => {
+		let t = g(k.value.getHours(B.value, I.value)), n = _(t, e), r = k.value.setHours(B.value, n, I.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value);
+		let i = W(r), a = e === U.value;
+		return {
+			state: m({
+				disabled: i,
+				selected: a,
+				readOnly: M.value.readOnly
+			}),
+			selected: a,
+			label: e,
+			value: e,
+			disabled: i || !!M.value.readOnly
+		};
+	}) : []), re = a(() => n(N.value?.root, P.value, d({
+		"flex h-72 w-full min-w-fit flex-row gap-2": !0,
+		[F.value.root ?? ""]: !0
+	}))), ie = a(() => n(N.value?.column, {}, d({
+		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-dark-300 dark:[&::-webkit-scrollbar-thumb]:bg-dark-600": !0,
+		[T]: !0,
+		[F.value.column ?? ""]: !0
+	}))), $ = (e, t) => {
+		let r = z.value;
+		return n(N.value?.item, {
+			type: "button",
+			disabled: e.disabled,
+			"aria-pressed": e.selected,
+			onClick: () => t(e.value)
+		}, d({
+			"w-full cursor-pointer px-3 py-2 text-sm transition-all duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
+			[R.value ?? ""]: !0,
+			[r?.base ?? ""]: e.state === "base" || e.state === "hover",
+			[r?.hover ?? ""]: e.state === "base" || e.state === "hover",
+			[r?.selected ?? ""]: e.state === "selected",
+			[r?.disabled ?? ""]: e.state === "disabled",
+			[F.value.item ?? ""]: !0
+		}));
+	}, ae = (e) => $(e, (e) => {
+		typeof e == "number" && K(e);
+	}), oe = (e) => $(e, (e) => {
+		typeof e == "number" && q(e);
+	}), se = (e) => $(e, (e) => {
+		typeof e == "number" && J(e);
+	}), ce = (e) => $(e, (e) => {
+		(e === "AM" || e === "PM") && Y(e);
+	}), le = a(() => !!M.value.ampm);
+	return {
+		merged: M,
+		rootBind: re,
+		hourItems: X,
+		columnBind: ie,
+		getHourBind: ae,
+		minuteItems: Z,
+		secondItems: Q,
+		displayDate: B,
+		showSeconds: a(() => !!M.value.showSeconds),
+		showMeridiem: le,
+		getMinuteBind: oe,
+		getSecondBind: se,
+		meridiemItems: ne,
+		getMeridiemBind: ce
+	};
+}
+//#endregion
+export { T as TIME_PANEL_COLUMN_MIN_WIDTH_CLASS, w as TIME_PANEL_COLUMN_WIDTH_CLASS, E as useTimePanel };

package/dist/Components/TimePanel/index.d.ts

@@ -0,0 +1,3 @@
+export { TIME_PANEL_COLUMN_WIDTH_CLASS, useTimePanel, type TimePanelItem, } from './composables/useTimePanel';
+export type { TimePanelClasses, TimePanelColorOverrides, TimePanelCustomProps, TimePanelEmits, TimePanelOwnProps, TimePanelProps, TimePanelRoundedOverrides, TimePanelTokens, } from './timePanel.types';
+export { default as TimePanel } from './TimePanel.vue';

package/dist/Components/TimePanel/index.js

@@ -0,0 +1,3 @@
+import { TIME_PANEL_COLUMN_WIDTH_CLASS as e, useTimePanel as t } from "./composables/useTimePanel.js";
+import n from "./TimePanel.js";
+export { e as TIME_PANEL_COLUMN_WIDTH_CLASS, n as TimePanel, t as useTimePanel };