@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Input/Range/Range.js

@@ -0,0 +1,216 @@
+import { access } from "../../../Utils/propUtils.js";
+import { InteractionTracker } from "../../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { assignInlineVars } from "../../../_external/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { LabelUtils } from "../Label/Label.utils.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { FormFieldUtils } from "../FormField/FormField.utils.js";
+import { rangeElement, rangeOrientationVariants, thumbSizeVar } from "./Range.css.js";
+import { Index, createMemo, createRenderEffect, createSignal } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, memo, mergeProps, setAttribute, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/Range/Range.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<input type=range>`);
+var readFocusVisibleThumb = (element, index) => InteractionTracker.computeIsFocusVisible(element) ? index : void 0;
+var DEFAULT_RANGE_ORIENTATION = "horizontal";
+var DEFAULT_RANGE_MIN = 0;
+var DEFAULT_RANGE_MAX = 100;
+var DEFAULT_RANGE_STEP = 1;
+var DEFAULT_RANGE_THUMB_SIZE = 16;
+var MIN_TRACK_TRAVEL_PX = 1;
+var RangeElement = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();
+	const [getActiveThumb, setActiveThumb] = createSignal(0);
+	const [getElementRefs, setElementRefs] = createSignal([]);
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const getThumbMin = (index) => index === 0 ? access(props.min) : access(props.values)[index - 1];
+	const getThumbMax = (index) => index === access(props.values).length - 1 ? access(props.max) : access(props.values)[index + 1];
+	const syncElement = (element, index) => {
+		element.value = `${access(props.values)[index]}`;
+	};
+	const readPointerValue = (e, element) => {
+		const isVertical = access(props.orientation) === "vertical";
+		const rect = element.getBoundingClientRect();
+		const span = isVertical ? rect.height : rect.width;
+		const offset = isVertical ? rect.bottom - e.clientY : e.clientX - rect.left;
+		const travel = Math.max(span - access(props.thumbSize), MIN_TRACK_TRAVEL_PX);
+		const ratio = MathUtils.clamp01((offset - access(props.thumbSize) * .5) / travel);
+		return access(props.min) + ratio * (access(props.max) - access(props.min));
+	};
+	const raiseNearestThumb = (e, element) => {
+		const values = access(props.values);
+		if (values.length < 2) return;
+		const pointerValue = readPointerValue(e, element);
+		const distances = values.map((value) => Math.abs(value - pointerValue));
+		const shortest = Math.min(...distances);
+		if (distances.filter((distance) => distance === shortest).length > 1) setActiveThumb(pointerValue > values[0] ? values.length - 1 : 0);
+		else setActiveThumb(distances.indexOf(shortest));
+	};
+	createRenderEffect(() => {
+		getElementRefs().forEach(syncElement);
+	});
+	InteractionTracker.wrapExtraControls(() => getElementRefs().slice(1), getIsDisabled, { getIsTabbable: props.isTabbable === void 0 ? void 0 : () => access(props.isTabbable) });
+	return [memo(() => props.renderContent(() => access(props.flags))), createComponent(Index, {
+		get each() {
+			return access(props.values);
+		},
+		children: (_getValue, index) => (() => {
+			var _el$ = _tmpl$();
+			_el$.addEventListener("mouseleave", (e) => {
+				if (getIsDisabled()) return;
+				props.onMouseLeave?.(e);
+			});
+			_el$.addEventListener("mouseenter", (e) => {
+				if (getIsDisabled()) return;
+				props.onMouseEnter?.(e);
+			});
+			_el$.$$input = (e) => {
+				const element = e.currentTarget;
+				if (!getIsDisabled()) props.setValue(index, element.valueAsNumber);
+				syncElement(element, index);
+			};
+			_el$.addEventListener("blur", () => props.setFocusVisibleThumb(void 0));
+			_el$.$$keydown = (e) => props.setFocusVisibleThumb(readFocusVisibleThumb(e.currentTarget, index));
+			_el$.addEventListener("focus", (e) => props.setFocusVisibleThumb(readFocusVisibleThumb(e.currentTarget, index)));
+			_el$.$$pointermove = (e) => {
+				if (e.buttons === 0) raiseNearestThumb(e, e.currentTarget);
+			};
+			_el$.$$pointerdown = (e) => raiseNearestThumb(e, e.currentTarget);
+			use((element) => {
+				setElementRefs((refs) => {
+					const next = [...refs];
+					next[index] = element;
+					return next;
+				});
+				if (index === 0) props.ref?.(element);
+			}, _el$);
+			effect((_p$) => {
+				var _v$ = index === 0 ? access(props.id) : void 0, _v$2 = access(props.name), _v$3 = [rangeElement, rangeOrientationVariants[access(props.orientation)]].join(" "), _v$4 = {
+					...assignInlineVars({ [thumbSizeVar]: `${access(props.thumbSize)}px` }),
+					"z-index": index === getActiveThumb() ? 1 : void 0
+				}, _v$5 = getThumbMin(index), _v$6 = getThumbMax(index), _v$7 = access(props.step), _v$8 = access(props.thumbLabels)?.[index] ?? getAriaLabel(), _v$9 = getAriaDescribedBy(), _v$0 = getIsDisabled() || void 0, _v$1 = access(props.flags).hasError || void 0;
+				_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$, "name", _p$.t = _v$2);
+				_v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+				_p$.o = style(_el$, _v$4, _p$.o);
+				_v$5 !== _p$.i && setAttribute(_el$, "min", _p$.i = _v$5);
+				_v$6 !== _p$.n && setAttribute(_el$, "max", _p$.n = _v$6);
+				_v$7 !== _p$.s && setAttribute(_el$, "step", _p$.s = _v$7);
+				_v$8 !== _p$.h && setAttribute(_el$, "aria-label", _p$.h = _v$8);
+				_v$9 !== _p$.r && setAttribute(_el$, "aria-describedby", _p$.r = _v$9);
+				_v$0 !== _p$.d && setAttribute(_el$, "aria-disabled", _p$.d = _v$0);
+				_v$1 !== _p$.l && setAttribute(_el$, "aria-invalid", _p$.l = _v$1);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: void 0,
+				h: void 0,
+				r: void 0,
+				d: void 0,
+				l: void 0
+			});
+			return _el$;
+		})()
+	})];
+};
+var Range = (props) => {
+	if (props.valueSignal !== void 0 === (props.rangeSignal !== void 0)) console.warn("Range: give exactly one of valueSignal and rangeSignal — valueSignal drives a single thumb, rangeSignal drives a pair.");
+	const [getFocusVisibleThumb, setFocusVisibleThumb] = createSignal();
+	const getOrientation = createMemo(() => access(props.orientation) ?? DEFAULT_RANGE_ORIENTATION);
+	const getMin = createMemo(() => access(props.min) ?? DEFAULT_RANGE_MIN);
+	const getMax = createMemo(() => access(props.max) ?? DEFAULT_RANGE_MAX);
+	const getStep = createMemo(() => access(props.step) ?? DEFAULT_RANGE_STEP);
+	const getThumbSize = createMemo(() => access(props.thumbSize) ?? DEFAULT_RANGE_THUMB_SIZE);
+	const getValues = createMemo(() => {
+		const range = props.rangeSignal?.[0]();
+		return range ? [range.start, range.end] : [props.valueSignal?.[0]() ?? getMin()];
+	});
+	const getRatios = createMemo(() => {
+		return getValues().map((value) => MathUtils.clamp01(MathUtils.normalize(value, getMin(), getMax())));
+	});
+	const getFill = createMemo(() => {
+		const ratios = getRatios();
+		return ratios.length > 1 ? {
+			start: ratios[0],
+			end: ratios[ratios.length - 1]
+		} : {
+			start: 0,
+			end: ratios[0]
+		};
+	});
+	const setValue = (index, value) => {
+		const range = props.rangeSignal?.[0]();
+		if (range) props.rangeSignal?.[1](index === 0 ? {
+			...range,
+			start: value
+		} : {
+			...range,
+			end: value
+		});
+		else props.valueSignal?.[1](value);
+		props.onInput?.(getValues());
+	};
+	return createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			orientation: getOrientation(),
+			values: getValues(),
+			ratios: getRatios(),
+			fill: getFill(),
+			focusVisibleThumb: getFocusVisibleThumb()
+		}),
+		renderControl: (setElementRef, getRenderProps) => createComponent(RangeElement, {
+			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;
+			},
+			get thumbLabels() {
+				return props.thumbLabels;
+			},
+			orientation: getOrientation,
+			min: getMin,
+			max: getMax,
+			step: getStep,
+			thumbSize: getThumbSize,
+			flags: getRenderProps,
+			values: getValues,
+			get isTabbable() {
+				return props.isTabbable;
+			},
+			setValue,
+			setFocusVisibleThumb,
+			get renderContent() {
+				return props.renderContent;
+			},
+			get onMouseEnter() {
+				return props.onMouseEnter;
+			},
+			get onMouseLeave() {
+				return props.onMouseLeave;
+			}
+		})
+	}));
+};
+delegateEvents([
+	"pointerdown",
+	"pointermove",
+	"keydown",
+	"input"
+]);
+//#endregion
+export { Range };
+
+//# sourceMappingURL=Range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.js","names":["Index","createMemo","createRenderEffect","createSignal","MathUtils","assignInlineVars","InteractionTracker","access","InteractionWrapper","FormFieldUtils","LabelUtils","RangeElementProps","RangeOrientation","RangeProps","RangeRenderProps","RangeSpan","styles","readFocusVisibleThumb","element","HTMLElement","index","computeIsFocusVisible","undefined","DEFAULT_RANGE_ORIENTATION","DEFAULT_RANGE_MIN","DEFAULT_RANGE_MAX","DEFAULT_RANGE_STEP","DEFAULT_RANGE_THUMB_SIZE","MIN_TRACK_TRAVEL_PX","RangeElement","props","getAriaLabel","resolveAriaLabel","ariaLabel","getAriaDescribedBy","resolveAriaDescribedBy","getActiveThumb","setActiveThumb","getElementRefs","setElementRefs","HTMLInputElement","getIsDisabled","flags","isDisabled","getThumbMin","min","values","getThumbMax","length","max","syncElement","value","readPointerValue","e","PointerEvent","isVertical","orientation","rect","getBoundingClientRect","span","height","width","offset","bottom","clientY","clientX","left","travel","Math","thumbSize","ratio","clamp01","raiseNearestThumb","pointerValue","distances","map","abs","shortest","isTied","filter","distance","indexOf","forEach","wrapExtraControls","slice","getIsTabbable","isTabbable","_$memo","renderContent","_$createComponent","each","children","_getValue","_el$","_tmpl$","addEventListener","onMouseLeave","onMouseEnter","$$input","currentTarget","setValue","valueAsNumber","setFocusVisibleThumb","$$keydown","$$pointermove","buttons","$$pointerdown","_$use","refs","next","ref","_$effect","_p$","_v$","id","_v$2","name","_v$3","rangeElement","rangeOrientationVariants","join","_v$4","thumbSizeVar","_v$5","_v$6","_v$7","step","_v$8","thumbLabels","_v$9","_v$0","_v$1","hasError","_$setAttribute","t","a","_$className","o","_$style","i","n","s","h","r","d","l","Range","hasSingle","valueSignal","hasPair","rangeSignal","console","warn","getFocusVisibleThumb","getOrientation","getMin","getMax","getStep","getThumbSize","getValues","range","start","end","getRatios","normalize","getFill","ratios","onInput","_$mergeProps","extraFlags","fill","focusVisibleThumb","renderControl","setElementRef","getRenderProps","r$","_ref$","_$delegateEvents"],"sources":["../../../../src/Fundamentals/Input/Range/Range.tsx"],"sourcesContent":["import { Index, createMemo, createRenderEffect, createSignal } from \"solid-js\";\r\n\r\nimport { MathUtils } from \"@thewaver/ss-utils\";\r\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\r\n\r\nimport { InteractionTracker } from \"../../../Abstracts/InteractionTracker/InteractionTracker\";\r\nimport { access } from \"../../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\r\nimport { FormFieldUtils } from \"../FormField/FormField.utils\";\r\nimport { LabelUtils } from \"../Label/Label.utils\";\r\nimport type { RangeElementProps, RangeOrientation, RangeProps, RangeRenderProps, RangeSpan } from \"./Range.types\";\r\n\r\nimport * as styles from \"./Range.css\";\r\n\r\nconst readFocusVisibleThumb = (element: HTMLElement, index: number) =>\r\n    InteractionTracker.computeIsFocusVisible(element) ? index : undefined;\r\n\r\nconst DEFAULT_RANGE_ORIENTATION: RangeOrientation = \"horizontal\";\r\nconst DEFAULT_RANGE_MIN = 0;\r\nconst DEFAULT_RANGE_MAX = 100;\r\nconst DEFAULT_RANGE_STEP = 1;\r\nconst DEFAULT_RANGE_THUMB_SIZE = 16;\r\nconst MIN_TRACK_TRAVEL_PX = 1;\r\n\r\nconst RangeElement = (props: RangeElementProps) => {\r\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\r\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\r\n    );\r\n    const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();\r\n\r\n    const [getActiveThumb, setActiveThumb] = createSignal(0);\r\n    const [getElementRefs, setElementRefs] = createSignal<HTMLInputElement[]>([]);\r\n\r\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\r\n\r\n    const getThumbMin = (index: number) => (index === 0 ? access(props.min) : access(props.values)[index - 1]);\r\n\r\n    const getThumbMax = (index: number) =>\r\n        index === access(props.values).length - 1 ? access(props.max) : access(props.values)[index + 1];\r\n\r\n    const syncElement = (element: HTMLInputElement, index: number) => {\r\n        element.value = `${access(props.values)[index]}`;\r\n    };\r\n\r\n    const readPointerValue = (e: PointerEvent, element: HTMLInputElement) => {\r\n        const isVertical = access(props.orientation) === \"vertical\";\r\n        const rect = element.getBoundingClientRect();\r\n        const span = isVertical ? rect.height : rect.width;\r\n        const offset = isVertical ? rect.bottom - e.clientY : e.clientX - rect.left;\r\n        const travel = Math.max(span - access(props.thumbSize), MIN_TRACK_TRAVEL_PX);\r\n        const ratio = MathUtils.clamp01((offset - access(props.thumbSize) * 0.5) / travel);\r\n\r\n        return access(props.min) + ratio * (access(props.max) - access(props.min));\r\n    };\r\n\r\n    const raiseNearestThumb = (e: PointerEvent, element: HTMLInputElement) => {\r\n        const values = access(props.values);\r\n\r\n        if (values.length < 2) return;\r\n\r\n        const pointerValue = readPointerValue(e, element);\r\n        const distances = values.map((value) => Math.abs(value - pointerValue));\r\n        const shortest = Math.min(...distances);\r\n        const isTied = distances.filter((distance) => distance === shortest).length > 1;\r\n\r\n        if (isTied) {\r\n            setActiveThumb(pointerValue > values[0] ? values.length - 1 : 0);\r\n        } else {\r\n            setActiveThumb(distances.indexOf(shortest));\r\n        }\r\n    };\r\n\r\n    createRenderEffect(() => {\r\n        getElementRefs().forEach(syncElement);\r\n    });\r\n\r\n    InteractionTracker.wrapExtraControls(() => getElementRefs().slice(1), getIsDisabled, {\r\n        getIsTabbable: props.isTabbable === undefined ? undefined : () => access(props.isTabbable)!,\r\n    });\r\n\r\n    return (\r\n        <>\r\n            {props.renderContent(() => access(props.flags))}\r\n\r\n            <Index each={access(props.values)}>\r\n                {(_getValue, index) => (\r\n                    <input\r\n                        id={index === 0 ? access(props.id) : undefined}\r\n                        ref={(element) => {\r\n                            setElementRefs((refs) => {\r\n                                const next = [...refs];\r\n\r\n                                next[index] = element;\r\n\r\n                                return next;\r\n                            });\r\n\r\n                            if (index === 0) props.ref?.(element);\r\n                        }}\r\n                        type=\"range\"\r\n                        name={access(props.name)}\r\n                        class={[styles.rangeElement, styles.rangeOrientationVariants[access(props.orientation)]].join(\r\n                            \" \",\r\n                        )}\r\n                        style={{\r\n                            ...assignInlineVars({ [styles.thumbSizeVar]: `${access(props.thumbSize)}px` }),\r\n                            \"z-index\": index === getActiveThumb() ? 1 : undefined,\r\n                        }}\r\n                        min={getThumbMin(index)}\r\n                        max={getThumbMax(index)}\r\n                        step={access(props.step)}\r\n                        aria-label={access(props.thumbLabels)?.[index] ?? getAriaLabel()}\r\n                        aria-describedby={getAriaDescribedBy()}\r\n                        aria-disabled={getIsDisabled() || undefined}\r\n                        aria-invalid={access(props.flags).hasError || undefined}\r\n                        onPointerDown={(e) => raiseNearestThumb(e, e.currentTarget)}\r\n                        onPointerMove={(e) => {\r\n                            if (e.buttons === 0) raiseNearestThumb(e, e.currentTarget);\r\n                        }}\r\n                        onFocus={(e) => props.setFocusVisibleThumb(readFocusVisibleThumb(e.currentTarget, index))}\r\n                        onKeyDown={(e) => props.setFocusVisibleThumb(readFocusVisibleThumb(e.currentTarget, index))}\r\n                        onBlur={() => props.setFocusVisibleThumb(undefined)}\r\n                        onInput={(e) => {\r\n                            const element = e.currentTarget;\r\n\r\n                            if (!getIsDisabled()) props.setValue(index, element.valueAsNumber);\r\n\r\n                            syncElement(element, index);\r\n                        }}\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                )}\r\n            </Index>\r\n        </>\r\n    );\r\n};\r\n\r\nexport const Range = (props: RangeProps) => {\r\n    const hasSingle = props.valueSignal !== undefined;\r\n    const hasPair = props.rangeSignal !== undefined;\r\n\r\n    if (hasSingle === hasPair) {\r\n        console.warn(\r\n            \"Range: give exactly one of valueSignal and rangeSignal — valueSignal drives a single thumb, rangeSignal drives a pair.\",\r\n        );\r\n    }\r\n\r\n    const [getFocusVisibleThumb, setFocusVisibleThumb] = createSignal<number>();\r\n\r\n    const getOrientation = createMemo(() => access(props.orientation) ?? DEFAULT_RANGE_ORIENTATION);\r\n\r\n    const getMin = createMemo(() => access(props.min) ?? DEFAULT_RANGE_MIN);\r\n\r\n    const getMax = createMemo(() => access(props.max) ?? DEFAULT_RANGE_MAX);\r\n\r\n    const getStep = createMemo(() => access(props.step) ?? DEFAULT_RANGE_STEP);\r\n\r\n    const getThumbSize = createMemo(() => access(props.thumbSize) ?? DEFAULT_RANGE_THUMB_SIZE);\r\n\r\n    const getValues = createMemo(() => {\r\n        const range = props.rangeSignal?.[0]();\r\n\r\n        return range ? [range.start, range.end] : [props.valueSignal?.[0]() ?? getMin()];\r\n    });\r\n\r\n    const getRatios = createMemo(() => {\r\n        return getValues().map((value) => MathUtils.clamp01(MathUtils.normalize(value, getMin(), getMax())));\r\n    });\r\n\r\n    const getFill = createMemo((): RangeSpan => {\r\n        const ratios = getRatios();\r\n\r\n        return ratios.length > 1 ? { start: ratios[0], end: ratios[ratios.length - 1] } : { start: 0, end: ratios[0] };\r\n    });\r\n\r\n    const setValue = (index: number, value: number) => {\r\n        const range = props.rangeSignal?.[0]();\r\n\r\n        if (range) {\r\n            props.rangeSignal?.[1](index === 0 ? { ...range, start: value } : { ...range, end: value });\r\n        } else {\r\n            props.valueSignal?.[1](value);\r\n        }\r\n\r\n        void props.onInput?.(getValues());\r\n    };\r\n\r\n    return (\r\n        <InteractionWrapper\r\n            {...props}\r\n            extraFlags={(): RangeRenderProps => ({\r\n                orientation: getOrientation(),\r\n                values: getValues(),\r\n                ratios: getRatios(),\r\n                fill: getFill(),\r\n                focusVisibleThumb: getFocusVisibleThumb(),\r\n            })}\r\n            renderControl={(setElementRef, getRenderProps) => (\r\n                <RangeElement\r\n                    ref={setElementRef}\r\n                    id={props.id}\r\n                    name={props.name}\r\n                    ariaLabel={props.ariaLabel}\r\n                    thumbLabels={props.thumbLabels}\r\n                    orientation={getOrientation}\r\n                    min={getMin}\r\n                    max={getMax}\r\n                    step={getStep}\r\n                    thumbSize={getThumbSize}\r\n                    flags={getRenderProps}\r\n                    values={getValues}\r\n                    isTabbable={props.isTabbable}\r\n                    setValue={setValue}\r\n                    setFocusVisibleThumb={setFocusVisibleThumb}\r\n                    renderContent={props.renderContent}\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/RangeCalendar/RangeCalendar.js

@@ -0,0 +1,39 @@
+import { accessSignal } from "../../../Utils/propUtils.js";
+import { DateValueUtils } from "../../../Abstracts/DateValue/DateValue.utils.js";
+import { CalendarComposite } from "../Calendar/Calendar.js";
+import { createSignal } from "solid-js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/RangeCalendar/RangeCalendar.tsx
+var RangeCalendar = (props) => {
+	const valueSignal = accessSignal(() => props.valueSignal);
+	const [getPendingStart, setPendingStart] = createSignal();
+	const getRange = () => valueSignal[0]();
+	const pick = (day) => {
+		const pending = getPendingStart();
+		if (!pending) {
+			setPendingStart(() => day);
+			valueSignal[1](() => void 0);
+			return;
+		}
+		setPendingStart(() => void 0);
+		valueSignal[1](() => DateValueUtils.orderRange(pending, day));
+	};
+	return createComponent(CalendarComposite, mergeProps(props, {
+		computeIsSelected: (day) => {
+			const pending = getPendingStart();
+			if (pending) return DateValueUtils.isSame(day, pending);
+			const range = getRange();
+			return DateValueUtils.isSame(day, range?.start) || DateValueUtils.isSame(day, range?.end);
+		},
+		computeAnchorDay: () => getPendingStart() ?? getRange()?.start,
+		computeRange: (highlighted) => {
+			const pending = getPendingStart();
+			return pending ? DateValueUtils.orderRange(pending, highlighted) : getRange();
+		},
+		onPick: pick
+	}));
+};
+//#endregion
+export { RangeCalendar };
+
+//# sourceMappingURL=RangeCalendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.js","names":["createSignal","DateValue","DateValueUtils","accessSignal","CalendarComposite","RangeCalendarProps","RangeCalendar","props","valueSignal","getPendingStart","setPendingStart","getRange","pick","day","pending","undefined","orderRange","_$createComponent","_$mergeProps","computeIsSelected","isSame","range","start","end","computeAnchorDay","computeRange","highlighted","onPick"],"sources":["../../../../src/Fundamentals/Input/RangeCalendar/RangeCalendar.tsx"],"sourcesContent":["import { createSignal } from \"solid-js\";\r\n\r\nimport type { DateValue } from \"../../../Abstracts/DateValue/DateValue.types\";\r\nimport { DateValueUtils } from \"../../../Abstracts/DateValue/DateValue.utils\";\r\nimport { accessSignal } from \"../../../Utils/propUtils\";\r\nimport { CalendarComposite } from \"../Calendar/Calendar\";\r\nimport type { RangeCalendarProps } from \"../Calendar/Calendar.types\";\r\n\r\nexport const RangeCalendar = (props: RangeCalendarProps) => {\r\n    const valueSignal = accessSignal(() => props.valueSignal);\r\n\r\n    const [getPendingStart, setPendingStart] = createSignal<DateValue | undefined>();\r\n\r\n    const getRange = () => valueSignal[0]();\r\n\r\n    const pick = (day: DateValue) => {\r\n        const pending = getPendingStart();\r\n\r\n        if (!pending) {\r\n            setPendingStart(() => day);\r\n            valueSignal[1](() => undefined);\r\n\r\n            return;\r\n        }\r\n\r\n        setPendingStart(() => undefined);\r\n        valueSignal[1](() => DateValueUtils.orderRange(pending, day));\r\n    };\r\n\r\n    return (\r\n        <CalendarComposite\r\n            {...props}\r\n            computeIsSelected={(day) => {\r\n                const pending = getPendingStart();\r\n\r\n                if (pending) return DateValueUtils.isSame(day, pending);\r\n\r\n                const range = getRange();\r\n\r\n                return DateValueUtils.isSame(day, range?.start) || DateValueUtils.isSame(day, range?.end);\r\n            }}\r\n            computeAnchorDay={() => getPendingStart() ?? getRange()?.start}\r\n            computeRange={(highlighted) => {\r\n                const pending = getPendingStart();\r\n\r\n                return pending ? DateValueUtils.orderRange(pending, highlighted) : getRange();\r\n            }}\r\n            onPick={pick}\r\n        />\r\n    );\r\n};\r\n"],"mappings":";;;;;;AAQA,IAAaM,iBAAiBC,UAA8B;CACxD,MAAMC,cAAcL,mBAAmBI,MAAMC,WAAW;CAExD,MAAM,CAACC,iBAAiBC,mBAAmBV,aAAoC;CAE/E,MAAMW,iBAAiBH,YAAY,EAAE,CAAC;CAEtC,MAAMI,QAAQC,QAAmB;EAC7B,MAAMC,UAAUL,gBAAgB;EAEhC,IAAI,CAACK,SAAS;GACVJ,sBAAsBG,GAAG;GACzBL,YAAY,EAAE,OAAOO,KAAAA,CAAS;GAE9B;EACJ;EAEAL,sBAAsBK,KAAAA,CAAS;EAC/BP,YAAY,EAAE,OAAON,eAAec,WAAWF,SAASD,GAAG,CAAC;CAChE;CAEA,OAAAI,gBACKb,mBAAiBc,WACVX,OAAK;EACTY,oBAAoBN,QAAQ;GACxB,MAAMC,UAAUL,gBAAgB;GAEhC,IAAIK,SAAS,OAAOZ,eAAekB,OAAOP,KAAKC,OAAO;GAEtD,MAAMO,QAAQV,SAAS;GAEvB,OAAOT,eAAekB,OAAOP,KAAKQ,OAAOC,KAAK,KAAKpB,eAAekB,OAAOP,KAAKQ,OAAOE,GAAG;EAC5F;EACAC,wBAAwBf,gBAAgB,KAAKE,SAAS,CAAC,EAAEW;EACzDG,eAAeC,gBAAgB;GAC3B,MAAMZ,UAAUL,gBAAgB;GAEhC,OAAOK,UAAUZ,eAAec,WAAWF,SAASY,WAAW,IAAIf,SAAS;EAChF;EACAgB,QAAQf;CAAI,CAAA,CAAA;AAGxB"}

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

@@ -0,0 +1,12 @@
+/* empty css                          */
+//#region src/Fundamentals/Input/Select/Select.css.ts
+var selectField = "_1og9m3u0";
+var selectFilterField = "_1og9m3u1";
+var selectEndMarker = "_1og9m3u2";
+var selectSizer = "_1og9m3u3";
+var selectSizerRow = "_1og9m3u4";
+var selectOption = "_1og9m3u5";
+//#endregion
+export { selectEndMarker, selectField, selectFilterField, selectOption, selectSizer, selectSizerRow };
+
+//# sourceMappingURL=Select.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/Select/Select.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const selectField = style({\n    appearance: \"none\",\n    background: \"transparent\",\n    width: \"100%\",\n    margin: 0,\n    padding: 0,\n    border: \"none\",\n    color: \"inherit !important\",\n    fontSize: \"inherit !important\",\n    fontWeight: \"inherit !important\",\n    fontFamily: \"inherit !important\",\n    lineHeight: \"inherit !important\",\n    pointerEvents: \"all\",\n    cursor: \"pointer\",\n\n    selectors: {\n        \"&[aria-disabled='true']\": {\n            cursor: \"not-allowed\",\n        },\n    },\n});\n\nexport const selectFilterField = style({\n    appearance: \"none\",\n    position: \"absolute\",\n    inset: 0,\n    width: \"auto !important\",\n    height: \"auto !important\",\n    minWidth: \"0 !important\",\n    margin: \"0 !important\",\n    border: \"none !important\",\n    borderRadius: \"0 !important\",\n    background: \"transparent !important\",\n    boxShadow: \"none !important\",\n    font: \"inherit\",\n    color: \"inherit\",\n    pointerEvents: \"all\",\n    userSelect: \"text\",\n    cursor: \"text !important\",\n\n    selectors: {\n        \"&[aria-disabled='true']\": {\n            caretColor: \"transparent !important\",\n            cursor: \"not-allowed !important\",\n        },\n    },\n});\n\nexport const selectEndMarker = style({\n    width: \"100%\",\n    height: 1,\n    marginTop: -1,\n});\n\nexport const selectSizer = style({\n    position: \"relative\",\n    width: \"100%\",\n});\n\nexport const selectSizerRow = style({\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    width: \"100%\",\n});\n\nexport const selectOption = style({\n    width: \"100%\",\n    cursor: \"pointer\",\n    pointerEvents: \"all\",\n\n    selectors: {\n        \"&[aria-disabled='true']\": {\n            cursor: \"not-allowed\",\n        },\n    },\n});\n"],"mappings":""}