@thewaver/ss-components 0.0.1 → 0.0.2

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

@@ -0,0 +1,184 @@
+import { access } from "../../../Utils/propUtils.js";
+import { SignalMirror } from "../../../Abstracts/SignalMirror/SignalMirror.js";
+import { LabelUtils } from "../Label/Label.utils.js";
+import { InteractionWrapper } from "../../InteractionWrapper/InteractionWrapper.js";
+import { FormFieldUtils } from "../FormField/FormField.utils.js";
+import { ColorArea } from "../ColorArea/ColorArea.js";
+import { Popover } from "../../Popover/Popover.js";
+import { Range } from "../Range/Range.js";
+import { colorInputField } from "./ColorInput.css.js";
+import { createEffect, createMemo, createSignal, createUniqueId, untrack } from "solid-js";
+import { Color } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/ColorInput/ColorInput.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button aria-haspopup=dialog>`);
+var DEFAULT_COLOR_INPUT_PLACEMENT = {
+	x: "left-in",
+	y: "bottom-out"
+};
+var DEFAULT_COLOR_INPUT_AREA_LABEL = "Saturation and brightness";
+var DEFAULT_COLOR_INPUT_HUE_LABEL = "Hue";
+var STARTING_COLOR = {
+	h: 0,
+	s: 0,
+	v: 0,
+	a: 1
+};
+var HUE_MAX = 360;
+var HUE_STEP = 1;
+var OPAQUE = 1;
+var toHexValue = (hsva) => hsva.a < OPAQUE ? Color.HSVA.toHexa(hsva) : Color.HSV.toHex(hsva);
+var getIsSameValue = (a, b) => Color.Hexa.isHexa(a) && Color.Hexa.isHexa(b) ? Color.Hexa.getIsSameHexa(a, b) : a === b;
+var ColorInputField = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.addEventListener("mouseleave", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseLeave?.(e);
+		});
+		_el$.addEventListener("mouseenter", (e) => {
+			if (getIsDisabled()) return;
+			props.onMouseEnter?.(e);
+		});
+		_el$.$$click = () => {
+			if (getIsDisabled()) return;
+			props.onToggle();
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, colorInputField);
+		insert(_el$, () => props.renderContent(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = getAriaLabel(), _v$3 = getAriaDescribedBy(), _v$4 = access(props.isOpen), _v$5 = access(props.isOpen) ? access(props.popupId) : void 0, _v$6 = getIsDisabled() || void 0, _v$7 = 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-describedby", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-expanded", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "aria-controls", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$, "aria-disabled", _p$.n = _v$6);
+			_v$7 !== _p$.s && setAttribute(_el$, "aria-invalid", _p$.s = _v$7);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		});
+		return _el$;
+	})();
+};
+var ColorInput = (props) => {
+	const popupId = createUniqueId();
+	const [getFieldRef, setFieldRef] = createSignal();
+	const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);
+	const startingValue = props.valueSignal[0]();
+	const [getHsv, setHsv] = createSignal(Color.Hexa.isHexa(startingValue) ? Color.Hexa.toHsva(startingValue) : STARTING_COLOR);
+	const hsvSignal = [getHsv, setHsv];
+	const hueSignal = [() => getHsv().h, (hue) => setHueValue(hue)];
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const setHueValue = (hue) => {
+		const next = typeof hue === "function" ? hue(untrack(() => getHsv().h)) : hue;
+		setHsv((prev) => ({
+			...prev,
+			h: next
+		}));
+		return next;
+	};
+	const dismiss = () => {
+		if (!getIsOpen()) return;
+		setIsOpen(false);
+		getFieldRef()?.focus();
+	};
+	createEffect(() => {
+		const value = props.valueSignal[0]();
+		if (getIsSameValue(value, untrack(() => toHexValue(getHsv())))) return;
+		if (!Color.Hexa.isHexa(value)) return;
+		setHsv(() => Color.Hexa.toHsva(value));
+	});
+	createEffect(() => {
+		const value = toHexValue(getHsv());
+		if (getIsSameValue(untrack(props.valueSignal[0]), value)) return;
+		props.valueSignal[1](value);
+		props.onInput?.(value);
+	});
+	const renderSurface = () => [createComponent(ColorArea, {
+		hsvSignal,
+		sizing: "fill",
+		isDisabled: getIsDisabled,
+		ariaLabel: () => access(props.areaLabel) ?? DEFAULT_COLOR_INPUT_AREA_LABEL,
+		get renderContent() {
+			return props.renderArea;
+		}
+	}), createComponent(Range, {
+		valueSignal: hueSignal,
+		sizing: "fill",
+		isDisabled: getIsDisabled,
+		max: () => HUE_MAX,
+		step: () => HUE_STEP,
+		ariaLabel: () => access(props.hueLabel) ?? DEFAULT_COLOR_INPUT_HUE_LABEL,
+		get renderContent() {
+			return props.renderHue;
+		}
+	})];
+	return [createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			value: props.valueSignal[0](),
+			hsv: getHsv(),
+			isOpen: getIsOpen()
+		}),
+		ref: (element) => {
+			setFieldRef(element);
+			props.ref?.(element);
+		},
+		renderControl: (setElementRef, getRenderProps) => createComponent(ColorInputField, {
+			ref(r$) {
+				var _ref$ = setElementRef;
+				typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+			},
+			get id() {
+				return props.id;
+			},
+			get ariaLabel() {
+				return props.ariaLabel;
+			},
+			popupId: () => popupId,
+			isOpen: getIsOpen,
+			flags: getRenderProps,
+			get renderContent() {
+				return props.renderContent;
+			},
+			onToggle: () => setIsOpen((prev) => !prev),
+			get onMouseEnter() {
+				return props.onMouseEnter;
+			},
+			get onMouseLeave() {
+				return props.onMouseLeave;
+			}
+		})
+	})), createComponent(Popover, {
+		id: () => popupId,
+		role: "dialog",
+		ariaAttributes: () => ({ "aria-label": access(props.ariaLabel) }),
+		isOpen: getIsOpen,
+		anchorRef: getFieldRef,
+		placement: () => access(props.placement) ?? DEFAULT_COLOR_INPUT_PLACEMENT,
+		get offset() {
+			return props.offset;
+		},
+		get transitionDurationMs() {
+			return props.transitionDurationMs;
+		},
+		onDismiss: (reason) => reason === "escape" ? dismiss() : setIsOpen(false),
+		renderContent: (getVisibilityTarget, getTransitionDurationMs) => props.renderPopup(renderSurface, hsvSignal, getVisibilityTarget, getTransitionDurationMs)
+	})];
+};
+delegateEvents(["click"]);
+//#endregion
+export { ColorInput };
+
+//# sourceMappingURL=ColorInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","names":["Signal","createEffect","createMemo","createSignal","createUniqueId","untrack","Color","AnchorPlacement","SignalMirror","access","InteractionWrapper","Popover","ColorArea","FormFieldUtils","LabelUtils","Range","ColorInputFieldProps","ColorInputProps","ColorInputRenderProps","styles","DEFAULT_COLOR_INPUT_PLACEMENT","x","y","DEFAULT_COLOR_INPUT_AREA_LABEL","DEFAULT_COLOR_INPUT_HUE_LABEL","STARTING_COLOR","HSVA","h","s","v","a","HUE_MAX","HUE_STEP","OPAQUE","toHexValue","hsva","toHexa","HSV","toHex","getIsSameValue","b","Hexa","isHexa","getIsSameHexa","ColorInputField","props","getAriaLabel","resolveAriaLabel","ariaLabel","undefined","getAriaDescribedBy","resolveAriaDescribedBy","getIsDisabled","flags","isDisabled","_el$","_tmpl$","addEventListener","e","onMouseLeave","onMouseEnter","$$click","onToggle","_$use","element","ref","_$className","colorInputField","_$insert","renderContent","_$effect","_p$","_v$","id","_v$2","_v$3","_v$4","isOpen","_v$5","popupId","_v$6","_v$7","hasError","_$setAttribute","t","o","i","n","ColorInput","getFieldRef","setFieldRef","HTMLElement","getIsOpen","setIsOpen","createOptional","visibilitySignal","startingValue","valueSignal","getHsv","setHsv","toHsva","hsvSignal","hueSignal","hue","setHueValue","prev","next","dismiss","focus","value","onInput","renderSurface","_$createComponent","sizing","areaLabel","renderArea","max","step","hueLabel","renderHue","_$mergeProps","extraFlags","hsv","renderControl","setElementRef","getRenderProps","r$","_ref$","role","ariaAttributes","anchorRef","placement","offset","transitionDurationMs","onDismiss","reason","getVisibilityTarget","getTransitionDurationMs","renderPopup","_$delegateEvents"],"sources":["../../../../src/Fundamentals/Input/ColorInput/ColorInput.tsx"],"sourcesContent":["import type { Signal } from \"solid-js\";\nimport { createEffect, createMemo, createSignal, createUniqueId, untrack } from \"solid-js\";\n\nimport { Color } from \"@thewaver/ss-utils\";\n\nimport type { AnchorPlacement } from \"../../../Abstracts/Anchor/Anchor.types\";\nimport { SignalMirror } from \"../../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { ColorArea } from \"../ColorArea/ColorArea\";\nimport { FormFieldUtils } from \"../FormField/FormField.utils\";\nimport { LabelUtils } from \"../Label/Label.utils\";\nimport { Range } from \"../Range/Range\";\nimport type { ColorInputFieldProps, ColorInputProps, ColorInputRenderProps } from \"./ColorInput.types\";\n\nimport * as styles from \"./ColorInput.css\";\n\nconst DEFAULT_COLOR_INPUT_PLACEMENT: AnchorPlacement = { x: \"left-in\", y: \"bottom-out\" };\nconst DEFAULT_COLOR_INPUT_AREA_LABEL = \"Saturation and brightness\";\nconst DEFAULT_COLOR_INPUT_HUE_LABEL = \"Hue\";\nconst STARTING_COLOR: Color.HSVA = { h: 0, s: 0, v: 0, a: 1 };\nconst HUE_MAX = 360;\nconst HUE_STEP = 1;\nconst OPAQUE = 1;\n\nconst toHexValue = (hsva: Color.HSVA) => (hsva.a < OPAQUE ? Color.HSVA.toHexa(hsva) : Color.HSV.toHex(hsva));\n\nconst getIsSameValue = (a: string, b: string) =>\n    Color.Hexa.isHexa(a) && Color.Hexa.isHexa(b) ? Color.Hexa.getIsSameHexa(a, b) : a === b;\n\nconst ColorInputField = (props: ColorInputFieldProps) => {\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\n    );\n    const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();\n\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    return (\n        <button\n            id={access(props.id)}\n            ref={(element) => props.ref?.(element)}\n            type=\"button\"\n            class={styles.colorInputField}\n            aria-label={getAriaLabel()}\n            aria-describedby={getAriaDescribedBy()}\n            aria-haspopup=\"dialog\"\n            aria-expanded={access(props.isOpen)}\n            aria-controls={access(props.isOpen) ? access(props.popupId) : undefined}\n            aria-disabled={getIsDisabled() || undefined}\n            aria-invalid={access(props.flags).hasError || undefined}\n            onClick={() => {\n                if (getIsDisabled()) return;\n\n                props.onToggle();\n            }}\n            onMouseEnter={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onMouseEnter?.(e);\n            }}\n            onMouseLeave={(e) => {\n                if (getIsDisabled()) return;\n\n                void props.onMouseLeave?.(e);\n            }}\n        >\n            {props.renderContent(() => access(props.flags))}\n        </button>\n    );\n};\n\nexport const ColorInput = (props: ColorInputProps) => {\n    const popupId = createUniqueId();\n\n    const [getFieldRef, setFieldRef] = createSignal<HTMLElement>();\n    const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);\n    const startingValue = props.valueSignal[0]();\n\n    const [getHsv, setHsv] = createSignal<Color.HSVA>(\n        Color.Hexa.isHexa(startingValue) ? Color.Hexa.toHsva(startingValue) : STARTING_COLOR,\n    );\n\n    const hsvSignal: Signal<Color.HSVA> = [getHsv, setHsv];\n    const hueSignal: Signal<number> = [() => getHsv().h, (hue) => setHueValue(hue)];\n\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\n\n    const setHueValue = (hue: number | ((prev: number) => number)) => {\n        const next = typeof hue === \"function\" ? hue(untrack(() => getHsv().h)) : hue;\n\n        setHsv((prev) => ({ ...prev, h: next }));\n\n        return next;\n    };\n\n    const dismiss = () => {\n        if (!getIsOpen()) return;\n\n        setIsOpen(false);\n        getFieldRef()?.focus();\n    };\n\n    createEffect(() => {\n        const value = props.valueSignal[0]();\n\n        if (\n            getIsSameValue(\n                value,\n                untrack(() => toHexValue(getHsv())),\n            )\n        )\n            return;\n\n        if (!Color.Hexa.isHexa(value)) return;\n\n        setHsv(() => Color.Hexa.toHsva(value));\n    });\n\n    createEffect(() => {\n        const value = toHexValue(getHsv());\n\n        if (getIsSameValue(untrack(props.valueSignal[0]), value)) return;\n\n        props.valueSignal[1](value);\n\n        void props.onInput?.(value);\n    });\n\n    const renderSurface = () => (\n        <>\n            <ColorArea\n                hsvSignal={hsvSignal}\n                sizing={\"fill\"}\n                isDisabled={getIsDisabled}\n                ariaLabel={() => access(props.areaLabel) ?? DEFAULT_COLOR_INPUT_AREA_LABEL}\n                renderContent={props.renderArea}\n            />\n\n            <Range\n                valueSignal={hueSignal}\n                sizing={\"fill\"}\n                isDisabled={getIsDisabled}\n                max={() => HUE_MAX}\n                step={() => HUE_STEP}\n                ariaLabel={() => access(props.hueLabel) ?? DEFAULT_COLOR_INPUT_HUE_LABEL}\n                renderContent={props.renderHue}\n            />\n        </>\n    );\n\n    return (\n        <>\n            <InteractionWrapper\n                {...props}\n                extraFlags={(): ColorInputRenderProps => ({\n                    value: props.valueSignal[0](),\n                    hsv: getHsv(),\n                    isOpen: getIsOpen(),\n                })}\n                ref={(element) => {\n                    setFieldRef(element);\n                    props.ref?.(element);\n                }}\n                renderControl={(setElementRef, getRenderProps) => (\n                    <ColorInputField\n                        ref={setElementRef}\n                        id={props.id}\n                        ariaLabel={props.ariaLabel}\n                        popupId={() => popupId}\n                        isOpen={getIsOpen}\n                        flags={getRenderProps}\n                        renderContent={props.renderContent}\n                        onToggle={() => setIsOpen((prev) => !prev)}\n                        onMouseEnter={props.onMouseEnter}\n                        onMouseLeave={props.onMouseLeave}\n                    />\n                )}\n            />\n\n            <Popover\n                id={() => popupId}\n                role={\"dialog\"}\n                ariaAttributes={() => ({ \"aria-label\": access(props.ariaLabel) })}\n                isOpen={getIsOpen}\n                anchorRef={getFieldRef}\n                placement={() => access(props.placement) ?? DEFAULT_COLOR_INPUT_PLACEMENT}\n                offset={props.offset}\n                transitionDurationMs={props.transitionDurationMs}\n                onDismiss={(reason) => (reason === \"escape\" ? dismiss() : setIsOpen(false))}\n                renderContent={(getVisibilityTarget, getTransitionDurationMs) =>\n                    props.renderPopup(renderSurface, hsvSignal, getVisibilityTarget, getTransitionDurationMs)\n                }\n            />\n        </>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Input/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,60 @@
+import { access } from "../../../Utils/propUtils.js";
+import { TextSyncUtils } from "../../../Abstracts/TextSync/TextSync.utils.js";
+import { MaskedField } from "../../../Abstracts/MaskedField/MaskedField.js";
+import { TextField } from "../TextField/TextField.js";
+import { createMemo } from "solid-js";
+import { DecimalUtils } from "@thewaver/ss-utils";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/CurrencyInput/CurrencyInput.tsx
+var DEFAULT_CURRENCY_INPUT_DECIMALS = 2;
+var CurrencyInput = (props) => {
+	const getDecimals = createMemo(() => access(props.decimals) ?? DEFAULT_CURRENCY_INPUT_DECIMALS);
+	const getHasSign = () => access(props.hasSign) ?? false;
+	const getGroupDefs = createMemo(() => ({
+		...DecimalUtils.getSeparators(access(props.locale)),
+		groupSizes: access(props.groupSizes) ?? TextSyncUtils.getGroupSizes(access(props.locale)),
+		decimals: getDecimals(),
+		hasSign: getHasSign()
+	}));
+	const getHint = () => TextSyncUtils.formatWithGroups(getGroupDefs(), "0".repeat(getDecimals() + 1)).replace(/\d/g, "0");
+	const fromDigits = (digits) => {
+		const isNegative = digits.startsWith(TextSyncUtils.MASK_MINUS);
+		const magnitude = DecimalUtils.fromDigits(isNegative ? digits.slice(1) : digits, getDecimals());
+		if (magnitude === void 0) return void 0;
+		const parsed = isNegative ? -magnitude : magnitude;
+		const min = access(props.min);
+		const max = access(props.max);
+		return min !== void 0 && parsed < min || max !== void 0 && parsed > max ? void 0 : parsed;
+	};
+	const field = MaskedField.createField({
+		getValue: () => props.valueSignal[0](),
+		setValue: (next) => props.valueSignal[1](next),
+		formatDigits: (digits) => TextSyncUtils.formatWithGroups(getGroupDefs(), digits),
+		readDigits: (text) => getHasSign() ? TextSyncUtils.readSignedDigits(text) : TextSyncUtils.getMaskedDigits(text),
+		getDigitCount: () => void 0,
+		toDigits: (value) => (value < 0 && getHasSign() ? TextSyncUtils.MASK_MINUS : "") + DecimalUtils.toDigits(value, getDecimals()),
+		fromDigits,
+		getHasImpossibleDigits: (digits) => digits.length > 0 && fromDigits(digits) === void 0,
+		getIsSame: (a, b) => a === b
+	});
+	return createComponent(TextField, mergeProps(props, {
+		get valueSignal() {
+			return field.textSignal;
+		},
+		element: "input",
+		inputMode: "decimal",
+		computeMaskedText: (previous, next, caret) => TextSyncUtils.applyGroupedMask(getGroupDefs(), previous, next, caret),
+		placeholderHint: getHint,
+		hasError: () => (access(props.hasError) ?? false) || field.getHasIssue(),
+		get onInput() {
+			return field.onInput;
+		},
+		get onBlur() {
+			return field.onBlur;
+		}
+	}));
+};
+//#endregion
+export { CurrencyInput };
+
+//# sourceMappingURL=CurrencyInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyInput.js","names":["createMemo","DecimalUtils","MaskedField","TextSyncGroupDefs","TextSyncUtils","access","TextField","CurrencyInputProps","DEFAULT_CURRENCY_INPUT_DECIMALS","CurrencyInput","props","getDecimals","decimals","getHasSign","hasSign","getGroupDefs","getSeparators","locale","groupSizes","getGroupSizes","getHint","formatWithGroups","repeat","replace","fromDigits","digits","isNegative","startsWith","MASK_MINUS","magnitude","slice","undefined","parsed","min","max","field","createField","getValue","valueSignal","setValue","next","formatDigits","readDigits","text","readSignedDigits","getMaskedDigits","getDigitCount","toDigits","value","getHasImpossibleDigits","length","getIsSame","a","b","_$createComponent","_$mergeProps","textSignal","element","inputMode","computeMaskedText","previous","caret","applyGroupedMask","placeholderHint","hasError","getHasIssue","onInput","onBlur"],"sources":["../../../../src/Fundamentals/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["import { createMemo } from \"solid-js\";\n\nimport { DecimalUtils } from \"@thewaver/ss-utils\";\n\nimport { MaskedField } from \"../../../Abstracts/MaskedField/MaskedField\";\nimport type { TextSyncGroupDefs } from \"../../../Abstracts/TextSync/TextSync.utils\";\nimport { TextSyncUtils } from \"../../../Abstracts/TextSync/TextSync.utils\";\nimport { access } from \"../../../Utils/propUtils\";\nimport { TextField } from \"../TextField/TextField\";\nimport type { CurrencyInputProps } from \"./CurrencyInput.types\";\n\nconst DEFAULT_CURRENCY_INPUT_DECIMALS = 2;\n\nexport const CurrencyInput = (props: CurrencyInputProps) => {\n    const getDecimals = createMemo(() => access(props.decimals) ?? DEFAULT_CURRENCY_INPUT_DECIMALS);\n\n    const getHasSign = () => access(props.hasSign) ?? false;\n\n    const getGroupDefs = createMemo((): TextSyncGroupDefs => ({\n        ...DecimalUtils.getSeparators(access(props.locale)),\n        groupSizes: access(props.groupSizes) ?? TextSyncUtils.getGroupSizes(access(props.locale)),\n        decimals: getDecimals(),\n        hasSign: getHasSign(),\n    }));\n\n    const getHint = () =>\n        TextSyncUtils.formatWithGroups(getGroupDefs(), \"0\".repeat(getDecimals() + 1)).replace(/\\d/g, \"0\");\n\n    const fromDigits = (digits: string) => {\n        const isNegative = digits.startsWith(TextSyncUtils.MASK_MINUS);\n        const magnitude = DecimalUtils.fromDigits(isNegative ? digits.slice(1) : digits, getDecimals());\n\n        if (magnitude === undefined) return undefined;\n\n        const parsed = isNegative ? -magnitude : magnitude;\n\n        const min = access(props.min);\n        const max = access(props.max);\n\n        return (min !== undefined && parsed < min) || (max !== undefined && parsed > max) ? undefined : parsed;\n    };\n\n    const field = MaskedField.createField<number>({\n        getValue: () => props.valueSignal[0](),\n        setValue: (next) => props.valueSignal[1](next),\n        formatDigits: (digits) => TextSyncUtils.formatWithGroups(getGroupDefs(), digits),\n        readDigits: (text) =>\n            getHasSign() ? TextSyncUtils.readSignedDigits(text) : TextSyncUtils.getMaskedDigits(text),\n        getDigitCount: () => undefined,\n        toDigits: (value) =>\n            (value < 0 && getHasSign() ? TextSyncUtils.MASK_MINUS : \"\") + DecimalUtils.toDigits(value, getDecimals()),\n        fromDigits,\n        getHasImpossibleDigits: (digits) => digits.length > 0 && fromDigits(digits) === undefined,\n        getIsSame: (a, b) => a === b,\n    });\n\n    return (\n        <TextField\n            {...props}\n            valueSignal={field.textSignal}\n            element={\"input\"}\n            inputMode={\"decimal\"}\n            computeMaskedText={(previous, next, caret) =>\n                TextSyncUtils.applyGroupedMask(getGroupDefs(), previous, next, caret)\n            }\n            placeholderHint={getHint}\n            hasError={() => (access(props.hasError) ?? false) || field.getHasIssue()}\n            onInput={field.onInput}\n            onBlur={field.onBlur}\n        />\n    );\n};\n"],"mappings":";;;;;;;;AAWA,IAAMQ,kCAAkC;AAExC,IAAaC,iBAAiBC,UAA8B;CACxD,MAAMC,cAAcX,iBAAiBK,OAAOK,MAAME,QAAQ,KAAKJ,+BAA+B;CAE9F,MAAMK,mBAAmBR,OAAOK,MAAMI,OAAO,KAAK;CAElD,MAAMC,eAAef,kBAAqC;EACtD,GAAGC,aAAae,cAAcX,OAAOK,MAAMO,MAAM,CAAC;EAClDC,YAAYb,OAAOK,MAAMQ,UAAU,KAAKd,cAAce,cAAcd,OAAOK,MAAMO,MAAM,CAAC;EACxFL,UAAUD,YAAY;EACtBG,SAASD,WAAW;CACxB,EAAE;CAEF,MAAMO,gBACFhB,cAAciB,iBAAiBN,aAAa,GAAG,IAAIO,OAAOX,YAAY,IAAI,CAAC,CAAC,CAAC,CAACY,QAAQ,OAAO,GAAG;CAEpG,MAAMC,cAAcC,WAAmB;EACnC,MAAMC,aAAaD,OAAOE,WAAWvB,cAAcwB,UAAU;EAC7D,MAAMC,YAAY5B,aAAauB,WAAWE,aAAaD,OAAOK,MAAM,CAAC,IAAIL,QAAQd,YAAY,CAAC;EAE9F,IAAIkB,cAAcE,KAAAA,GAAW,OAAOA,KAAAA;EAEpC,MAAMC,SAASN,aAAa,CAACG,YAAYA;EAEzC,MAAMI,MAAM5B,OAAOK,MAAMuB,GAAG;EAC5B,MAAMC,MAAM7B,OAAOK,MAAMwB,GAAG;EAE5B,OAAQD,QAAQF,KAAAA,KAAaC,SAASC,OAASC,QAAQH,KAAAA,KAAaC,SAASE,MAAOH,KAAAA,IAAYC;CACpG;CAEA,MAAMG,QAAQjC,YAAYkC,YAAoB;EAC1CC,gBAAgB3B,MAAM4B,YAAY,EAAE,CAAC;EACrCC,WAAWC,SAAS9B,MAAM4B,YAAY,EAAE,CAACE,IAAI;EAC7CC,eAAehB,WAAWrB,cAAciB,iBAAiBN,aAAa,GAAGU,MAAM;EAC/EiB,aAAaC,SACT9B,WAAW,IAAIT,cAAcwC,iBAAiBD,IAAI,IAAIvC,cAAcyC,gBAAgBF,IAAI;EAC5FG,qBAAqBf,KAAAA;EACrBgB,WAAWC,WACNA,QAAQ,KAAKnC,WAAW,IAAIT,cAAcwB,aAAa,MAAM3B,aAAa8C,SAASC,OAAOrC,YAAY,CAAC;EAC5Ga;EACAyB,yBAAyBxB,WAAWA,OAAOyB,SAAS,KAAK1B,WAAWC,MAAM,MAAMM,KAAAA;EAChFoB,YAAYC,GAAGC,MAAMD,MAAMC;CAC/B,CAAC;CAED,OAAAC,gBACKhD,WAASiD,WACF7C,OAAK;EAAA,IACT4B,cAAW;GAAA,OAAEH,MAAMqB;EAAU;EAC7BC,SAAS;EACTC,WAAW;EACXC,oBAAoBC,UAAUpB,MAAMqB,UAChCzD,cAAc0D,iBAAiB/C,aAAa,GAAG6C,UAAUpB,MAAMqB,KAAK;EAExEE,iBAAiB3C;EACjB4C,iBAAiB3D,OAAOK,MAAMsD,QAAQ,KAAK,UAAU7B,MAAM8B,YAAY;EAAC,IACxEC,UAAO;GAAA,OAAE/B,MAAM+B;EAAO;EAAA,IACtBC,SAAM;GAAA,OAAEhC,MAAMgC;EAAM;CAAA,CAAA,CAAA;AAGhC"}

package/dist/Fundamentals/Input/DateInput/DateInput.js

@@ -0,0 +1,170 @@
+import { access, accessSignal } from "../../../Utils/propUtils.js";
+import { DateValueUtils } from "../../../Abstracts/DateValue/DateValue.utils.js";
+import { TextSyncUtils } from "../../../Abstracts/TextSync/TextSync.utils.js";
+import { MaskedField } from "../../../Abstracts/MaskedField/MaskedField.js";
+import { TextField } from "../TextField/TextField.js";
+import { createEffect, createMemo, createSignal, untrack } from "solid-js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/DateInput/DateInput.tsx
+var DEFAULT_DATE_INPUT_FORMAT = "iso";
+var DEFAULT_DATE_INPUT_CALENDAR = "gregory";
+var YEAR_LENGTH = 4;
+var MONTH_LENGTH = 2;
+var DAY_LENGTH = 2;
+var DIGIT_COUNT = 8;
+var PART_LENGTHS = {
+	year: YEAR_LENGTH,
+	month: MONTH_LENGTH,
+	day: DAY_LENGTH
+};
+var PART_HINTS = {
+	year: "yyyy",
+	month: "mm",
+	day: "dd"
+};
+var FORMATS = {
+	"iso": {
+		parts: [
+			"year",
+			"month",
+			"day"
+		],
+		separator: "-"
+	},
+	"day-month-year": {
+		parts: [
+			"day",
+			"month",
+			"year"
+		],
+		separator: "/"
+	},
+	"month-day-year": {
+		parts: [
+			"month",
+			"day",
+			"year"
+		],
+		separator: "/"
+	}
+};
+var computeMask = (format) => {
+	const { parts, separator } = FORMATS[format];
+	return parts.map((part) => TextSyncUtils.MASK_DIGIT.repeat(PART_LENGTHS[part])).join(separator);
+};
+var computeHint = (format) => {
+	const { parts, separator } = FORMATS[format];
+	return parts.map((part) => PART_HINTS[part]).join(separator);
+};
+var computeBounds = (anchor) => {
+	const monthCount = DateValueUtils.getMonthsInYear(anchor);
+	const dayCeiling = Array.from({ length: monthCount }, (_, month) => DateValueUtils.getDaysInMonth(anchor.set({
+		month: month + 1,
+		day: 1
+	}))).reduce((longest, days) => Math.max(longest, days), 1);
+	return {
+		year: {
+			min: 1,
+			max: DateValueUtils.getYearsInEra(anchor)
+		},
+		month: {
+			min: 1,
+			max: monthCount
+		},
+		day: {
+			min: 1,
+			max: dayCeiling
+		}
+	};
+};
+var getHasImpossiblePart = (digits, format, anchor) => {
+	const { parts } = FORMATS[format];
+	const bounds = computeBounds(anchor);
+	return TextSyncUtils.readGroups(digits, parts.map((part) => PART_LENGTHS[part])).some((value, index) => value < bounds[parts[index]].min || value > bounds[parts[index]].max);
+};
+var readParts = (digits, format) => {
+	const values = {};
+	let offset = 0;
+	for (const part of FORMATS[format].parts) {
+		values[part] = Number(digits.slice(offset, offset + PART_LENGTHS[part]));
+		offset += PART_LENGTHS[part];
+	}
+	return values;
+};
+var toDigits = (value, format) => FORMATS[format].parts.map((part) => `${value[part]}`.padStart(PART_LENGTHS[part], "0")).join("");
+var DateInput = (props) => {
+	const valueSignal = accessSignal(() => props.valueSignal);
+	const getFormat = createMemo(() => access(props.format) ?? DEFAULT_DATE_INPUT_FORMAT);
+	const getCalendar = createMemo(() => access(props.calendar) ?? DEFAULT_DATE_INPUT_CALENDAR);
+	const getMask = createMemo(() => computeMask(getFormat()));
+	const getFieldValue = () => {
+		const value = valueSignal[0]();
+		return value ? DateValueUtils.withCalendar(value, getCalendar()) : void 0;
+	};
+	const getAnchor = createMemo(() => getFieldValue() ?? DateValueUtils.fromDate(/* @__PURE__ */ new Date(), getCalendar()), void 0, { equals: (a, b) => a.era === b.era && a.year === b.year && a.calendar.identifier === b.calendar.identifier });
+	const getEraOptions = createMemo(() => DateValueUtils.getEras(getAnchor(), access(props.locale)));
+	const [getEra, setEra] = createSignal(untrack(() => {
+		const value = getFieldValue();
+		const options = untrack(getEraOptions);
+		return value ? value.era : options[options.length - 1].id;
+	}));
+	const fromDigits = (digits) => {
+		if (digits.length !== DIGIT_COUNT) return void 0;
+		const parts = readParts(digits, untrack(getFormat));
+		const parsed = DateValueUtils.fromParts({
+			calendar: untrack(getCalendar),
+			era: untrack(getFieldValue)?.era ?? untrack(getEra),
+			year: parts.year,
+			month: parts.month,
+			day: parts.day
+		});
+		return parsed && DateValueUtils.getIsInRange(parsed, access(props.minDate), access(props.maxDate)) ? parsed : void 0;
+	};
+	const field = MaskedField.createField({
+		getValue: getFieldValue,
+		setValue: (next) => valueSignal[1](() => next),
+		formatDigits: (digits) => TextSyncUtils.formatWithMask(getMask(), digits),
+		getDigitCount: () => DIGIT_COUNT,
+		toDigits: (value) => toDigits(value, getFormat()),
+		fromDigits,
+		getHasImpossibleDigits: (digits) => getHasImpossiblePart(digits, getFormat(), getAnchor()),
+		getIsSame: DateValueUtils.isSame
+	});
+	createEffect(() => {
+		const value = getFieldValue();
+		if (value) setEra(value.era);
+	});
+	const era = {
+		getValue: getEra,
+		getOptions: getEraOptions,
+		set: (next) => {
+			setEra(next);
+			const value = untrack(getFieldValue);
+			if (!value) return;
+			field.commit(DateValueUtils.clamp(DateValueUtils.withEra(value, next), access(props.minDate), access(props.maxDate)));
+		}
+	};
+	return createComponent(TextField, mergeProps(props, {
+		get valueSignal() {
+			return field.textSignal;
+		},
+		element: "input",
+		inputMode: "numeric",
+		computeMaskedText: (previous, next, caret) => TextSyncUtils.applyMask(getMask(), previous, next, caret),
+		placeholderHint: () => computeHint(getFormat()),
+		hasError: () => (access(props.hasError) ?? false) || field.getHasIssue(),
+		get renderLeading() {
+			return props.renderLeading && ((getFlags) => props.renderLeading(getFlags, era));
+		},
+		get onInput() {
+			return field.onInput;
+		},
+		get onBlur() {
+			return field.onBlur;
+		}
+	}));
+};
+//#endregion
+export { DateInput };
+
+//# sourceMappingURL=DateInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":["createEffect","createMemo","createSignal","untrack","DateValue","DateValueCalendarId","DateValueUtils","MaskedField","TextSyncUtils","access","accessSignal","TextField","DateInputEra","DateInputFormat","DateInputProps","DEFAULT_DATE_INPUT_FORMAT","DEFAULT_DATE_INPUT_CALENDAR","YEAR_LENGTH","MONTH_LENGTH","DAY_LENGTH","DIGIT_COUNT","DateInputPart","PART_LENGTHS","Record","year","month","day","PART_HINTS","FORMATS","parts","separator","computeMask","format","map","part","MASK_DIGIT","repeat","join","computeHint","computeBounds","anchor","monthCount","getMonthsInYear","dayCeiling","Array","from","length","_","getDaysInMonth","set","reduce","longest","days","Math","max","min","getYearsInEra","getHasImpossiblePart","digits","bounds","readGroups","some","value","index","readParts","values","Partial","offset","Number","slice","toDigits","padStart","DateInput","props","valueSignal","getFormat","getCalendar","calendar","getMask","getFieldValue","withCalendar","undefined","getAnchor","fromDate","Date","equals","a","b","era","identifier","getEraOptions","getEras","locale","getEra","setEra","options","id","fromDigits","parsed","fromParts","getIsInRange","minDate","maxDate","field","createField","getValue","setValue","next","formatDigits","formatWithMask","getDigitCount","getHasImpossibleDigits","getIsSame","isSame","getOptions","commit","clamp","withEra","_$createComponent","_$mergeProps","textSignal","element","inputMode","computeMaskedText","previous","caret","applyMask","placeholderHint","hasError","getHasIssue","renderLeading","getFlags","onInput","onBlur"],"sources":["../../../../src/Fundamentals/Input/DateInput/DateInput.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, untrack } from \"solid-js\";\r\n\r\nimport type { DateValue, DateValueCalendarId } from \"../../../Abstracts/DateValue/DateValue.types\";\r\nimport { DateValueUtils } from \"../../../Abstracts/DateValue/DateValue.utils\";\r\nimport { MaskedField } from \"../../../Abstracts/MaskedField/MaskedField\";\r\nimport { TextSyncUtils } from \"../../../Abstracts/TextSync/TextSync.utils\";\r\nimport { access, accessSignal } from \"../../../Utils/propUtils\";\r\nimport { TextField } from \"../TextField/TextField\";\r\nimport type { DateInputEra, DateInputFormat, DateInputProps } from \"./DateInput.types\";\r\n\r\nconst DEFAULT_DATE_INPUT_FORMAT: DateInputFormat = \"iso\";\r\nconst DEFAULT_DATE_INPUT_CALENDAR: DateValueCalendarId = \"gregory\";\r\n\r\nconst YEAR_LENGTH = 4;\r\nconst MONTH_LENGTH = 2;\r\nconst DAY_LENGTH = 2;\r\nconst DIGIT_COUNT = YEAR_LENGTH + MONTH_LENGTH + DAY_LENGTH;\r\n\r\ntype DateInputPart = \"year\" | \"month\" | \"day\";\r\n\r\nconst PART_LENGTHS: Record<DateInputPart, number> = {\r\n    year: YEAR_LENGTH,\r\n    month: MONTH_LENGTH,\r\n    day: DAY_LENGTH,\r\n};\r\n\r\nconst PART_HINTS: Record<DateInputPart, string> = {\r\n    year: \"yyyy\",\r\n    month: \"mm\",\r\n    day: \"dd\",\r\n};\r\n\r\nconst FORMATS: Record<DateInputFormat, { parts: DateInputPart[]; separator: string }> = {\r\n    \"iso\": { parts: [\"year\", \"month\", \"day\"], separator: \"-\" },\r\n    \"day-month-year\": { parts: [\"day\", \"month\", \"year\"], separator: \"/\" },\r\n    \"month-day-year\": { parts: [\"month\", \"day\", \"year\"], separator: \"/\" },\r\n};\r\n\r\nconst computeMask = (format: DateInputFormat) => {\r\n    const { parts, separator } = FORMATS[format];\r\n\r\n    return parts.map((part) => TextSyncUtils.MASK_DIGIT.repeat(PART_LENGTHS[part])).join(separator);\r\n};\r\n\r\nconst computeHint = (format: DateInputFormat) => {\r\n    const { parts, separator } = FORMATS[format];\r\n\r\n    return parts.map((part) => PART_HINTS[part]).join(separator);\r\n};\r\n\r\nconst computeBounds = (anchor: DateValue) => {\r\n    const monthCount = DateValueUtils.getMonthsInYear(anchor);\r\n    const dayCeiling = Array.from({ length: monthCount }, (_, month) =>\r\n        DateValueUtils.getDaysInMonth(anchor.set({ month: month + 1, day: 1 })),\r\n    ).reduce((longest, days) => Math.max(longest, days), 1);\r\n\r\n    return {\r\n        year: { min: 1, max: DateValueUtils.getYearsInEra(anchor) },\r\n        month: { min: 1, max: monthCount },\r\n        day: { min: 1, max: dayCeiling },\r\n    } satisfies Record<DateInputPart, { min: number; max: number }>;\r\n};\r\n\r\nconst getHasImpossiblePart = (digits: string, format: DateInputFormat, anchor: DateValue) => {\r\n    const { parts } = FORMATS[format];\r\n    const bounds = computeBounds(anchor);\r\n\r\n    return TextSyncUtils.readGroups(\r\n        digits,\r\n        parts.map((part) => PART_LENGTHS[part]),\r\n    ).some((value, index) => value < bounds[parts[index]].min || value > bounds[parts[index]].max);\r\n};\r\n\r\nconst readParts = (digits: string, format: DateInputFormat) => {\r\n    const values: Partial<Record<DateInputPart, number>> = {};\r\n\r\n    let offset = 0;\r\n\r\n    for (const part of FORMATS[format].parts) {\r\n        values[part] = Number(digits.slice(offset, offset + PART_LENGTHS[part]));\r\n        offset += PART_LENGTHS[part];\r\n    }\r\n\r\n    return values;\r\n};\r\n\r\nconst toDigits = (value: DateValue, format: DateInputFormat) =>\r\n    FORMATS[format].parts.map((part) => `${value[part]}`.padStart(PART_LENGTHS[part], \"0\")).join(\"\");\r\n\r\nexport const DateInput = (props: DateInputProps) => {\r\n    const valueSignal = accessSignal(() => props.valueSignal);\r\n\r\n    const getFormat = createMemo(() => access(props.format) ?? DEFAULT_DATE_INPUT_FORMAT);\r\n\r\n    const getCalendar = createMemo(() => access(props.calendar) ?? DEFAULT_DATE_INPUT_CALENDAR);\r\n\r\n    const getMask = createMemo(() => computeMask(getFormat()));\r\n\r\n    const getFieldValue = () => {\r\n        const value = valueSignal[0]();\r\n\r\n        return value ? DateValueUtils.withCalendar(value, getCalendar()) : undefined;\r\n    };\r\n\r\n    const getAnchor = createMemo(\r\n        () => getFieldValue() ?? DateValueUtils.fromDate(new Date(), getCalendar()),\r\n        undefined,\r\n        { equals: (a, b) => a.era === b.era && a.year === b.year && a.calendar.identifier === b.calendar.identifier },\r\n    );\r\n\r\n    const getEraOptions = createMemo(() => DateValueUtils.getEras(getAnchor(), access(props.locale)));\r\n\r\n    const [getEra, setEra] = createSignal<string>(\r\n        untrack(() => {\r\n            const value = getFieldValue();\r\n            const options = untrack(getEraOptions);\r\n\r\n            return value ? value.era : options[options.length - 1].id;\r\n        }),\r\n    );\r\n\r\n    const fromDigits = (digits: string) => {\r\n        if (digits.length !== DIGIT_COUNT) return undefined;\r\n\r\n        const parts = readParts(digits, untrack(getFormat));\r\n        const parsed = DateValueUtils.fromParts({\r\n            calendar: untrack(getCalendar),\r\n            era: untrack(getFieldValue)?.era ?? untrack(getEra),\r\n            year: parts.year!,\r\n            month: parts.month!,\r\n            day: parts.day!,\r\n        });\r\n\r\n        return parsed && DateValueUtils.getIsInRange(parsed, access(props.minDate), access(props.maxDate))\r\n            ? parsed\r\n            : undefined;\r\n    };\r\n\r\n    const field = MaskedField.createField<DateValue>({\r\n        getValue: getFieldValue,\r\n        setValue: (next) => valueSignal[1](() => next),\r\n        formatDigits: (digits) => TextSyncUtils.formatWithMask(getMask(), digits),\r\n        getDigitCount: () => DIGIT_COUNT,\r\n        toDigits: (value) => toDigits(value, getFormat()),\r\n        fromDigits,\r\n        getHasImpossibleDigits: (digits) => getHasImpossiblePart(digits, getFormat(), getAnchor()),\r\n        getIsSame: DateValueUtils.isSame,\r\n    });\r\n\r\n    createEffect(() => {\r\n        const value = getFieldValue();\r\n\r\n        if (value) setEra(value.era);\r\n    });\r\n\r\n    const era: DateInputEra = {\r\n        getValue: getEra,\r\n        getOptions: getEraOptions,\r\n        set: (next) => {\r\n            setEra(next);\r\n\r\n            const value = untrack(getFieldValue);\r\n\r\n            if (!value) return;\r\n\r\n            field.commit(\r\n                DateValueUtils.clamp(DateValueUtils.withEra(value, next), access(props.minDate), access(props.maxDate)),\r\n            );\r\n        },\r\n    };\r\n\r\n    return (\r\n        <TextField\r\n            {...props}\r\n            valueSignal={field.textSignal}\r\n            element={\"input\"}\r\n            inputMode={\"numeric\"}\r\n            computeMaskedText={(previous, next, caret) => TextSyncUtils.applyMask(getMask(), previous, next, caret)}\r\n            placeholderHint={() => computeHint(getFormat())}\r\n            hasError={() => (access(props.hasError) ?? false) || field.getHasIssue()}\r\n            renderLeading={props.renderLeading && ((getFlags) => props.renderLeading!(getFlags, era))}\r\n            onInput={field.onInput}\r\n            onBlur={field.onBlur}\r\n        />\r\n    );\r\n};\r\n"],"mappings":";;;;;;;;AAUA,IAAMe,4BAA6C;AACnD,IAAMC,8BAAmD;AAEzD,IAAMC,cAAc;AACpB,IAAMC,eAAe;AACrB,IAAMC,aAAa;AACnB,IAAMC,cAAcH;AAIpB,IAAMK,eAA8C;CAChDE,MAAMP;CACNQ,OAAOP;CACPQ,KAAKP;AACT;AAEA,IAAMQ,aAA4C;CAC9CH,MAAM;CACNC,OAAO;CACPC,KAAK;AACT;AAEA,IAAME,UAAkF;CACpF,OAAO;EAAEC,OAAO;GAAC;GAAQ;GAAS;EAAK;EAAGC,WAAW;CAAI;CACzD,kBAAkB;EAAED,OAAO;GAAC;GAAO;GAAS;EAAM;EAAGC,WAAW;CAAI;CACpE,kBAAkB;EAAED,OAAO;GAAC;GAAS;GAAO;EAAM;EAAGC,WAAW;CAAI;AACxE;AAEA,IAAMC,eAAeC,WAA4B;CAC7C,MAAM,EAAEH,OAAOC,cAAcF,QAAQI;CAErC,OAAOH,MAAMI,KAAKC,SAAS1B,cAAc2B,WAAWC,OAAOd,aAAaY,KAAK,CAAC,CAAC,CAACG,KAAKP,SAAS;AAClG;AAEA,IAAMQ,eAAeN,WAA4B;CAC7C,MAAM,EAAEH,OAAOC,cAAcF,QAAQI;CAErC,OAAOH,MAAMI,KAAKC,SAASP,WAAWO,KAAK,CAAC,CAACG,KAAKP,SAAS;AAC/D;AAEA,IAAMS,iBAAiBC,WAAsB;CACzC,MAAMC,aAAanC,eAAeoC,gBAAgBF,MAAM;CACxD,MAAMG,aAAaC,MAAMC,KAAK,EAAEC,QAAQL,WAAW,IAAIM,GAAGtB,UACtDnB,eAAe0C,eAAeR,OAAOS,IAAI;EAAExB,OAAOA,QAAQ;EAAGC,KAAK;CAAE,CAAC,CAAC,CAC1E,CAAC,CAACwB,QAAQC,SAASC,SAASC,KAAKC,IAAIH,SAASC,IAAI,GAAG,CAAC;CAEtD,OAAO;EACH5B,MAAM;GAAE+B,KAAK;GAAGD,KAAKhD,eAAekD,cAAchB,MAAM;EAAE;EAC1Df,OAAO;GAAE8B,KAAK;GAAGD,KAAKb;EAAW;EACjCf,KAAK;GAAE6B,KAAK;GAAGD,KAAKX;EAAW;CACnC;AACJ;AAEA,IAAMc,wBAAwBC,QAAgB1B,QAAyBQ,WAAsB;CACzF,MAAM,EAAEX,UAAUD,QAAQI;CAC1B,MAAM2B,SAASpB,cAAcC,MAAM;CAEnC,OAAOhC,cAAcoD,WACjBF,QACA7B,MAAMI,KAAKC,SAASZ,aAAaY,KAAK,CAC1C,CAAC,CAAC2B,MAAMC,OAAOC,UAAUD,QAAQH,OAAO9B,MAAMkC,OAAO,CAACR,OAAOO,QAAQH,OAAO9B,MAAMkC,OAAO,CAACT,GAAG;AACjG;AAEA,IAAMU,aAAaN,QAAgB1B,WAA4B;CAC3D,MAAMiC,SAAiD,CAAC;CAExD,IAAIE,SAAS;CAEb,KAAK,MAAMjC,QAAQN,QAAQI,OAAO,CAACH,OAAO;EACtCoC,OAAO/B,QAAQkC,OAAOV,OAAOW,MAAMF,QAAQA,SAAS7C,aAAaY,KAAK,CAAC;EACvEiC,UAAU7C,aAAaY;CAC3B;CAEA,OAAO+B;AACX;AAEA,IAAMK,YAAYR,OAAkB9B,WAChCJ,QAAQI,OAAO,CAACH,MAAMI,KAAKC,SAAS,GAAG4B,MAAM5B,QAAQqC,SAASjD,aAAaY,OAAO,GAAG,CAAC,CAAC,CAACG,KAAK,EAAE;AAEnG,IAAamC,aAAaC,UAA0B;CAChD,MAAMC,cAAchE,mBAAmB+D,MAAMC,WAAW;CAExD,MAAMC,YAAY1E,iBAAiBQ,OAAOgE,MAAMzC,MAAM,KAAKjB,yBAAyB;CAEpF,MAAM6D,cAAc3E,iBAAiBQ,OAAOgE,MAAMI,QAAQ,KAAK7D,2BAA2B;CAE1F,MAAM8D,UAAU7E,iBAAiB8B,YAAY4C,UAAU,CAAC,CAAC;CAEzD,MAAMI,sBAAsB;EACxB,MAAMjB,QAAQY,YAAY,EAAE,CAAC;EAE7B,OAAOZ,QAAQxD,eAAe0E,aAAalB,OAAOc,YAAY,CAAC,IAAIK,KAAAA;CACvE;CAEA,MAAMC,YAAYjF,iBACR8E,cAAc,KAAKzE,eAAe6E,yBAAS,IAAIC,KAAK,GAAGR,YAAY,CAAC,GAC1EK,KAAAA,GACA,EAAEI,SAASC,GAAGC,MAAMD,EAAEE,QAAQD,EAAEC,OAAOF,EAAE9D,SAAS+D,EAAE/D,QAAQ8D,EAAET,SAASY,eAAeF,EAAEV,SAASY,WAAW,CAChH;CAEA,MAAMC,gBAAgBzF,iBAAiBK,eAAeqF,QAAQT,UAAU,GAAGzE,OAAOgE,MAAMmB,MAAM,CAAC,CAAC;CAEhG,MAAM,CAACC,QAAQC,UAAU5F,aACrBC,cAAc;EACV,MAAM2D,QAAQiB,cAAc;EAC5B,MAAMgB,UAAU5F,QAAQuF,aAAa;EAErC,OAAO5B,QAAQA,MAAM0B,MAAMO,QAAQA,QAAQjD,SAAS,EAAE,CAACkD;CAC3D,CAAC,CACL;CAEA,MAAMC,cAAcvC,WAAmB;EACnC,IAAIA,OAAOZ,WAAW1B,aAAa,OAAO6D,KAAAA;EAE1C,MAAMpD,QAAQmC,UAAUN,QAAQvD,QAAQwE,SAAS,CAAC;EAClD,MAAMuB,SAAS5F,eAAe6F,UAAU;GACpCtB,UAAU1E,QAAQyE,WAAW;GAC7BY,KAAKrF,QAAQ4E,aAAa,CAAC,EAAES,OAAOrF,QAAQ0F,MAAM;GAClDrE,MAAMK,MAAML;GACZC,OAAOI,MAAMJ;GACbC,KAAKG,MAAMH;EACf,CAAC;EAED,OAAOwE,UAAU5F,eAAe8F,aAAaF,QAAQzF,OAAOgE,MAAM4B,OAAO,GAAG5F,OAAOgE,MAAM6B,OAAO,CAAC,IAC3FJ,SACAjB,KAAAA;CACV;CAEA,MAAMsB,QAAQhG,YAAYiG,YAAuB;EAC7CC,UAAU1B;EACV2B,WAAWC,SAASjC,YAAY,EAAE,OAAOiC,IAAI;EAC7CC,eAAelD,WAAWlD,cAAcqG,eAAe/B,QAAQ,GAAGpB,MAAM;EACxEoD,qBAAqB1F;EACrBkD,WAAWR,UAAUQ,SAASR,OAAOa,UAAU,CAAC;EAChDsB;EACAc,yBAAyBrD,WAAWD,qBAAqBC,QAAQiB,UAAU,GAAGO,UAAU,CAAC;EACzF8B,WAAW1G,eAAe2G;CAC9B,CAAC;CAEDjH,mBAAmB;EACf,MAAM8D,QAAQiB,cAAc;EAE5B,IAAIjB,OAAOgC,OAAOhC,MAAM0B,GAAG;CAC/B,CAAC;CAED,MAAMA,MAAoB;EACtBiB,UAAUZ;EACVqB,YAAYxB;EACZzC,MAAM0D,SAAS;GACXb,OAAOa,IAAI;GAEX,MAAM7C,QAAQ3D,QAAQ4E,aAAa;GAEnC,IAAI,CAACjB,OAAO;GAEZyC,MAAMY,OACF7G,eAAe8G,MAAM9G,eAAe+G,QAAQvD,OAAO6C,IAAI,GAAGlG,OAAOgE,MAAM4B,OAAO,GAAG5F,OAAOgE,MAAM6B,OAAO,CAAC,CAC1G;EACJ;CACJ;CAEA,OAAAgB,gBACK3G,WAAS4G,WACF9C,OAAK;EAAA,IACTC,cAAW;GAAA,OAAE6B,MAAMiB;EAAU;EAC7BC,SAAS;EACTC,WAAW;EACXC,oBAAoBC,UAAUjB,MAAMkB,UAAUrH,cAAcsH,UAAUhD,QAAQ,GAAG8C,UAAUjB,MAAMkB,KAAK;EACtGE,uBAAuBzF,YAAYqC,UAAU,CAAC;EAC9CqD,iBAAiBvH,OAAOgE,MAAMuD,QAAQ,KAAK,UAAUzB,MAAM0B,YAAY;EAAC,IACxEC,gBAAa;GAAA,OAAEzD,MAAMyD,mBAAmBC,aAAa1D,MAAMyD,cAAeC,UAAU3C,GAAG;EAAE;EAAA,IACzF4C,UAAO;GAAA,OAAE7B,MAAM6B;EAAO;EAAA,IACtBC,SAAM;GAAA,OAAE9B,MAAM8B;EAAM;CAAA,CAAA,CAAA;AAGhC"}

package/dist/Fundamentals/Input/DatePicker/DatePicker.js

@@ -0,0 +1,93 @@
+import { access } from "../../../Utils/propUtils.js";
+import { DateValueUtils } from "../../../Abstracts/DateValue/DateValue.utils.js";
+import { SignalMirror } from "../../../Abstracts/SignalMirror/SignalMirror.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { Popover } from "../../Popover/Popover.js";
+import { DateInput } from "../DateInput/DateInput.js";
+import { createEffect, createSignal, createUniqueId, untrack } from "solid-js";
+import { createComponent, insert, mergeProps, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/DatePicker/DatePicker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_DATE_PICKER_PLACEMENT = {
+	x: "left-in",
+	y: "bottom-out"
+};
+var DEFAULT_DATE_PICKER_CALENDAR_LABEL = "Choose a date";
+var toMonth = (value) => DateValueUtils.getStartOfMonth(value);
+var DatePicker = (props) => {
+	const popupId = createUniqueId();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);
+	const monthSignal = createSignal(toMonth(untrack(() => props.valueSignal[0]()) ?? DateValueUtils.fromDate(/* @__PURE__ */ new Date())));
+	const dismiss = () => {
+		if (!getIsOpen()) return;
+		setIsOpen(false);
+		getRootRef()?.querySelector("input")?.focus();
+	};
+	const open = () => {
+		setIsOpen(true);
+	};
+	createEffect(() => {
+		if (!getIsOpen()) return;
+		const value = untrack(() => props.valueSignal[0]());
+		if (value) monthSignal[1](() => toMonth(value));
+	});
+	const renderCalendar = () => createComponent(Calendar, {
+		get valueSignal() {
+			return props.valueSignal;
+		},
+		monthSignal,
+		get min() {
+			return props.minDate;
+		},
+		get max() {
+			return props.maxDate;
+		},
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		get locale() {
+			return props.locale;
+		},
+		get weekStartsOn() {
+			return props.weekStartsOn;
+		},
+		ariaLabel: () => access(props.calendarLabel) ?? DEFAULT_DATE_PICKER_CALENDAR_LABEL,
+		get computeIsDayDisabled() {
+			return props.computeIsDayDisabled;
+		},
+		get renderDay() {
+			return props.renderDay;
+		},
+		get renderWeekday() {
+			return props.renderWeekday;
+		}
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		use(setRootRef, _el$);
+		insert(_el$, createComponent(DateInput, mergeProps(props, { renderTrailing: () => props.renderTrigger(getIsOpen, () => getIsOpen() ? dismiss() : open()) })), null);
+		insert(_el$, createComponent(Popover, {
+			id: () => popupId,
+			role: "dialog",
+			ariaAttributes: () => ({ "aria-label": access(props.calendarLabel) ?? DEFAULT_DATE_PICKER_CALENDAR_LABEL }),
+			isOpen: getIsOpen,
+			anchorRef: getRootRef,
+			placement: () => access(props.placement) ?? DEFAULT_DATE_PICKER_PLACEMENT,
+			get offset() {
+				return props.offset;
+			},
+			get transitionDurationMs() {
+				return props.popupTransitionDurationMs;
+			},
+			hasAutoFocus: true,
+			onDismiss: (reason) => reason === "escape" ? dismiss() : setIsOpen(false),
+			renderContent: (getVisibilityTarget, getTransitionDurationMs) => props.renderPopup(renderCalendar, monthSignal, getVisibilityTarget, getTransitionDurationMs)
+		}), null);
+		return _el$;
+	})();
+};
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["Signal","createEffect","createSignal","createUniqueId","untrack","AnchorPlacement","DateValue","DateValueUtils","SignalMirror","access","Popover","Calendar","DateInput","DatePickerProps","DEFAULT_DATE_PICKER_PLACEMENT","x","y","DEFAULT_DATE_PICKER_CALENDAR_LABEL","toMonth","value","getStartOfMonth","DatePicker","props","popupId","getRootRef","setRootRef","HTMLElement","getIsOpen","setIsOpen","createOptional","visibilitySignal","monthSignal","valueSignal","fromDate","Date","dismiss","querySelector","focus","open","renderCalendar","_$createComponent","min","minDate","max","maxDate","isDisabled","locale","weekStartsOn","ariaLabel","calendarLabel","computeIsDayDisabled","renderDay","renderWeekday","_el$","_tmpl$","_$use","_$insert","_$mergeProps","renderTrailing","renderTrigger","id","role","ariaAttributes","isOpen","anchorRef","placement","offset","transitionDurationMs","popupTransitionDurationMs","hasAutoFocus","onDismiss","reason","renderContent","getVisibilityTarget","getTransitionDurationMs","renderPopup"],"sources":["../../../../src/Fundamentals/Input/DatePicker/DatePicker.tsx"],"sourcesContent":["import type { Signal } from \"solid-js\";\nimport { createEffect, createSignal, createUniqueId, untrack } from \"solid-js\";\n\nimport type { AnchorPlacement } from \"../../../Abstracts/Anchor/Anchor.types\";\nimport type { DateValue } from \"../../../Abstracts/DateValue/DateValue.types\";\nimport { DateValueUtils } from \"../../../Abstracts/DateValue/DateValue.utils\";\nimport { SignalMirror } from \"../../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../../Utils/propUtils\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { Calendar } from \"../Calendar/Calendar\";\nimport { DateInput } from \"../DateInput/DateInput\";\nimport type { DatePickerProps } from \"./DatePicker.types\";\n\nconst DEFAULT_DATE_PICKER_PLACEMENT: AnchorPlacement = { x: \"left-in\", y: \"bottom-out\" };\nconst DEFAULT_DATE_PICKER_CALENDAR_LABEL = \"Choose a date\";\n\nconst toMonth = (value: DateValue): DateValue => DateValueUtils.getStartOfMonth(value);\n\nexport const DatePicker = (props: DatePickerProps) => {\n    const popupId = createUniqueId();\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);\n\n    const monthSignal: Signal<DateValue> = createSignal(\n        toMonth(untrack(() => props.valueSignal[0]()) ?? DateValueUtils.fromDate(new Date())),\n    );\n\n    const dismiss = () => {\n        if (!getIsOpen()) return;\n\n        setIsOpen(false);\n        getRootRef()?.querySelector(\"input\")?.focus();\n    };\n\n    const open = () => {\n        setIsOpen(true);\n    };\n\n    createEffect(() => {\n        if (!getIsOpen()) return;\n\n        const value = untrack(() => props.valueSignal[0]());\n\n        if (value) monthSignal[1](() => toMonth(value));\n    });\n\n    const renderCalendar = () => (\n        <Calendar\n            valueSignal={props.valueSignal}\n            monthSignal={monthSignal}\n            min={props.minDate}\n            max={props.maxDate}\n            isDisabled={props.isDisabled}\n            locale={props.locale}\n            weekStartsOn={props.weekStartsOn}\n            ariaLabel={() => access(props.calendarLabel) ?? DEFAULT_DATE_PICKER_CALENDAR_LABEL}\n            computeIsDayDisabled={props.computeIsDayDisabled}\n            renderDay={props.renderDay}\n            renderWeekday={props.renderWeekday}\n        />\n    );\n\n    return (\n        <div ref={setRootRef}>\n            <DateInput\n                {...props}\n                renderTrailing={() => props.renderTrigger(getIsOpen, () => (getIsOpen() ? dismiss() : open()))}\n            />\n\n            <Popover\n                id={() => popupId}\n                role={\"dialog\"}\n                ariaAttributes={() => ({\n                    \"aria-label\": access(props.calendarLabel) ?? DEFAULT_DATE_PICKER_CALENDAR_LABEL,\n                })}\n                isOpen={getIsOpen}\n                anchorRef={getRootRef}\n                placement={() => access(props.placement) ?? DEFAULT_DATE_PICKER_PLACEMENT}\n                offset={props.offset}\n                transitionDurationMs={props.popupTransitionDurationMs}\n                hasAutoFocus={true}\n                onDismiss={(reason) => (reason === \"escape\" ? dismiss() : setIsOpen(false))}\n                renderContent={(getVisibilityTarget, getTransitionDurationMs) =>\n                    props.renderPopup(renderCalendar, monthSignal, getVisibilityTarget, getTransitionDurationMs)\n                }\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;AAaA,IAAMc,gCAAiD;CAAEC,GAAG;CAAWC,GAAG;AAAa;AACvF,IAAMC,qCAAqC;AAE3C,IAAMC,WAAWC,UAAgCZ,eAAea,gBAAgBD,KAAK;AAErF,IAAaE,cAAcC,UAA2B;CAClD,MAAMC,UAAUpB,eAAe;CAE/B,MAAM,CAACqB,YAAYC,cAAcvB,aAA0B;CAC3D,MAAM,CAACyB,WAAWC,aAAapB,aAAaqB,qBAAqBP,MAAMQ,kBAAkB,KAAK;CAE9F,MAAMC,cAAiC7B,aACnCgB,QAAQd,cAAckB,MAAMU,YAAY,EAAE,CAAC,CAAC,KAAKzB,eAAe0B,yBAAS,IAAIC,KAAK,CAAC,CAAC,CACxF;CAEA,MAAMC,gBAAgB;EAClB,IAAI,CAACR,UAAU,GAAG;EAElBC,UAAU,KAAK;EACfJ,WAAW,CAAC,EAAEY,cAAc,OAAO,CAAC,EAAEC,MAAM;CAChD;CAEA,MAAMC,aAAa;EACfV,UAAU,IAAI;CAClB;CAEA3B,mBAAmB;EACf,IAAI,CAAC0B,UAAU,GAAG;EAElB,MAAMR,QAAQf,cAAckB,MAAMU,YAAY,EAAE,CAAC,CAAC;EAElD,IAAIb,OAAOY,YAAY,EAAE,OAAOb,QAAQC,KAAK,CAAC;CAClD,CAAC;CAED,MAAMoB,uBAAiBC,gBAClB7B,UAAQ;EAAA,IACLqB,cAAW;GAAA,OAAEV,MAAMU;EAAW;EACjBD;EAAW,IACxBU,MAAG;GAAA,OAAEnB,MAAMoB;EAAO;EAAA,IAClBC,MAAG;GAAA,OAAErB,MAAMsB;EAAO;EAAA,IAClBC,aAAU;GAAA,OAAEvB,MAAMuB;EAAU;EAAA,IAC5BC,SAAM;GAAA,OAAExB,MAAMwB;EAAM;EAAA,IACpBC,eAAY;GAAA,OAAEzB,MAAMyB;EAAY;EAChCC,iBAAiBvC,OAAOa,MAAM2B,aAAa,KAAKhC;EAAkC,IAClFiC,uBAAoB;GAAA,OAAE5B,MAAM4B;EAAoB;EAAA,IAChDC,YAAS;GAAA,OAAE7B,MAAM6B;EAAS;EAAA,IAC1BC,gBAAa;GAAA,OAAE9B,MAAM8B;EAAa;CAAA,CAAA;CAI1C,cAAA;EAAA,IAAAC,OAAAC,OAAA;EAAAC,IACc9B,YAAU4B,IAAA;EAAAG,OAAAH,MAAAb,gBACf5B,WAAS6C,WACFnC,OAAK,EACToC,sBAAsBpC,MAAMqC,cAAchC,iBAAkBA,UAAU,IAAIQ,QAAQ,IAAIG,KAAK,CAAE,EAAC,CAAA,CAAA,GAAA,IAAA;EAAAkB,OAAAH,MAAAb,gBAGjG9B,SAAO;GACJkD,UAAUrC;GACVsC,MAAM;GACNC,uBAAuB,EACnB,cAAcrD,OAAOa,MAAM2B,aAAa,KAAKhC,mCACjD;GACA8C,QAAQpC;GACRqC,WAAWxC;GACXyC,iBAAiBxD,OAAOa,MAAM2C,SAAS,KAAKnD;GAA6B,IACzEoD,SAAM;IAAA,OAAE5C,MAAM4C;GAAM;GAAA,IACpBC,uBAAoB;IAAA,OAAE7C,MAAM8C;GAAyB;GACrDC,cAAc;GACdC,YAAYC,WAAYA,WAAW,WAAWpC,QAAQ,IAAIP,UAAU,KAAK;GACzE4C,gBAAgBC,qBAAqBC,4BACjCpD,MAAMqD,YAAYpC,gBAAgBR,aAAa0C,qBAAqBC,uBAAuB;EAAC,CAAA,GAAA,IAAA;EAAA,OAAArB;CAAA,EAAA,CAAA;AAKhH"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.css.js","names":[],"sources":["../../../../src/Fundamentals/Input/DateRangePicker/DateRangePicker.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\n\nexport const dateRangePickerRoot = style({\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"fit-content\",\n});\n\nglobalStyle(`${dateRangePickerRoot} > *`, {\n    flexShrink: 0,\n});\n"],"mappings":""}