@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Input/Clock/Clock.js

@@ -0,0 +1,242 @@
+import { access, accessSignal } from "../../../Utils/propUtils.js";
+import { NavigatorUtils } from "../../../Abstracts/Navigator/Navigator.utils.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { ClockUtils } from "./Clock.utils.js";
+import { clockColumn, clockList, clockOption, clockRoot, clockUnit } from "./Clock.css.js";
+import { Index, createEffect, createMemo, createSignal, createUniqueId } from "solid-js";
+import { TimeUtils } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/Clock/Clock.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=option>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=group>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div><div aria-hidden=true></div><div role=listbox>`);
+var DEFAULT_CLOCK_GAP = 0;
+var DEFAULT_CLOCK_STEP = 1;
+var NO_CLOCK_STEPS = {};
+var SELECT_KEYS = ["Enter", " "];
+var LABEL_DIGITS = 2;
+var fromDate = (date) => ({
+	hour: date.getHours(),
+	minute: date.getMinutes(),
+	second: date.getSeconds()
+});
+var ClockOptionControl = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$click = () => {
+			if (getIsDisabled()) return;
+			props.onSelect();
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, clockOption);
+		insert(_el$, () => props.renderContent(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.ariaLabel), _v$3 = access(props.flags).isSelected, _v$4 = access(props.flags).isNow ? "time" : void 0, _v$5 = getIsDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-selected", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-current", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "aria-disabled", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+var Clock = (props) => {
+	const valueSignal = accessSignal(() => props.valueSignal);
+	const groupId = createUniqueId();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getOptionRefs, setOptionRefs] = createSignal({});
+	const [getHighlighted, setHighlighted] = createSignal();
+	const [getHighlightedUnit, setHighlightedUnit] = createSignal();
+	const getIsTwelveHour = createMemo(() => access(props.isTwelveHour) ?? false);
+	const getHasSeconds = createMemo(() => access(props.hasSeconds) ?? false);
+	const getGap = () => `${access(props.gap) ?? DEFAULT_CLOCK_GAP}px`;
+	const getNow = createMemo(() => access(props.now) ?? fromDate(/* @__PURE__ */ new Date()));
+	const withShape = (time) => getHasSeconds() ? {
+		...time,
+		second: time.second ?? 0
+	} : time;
+	const getBase = createMemo(() => withShape(valueSignal[0]() ?? TimeUtils.clamp(getNow(), access(props.min), access(props.max))));
+	const getUnits = createMemo(() => {
+		const units = ["hour", "minute"];
+		if (getHasSeconds()) units.push("second");
+		if (getIsTwelveHour()) units.push("meridiem");
+		return units;
+	});
+	const getMeridiemNames = createMemo(() => ClockUtils.getMeridiemNames(access(props.locale)));
+	const getColumns = createMemo(() => {
+		const isTwelveHour = getIsTwelveHour();
+		const base = getBase();
+		const steps = access(props.steps) ?? NO_CLOCK_STEPS;
+		const meridiemNames = getMeridiemNames();
+		return getUnits().map((unit) => {
+			const step = unit === "meridiem" ? DEFAULT_CLOCK_STEP : steps[unit] ?? DEFAULT_CLOCK_STEP;
+			const readings = ClockUtils.getReadings(unit, isTwelveHour, step);
+			return {
+				unit,
+				readings,
+				options: readings.map((reading) => ({
+					unit,
+					time: ClockUtils.withReading(unit, reading, base, isTwelveHour),
+					label: unit === "meridiem" ? meridiemNames[ClockUtils.MERIDIEMS[reading]] : String(reading).padStart(LABEL_DIGITS, "0")
+				}))
+			};
+		});
+	});
+	const getRovingTime = createMemo(() => getHighlighted() ?? getBase());
+	const getRovingUnit = createMemo(() => {
+		const unit = getHighlightedUnit();
+		const units = getUnits();
+		return unit && units.includes(unit) ? unit : units[0];
+	});
+	const getRovingIndex = (column) => ClockUtils.getNearestIndex(column.readings, ClockUtils.getReading(column.unit, getRovingTime(), getIsTwelveHour()));
+	const getIsTimeDisabled = (time) => (access(props.isDisabled) ?? false) || !TimeUtils.getIsInRange(time, access(props.min), access(props.max)) || (props.computeIsTimeDisabled?.(time) ?? false);
+	const setOptionRef = (unit, index, element) => {
+		setOptionRefs((prev) => ({
+			...prev,
+			[`${unit}:${index}`]: element
+		}));
+	};
+	const pick = (option) => {
+		if (getIsTimeDisabled(option.time)) return;
+		setHighlighted(() => option.time);
+		setHighlightedUnit(option.unit);
+		valueSignal[1](() => option.time);
+	};
+	createEffect(() => {
+		const value = valueSignal[0]();
+		if (!value) return;
+		setHighlighted(() => value);
+	});
+	createEffect(() => {
+		const refs = getOptionRefs();
+		getColumns().forEach((column) => {
+			refs[`${column.unit}:${getRovingIndex(column)}`]?.scrollIntoView({ block: "nearest" });
+		});
+	});
+	createEffect(() => {
+		const column = getColumns().find((candidate) => candidate.unit === getRovingUnit());
+		const element = column && getOptionRefs()[`${column.unit}:${getRovingIndex(column)}`];
+		const root = getRootRef();
+		if (!element || !root?.contains(document.activeElement) || root === document.activeElement) return;
+		element.focus();
+	});
+	const handleKeyDown = (e) => {
+		const columns = getColumns();
+		const unitIndex = columns.findIndex((column) => column.unit === getRovingUnit());
+		const column = columns[unitIndex];
+		if (!column) return;
+		const index = getRovingIndex(column);
+		if (SELECT_KEYS.includes(e.key)) {
+			e.preventDefault();
+			pick(column.options[index]);
+			return;
+		}
+		const nextIndex = NavigatorUtils.computeNextPosition(e.key, index, column.readings.length, { orientation: "column" });
+		if (nextIndex !== void 0) {
+			e.preventDefault();
+			setHighlighted(() => ClockUtils.withReading(column.unit, column.readings[nextIndex], getRovingTime(), getIsTwelveHour()));
+			return;
+		}
+		const nextUnitIndex = NavigatorUtils.computeNextPosition(e.key, unitIndex, columns.length, {
+			orientation: "row",
+			hasEdgeKeys: false
+		});
+		if (nextUnitIndex === void 0) return;
+		e.preventDefault();
+		setHighlightedUnit(columns[nextUnitIndex].unit);
+	};
+	const renderOptions = (getColumn) => createComponent(Index, {
+		get each() {
+			return getColumn().options;
+		},
+		children: (getOption, optionIndex) => {
+			const getIsHighlighted = () => getColumn().unit === getRovingUnit() && optionIndex === getRovingIndex(getColumn());
+			const getIsAt = (time) => time !== void 0 && ClockUtils.getReading(getColumn().unit, time, getIsTwelveHour()) === getColumn().readings[optionIndex];
+			return createComponent(InteractionWrapper, {
+				sizing: "fill",
+				isDisabled: () => getIsTimeDisabled(getOption().time),
+				isTabbable: getIsHighlighted,
+				extraFlags: () => ({
+					option: getOption(),
+					isSelected: getIsAt(valueSignal[0]()),
+					isNow: getIsAt(getNow()),
+					isHighlighted: getIsHighlighted()
+				}),
+				ref: (element) => setOptionRef(getColumn().unit, optionIndex, element),
+				renderControl: (setElementRef, getRenderProps) => createComponent(ClockOptionControl, {
+					ref(r$) {
+						var _ref$ = setElementRef;
+						typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+					},
+					id: () => `${groupId}-${getColumn().unit}-${optionIndex}`,
+					flags: getRenderProps,
+					ariaLabel: () => getOption().label,
+					renderContent: (getOptionFlags) => props.renderOption(getOption, getOptionFlags),
+					onSelect: () => pick(getOption())
+				})
+			});
+		}
+	});
+	return (() => {
+		var _el$2 = _tmpl$2();
+		_el$2.$$keydown = handleKeyDown;
+		use(setRootRef, _el$2);
+		setAttribute(_el$2, "id", groupId);
+		className(_el$2, clockRoot);
+		insert(_el$2, createComponent(Index, {
+			get each() {
+				return getColumns();
+			},
+			children: (getColumn) => {
+				const getUnit = createMemo(() => getColumn().unit);
+				const getName = createMemo(() => ClockUtils.getUnitName(getUnit(), access(props.locale)));
+				return (() => {
+					var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+					className(_el$3, clockColumn);
+					className(_el$4, clockUnit);
+					insert(_el$4, () => props.renderUnit?.(getName(), getUnit()));
+					className(_el$5, clockList);
+					insert(_el$5, () => props.renderColumn?.(() => renderOptions(getColumn), getUnit()) ?? renderOptions(getColumn));
+					effect((_p$) => {
+						var _v$9 = getGap(), _v$0 = getName(), _v$1 = access(props.isDisabled) || void 0;
+						_v$9 !== _p$.e && setStyleProperty(_el$5, "gap", _p$.e = _v$9);
+						_v$0 !== _p$.t && setAttribute(_el$5, "aria-label", _p$.t = _v$0);
+						_v$1 !== _p$.a && setAttribute(_el$5, "aria-disabled", _p$.a = _v$1);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0
+					});
+					return _el$3;
+				})();
+			}
+		}));
+		effect((_p$) => {
+			var _v$6 = getGap(), _v$7 = access(props.ariaLabel), _v$8 = access(props.isDisabled) || void 0;
+			_v$6 !== _p$.e && setStyleProperty(_el$2, "gap", _p$.e = _v$6);
+			_v$7 !== _p$.t && setAttribute(_el$2, "aria-label", _p$.t = _v$7);
+			_v$8 !== _p$.a && setAttribute(_el$2, "aria-disabled", _p$.a = _v$8);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["click", "keydown"]);
+//#endregion
+export { Clock };
+
+//# sourceMappingURL=Clock.js.map

package/dist/Fundamentals/Input/Clock/Clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clock.js","names":["Accessor","Index","createEffect","createMemo","createSignal","createUniqueId","TimeUtils","TimeValue","NavigatorUtils","access","accessSignal","InteractionWrapper","ClockOption","ClockOptionProps","ClockProps","ClockRenderProps","ClockSteps","ClockUnit","ClockUtils","styles","DEFAULT_CLOCK_GAP","DEFAULT_CLOCK_STEP","NO_CLOCK_STEPS","SELECT_KEYS","LABEL_DIGITS","ClockColumn","unit","readings","options","fromDate","date","Date","hour","getHours","minute","getMinutes","second","getSeconds","ClockOptionControl","props","getIsDisabled","flags","isDisabled","_el$","_tmpl$","$$click","onSelect","_$use","element","ref","_$className","clockOption","_$insert","renderContent","_$effect","_p$","_v$","id","_v$2","ariaLabel","_v$3","isSelected","_v$4","isNow","undefined","_v$5","e","_$setAttribute","t","a","o","i","Clock","valueSignal","groupId","getRootRef","setRootRef","HTMLElement","getOptionRefs","setOptionRefs","Record","getHighlighted","setHighlighted","getHighlightedUnit","setHighlightedUnit","getIsTwelveHour","isTwelveHour","getHasSeconds","hasSeconds","getGap","gap","getNow","now","withShape","time","getBase","clamp","min","max","getUnits","units","push","getMeridiemNames","locale","getColumns","base","steps","meridiemNames","map","step","getReadings","reading","withReading","label","MERIDIEMS","String","padStart","getRovingTime","getRovingUnit","includes","getRovingIndex","column","getNearestIndex","getReading","getIsTimeDisabled","getIsInRange","computeIsTimeDisabled","setOptionRef","index","prev","pick","option","value","refs","forEach","scrollIntoView","block","find","candidate","root","contains","document","activeElement","focus","handleKeyDown","KeyboardEvent","columns","unitIndex","findIndex","key","preventDefault","nextIndex","computeNextPosition","length","orientation","nextUnitIndex","hasEdgeKeys","renderOptions","getColumn","_$createComponent","each","children","getOption","optionIndex","getIsHighlighted","getIsAt","sizing","isTabbable","extraFlags","isHighlighted","renderControl","setElementRef","getRenderProps","r$","_ref$","getOptionFlags","renderOption","_el$2","_tmpl$2","$$keydown","clockRoot","getUnit","getName","getUnitName","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","clockColumn","clockUnit","renderUnit","clockList","renderColumn","_v$9","_v$0","_v$1","_$setStyleProperty","_v$6","_v$7","_v$8","_$delegateEvents"],"sources":["../../../../src/Fundamentals/Input/Clock/Clock.tsx"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { Index, createEffect, createMemo, createSignal, createUniqueId } from \"solid-js\";\n\nimport { TimeUtils } from \"@thewaver/ss-utils\";\nimport type { TimeValue } from \"@thewaver/ss-utils\";\n\nimport { NavigatorUtils } from \"../../../Abstracts/Navigator/Navigator.utils\";\nimport { access, accessSignal } from \"../../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\nimport type { ClockOption, ClockOptionProps, ClockProps, ClockRenderProps, ClockSteps, ClockUnit } from \"./Clock.types\";\nimport { ClockUtils } from \"./Clock.utils\";\n\nimport * as styles from \"./Clock.css\";\n\nconst DEFAULT_CLOCK_GAP = 0;\nconst DEFAULT_CLOCK_STEP = 1;\nconst NO_CLOCK_STEPS: ClockSteps = {};\nconst SELECT_KEYS = [\"Enter\", \" \"];\nconst LABEL_DIGITS = 2;\n\ntype ClockColumn = {\n    unit: ClockUnit;\n    readings: number[];\n    options: ClockOption[];\n};\n\nconst fromDate = (date: Date): TimeValue => ({\n    hour: date.getHours(),\n    minute: date.getMinutes(),\n    second: date.getSeconds(),\n});\n\nconst ClockOptionControl = (props: ClockOptionProps) => {\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    return (\n        <div\n            id={access(props.id)}\n            ref={(element) => props.ref?.(element)}\n            class={styles.clockOption}\n            role=\"option\"\n            aria-label={access(props.ariaLabel)}\n            aria-selected={access(props.flags).isSelected}\n            aria-current={access(props.flags).isNow ? \"time\" : undefined}\n            aria-disabled={getIsDisabled() || undefined}\n            onClick={() => {\n                if (getIsDisabled()) return;\n\n                props.onSelect();\n            }}\n        >\n            {props.renderContent(() => access(props.flags))}\n        </div>\n    );\n};\n\nexport const Clock = (props: ClockProps) => {\n    const valueSignal = accessSignal(() => props.valueSignal);\n\n    const groupId = createUniqueId();\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getOptionRefs, setOptionRefs] = createSignal<Record<string, HTMLElement | undefined>>({});\n    const [getHighlighted, setHighlighted] = createSignal<TimeValue | undefined>();\n    const [getHighlightedUnit, setHighlightedUnit] = createSignal<ClockUnit | undefined>();\n\n    const getIsTwelveHour = createMemo(() => access(props.isTwelveHour) ?? false);\n\n    const getHasSeconds = createMemo(() => access(props.hasSeconds) ?? false);\n\n    const getGap = () => `${access(props.gap) ?? DEFAULT_CLOCK_GAP}px`;\n\n    const getNow = createMemo(() => access(props.now) ?? fromDate(new Date()));\n\n    const withShape = (time: TimeValue) => (getHasSeconds() ? { ...time, second: time.second ?? 0 } : time);\n\n    const getBase = createMemo(() =>\n        withShape(valueSignal[0]() ?? TimeUtils.clamp(getNow(), access(props.min), access(props.max))),\n    );\n\n    const getUnits = createMemo<ClockUnit[]>(() => {\n        const units: ClockUnit[] = [\"hour\", \"minute\"];\n\n        if (getHasSeconds()) units.push(\"second\");\n        if (getIsTwelveHour()) units.push(\"meridiem\");\n\n        return units;\n    });\n\n    const getMeridiemNames = createMemo(() => ClockUtils.getMeridiemNames(access(props.locale)));\n\n    const getColumns = createMemo<ClockColumn[]>(() => {\n        const isTwelveHour = getIsTwelveHour();\n        const base = getBase();\n        const steps = access(props.steps) ?? NO_CLOCK_STEPS;\n        const meridiemNames = getMeridiemNames();\n\n        return getUnits().map((unit) => {\n            const step = unit === \"meridiem\" ? DEFAULT_CLOCK_STEP : (steps[unit] ?? DEFAULT_CLOCK_STEP);\n            const readings = ClockUtils.getReadings(unit, isTwelveHour, step);\n\n            return {\n                unit,\n                readings,\n                options: readings.map((reading) => ({\n                    unit,\n                    time: ClockUtils.withReading(unit, reading, base, isTwelveHour),\n                    label:\n                        unit === \"meridiem\"\n                            ? meridiemNames[ClockUtils.MERIDIEMS[reading]]\n                            : String(reading).padStart(LABEL_DIGITS, \"0\"),\n                })),\n            };\n        });\n    });\n\n    const getRovingTime = createMemo(() => getHighlighted() ?? getBase());\n\n    const getRovingUnit = createMemo(() => {\n        const unit = getHighlightedUnit();\n        const units = getUnits();\n\n        return unit && units.includes(unit) ? unit : units[0];\n    });\n\n    const getRovingIndex = (column: ClockColumn) =>\n        ClockUtils.getNearestIndex(\n            column.readings,\n            ClockUtils.getReading(column.unit, getRovingTime(), getIsTwelveHour()),\n        );\n\n    const getIsTimeDisabled = (time: TimeValue) =>\n        (access(props.isDisabled) ?? false) ||\n        !TimeUtils.getIsInRange(time, access(props.min), access(props.max)) ||\n        (props.computeIsTimeDisabled?.(time) ?? false);\n\n    const setOptionRef = (unit: ClockUnit, index: number, element: HTMLElement) => {\n        setOptionRefs((prev) => ({ ...prev, [`${unit}:${index}`]: element }));\n    };\n\n    const pick = (option: ClockOption) => {\n        if (getIsTimeDisabled(option.time)) return;\n\n        setHighlighted(() => option.time);\n        setHighlightedUnit(option.unit);\n        valueSignal[1](() => option.time);\n    };\n\n    createEffect(() => {\n        const value = valueSignal[0]();\n\n        if (!value) return;\n\n        setHighlighted(() => value);\n    });\n\n    createEffect(() => {\n        const refs = getOptionRefs();\n\n        getColumns().forEach((column) => {\n            refs[`${column.unit}:${getRovingIndex(column)}`]?.scrollIntoView({ block: \"nearest\" });\n        });\n    });\n\n    createEffect(() => {\n        const column = getColumns().find((candidate) => candidate.unit === getRovingUnit());\n        const element = column && getOptionRefs()[`${column.unit}:${getRovingIndex(column)}`];\n        const root = getRootRef();\n\n        if (!element || !root?.contains(document.activeElement) || root === document.activeElement) return;\n\n        element.focus();\n    });\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n        const columns = getColumns();\n        const unitIndex = columns.findIndex((column) => column.unit === getRovingUnit());\n        const column = columns[unitIndex];\n\n        if (!column) return;\n\n        const index = getRovingIndex(column);\n\n        if (SELECT_KEYS.includes(e.key)) {\n            e.preventDefault();\n            pick(column.options[index]);\n\n            return;\n        }\n\n        const nextIndex = NavigatorUtils.computeNextPosition(e.key, index, column.readings.length, {\n            orientation: \"column\",\n        });\n\n        if (nextIndex !== undefined) {\n            e.preventDefault();\n            setHighlighted(() =>\n                ClockUtils.withReading(column.unit, column.readings[nextIndex], getRovingTime(), getIsTwelveHour()),\n            );\n\n            return;\n        }\n\n        const nextUnitIndex = NavigatorUtils.computeNextPosition(e.key, unitIndex, columns.length, {\n            orientation: \"row\",\n            hasEdgeKeys: false,\n        });\n\n        if (nextUnitIndex === undefined) return;\n\n        e.preventDefault();\n        setHighlightedUnit(columns[nextUnitIndex].unit);\n    };\n\n    const renderOptions = (getColumn: Accessor<ClockColumn>) => (\n        <Index each={getColumn().options}>\n            {(getOption, optionIndex) => {\n                const getIsHighlighted = () =>\n                    getColumn().unit === getRovingUnit() && optionIndex === getRovingIndex(getColumn());\n\n                const getIsAt = (time: TimeValue | undefined) =>\n                    time !== undefined &&\n                    ClockUtils.getReading(getColumn().unit, time, getIsTwelveHour()) ===\n                        getColumn().readings[optionIndex];\n\n                return (\n                    <InteractionWrapper\n                        sizing={\"fill\"}\n                        isDisabled={() => getIsTimeDisabled(getOption().time)}\n                        isTabbable={getIsHighlighted}\n                        extraFlags={(): ClockRenderProps => ({\n                            option: getOption(),\n                            isSelected: getIsAt(valueSignal[0]()),\n                            isNow: getIsAt(getNow()),\n                            isHighlighted: getIsHighlighted(),\n                        })}\n                        ref={(element) => setOptionRef(getColumn().unit, optionIndex, element)}\n                        renderControl={(setElementRef, getRenderProps) => (\n                            <ClockOptionControl\n                                ref={setElementRef}\n                                id={() => `${groupId}-${getColumn().unit}-${optionIndex}`}\n                                flags={getRenderProps}\n                                ariaLabel={() => getOption().label}\n                                renderContent={(getOptionFlags) => props.renderOption(getOption, getOptionFlags)}\n                                onSelect={() => pick(getOption())}\n                            />\n                        )}\n                    />\n                );\n            }}\n        </Index>\n    );\n\n    return (\n        <div\n            ref={setRootRef}\n            id={groupId}\n            class={styles.clockRoot}\n            style={{ gap: getGap() }}\n            role=\"group\"\n            aria-label={access(props.ariaLabel)}\n            aria-disabled={access(props.isDisabled) || undefined}\n            onKeyDown={handleKeyDown}\n        >\n            <Index each={getColumns()}>\n                {(getColumn) => {\n                    const getUnit = createMemo(() => getColumn().unit);\n                    const getName = createMemo(() => ClockUtils.getUnitName(getUnit(), access(props.locale)));\n\n                    return (\n                        <div class={styles.clockColumn}>\n                            <div class={styles.clockUnit} aria-hidden=\"true\">\n                                {props.renderUnit?.(getName(), getUnit())}\n                            </div>\n\n                            <div\n                                class={styles.clockList}\n                                style={{ gap: getGap() }}\n                                role=\"listbox\"\n                                aria-label={getName()}\n                                aria-disabled={access(props.isDisabled) || undefined}\n                            >\n                                {props.renderColumn?.(() => renderOptions(getColumn), getUnit()) ??\n                                    renderOptions(getColumn)}\n                            </div>\n                        </div>\n                    );\n                }}\n            </Index>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Input/Clock/Clock.utils.js

@@ -0,0 +1,74 @@
+import { TimeUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/Input/Clock/Clock.utils.ts
+var NAME_FIELDS = {
+	hour: "hour",
+	minute: "minute",
+	second: "second",
+	meridiem: "dayPeriod"
+};
+var UNIT_LENGTHS = {
+	hour: 24,
+	minute: 60,
+	second: 60,
+	meridiem: 2
+};
+var TWELVE_HOUR_LENGTH = 12;
+var MERIDIEM_ANCHOR_HOURS = {
+	am: 9,
+	pm: 21
+};
+var MERIDIEM_ANCHOR_YEAR = 2021;
+var MERIDIEM_ANCHOR_MONTH = 7;
+var MERIDIEM_ANCHOR_DAY = 1;
+var ClockUtils;
+(function(_ClockUtils) {
+	const MERIDIEMS = _ClockUtils.MERIDIEMS = ["am", "pm"];
+	_ClockUtils.getUnitName = (unit, locale) => new Intl.DisplayNames(locale ?? [], { type: "dateTimeField" }).of(NAME_FIELDS[unit]) ?? unit;
+	_ClockUtils.getMeridiemNames = (locale) => {
+		const formatter = new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			hour12: true
+		});
+		const read = (hour) => formatter.formatToParts(new Date(MERIDIEM_ANCHOR_YEAR, MERIDIEM_ANCHOR_MONTH, MERIDIEM_ANCHOR_DAY, hour)).find((part) => part.type === "dayPeriod")?.value ?? "";
+		return {
+			am: read(MERIDIEM_ANCHOR_HOURS.am),
+			pm: read(MERIDIEM_ANCHOR_HOURS.pm)
+		};
+	};
+	_ClockUtils.getReading = (unit, time, isTwelveHour) => {
+		if (unit === "hour") return isTwelveHour ? TimeUtils.getTwelveHour(time) : time.hour;
+		if (unit === "minute") return time.minute;
+		if (unit === "second") return time.second ?? 0;
+		return MERIDIEMS.indexOf(TimeUtils.getMeridiem(time));
+	};
+	_ClockUtils.withReading = (unit, reading, time, isTwelveHour) => {
+		if (unit === "meridiem") return TimeUtils.withMeridiem(time, MERIDIEMS[reading]);
+		if (unit === "minute") return {
+			...time,
+			minute: reading
+		};
+		if (unit === "second") return {
+			...time,
+			second: reading
+		};
+		if (!isTwelveHour) return {
+			...time,
+			hour: reading
+		};
+		return TimeUtils.fromTwelveHour(reading, time.minute, TimeUtils.getMeridiem(time), time.second) ?? time;
+	};
+	_ClockUtils.getReadings = (unit, isTwelveHour, step) => {
+		const isTwelveHourColumn = unit === "hour" && isTwelveHour;
+		const length = isTwelveHourColumn ? TWELVE_HOUR_LENGTH : UNIT_LENGTHS[unit];
+		const stride = unit === "meridiem" ? 1 : Math.max(1, Math.floor(step));
+		return Array.from({ length: Math.ceil(length / stride) }, (_, index) => {
+			const reading = index * stride;
+			return isTwelveHourColumn && reading === 0 ? TWELVE_HOUR_LENGTH : reading;
+		});
+	};
+	_ClockUtils.getNearestIndex = (readings, target) => readings.reduce((best, reading, index) => Math.abs(reading - target) < Math.abs(readings[best] - target) ? index : best, 0);
+})(ClockUtils || (ClockUtils = {}));
+//#endregion
+export { ClockUtils };
+
+//# sourceMappingURL=Clock.utils.js.map

package/dist/Fundamentals/Input/Clock/Clock.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clock.utils.js","names":[],"sources":["../../../../src/Fundamentals/Input/Clock/Clock.utils.ts"],"sourcesContent":["import { TimeUtils } from \"@thewaver/ss-utils\";\nimport type { TimeValue, TimeValueMeridiem } from \"@thewaver/ss-utils\";\n\nimport type { ClockUnit } from \"./Clock.types\";\n\nconst NAME_FIELDS: Record<ClockUnit, Intl.DateTimeFormatPartTypes> = {\n    hour: \"hour\",\n    minute: \"minute\",\n    second: \"second\",\n    meridiem: \"dayPeriod\",\n};\n\nconst UNIT_LENGTHS: Record<ClockUnit, number> = { hour: 24, minute: 60, second: 60, meridiem: 2 };\nconst TWELVE_HOUR_LENGTH = 12;\n\nconst MERIDIEM_ANCHOR_HOURS: Record<TimeValueMeridiem, number> = { am: 9, pm: 21 };\nconst MERIDIEM_ANCHOR_YEAR = 2021;\nconst MERIDIEM_ANCHOR_MONTH = 7;\nconst MERIDIEM_ANCHOR_DAY = 1;\n\nexport namespace ClockUtils {\n    export const MERIDIEMS: TimeValueMeridiem[] = [\"am\", \"pm\"];\n\n    export const getUnitName = (unit: ClockUnit, locale?: string) =>\n        new Intl.DisplayNames(locale ?? [], { type: \"dateTimeField\" }).of(NAME_FIELDS[unit]) ?? unit;\n\n    export const getMeridiemNames = (locale?: string): Record<TimeValueMeridiem, string> => {\n        const formatter = new Intl.DateTimeFormat(locale, { hour: \"numeric\", hour12: true });\n\n        const read = (hour: number) =>\n            formatter\n                .formatToParts(new Date(MERIDIEM_ANCHOR_YEAR, MERIDIEM_ANCHOR_MONTH, MERIDIEM_ANCHOR_DAY, hour))\n                .find((part) => part.type === \"dayPeriod\")?.value ?? \"\";\n\n        return { am: read(MERIDIEM_ANCHOR_HOURS.am), pm: read(MERIDIEM_ANCHOR_HOURS.pm) };\n    };\n\n    export const getReading = (unit: ClockUnit, time: TimeValue, isTwelveHour: boolean) => {\n        if (unit === \"hour\") return isTwelveHour ? TimeUtils.getTwelveHour(time) : time.hour;\n        if (unit === \"minute\") return time.minute;\n        if (unit === \"second\") return time.second ?? 0;\n\n        return MERIDIEMS.indexOf(TimeUtils.getMeridiem(time));\n    };\n\n    export const withReading = (\n        unit: ClockUnit,\n        reading: number,\n        time: TimeValue,\n        isTwelveHour: boolean,\n    ): TimeValue => {\n        if (unit === \"meridiem\") return TimeUtils.withMeridiem(time, MERIDIEMS[reading]);\n        if (unit === \"minute\") return { ...time, minute: reading };\n        if (unit === \"second\") return { ...time, second: reading };\n        if (!isTwelveHour) return { ...time, hour: reading };\n\n        return TimeUtils.fromTwelveHour(reading, time.minute, TimeUtils.getMeridiem(time), time.second) ?? time;\n    };\n\n    export const getReadings = (unit: ClockUnit, isTwelveHour: boolean, step: number) => {\n        const isTwelveHourColumn = unit === \"hour\" && isTwelveHour;\n        const length = isTwelveHourColumn ? TWELVE_HOUR_LENGTH : UNIT_LENGTHS[unit];\n        const stride = unit === \"meridiem\" ? 1 : Math.max(1, Math.floor(step));\n\n        return Array.from({ length: Math.ceil(length / stride) }, (_, index) => {\n            const reading = index * stride;\n\n            return isTwelveHourColumn && reading === 0 ? TWELVE_HOUR_LENGTH : reading;\n        });\n    };\n\n    export const getNearestIndex = (readings: number[], target: number) =>\n        readings.reduce(\n            (best, reading, index) => (Math.abs(reading - target) < Math.abs(readings[best] - target) ? index : best),\n            0,\n        );\n}\n"],"mappings":";;AAKA,IAAM,cAA+D;CACjE,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,UAAU;AACd;AAEA,IAAM,eAA0C;CAAE,MAAM;CAAI,QAAQ;CAAI,QAAQ;CAAI,UAAU;AAAE;AAChG,IAAM,qBAAqB;AAE3B,IAAM,wBAA2D;CAAE,IAAI;CAAG,IAAI;AAAG;AACjF,IAAM,uBAAuB;AAC7B,IAAM,wBAAwB;AAC9B,IAAM,sBAAsB;AAErB,IAAU;CAAV,SAAA,aAAA;CACI,MAAM,YAAA,YAAA,YAAiC,CAAC,MAAM,IAAI;CAE5C,YAAA,eAAe,MAAiB,WACzC,IAAI,KAAK,aAAa,UAAU,CAAC,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,GAAG,YAAY,KAAK,KAAK;CAE/E,YAAA,oBAAoB,WAAuD;EACpF,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ;GAAE,MAAM;GAAW,QAAQ;EAAK,CAAC;EAEnF,MAAM,QAAQ,SACV,UACK,cAAc,IAAI,KAAK,sBAAsB,uBAAuB,qBAAqB,IAAI,CAAC,CAAC,CAC/F,MAAM,SAAS,KAAK,SAAS,WAAW,CAAC,EAAE,SAAS;EAE7D,OAAO;GAAE,IAAI,KAAK,sBAAsB,EAAE;GAAG,IAAI,KAAK,sBAAsB,EAAE;EAAE;CACpF;CAEa,YAAA,cAAc,MAAiB,MAAiB,iBAA0B;EACnF,IAAI,SAAS,QAAQ,OAAO,eAAe,UAAU,cAAc,IAAI,IAAI,KAAK;EAChF,IAAI,SAAS,UAAU,OAAO,KAAK;EACnC,IAAI,SAAS,UAAU,OAAO,KAAK,UAAU;EAE7C,OAAO,UAAU,QAAQ,UAAU,YAAY,IAAI,CAAC;CACxD;CAEa,YAAA,eACT,MACA,SACA,MACA,iBACY;EACZ,IAAI,SAAS,YAAY,OAAO,UAAU,aAAa,MAAM,UAAU,QAAQ;EAC/E,IAAI,SAAS,UAAU,OAAO;GAAE,GAAG;GAAM,QAAQ;EAAQ;EACzD,IAAI,SAAS,UAAU,OAAO;GAAE,GAAG;GAAM,QAAQ;EAAQ;EACzD,IAAI,CAAC,cAAc,OAAO;GAAE,GAAG;GAAM,MAAM;EAAQ;EAEnD,OAAO,UAAU,eAAe,SAAS,KAAK,QAAQ,UAAU,YAAY,IAAI,GAAG,KAAK,MAAM,KAAK;CACvG;CAEa,YAAA,eAAe,MAAiB,cAAuB,SAAiB;EACjF,MAAM,qBAAqB,SAAS,UAAU;EAC9C,MAAM,SAAS,qBAAqB,qBAAqB,aAAa;EACtE,MAAM,SAAS,SAAS,aAAa,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC;EAErE,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,KAAK,SAAS,MAAM,EAAE,IAAI,GAAG,UAAU;GACpE,MAAM,UAAU,QAAQ;GAExB,OAAO,sBAAsB,YAAY,IAAI,qBAAqB;EACtE,CAAC;CACL;CAEa,YAAA,mBAAmB,UAAoB,WAChD,SAAS,QACJ,MAAM,SAAS,UAAW,KAAK,IAAI,UAAU,MAAM,IAAI,KAAK,IAAI,SAAS,QAAQ,MAAM,IAAI,QAAQ,MACpG,CACJ;AACP,EAAA,CAAA,eAAA,aAAA,CAAA,EAAD"}

package/dist/Fundamentals/Input/ColorArea/ColorArea.css.js

@@ -0,0 +1,8 @@
+/* empty css                             */
+//#region src/Fundamentals/Input/ColorArea/ColorArea.css.ts
+var colorAreaSurface = "fzo8zt0";
+var colorAreaAxis = "fzo8zt1";
+//#endregion
+export { colorAreaAxis, colorAreaSurface };
+
+//# sourceMappingURL=ColorArea.css.js.map

package/dist/Fundamentals/Input/ColorArea/ColorArea.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/ColorArea/ColorArea.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const colorAreaSurface = style({\n    position: \"relative\",\n    pointerEvents: \"all\",\n    touchAction: \"none\",\n    width: \"100%\",\n});\n\nexport const colorAreaAxis = style({\n    appearance: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n\n    width: \"1px !important\",\n    height: \"1px !important\",\n    minWidth: \"0 !important\",\n    margin: \"0 !important\",\n    padding: \"0 !important\",\n    border: \"none !important\",\n    borderRadius: \"0 !important\",\n    background: \"transparent !important\",\n    boxShadow: \"none !important\",\n    opacity: 0,\n    pointerEvents: \"none\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Input/ColorArea/ColorArea.js

@@ -0,0 +1,177 @@
+import { access, accessSignal } from "../../../Utils/propUtils.js";
+import { InteractionTracker } from "../../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { LabelUtils } from "../Label/Label.utils.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { colorAreaAxis, colorAreaSurface } from "./ColorArea.css.js";
+import { For, createRenderEffect, createSignal } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/ColorArea/ColorArea.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<input type=range min=0 max=1>`);
+var readFocusVisibleAxis = (element, axis) => InteractionTracker.computeIsFocusVisible(element) ? axis : void 0;
+var DEFAULT_COLOR_AREA_STEP = .01;
+var DEFAULT_COLOR_AREA_AXIS_LABELS = {
+	saturation: "Saturation",
+	brightness: "Brightness"
+};
+var AXES = ["saturation", "brightness"];
+var RATIO_MAX = 1;
+var PERCENT = 100;
+var getAxisRatio = (hsv, axis) => axis === "saturation" ? hsv.s : hsv.v;
+var ColorAreaElement = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const [getSurfaceRef, setSurfaceRef] = createSignal();
+	const [getAxisRefs, setAxisRefs] = createSignal({});
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const { getIsDragging } = InteractionTracker.trackDrag(getSurfaceRef, getIsDisabled, { onDrag: (ratio) => {
+		props.setAxis("saturation", ratio.x);
+		props.setAxis("brightness", RATIO_MAX - ratio.y);
+		getAxisRefs().saturation?.focus();
+	} });
+	createRenderEffect(() => {
+		props.setIsDragging(getIsDragging());
+	});
+	const syncAxis = (element, axis) => {
+		const value = `${getAxisRatio(access(props.hsv), axis)}`;
+		if (element.value === value) return;
+		element.value = value;
+	};
+	createRenderEffect(() => {
+		for (const axis of AXES) {
+			const element = getAxisRefs()[axis];
+			if (element) syncAxis(element, axis);
+		}
+	});
+	InteractionTracker.wrapExtraControls(() => AXES.map((axis) => getAxisRefs()[axis]), getIsDisabled, { getIsTabbable: props.isTabbable === void 0 ? void 0 : () => access(props.isTabbable) });
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.addEventListener("mouseleave", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseLeave?.(e);
+		});
+		_el$.addEventListener("mouseenter", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseEnter?.(e);
+		});
+		use((element) => {
+			setSurfaceRef(element);
+			props.ref?.(element);
+		}, _el$);
+		className(_el$, colorAreaSurface);
+		insert(_el$, () => props.renderContent(() => access(props.flags)), null);
+		insert(_el$, createComponent(For, {
+			each: AXES,
+			children: (axis) => (() => {
+				var _el$2 = _tmpl$2();
+				_el$2.addEventListener("blur", () => props.setFocusVisibleAxis(void 0));
+				_el$2.$$keydown = (e) => props.setFocusVisibleAxis(readFocusVisibleAxis(e.currentTarget, axis));
+				_el$2.addEventListener("focus", (e) => props.setFocusVisibleAxis(getIsDragging() ? void 0 : readFocusVisibleAxis(e.currentTarget, axis)));
+				_el$2.$$input = (e) => {
+					const element = e.currentTarget;
+					if (!getIsDisabled()) props.setAxis(axis, Number(element.value));
+					syncAxis(element, axis);
+				};
+				use((element) => setAxisRefs((prev) => ({
+					...prev,
+					[axis]: element
+				})), _el$2);
+				className(_el$2, colorAreaAxis);
+				effect((_p$) => {
+					var _v$5 = access(props.name) && `${access(props.name)}-${axis}`, _v$6 = access(props.step), _v$7 = access(props.axisLabels)[axis], _v$8 = `${Math.round(getAxisRatio(access(props.hsv), axis) * PERCENT)}%`, _v$9 = getIsDisabled() || void 0;
+					_v$5 !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$5);
+					_v$6 !== _p$.t && setAttribute(_el$2, "step", _p$.t = _v$6);
+					_v$7 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$7);
+					_v$8 !== _p$.o && setAttribute(_el$2, "aria-valuetext", _p$.o = _v$8);
+					_v$9 !== _p$.i && setAttribute(_el$2, "aria-disabled", _p$.i = _v$9);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0
+				});
+				return _el$2;
+			})()
+		}), null);
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = getAriaLabel(), _v$3 = getIsDisabled() || void 0, _v$4 = access(props.flags).hasError || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-disabled", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-invalid", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+var ColorArea = (props) => {
+	const hsvSignal = accessSignal(() => props.hsvSignal);
+	const [getFocusVisibleAxis, setFocusVisibleAxis] = createSignal();
+	const [getIsDragging, setIsDragging] = createSignal(false);
+	const setAxis = (axis, ratio) => {
+		const clamped = MathUtils.clamp01(ratio);
+		const hsv = hsvSignal[0]();
+		const next = axis === "saturation" ? {
+			...hsv,
+			s: clamped
+		} : {
+			...hsv,
+			v: clamped
+		};
+		hsvSignal[1](() => next);
+		props.onInput?.(next);
+	};
+	return createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			hsv: hsvSignal[0](),
+			isDragging: getIsDragging(),
+			focusVisibleAxis: getFocusVisibleAxis()
+		}),
+		renderControl: (setElementRef, getRenderProps) => createComponent(ColorAreaElement, {
+			ref(r$) {
+				var _ref$ = setElementRef;
+				typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+			},
+			get id() {
+				return props.id;
+			},
+			get name() {
+				return props.name;
+			},
+			get ariaLabel() {
+				return props.ariaLabel;
+			},
+			axisLabels: () => access(props.axisLabels) ?? DEFAULT_COLOR_AREA_AXIS_LABELS,
+			step: () => access(props.step) ?? DEFAULT_COLOR_AREA_STEP,
+			flags: getRenderProps,
+			hsv: () => hsvSignal[0](),
+			get isTabbable() {
+				return props.isTabbable;
+			},
+			get renderContent() {
+				return props.renderContent;
+			},
+			setAxis,
+			setFocusVisibleAxis,
+			setIsDragging,
+			get onMouseEnter() {
+				return props.onMouseEnter;
+			},
+			get onMouseLeave() {
+				return props.onMouseLeave;
+			}
+		})
+	}));
+};
+delegateEvents(["input", "keydown"]);
+//#endregion
+export { ColorArea };
+
+//# sourceMappingURL=ColorArea.js.map

