@rotki/ui-library 2.15.0 → 2.16.0

package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,382 @@
+import { assert } from "../../utils/assert.js";
+import { timePickerStyles } from "./time-picker-styles.js";
+import { TimeAccuracy } from "../../consts/time-accuracy.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+import { isDefined } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/time-picker/RuiTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex justify-center items-center gap-1" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-2xl font-semibold"
+};
+var _hoisted_3 = {
+	key: 2,
+	class: "text-lg font-semibold"
+};
+var _hoisted_4 = { class: "text-xl" };
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = ["aria-selected", "onClick"];
+var FULL_CIRCLE = 360;
+var TWELVE_HOURS = 12;
+var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiTimePicker",
+	props: /* @__PURE__ */ mergeModels({
+		accuracy: { default: () => TimeAccuracy.MINUTE },
+		borderless: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {},
+		"hour": {},
+		"hourModifiers": {},
+		"minute": {},
+		"minuteModifiers": {},
+		"second": {},
+		"secondModifiers": {},
+		"millisecond": {},
+		"millisecondModifiers": {},
+		"selection": { default: "hour" },
+		"selectionModifiers": {}
+	}),
+	emits: [
+		"update:modelValue",
+		"update:hour",
+		"update:minute",
+		"update:second",
+		"update:millisecond",
+		"update:selection"
+	],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const selectedHour = useModel(__props, "hour");
+		const selectedMinute = useModel(__props, "minute");
+		const selectedSecond = useModel(__props, "second");
+		const selectedMillisecond = useModel(__props, "millisecond");
+		const editMode = useModel(__props, "selection");
+		const ui = timePickerStyles();
+		const totalItemsPerMode = {
+			hour: 12,
+			minute: 60,
+			second: 60,
+			millisecond: 1e3
+		};
+		const intervals = {
+			hour: 1,
+			minute: 5,
+			second: 5,
+			millisecond: 100
+		};
+		const isDragging = ref(false);
+		const clockFace = useTemplateRef("clockFace");
+		const showSecond = computed(() => __props.accuracy === TimeAccuracy.SECOND || __props.accuracy === TimeAccuracy.MILLISECOND);
+		const showMillisecond = computed(() => __props.accuracy === TimeAccuracy.MILLISECOND);
+		const period = computed(() => isDefined(selectedHour) && get$1(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
+		const displayHour = computed(() => {
+			if (!isDefined(selectedHour)) return;
+			const hour = get$1(selectedHour) % TWELVE_HOURS;
+			return hour === 0 ? TWELVE_HOURS : hour;
+		});
+		const editedValue = computed(() => {
+			const mode = get$1(editMode);
+			if (mode === "hour") return get$1(displayHour);
+			else if (mode === "minute") return get$1(selectedMinute);
+			else if (mode === "second") return get$1(selectedSecond);
+			else return get$1(selectedMillisecond);
+		});
+		const displayClockHandCircle = computed(() => {
+			const mode = get$1(editMode);
+			if (mode === "hour" || !isDefined(editedValue)) return false;
+			else {
+				const interval = intervals[mode];
+				return get$1(editedValue) % interval !== 0;
+			}
+		});
+		const dotStyle = computed(() => ({
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)"
+		}));
+		const clockHandStyle = computed(() => {
+			if (!isDefined(editedValue)) return {};
+			return {
+				height: "36%",
+				top: "14%",
+				left: "50%",
+				transformOrigin: "bottom center",
+				transform: `translateX(-50%) rotate(${get$1(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)])}deg)`,
+				zIndex: 10
+			};
+		});
+		const clockHandCircleStyle = computed(() => {
+			if (!isDefined(editedValue)) return {};
+			const radius = "38%";
+			const radians = get$1(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)]) * Math.PI / 180;
+			const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);
+			return {
+				position: "absolute",
+				top: `${50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2)}%`,
+				left: `${x}%`,
+				width: "10px",
+				height: "10px",
+				borderRadius: "50%",
+				transform: "translate(-50%, -50%)",
+				zIndex: 11
+			};
+		});
+		const clockNumbers = computed(() => {
+			const mode = get$1(editMode);
+			const interval = intervals[mode];
+			const total = totalItemsPerMode[mode];
+			const numbers = generateNumbers(total, interval);
+			if (mode === "hour") numbers[0] = 12;
+			return numbers;
+		});
+		function getModelHours() {
+			return isDefined(modelValue) ? new Date(get$1(modelValue)).getHours() : void 0;
+		}
+		function getModelMinutes() {
+			return isDefined(modelValue) ? new Date(get$1(modelValue)).getMinutes() : void 0;
+		}
+		function getModelSeconds() {
+			return [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND].includes(__props.accuracy) && isDefined(modelValue) ? new Date(get$1(modelValue)).getSeconds() : void 0;
+		}
+		function getModelMilliseconds() {
+			return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get$1(modelValue)).getMilliseconds() : void 0;
+		}
+		function generateNumbers(total, interval) {
+			const numbers = [];
+			for (let i = 0; i < total; i += interval) numbers.push(i);
+			return numbers;
+		}
+		function formatValue(value, padding = 2) {
+			return value !== void 0 ? value.toString().padStart(padding, "0") : "-".repeat(padding);
+		}
+		function numberStyle(num) {
+			const radius = "38%";
+			const radians = (num * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)]) - 90) * Math.PI / 180;
+			const x = 50 + parseFloat(radius) * Math.cos(radians);
+			return {
+				top: `${50 + parseFloat(radius) * Math.sin(radians)}%`,
+				left: `${x}%`,
+				transform: "translate(-50%, -50%)"
+			};
+		}
+		function isSelectedNumber(num) {
+			if (!isDefined(editedValue)) return false;
+			const mode = get$1(editMode);
+			if (mode === "hour") return get$1(displayHour) === num;
+			else {
+				const value = get$1(editedValue);
+				const interval = intervals[mode];
+				return value === num || value % interval === 0 && value === num;
+			}
+		}
+		function toggleAmPm() {
+			if (!isDefined(selectedHour)) return;
+			if (get$1(selectedHour) < TWELVE_HOURS) set$1(selectedHour, get$1(selectedHour) + TWELVE_HOURS);
+			else set$1(selectedHour, get$1(selectedHour) - TWELVE_HOURS);
+			updateModelValue();
+		}
+		function startDrag(event) {
+			event.preventDefault();
+			set$1(isDragging, true);
+			if (!isDefined(clockFace)) return;
+			const rect = get$1(clockFace).getBoundingClientRect();
+			const centerX = rect.left + rect.width / 2;
+			const centerY = rect.top + rect.height / 2;
+			let rafId = null;
+			const applyMove = (clientX, clientY) => {
+				const x = clientX - centerX;
+				const y = clientY - centerY;
+				let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
+				if (angle < 0) angle += FULL_CIRCLE;
+				const mode = get$1(editMode);
+				const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];
+				if (mode === "hour") {
+					let hour = unit;
+					if (hour === 0) hour = TWELVE_HOURS;
+					if (get$1(period) === "PM" && hour < TWELVE_HOURS) hour += TWELVE_HOURS;
+					else if (get$1(period) === "AM" && hour === TWELVE_HOURS) hour = 0;
+					set$1(selectedHour, hour);
+				} else if (mode === "minute") set$1(selectedMinute, unit);
+				else if (mode === "second") set$1(selectedSecond, unit);
+				else set$1(selectedMillisecond, unit);
+				updateModelValue();
+			};
+			const handleMove = (moveEvent) => {
+				if (!get$1(isDragging)) return;
+				if (rafId !== null) return;
+				let clientX;
+				let clientY;
+				if ("touches" in moveEvent) {
+					const touch = moveEvent.touches[0];
+					assert(touch);
+					clientX = touch.clientX;
+					clientY = touch.clientY;
+				} else {
+					clientX = moveEvent.clientX;
+					clientY = moveEvent.clientY;
+				}
+				rafId = requestAnimationFrame(() => {
+					applyMove(clientX, clientY);
+					rafId = null;
+				});
+			};
+			const handleEnd = () => {
+				if (rafId !== null) {
+					cancelAnimationFrame(rafId);
+					rafId = null;
+				}
+				set$1(isDragging, false);
+				document.removeEventListener("mousemove", handleMove);
+				document.removeEventListener("touchmove", handleMove);
+				document.removeEventListener("mouseup", handleEnd);
+				document.removeEventListener("touchend", handleEnd);
+				if (get$1(editMode) === "hour") set$1(editMode, "minute");
+				else if (get$1(showSecond) && get$1(editMode) === "minute") set$1(editMode, "second");
+				else if (get$1(showMillisecond) && get$1(editMode) === "second") set$1(editMode, "millisecond");
+			};
+			document.addEventListener("mousemove", handleMove);
+			document.addEventListener("touchmove", handleMove);
+			document.addEventListener("mouseup", handleEnd);
+			document.addEventListener("touchend", handleEnd);
+			const initialEvent = event;
+			let clientX;
+			let clientY;
+			if ("touches" in initialEvent) {
+				const touch = initialEvent.touches[0];
+				assert(touch);
+				clientX = touch.clientX;
+				clientY = touch.clientY;
+			} else {
+				clientX = initialEvent.clientX;
+				clientY = initialEvent.clientY;
+			}
+			applyMove(clientX, clientY);
+		}
+		function selectByClick(num) {
+			const mode = get$1(editMode);
+			if (mode === "hour") {
+				let newHour = num;
+				if (get$1(period) === "PM" && newHour < TWELVE_HOURS) newHour += TWELVE_HOURS;
+				set$1(selectedHour, newHour);
+				set$1(editMode, "minute");
+			} else if (mode === "minute") {
+				set$1(selectedMinute, num);
+				if (get$1(showSecond)) set$1(editMode, "second");
+			} else if (mode === "second") {
+				set$1(selectedSecond, num);
+				if (get$1(showMillisecond)) set$1(editMode, "millisecond");
+			} else if (mode === "millisecond") set$1(selectedMillisecond, num);
+			updateModelValue();
+		}
+		function updateModelValue() {
+			if (!(isDefined(selectedHour) && isDefined(selectedMinute))) return;
+			nextTick(() => {
+				const date = isDefined(modelValue) ? new Date(get$1(modelValue)) : /* @__PURE__ */ new Date();
+				date.setHours(get$1(selectedHour));
+				date.setMinutes(get$1(selectedMinute));
+				date.setSeconds(get$1(selectedSecond) ?? 0);
+				date.setMilliseconds(get$1(selectedMillisecond) ?? 0);
+				set$1(modelValue, date);
+			});
+		}
+		watch(modelValue, () => {
+			set$1(selectedHour, getModelHours());
+			set$1(selectedMinute, getModelMinutes());
+			set$1(selectedSecond, getModelSeconds());
+			set$1(selectedMillisecond, getModelMilliseconds());
+		});
+		onMounted(() => {
+			set$1(selectedHour, getModelHours());
+			set$1(selectedMinute, getModelMinutes());
+			set$1(selectedSecond, getModelSeconds());
+			set$1(selectedMillisecond, getModelMilliseconds());
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "group",
+				"aria-label": "Time picker",
+				class: normalizeClass(unref(ui).root({ bordered: !__props.borderless }))
+			}, [createElementVNode("div", { class: normalizeClass(unref(ui).digitalDisplay()) }, [createElementVNode("div", _hoisted_1, [
+				createElementVNode("div", {
+					role: "button",
+					"aria-label": "Select hours",
+					class: normalizeClass(unref(ui).digit({ active: editMode.value === "hour" })),
+					onClick: _cache[0] || (_cache[0] = ($event) => editMode.value = "hour")
+				}, toDisplayString(formatValue(displayHour.value)), 3),
+				_cache[7] || (_cache[7] = createElementVNode("div", { class: "text-2xl font-semibold" }, " : ", -1)),
+				createElementVNode("div", {
+					role: "button",
+					"aria-label": "Select minutes",
+					class: normalizeClass(unref(ui).digit({ active: editMode.value === "minute" })),
+					onClick: _cache[1] || (_cache[1] = ($event) => editMode.value = "minute")
+				}, toDisplayString(formatValue(selectedMinute.value)), 3),
+				showSecond.value ? (openBlock(), createElementBlock("div", _hoisted_2, " : ")) : createCommentVNode("", true),
+				showSecond.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					role: "button",
+					"aria-label": "Select seconds",
+					class: normalizeClass(unref(ui).digit({ active: editMode.value === "second" })),
+					onClick: _cache[2] || (_cache[2] = ($event) => editMode.value = "second")
+				}, toDisplayString(formatValue(selectedSecond.value)), 3)) : createCommentVNode("", true),
+				showMillisecond.value ? (openBlock(), createElementBlock("div", _hoisted_3, " . ")) : createCommentVNode("", true),
+				showMillisecond.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					role: "button",
+					"aria-label": "Select milliseconds",
+					class: normalizeClass(unref(ui).digit({
+						active: editMode.value === "millisecond",
+						class: "!text-lg"
+					})),
+					onClick: _cache[3] || (_cache[3] = ($event) => editMode.value = "millisecond")
+				}, toDisplayString(formatValue(selectedMillisecond.value, 3)), 3)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [createElementVNode("div", {
+					role: "button",
+					"aria-label": "Toggle AM/PM",
+					class: "rui-time-picker-period cursor-pointer",
+					onClick: _cache[4] || (_cache[4] = ($event) => toggleAmPm())
+				}, toDisplayString(period.value), 1)])
+			])], 2), createElementVNode("div", {
+				ref_key: "clockFace",
+				ref: clockFace,
+				role: "listbox",
+				"aria-label": `Select ${editMode.value}`,
+				class: normalizeClass(unref(ui).clockFace()),
+				onMousedown: _cache[5] || (_cache[5] = ($event) => startDrag($event)),
+				onTouchstart: _cache[6] || (_cache[6] = ($event) => startDrag($event))
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).centerDot()),
+					style: normalizeStyle(dotStyle.value)
+				}, null, 6),
+				createElementVNode("div", {
+					class: normalizeClass(unref(ui).clockHand()),
+					style: normalizeStyle(clockHandStyle.value)
+				}, null, 6),
+				displayClockHandCircle.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).clockHandCircle()),
+					style: normalizeStyle(clockHandCircleStyle.value)
+				}, null, 6)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(clockNumbers.value, (num) => {
+					return openBlock(), createElementBlock("div", {
+						key: `num-${num}`,
+						role: "option",
+						"aria-selected": isSelectedNumber(num),
+						class: normalizeClass([unref(ui).clockNumber({ selected: isSelectedNumber(num) }), `rui-${editMode.value}-${num.toString().padStart(2, "0")}`]),
+						style: normalizeStyle(numberStyle(num)),
+						onClick: ($event) => selectByClick(num)
+					}, toDisplayString(num), 15, _hoisted_6);
+				}), 128))
+			], 42, _hoisted_5)], 2);
+		};
+	}
+});
+//#endregion
+export { RuiTimePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div class=\"flex justify-center items-center gap-1\">\n        <div\n          role=\"button\"\n          aria-label=\"Select hours\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </div>\n        <div class=\"text-2xl font-semibold\">\n          :\n        </div>\n        <div\n          role=\"button\"\n          aria-label=\"Select minutes\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </div>\n        <div\n          v-if=\"showSecond\"\n          class=\"text-2xl font-semibold\"\n        >\n          :\n        </div>\n        <div\n          v-if=\"showSecond\"\n          role=\"button\"\n          aria-label=\"Select seconds\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          class=\"text-lg font-semibold\"\n        >\n          .\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          role=\"button\"\n          aria-label=\"Select milliseconds\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: '!text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </div>\n        <div class=\"text-xl\">\n          <div\n            role=\"button\"\n            aria-label=\"Toggle AM/PM\"\n            class=\"rui-time-picker-period cursor-pointer\"\n            @click=\"toggleAmPm()\"\n          >\n            {{ period }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/time-picker/time-picker-styles.d.ts

@@ -0,0 +1,76 @@
+export declare const timePickerStyles: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            digit: string;
+        };
+    };
+    selected: {
+        true: {
+            clockNumber: string;
+        };
+    };
+}, {
+    root: string;
+    digitalDisplay: string;
+    digit: string;
+    clockFace: string;
+    centerDot: string;
+    clockHand: string;
+    clockHandCircle: string;
+    clockNumber: string;
+}, undefined, {
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            digit: string;
+        };
+    };
+    selected: {
+        true: {
+            clockNumber: string;
+        };
+    };
+}, {
+    root: string;
+    digitalDisplay: string;
+    digit: string;
+    clockFace: string;
+    centerDot: string;
+    clockHand: string;
+    clockHandCircle: string;
+    clockNumber: string;
+}, import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            digit: string;
+        };
+    };
+    selected: {
+        true: {
+            clockNumber: string;
+        };
+    };
+}, {
+    root: string;
+    digitalDisplay: string;
+    digit: string;
+    clockFace: string;
+    centerDot: string;
+    clockHand: string;
+    clockHandCircle: string;
+    clockNumber: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/time-picker/time-picker-styles.js

@@ -0,0 +1,27 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/time-picker/time-picker-styles.ts
+var timePickerStyles = tv({
+	slots: {
+		root: "bg-white overflow-hidden text-rui-text p-3 dark:bg-rui-grey-900",
+		digitalDisplay: "mb-2 text-center",
+		digit: "text-2xl font-semibold cursor-pointer",
+		clockFace: "relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200 dark:border-rui-grey-800",
+		centerDot: "absolute rounded-full bg-rui-primary w-3 h-3",
+		clockHand: "absolute w-[1.5px] bg-rui-primary rounded-full",
+		clockHandCircle: "absolute border-2 border-rui-primary",
+		clockNumber: [
+			"absolute text-center text-sm font-medium w-8 h-8",
+			"flex items-center justify-center",
+			"hover:bg-rui-primary-lighter cursor-pointer rounded-full"
+		].join(" ")
+	},
+	variants: {
+		bordered: { true: { root: "rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800" } },
+		active: { true: { digit: "text-rui-primary" } },
+		selected: { true: { clockNumber: "bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold" } }
+	}
+});
+//#endregion
+export { timePickerStyles };
+
+//# sourceMappingURL=time-picker-styles.js.map

package/dist/components/time-picker/time-picker-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const timePickerStyles = tv({\n  slots: {\n    root: 'bg-white overflow-hidden text-rui-text p-3 dark:bg-rui-grey-900',\n    digitalDisplay: 'mb-2 text-center',\n    digit: 'text-2xl font-semibold cursor-pointer',\n    clockFace: 'relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200 dark:border-rui-grey-800',\n    centerDot: 'absolute rounded-full bg-rui-primary w-3 h-3',\n    clockHand: 'absolute w-[1.5px] bg-rui-primary rounded-full',\n    clockHandCircle: 'absolute border-2 border-rui-primary',\n    clockNumber: [\n      'absolute text-center text-sm font-medium w-8 h-8',\n      'flex items-center justify-center',\n      'hover:bg-rui-primary-lighter cursor-pointer rounded-full',\n    ].join(' '),\n  },\n  variants: {\n    bordered: {\n      true: {\n        root: 'rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800',\n      },\n    },\n    active: {\n      true: {\n        digit: 'text-rui-primary',\n      },\n    },\n    selected: {\n      true: {\n        clockNumber: 'bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold',\n      },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,gBAAgB;EAChB,OAAO;EACP,WAAW;EACX,WAAW;EACX,WAAW;EACX,iBAAiB;EACjB,aAAa;GACX;GACA;GACA;GACD,CAAC,KAAK,IAAI;EACZ;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,MAAM,4EACP,EACF;EACD,QAAQ,EACN,MAAM,EACJ,OAAO,oBACR,EACF;EACD,UAAU,EACR,MAAM,EACJ,aAAa,6EACd,EACF;EACF;CACF,CAAC"}

package/dist/composables/breakpoint.js

@@ -1,44 +1,39 @@
-import { useWindowSize, breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import { camelCase } from "scule";
 import { assert } from "../utils/assert.js";
 import { computed } from "vue";
-import { get } from "@vueuse/shared";
+import { breakpointsTailwind, useBreakpoints, useWindowSize } from "@vueuse/core";
+import { get as get$1 } from "@vueuse/shared";
+import { camelCase } from "scule";
+//#region src/composables/breakpoint.ts
 function useBreakpoint() {
-  const { width } = useWindowSize();
-  const breakpointList = {
-    xs: 0,
-    ...breakpointsTailwind
-  };
-  const breakpoints = useBreakpoints(breakpointList);
-  const getKeys = Object.keys;
-  const list = getKeys(breakpointList);
-  const rawSizes = list.map((breakpoint, index) => {
-    if (index < list.length - 1) {
-      const nextBreakpoint = list[index + 1];
-      assert(nextBreakpoint);
-      return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];
-    }
-    return [breakpoint, breakpoints[breakpoint]];
-  });
-  const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);
-  const sizesUp = list.map((breakpoint) => [
-    camelCase(`is_${breakpoint}_and_up`),
-    breakpoints.greaterOrEqual(breakpoint)
-  ]);
-  const sizesDown = list.map((breakpoint) => [
-    camelCase(`is_${breakpoint}_and_down`),
-    breakpoints.smaller(breakpoint)
-  ]);
-  const name = computed(() => rawSizes.find((item) => get(item[1]))?.[0] || "");
-  return {
-    ...Object.fromEntries(sizes),
-    ...Object.fromEntries(sizesUp),
-    ...Object.fromEntries(sizesDown),
-    name,
-    width
-  };
+	const { width } = useWindowSize();
+	const breakpointList = {
+		xs: 0,
+		...breakpointsTailwind
+	};
+	const breakpoints = useBreakpoints(breakpointList);
+	const getKeys = Object.keys;
+	const list = getKeys(breakpointList);
+	const rawSizes = list.map((breakpoint, index) => {
+		if (index < list.length - 1) {
+			const nextBreakpoint = list[index + 1];
+			assert(nextBreakpoint);
+			return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];
+		}
+		return [breakpoint, breakpoints[breakpoint]];
+	});
+	const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);
+	const sizesUp = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_up`), breakpoints.greaterOrEqual(breakpoint)]);
+	const sizesDown = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_down`), breakpoints.smaller(breakpoint)]);
+	const name = computed(() => rawSizes.find((item) => get$1(item[1]))?.[0] || "");
+	return {
+		...Object.fromEntries(sizes),
+		...Object.fromEntries(sizesUp),
+		...Object.fromEntries(sizesDown),
+		name,
+		width
+	};
 }
