@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/TimeRangeField/composables/useTimeRangeField.js

@@ -0,0 +1,143 @@
+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, isTimeRangeValue as m, resolveFieldOverlay as h, resolveFieldShowFooter as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { get as v, isNil as y, omit as b } from "es-toolkit/compat";
+import { colorProps as x } from "@bridge-ui/core/Tokens/Listbox";
+//#region src/Components/TimeRangeField/composables/useTimeRangeField.ts
+var S = [
+	"ampm",
+	"classes",
+	"maxTime",
+	"minTime",
+	"overlay",
+	"interval",
+	"timeZone",
+	"clearable",
+	"showFooter",
+	"customProps",
+	"showSeconds",
+	"defaultValue",
+	"disableTimes"
+];
+function C(e, t, n, r, i) {
+	return y(e) || !m(e) ? "" : `${t.formatTime(e[0], n, {
+		ampm: r,
+		showSeconds: i
+	})} – ${t.formatTime(e[1], n, {
+		ampm: r,
+		showSeconds: i
+	})}`;
+}
+function w(m, w, T) {
+	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => _({
+		props: {
+			...E,
+			...m
+		},
+		bridgeKeys: S
+	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !y(I.value)), z = (e) => {
+		M.value = e instanceof HTMLElement ? e : null;
+	};
+	function B(e) {
+		j.value = e, T(e ? "open" : "close");
+	}
+	let ee = c(() => b(N.value.inheritedAttrs, ["class"])), V = c(() => {
+		let e = _({
+			bridgeKeys: o,
+			props: ee.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timeRangePicker: s, ...c } = P.value.customProps ?? {};
+		return {
+			...e,
+			endIcon: t,
+			classes: P.value.classes,
+			customProps: {
+				...c,
+				container: i(c.container, {}, {
+					ref: z,
+					class: f({ "cursor-pointer": !m.disabled && !m.readonly }),
+					onClick: (e) => {
+						m.disabled || m.readonly || e.target.closest("[data-field-clear]") || B(!0);
+					}
+				})
+			}
+		};
+	}), H = s(() => V.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		showErrorIcon: !0
+	}, { componentName: "TimeRangeField" }), U = c(() => R.value && L.value && !m.readonly && !H.isDisabled.value), W = c(() => C(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function G(e) {
+		w.value = e, T("change", e);
+	}
+	let K = c(() => g(P.value.showFooter, k.mobile));
+	function q(e) {
+		G(e), B(!1);
+	}
+	function J() {
+		B(!1);
+	}
+	function Y(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (G(null), T("clear"), B(!1));
+	}
+	function X(e) {
+		e.preventDefault();
+	}
+	let Z = c(() => i({
+		readonly: !0,
+		value: W.value,
+		onFocus: (e) => {
+			H.inputBind.value.onFocus?.(e), B(!0);
+		},
+		onKeydown: (e) => {
+			H.inputBind.value.onKeydown?.(e), e.key === "Escape" && B(!1);
+		}
+	}, void 0, H.inputBind.value)), Q = c(() => P.value.overlay), $ = c(() => ({
+		modal: P.value.customProps?.modal,
+		drawer: P.value.customProps?.drawer,
+		menu: {
+			anchorEl: M.value,
+			placement: "bottom-start",
+			...P.value.customProps?.menu
+		}
+	})), te = c(() => P.value.customProps?.timeRangePicker), ne = c(() => h(P.value.overlay, k.mobile)), re = c(() => p(ne.value) ? "w-full shadow-none" : void 0), ie = c(() => a(H.merged.value.size)), ae = c(() => v(x, [H.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: Q,
+		hasValue: R,
+		timeOnly: P,
+		formField: H,
+		inputBind: Z,
+		clearable: L,
+		clearBind: c(() => i({}, {}, {
+			tabindex: 0,
+			role: "button",
+			"data-field-clear": !0,
+			onMousedown: X,
+			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: Y,
+		modelValue: I,
+		showFooter: K,
+		pickerClass: re,
+		containerRef: M,
+		clearIconSize: ie,
+		showClearIcon: U,
+		handleOpenChange: B,
+		handlePickerChange: q,
+		handlePickerCancel: J,
+		overlayCustomProps: $,
+		timeRangePickerCustomProps: te
+	};
+}
+//#endregion
+export { w as useTimeRangeField };

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

@@ -0,0 +1,3 @@
+export { useTimeRangeField } from './composables/useTimeRangeField';
+export type { TimeRangeFieldClasses, TimeRangeFieldCustomProps, TimeRangeFieldEmits, TimeRangeFieldOwnProps, TimeRangeFieldProps, TimeRangeFieldSlots, } from './timeRangeField.types';
+export { default as TimeRangeField } from './TimeRangeField.vue';

package/dist/Components/TimeRangeField/index.js

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

package/dist/Components/TimeRangeField/timeRangeField.types.d.ts

@@ -0,0 +1,155 @@
+import { InputHTMLAttributes } from 'vue';
+import { DisableTimesInput, FieldOverlayMode, MergeHtmlProps, TimeRangeValue } 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 { TimeRangePickerCustomProps } from '../TimeRangePicker/timeRangePicker.types';
+export interface TimeRangeFieldClasses extends FormFieldClasses {
+    /**
+     * Classes merged onto the clear control.
+     */
+    clear?: string;
+}
+export interface TimeRangeFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `TimeRangeField`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nested `Drawer` when overlay resolves to drawer.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the floating `Menu` when overlay resolves to menu.
+     *
+     * @default undefined
+     */
+    menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when overlay resolves to modal.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
+    /**
+     * Props forwarded to the nested `TimeRangePicker`.
+     *
+     * @default undefined
+     */
+    timeRangePicker?: TimeRangePickerCustomProps;
+}
+export interface TimeRangeFieldEmits {
+    /**
+     * Emitted when the selected range changes.
+     */
+    change: [value: null | TimeRangeValue];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+}
+export interface TimeRangeFieldOwnProps 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?: TimeRangeFieldClasses;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: TimeRangeFieldCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | TimeRangeValue;
+    /**
+     * 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 TimeRangeFieldSlots extends FormFieldSlots {}
+export type TimeRangeFieldProps = MergeHtmlProps<TimeRangeFieldOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     *
+     * @default undefined
+     */
+    modelValue?: null | TimeRangeValue;
+};

package/dist/Components/TimeRangePicker/TimeRangePicker.js

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

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

@@ -0,0 +1,10 @@
+import { TimeRangePickerOwnProps } from './timeRangePicker.types';
+declare const __VLS_export: import('vue').DefineComponent<TimeRangePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: () => any;
+    change: (value: import('@bridge-ui/core').TimeRangeValue | null) => any;
+}, string, import('vue').PublicProps, Readonly<TimeRangePickerOwnProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: import('@bridge-ui/core').TimeRangeValue | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import e from "../Button/Button.js";
+import t from "../TimePanel/TimePanel.js";
+import { useTimeRangePicker as n } from "./composables/useTimeRangePicker.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region src/Components/TimeRangePicker/TimeRangePicker.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "TimeRangePicker",
+	props: {
+		ampm: { type: Boolean },
+		classes: {},
+		color: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		disableTimes: {},
+		endTitle: {},
+		interval: {},
+		maxTime: {},
+		minTime: {},
+		orientation: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		showFooter: { type: Boolean },
+		showSeconds: { type: Boolean },
+		startTitle: {},
+		timeZone: {},
+		tokens: {},
+		value: {}
+	},
+	emits: ["cancel", "change"],
+	setup(c, { emit: _ }) {
+		let { merged: v, endBind: y, rootBind: b, endTitle: x, startBind: S, startTitle: C, footerBind: w, panelsBind: T, showFooter: E, applyLabel: D, timeTokens: O, handleApply: k, cancelLabel: A, endTitleBind: j, handleCancel: M, startTitleBind: N, endDisplayValue: P, handleEndChange: F, applyButtonProps: I, startDisplayValue: L, cancelButtonProps: R, handleStartChange: z } = n(c, {
+			ampm: !1,
+			interval: 1,
+			rounded: "md",
+			color: "primary",
+			showFooter: !1,
+			showSeconds: !1,
+			orientation: "horizontal"
+		}, _);
+		return (n, c) => (p(), i("div", f(l(h(b))), [a("div", f(l(h(T))), [a("div", f(l(h(S))), [a("p", { class: d(h(N)) }, m(h(C)), 3), s(h(t), {
+			ampm: h(v).ampm,
+			tokens: h(O),
+			color: h(v).color,
+			rounded: h(v).rounded,
+			value: h(L),
+			"max-time": h(v).maxTime,
+			"min-time": h(v).minTime,
+			disabled: h(v).disabled,
+			interval: h(v).interval,
+			"read-only": h(v).readOnly,
+			"time-zone": h(v).timeZone,
+			onChange: h(z),
+			"show-seconds": h(v).showSeconds,
+			"disable-times": h(v).disableTimes
+		}, null, 8, [
+			"ampm",
+			"tokens",
+			"color",
+			"rounded",
+			"value",
+			"max-time",
+			"min-time",
+			"disabled",
+			"interval",
+			"read-only",
+			"time-zone",
+			"onChange",
+			"show-seconds",
+			"disable-times"
+		])], 16), a("div", f(l(h(y))), [a("p", { class: d(h(j)) }, m(h(x)), 3), s(h(t), {
+			ampm: h(v).ampm,
+			tokens: h(O),
+			color: h(v).color,
+			value: h(P),
+			rounded: h(v).rounded,
+			"max-time": h(v).maxTime,
+			"min-time": h(v).minTime,
+			disabled: h(v).disabled,
+			interval: h(v).interval,
+			"read-only": h(v).readOnly,
+			"time-zone": h(v).timeZone,
+			onChange: h(F),
+			"show-seconds": h(v).showSeconds,
+			"disable-times": h(v).disableTimes
+		}, null, 8, [
+			"ampm",
+			"tokens",
+			"color",
+			"value",
+			"rounded",
+			"max-time",
+			"min-time",
+			"disabled",
+			"interval",
+			"read-only",
+			"time-zone",
+			"onChange",
+			"show-seconds",
+			"disable-times"
+		])], 16)], 16), h(E) ? (p(), i("div", f(u({ key: 0 }, h(w))), [s(h(e), u({
+			variant: "flat",
+			color: "secondary",
+			onClick: h(M)
+		}, h(R)), {
+			default: g(() => [o(m(h(A)), 1)]),
+			_: 1
+		}, 16, ["onClick"]), s(h(e), u({ color: "primary" }, h(I), { onClick: h(k) }), {
+			default: g(() => [o(m(h(D)), 1)]),
+			_: 1
+		}, 16, ["onClick"])], 16)) : r("", !0)], 16));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts

@@ -0,0 +1,40 @@
+import { MaybeRefOrGetter } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults, TimeRangeValue, TimeValue } from '@bridge-ui/core';
+import { TimeRangePickerOwnProps } from '../timeRangePicker.types';
+type TimeRangePickerLibDefaults = LibDefaultsShape<TimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "orientation" | "showSeconds">;
+type TimeRangePickerMerged = MergeLibDefaults<TimeRangePickerOwnProps, TimeRangePickerLibDefaults>;
+/**
+ * Owns controlled/uncontrolled range value, optional footer draft, and dual panel binds.
+ */
+export declare function useTimeRangePicker(props: MaybeRefOrGetter<TimeRangePickerOwnProps>, libDefaults: TimeRangePickerLibDefaults, emit: {
+    (event: "change", value: null | TimeRangeValue): void;
+    (event: "cancel"): void;
+}): {
+    merged: import('vue').ComputedRef<TimeRangePickerMerged>;
+    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimeRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds" | "endTitle" | "startTitle">>>>;
+    startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    panelsBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showFooter: import('vue').ComputedRef<boolean>;
+    timeTokens: import('vue').ComputedRef<{
+        color: Record<string, Partial<import('@bridge-ui/core').TimeColorItem>> | undefined;
+        rounded: Record<string, string> | undefined;
+    }>;
+    handleApply: () => void;
+    displayValue: import('vue').ComputedRef<[Date, Date] | null>;
+    handleCancel: () => void;
+    endTitleBind: import('vue').ComputedRef<string>;
+    startTitleBind: import('vue').ComputedRef<string>;
+    endDisplayValue: import('vue').ComputedRef<Date>;
+    handleEndChange: (next: null | TimeValue) => void;
+    startDisplayValue: import('vue').ComputedRef<Date>;
+    handleStartChange: (next: null | TimeValue) => void;
+    applyLabel: import('vue').ComputedRef<string>;
+    cancelLabel: import('vue').ComputedRef<string>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    endTitle: import('vue').ComputedRef<string>;
+    startTitle: import('vue').ComputedRef<string>;
+};
+export {};

package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js

@@ -0,0 +1,123 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
+import { computed as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
+import { cn as d, sortTimeRangeValue as f, splitComponentProps as p } from "@bridge-ui/core";
+import { isNil as m, omit as h } from "es-toolkit/compat";
+//#region src/Components/TimeRangePicker/composables/useTimeRangePicker.ts
+var g = [
+	"ampm",
+	"color",
+	"value",
+	"tokens",
+	"classes",
+	"maxTime",
+	"minTime",
+	"rounded",
+	"disabled",
+	"endTitle",
+	"interval",
+	"readOnly",
+	"timeZone",
+	"showFooter",
+	"startTitle",
+	"customProps",
+	"orientation",
+	"showSeconds",
+	"defaultValue",
+	"disableTimes"
+];
+function _(_, v, y) {
+	let b = l(), x = e(), S = t(), C = n(), w = o(() => p({
+		bridgeKeys: g,
+		props: {
+			...b,
+			...c(_)
+		}
+	})), { merged: T, entry: E } = i({
+		libDefaults: v,
+		componentName: "TimeRangePicker",
+		props: () => w.value.componentProps
+	}), D = o(() => T.value.customProps), O = o(() => h(w.value.inheritedAttrs, ["onChange", "onCancel"])), k = a({
+		entry: E,
+		props: () => w.value.componentProps
+	}), A = o(() => c(_)), j = o(() => S(T.value.timeZone)), M = o(() => !m(A.value.value)), N = s(T.value.defaultValue ?? null), P = o(() => M.value ? A.value.value ?? null : N.value), F = s(P.value);
+	u(() => [P.value, T.value.showFooter], ([e, t]) => {
+		t && (F.value = e);
+	});
+	let I = o(() => T.value.showFooter ? F.value : P.value), L = o(() => I.value?.[0] ?? x.value.now(j.value)), R = o(() => I.value?.[1] ?? x.value.now(j.value)), z = o(() => ({
+		color: T.value.tokens?.time?.color ?? T.value.tokens?.color,
+		rounded: T.value.tokens?.time?.rounded ?? T.value.tokens?.rounded
+	})), B = (e) => {
+		M.value || (N.value = e), y("change", e);
+	}, V = (e) => {
+		let t = f(e, x.value, j.value);
+		if (T.value.showFooter) {
+			F.value = t;
+			return;
+		}
+		B(t);
+	}, H = (e) => {
+		if (m(e)) return;
+		let t = I.value?.[1] ?? x.value.now(j.value);
+		V([e, t]);
+	}, U = (e) => {
+		if (m(e)) return;
+		let t = I.value?.[0] ?? x.value.now(j.value);
+		V([t, e]);
+	}, W = () => {
+		B(F.value);
+	}, G = () => {
+		F.value = P.value, y("cancel");
+	}, K = o(() => r(D.value?.root, O.value, d({
+		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
+		[k.value.root ?? ""]: !0
+	}))), q = o(() => T.value.orientation === "vertical"), J = o(() => r(D.value?.panels, {}, d({
+		"flex w-full gap-2 px-2.5": !0,
+		"flex-row": !q.value,
+		"flex-col": q.value,
+		[k.value.panels ?? ""]: !0
+	}))), Y = o(() => r(D.value?.start, {}, d({
+		"flex min-w-0 flex-1 flex-col gap-1": !0,
+		[k.value.start ?? ""]: !0
+	}))), X = o(() => r(D.value?.end, {}, d({
+		"flex min-w-0 flex-1 flex-col gap-1": !0,
+		[k.value.end ?? ""]: !0
+	}))), Z = o(() => d({ "px-2 py-2 text-center text-xs font-medium tracking-wide text-dark-500 uppercase dark:text-dark-400": !0 })), Q = o(() => d({
+		[Z.value]: !0,
+		[k.value.startTitle ?? ""]: !0
+	})), $ = o(() => d({
+		[Z.value]: !0,
+		[k.value.endTitle ?? ""]: !0
+	}));
+	return {
+		merged: T,
+		endBind: X,
+		rootBind: K,
+		startBind: Y,
+		footerBind: o(() => r(D.value?.footer, {}, d({
+			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
+			[k.value.footer ?? ""]: !0
+		}))),
+		panelsBind: J,
+		showFooter: o(() => !!T.value.showFooter),
+		timeTokens: z,
+		handleApply: W,
+		displayValue: I,
+		handleCancel: G,
+		endTitleBind: $,
+		startTitleBind: Q,
+		endDisplayValue: R,
+		handleEndChange: U,
+		startDisplayValue: L,
+		handleStartChange: H,
+		applyLabel: o(() => C("Apply")),
+		cancelLabel: o(() => C("Cancel")),
+		applyButtonProps: o(() => D.value?.applyButton),
+		cancelButtonProps: o(() => D.value?.cancelButton),
+		endTitle: o(() => T.value.endTitle ?? C("End time")),
+		startTitle: o(() => T.value.startTitle ?? C("Start time"))
+	};
+}
+//#endregion
+export { _ as useTimeRangePicker };

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

@@ -0,0 +1,3 @@
+export { useTimeRangePicker } from './composables/useTimeRangePicker';
+export type { TimeRangePickerClasses, TimeRangePickerColorOverrides, TimeRangePickerCustomProps, TimeRangePickerEmits, TimeRangePickerOwnProps, TimeRangePickerProps, TimeRangePickerRoundedOverrides, TimeRangePickerTokens, } from './timeRangePicker.types';
+export { default as TimeRangePicker } from './TimeRangePicker.vue';

package/dist/Components/TimeRangePicker/index.js

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