package/dist/Fundamentals/Input/ColorArea/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.js","names":["For","createRenderEffect","createSignal","Color","MathUtils","InteractionTracker","access","accessSignal","InteractionWrapper","LabelUtils","ColorAreaAxis","ColorAreaElementProps","ColorAreaProps","ColorAreaRenderProps","styles","readFocusVisibleAxis","element","HTMLElement","axis","computeIsFocusVisible","undefined","DEFAULT_COLOR_AREA_STEP","DEFAULT_COLOR_AREA_AXIS_LABELS","Record","saturation","brightness","AXES","RATIO_MIN","RATIO_MAX","PERCENT","getAxisRatio","hsv","HSVA","s","v","ColorAreaElement","props","getAriaLabel","resolveAriaLabel","ariaLabel","getSurfaceRef","setSurfaceRef","getAxisRefs","setAxisRefs","Partial","HTMLInputElement","getIsDisabled","flags","isDisabled","getIsDragging","trackDrag","onDrag","ratio","setAxis","x","y","focus","setIsDragging","syncAxis","value","wrapExtraControls","map","getIsTabbable","isTabbable","_el$","_tmpl$","addEventListener","e","onMouseLeave","onMouseEnter","_$use","ref","_$className","colorAreaSurface","_$insert","renderContent","_$createComponent","each","children","_el$2","_tmpl$2","setFocusVisibleAxis","$$keydown","currentTarget","$$input","Number","prev","colorAreaAxis","_$effect","_p$","_v$5","name","_v$6","step","_v$7","axisLabels","_v$8","Math","round","_v$9","_$setAttribute","t","a","o","i","_v$","id","_v$2","_v$3","_v$4","hasError","ColorArea","hsvSignal","getFocusVisibleAxis","clamped","clamp01","next","onInput","_$mergeProps","extraFlags","isDragging","focusVisibleAxis","renderControl","setElementRef","getRenderProps","r$","_ref$","_$delegateEvents"],"sources":["../../../../src/Fundamentals/Input/ColorArea/ColorArea.tsx"],"sourcesContent":["import { For, createRenderEffect, createSignal } from \"solid-js\";\r\n\r\nimport { Color, MathUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport { InteractionTracker } from \"../../../Abstracts/InteractionTracker/InteractionTracker\";\r\nimport { access, accessSignal } from \"../../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\r\nimport { LabelUtils } from \"../Label/Label.utils\";\r\nimport type { ColorAreaAxis, ColorAreaElementProps, ColorAreaProps, ColorAreaRenderProps } from \"./ColorArea.types\";\r\n\r\nimport * as styles from \"./ColorArea.css\";\r\n\r\nconst readFocusVisibleAxis = (element: HTMLElement, axis: ColorAreaAxis) =>\r\n    InteractionTracker.computeIsFocusVisible(element) ? axis : undefined;\r\n\r\nconst DEFAULT_COLOR_AREA_STEP = 0.01;\r\nconst DEFAULT_COLOR_AREA_AXIS_LABELS: Record<ColorAreaAxis, string> = {\r\n    saturation: \"Saturation\",\r\n    brightness: \"Brightness\",\r\n};\r\n\r\nconst AXES: ColorAreaAxis[] = [\"saturation\", \"brightness\"];\r\nconst RATIO_MIN = 0;\r\nconst RATIO_MAX = 1;\r\nconst PERCENT = 100;\r\n\r\nconst getAxisRatio = (hsv: Color.HSVA, axis: ColorAreaAxis) => (axis === \"saturation\" ? hsv.s : hsv.v);\r\n\r\nconst ColorAreaElement = (props: ColorAreaElementProps) => {\r\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\r\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\r\n    );\r\n\r\n    const [getSurfaceRef, setSurfaceRef] = createSignal<HTMLElement>();\r\n    const [getAxisRefs, setAxisRefs] = createSignal<Partial<Record<ColorAreaAxis, HTMLInputElement>>>({});\r\n\r\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\r\n\r\n    const { getIsDragging } = InteractionTracker.trackDrag(getSurfaceRef, getIsDisabled, {\r\n        onDrag: (ratio) => {\r\n            props.setAxis(\"saturation\", ratio.x);\r\n            props.setAxis(\"brightness\", RATIO_MAX - ratio.y);\r\n            getAxisRefs().saturation?.focus();\r\n        },\r\n    });\r\n\r\n    createRenderEffect(() => {\r\n        props.setIsDragging(getIsDragging());\r\n    });\r\n\r\n    const syncAxis = (element: HTMLInputElement, axis: ColorAreaAxis) => {\r\n        const value = `${getAxisRatio(access(props.hsv), axis)}`;\r\n\r\n        if (element.value === value) return;\r\n\r\n        element.value = value;\r\n    };\r\n\r\n    createRenderEffect(() => {\r\n        for (const axis of AXES) {\r\n            const element = getAxisRefs()[axis];\r\n\r\n            if (element) syncAxis(element, axis);\r\n        }\r\n    });\r\n\r\n    InteractionTracker.wrapExtraControls(() => AXES.map((axis) => getAxisRefs()[axis]), getIsDisabled, {\r\n        getIsTabbable: props.isTabbable === undefined ? undefined : () => access(props.isTabbable)!,\r\n    });\r\n\r\n    return (\r\n        <div\r\n            ref={(element) => {\r\n                setSurfaceRef(element);\r\n                props.ref?.(element);\r\n            }}\r\n            id={access(props.id)}\r\n            class={styles.colorAreaSurface}\r\n            role=\"group\"\r\n            aria-label={getAriaLabel()}\r\n            aria-disabled={getIsDisabled() || undefined}\r\n            aria-invalid={access(props.flags).hasError || undefined}\r\n            onMouseEnter={(e) => {\r\n                if (getIsDisabled()) return;\r\n\r\n                void props.onMouseEnter?.(e);\r\n            }}\r\n            onMouseLeave={(e) => {\r\n                if (getIsDisabled()) return;\r\n\r\n                void props.onMouseLeave?.(e);\r\n            }}\r\n        >\r\n            {props.renderContent(() => access(props.flags))}\r\n\r\n            <For each={AXES}>\r\n                {(axis) => (\r\n                    <input\r\n                        ref={(element) => setAxisRefs((prev) => ({ ...prev, [axis]: element }))}\r\n                        type=\"range\"\r\n                        name={access(props.name) && `${access(props.name)}-${axis}`}\r\n                        class={styles.colorAreaAxis}\r\n                        min={RATIO_MIN}\r\n                        max={RATIO_MAX}\r\n                        step={access(props.step)}\r\n                        aria-label={access(props.axisLabels)[axis]}\r\n                        aria-valuetext={`${Math.round(getAxisRatio(access(props.hsv), axis) * PERCENT)}%`}\r\n                        aria-disabled={getIsDisabled() || undefined}\r\n                        onInput={(e) => {\r\n                            const element = e.currentTarget;\r\n\r\n                            if (!getIsDisabled()) props.setAxis(axis, Number(element.value));\r\n\r\n                            syncAxis(element, axis);\r\n                        }}\r\n                        onFocus={(e) =>\r\n                            props.setFocusVisibleAxis(\r\n                                getIsDragging() ? undefined : readFocusVisibleAxis(e.currentTarget, axis),\r\n                            )\r\n                        }\r\n                        onKeyDown={(e) => props.setFocusVisibleAxis(readFocusVisibleAxis(e.currentTarget, axis))}\r\n                        onBlur={() => props.setFocusVisibleAxis(undefined)}\r\n                    />\r\n                )}\r\n            </For>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport const ColorArea = (props: ColorAreaProps) => {\r\n    const hsvSignal = accessSignal(() => props.hsvSignal);\r\n\r\n    const [getFocusVisibleAxis, setFocusVisibleAxis] = createSignal<ColorAreaAxis>();\r\n    const [getIsDragging, setIsDragging] = createSignal(false);\r\n\r\n    const setAxis = (axis: ColorAreaAxis, ratio: number) => {\r\n        const clamped = MathUtils.clamp01(ratio);\r\n        const hsv = hsvSignal[0]();\r\n        const next = axis === \"saturation\" ? { ...hsv, s: clamped } : { ...hsv, v: clamped };\r\n\r\n        hsvSignal[1](() => next);\r\n\r\n        void props.onInput?.(next);\r\n    };\r\n\r\n    return (\r\n        <InteractionWrapper\r\n            {...props}\r\n            extraFlags={(): ColorAreaRenderProps => ({\r\n                hsv: hsvSignal[0](),\r\n                isDragging: getIsDragging(),\r\n                focusVisibleAxis: getFocusVisibleAxis(),\r\n            })}\r\n            renderControl={(setElementRef, getRenderProps) => (\r\n                <ColorAreaElement\r\n                    ref={setElementRef}\r\n                    id={props.id}\r\n                    name={props.name}\r\n                    ariaLabel={props.ariaLabel}\r\n                    axisLabels={() => access(props.axisLabels) ?? DEFAULT_COLOR_AREA_AXIS_LABELS}\r\n                    step={() => access(props.step) ?? DEFAULT_COLOR_AREA_STEP}\r\n                    flags={getRenderProps}\r\n                    hsv={() => hsvSignal[0]()}\r\n                    isTabbable={props.isTabbable}\r\n                    renderContent={props.renderContent}\r\n                    setAxis={setAxis}\r\n                    setFocusVisibleAxis={setFocusVisibleAxis}\r\n                    setIsDragging={setIsDragging}\r\n                    onMouseEnter={props.onMouseEnter}\r\n                    onMouseLeave={props.onMouseLeave}\r\n                />\r\n            )}\r\n        />\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Input/ColorInput/ColorInput.css.js

@@ -0,0 +1,7 @@
+/* empty css                              */
+//#region src/Fundamentals/Input/ColorInput/ColorInput.css.ts
+var colorInputField = "_1reo90z0";
+//#endregion
+export { colorInputField };
+
+//# sourceMappingURL=ColorInput.css.js.map

package/dist/Fundamentals/Input/ColorInput/ColorInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/ColorInput/ColorInput.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const colorInputField = style({\n    display: \"flex\",\n    pointerEvents: \"all\",\n    width: \"100%\",\n    border: \"none\",\n    padding: 0,\n    background: \"none\",\n    font: \"inherit\",\n    color: \"inherit\",\n    textAlign: \"inherit\",\n});\n"],"mappings":""}