-export {
-  useBreakpoint
-};
-//# sourceMappingURL=breakpoint.js.map
+//#endregion
+export { useBreakpoint };
+
+//# sourceMappingURL=breakpoint.js.map

package/dist/composables/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n  const { width } = useWindowSize();\n\n  const breakpointList = {\n    xs: 0,\n    ...breakpointsTailwind,\n  } as const;\n\n  type Breakpoint = keyof typeof breakpointList;\n\n  const breakpoints = useBreakpoints(breakpointList);\n\n  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n  const list = getKeys(breakpointList);\n\n  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n    if (index < list.length - 1) {\n      const nextBreakpoint = list[index + 1];\n      assert(nextBreakpoint);\n      return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n    }\n    return [breakpoint, breakpoints[breakpoint]];\n  });\n\n  const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n  const sizesUp = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_up`),\n    breakpoints.greaterOrEqual(breakpoint),\n  ]);\n\n  const sizesDown = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_down`),\n    breakpoints.smaller(breakpoint),\n  ]);\n\n  const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n  return {\n    ...Object.fromEntries(sizes),\n    ...Object.fromEntries(sizesUp),\n    ...Object.fromEntries(sizesDown),\n    name,\n    width,\n  };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,gBAAgB;AAC9B,QAAM,EAAE,MAAA,IAAU,cAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA;AAKL,QAAM,cAAc,eAAe,cAAc;AAEjD,QAAM,UAAU,OAAO;AAEvB,QAAM,OAAO,QAAQ,cAAc;AAEnC,QAAM,WAAyC,KAAK,IAAI,CAAC,YAAY,UAAU;AAC7E,QAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B,YAAM,iBAAiB,KAAK,QAAQ,CAAC;AACrC,aAAO,cAAc;AACrB,aAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;AAAA,IACrE;AACA,WAAO,CAAC,YAAY,YAAY,UAAU,CAAC;AAAA,EAC7C,CAAC;AAED,QAAM,QAAQ,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM,CAAC,UAAU,MAAM,UAAU,EAAE,GAAG,KAAK,CAAC;AAE1F,QAAM,UAAU,KAAK,IAAI,CAAA,eAAc;AAAA,IACrC,UAAU,MAAM,UAAU,SAAS;AAAA,IACnC,YAAY,eAAe,UAAU;AAAA,EAAA,CACtC;AAED,QAAM,YAAY,KAAK,IAAI,CAAA,eAAc;AAAA,IACvC,UAAU,MAAM,UAAU,WAAW;AAAA,IACrC,YAAY,QAAQ,UAAU;AAAA,EAAA,CAC/B;AAED,QAAM,OAAO,SAAiB,MAAM,SAAS,KAAK,CAAA,SAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;AAElF,SAAO;AAAA,IACL,GAAG,OAAO,YAAY,KAAK;AAAA,IAC3B,GAAG,OAAO,YAAY,OAAO;AAAA,IAC7B,GAAG,OAAO,YAAY,SAAS;AAAA,IAC/B;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"breakpoint.js","names":[],"sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n  const { width } = useWindowSize();\n\n  const breakpointList = {\n    xs: 0,\n    ...breakpointsTailwind,\n  } as const;\n\n  type Breakpoint = keyof typeof breakpointList;\n\n  const breakpoints = useBreakpoints(breakpointList);\n\n  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n  const list = getKeys(breakpointList);\n\n  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n    if (index < list.length - 1) {\n      const nextBreakpoint = list[index + 1];\n      assert(nextBreakpoint);\n      return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n    }\n    return [breakpoint, breakpoints[breakpoint]];\n  });\n\n  const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n  const sizesUp = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_up`),\n    breakpoints.greaterOrEqual(breakpoint),\n  ]);\n\n  const sizesDown = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_down`),\n    breakpoints.smaller(breakpoint),\n  ]);\n\n  const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n  return {\n    ...Object.fromEntries(sizes),\n    ...Object.fromEntries(sizesUp),\n    ...Object.fromEntries(sizesDown),\n    name,\n    width,\n  };\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,EAAE,UAAU,eAAe;CAEjC,MAAM,iBAAiB;EACrB,IAAI;EACJ,GAAG;EACJ;CAID,MAAM,cAAc,eAAe,eAAe;CAElD,MAAM,UAAU,OAAO;CAEvB,MAAM,OAAO,QAAQ,eAAe;CAEpC,MAAM,WAAyC,KAAK,KAAK,YAAY,UAAU;AAC7E,MAAI,QAAQ,KAAK,SAAS,GAAG;GAC3B,MAAM,iBAAiB,KAAK,QAAQ;AACpC,UAAO,eAAe;AACtB,UAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,eAAe,CAAC;;AAEtE,SAAO,CAAC,YAAY,YAAY,YAAY;GAC5C;CAEF,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,WAAW,CAAC,UAAU,MAAM,aAAa,EAAE,MAAM,CAAC;CAE3F,MAAM,UAAU,KAAK,KAAI,eAAc,CACrC,UAAU,MAAM,WAAW,SAAS,EACpC,YAAY,eAAe,WAAW,CACvC,CAAC;CAEF,MAAM,YAAY,KAAK,KAAI,eAAc,CACvC,UAAU,MAAM,WAAW,WAAW,EACtC,YAAY,QAAQ,WAAW,CAChC,CAAC;CAEF,MAAM,OAAO,eAAuB,SAAS,MAAK,SAAQ,MAAI,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG;AAEnF,QAAO;EACL,GAAG,OAAO,YAAY,MAAM;EAC5B,GAAG,OAAO,YAAY,QAAQ;EAC9B,GAAG,OAAO,YAAY,UAAU;EAChC;EACA;EACD"}