@thewaver/ss-components 0.0.1 → 0.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","names":["Accessor","createEffect","createMemo","createSignal","onCleanup","Dynamic","CSSUtils","MathUtils","StringUtils","TextSyncElement","TextSync","access","InteractionWrapper","FormFieldUtils","LabelUtils","TextFieldElementProps","TextFieldProps","TextFieldType","styles","DEFAULT_TEXT_FIELD_TYPE","DEFAULT_TEXT_FIELD_PADDING","DEFAULT_TEXT_FIELD_GAP","DEFAULT_TEXT_FIELD_MIN_ROWS","FALLBACK_LINE_HEIGHT_RATIO","createAdornmentWidth","getRef","HTMLElement","getWidth","setWidth","ref","offsetWidth","observer","ResizeObserver","entry","borderBoxSize","inlineSize","observe","disconnect","measureContentHeight","element","minRows","maxRows","style","getComputedStyle","lineHeight","parseFloat","fontSize","framing","paddingTop","paddingBottom","bottom","contentHeight","scrollHeight","floor","ceiling","undefined","Number","POSITIVE_INFINITY","clamp","createAutoHeight","getIsEnabled","getMinRows","getMaxRows","getValue","getHeight","setHeight","measure","lastWidth","clientWidth","width","contentBoxSize","TextFieldElement","props","getAriaLabel","resolveAriaLabel","ariaLabel","getAriaDescribedBy","resolveAriaDescribedBy","getElementRef","setElementRef","getIsDisabled","flags","isDisabled","getIsReadOnly","isReadOnly","getIsTextArea","getIsAutoSizing","isAutoSizing","getType","type","getIsSpinButton","isSpinButton","getValueNow","parsed","value","isFinite","getOverflowY","handleInput","handleCompositionStart","handleCompositionEnd","createValueSync","onInput","computeMaskedText","_$memo","renderContent","renderPlaceholder","_el$","_tmpl$","_$className","textFieldPlaceholder","_$insert","placeholderHint","_$effect","_$p","_$style","textInset","_$createComponent","component","id","rows","name","textFieldElement","classList","textFieldTextArea","computeTextStyle","autocomplete","autoComplete","inputMode","min","max","step","readOnly","role","aria-label","aria-describedby","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","aria-readonly","aria-invalid","hasError","e","InputEvent","currentTarget","onCompositionStart","onCompositionEnd","CompositionEvent","onKeyDown","KeyboardEvent","onBlur","onMouseEnter","MouseEvent","onMouseLeave","renderLeading","_el$2","_ref$","setLeadingRef","_$use","textFieldAdornment","_$setStyleProperty","spreadPadding","paddingLeft","renderTrailing","_el$3","_ref$2","setTrailingRef","paddingRight","TextField","getControlRef","setControlRef","getLeadingRef","getTrailingRef","getLeadingWidth","getTrailingWidth","getMinHeight","valueSignal","getSpreadPadding","padding","getGap","gap","computeInset","edge","adornmentWidth","getLeadingInset","getTrailingInset","getTextInset","spreadableToStyle","camelToKebabCase","_$mergeProps","extraFlags","isEmpty","minWidth","minHeight","renderControl","getFlags"],"sources":["../../../../src/Fundamentals/Input/TextField/TextField.tsx"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nimport { CSSUtils, MathUtils, StringUtils } from \"@thewaver/ss-utils\";\n\nimport type { TextSyncElement } from \"../../../Abstracts/TextSync/TextSync\";\nimport { TextSync } from \"../../../Abstracts/TextSync/TextSync\";\nimport { access } from \"../../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../../InteractionWrapper/InteractionWrapper\";\nimport { FormFieldUtils } from \"../FormField/FormField.utils\";\nimport { LabelUtils } from \"../Label/Label.utils\";\nimport type { TextFieldElementProps, TextFieldProps, TextFieldType } from \"./TextField.types\";\n\nimport * as styles from \"./TextField.css\";\n\nconst DEFAULT_TEXT_FIELD_TYPE: TextFieldType = \"text\";\nconst DEFAULT_TEXT_FIELD_PADDING = 0;\nconst DEFAULT_TEXT_FIELD_GAP = 0;\nconst DEFAULT_TEXT_FIELD_MIN_ROWS = 2;\nconst FALLBACK_LINE_HEIGHT_RATIO = 1.2;\n\nconst createAdornmentWidth = (getRef: Accessor<HTMLElement | undefined>) => {\n    const [getWidth, setWidth] = createSignal(0);\n\n    createEffect(() => {\n        const ref = getRef();\n\n        if (!ref) {\n            setWidth(0);\n            return;\n        }\n\n        setWidth(ref.offsetWidth);\n\n        const observer = new ResizeObserver(([entry]) => {\n            setWidth(entry.borderBoxSize[0].inlineSize);\n        });\n\n        observer.observe(ref);\n\n        onCleanup(() => {\n            observer.disconnect();\n        });\n    });\n\n    return getWidth;\n};\n\nconst measureContentHeight = (element: HTMLElement, minRows: number, maxRows: number | undefined) => {\n    const style = getComputedStyle(element);\n    const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * FALLBACK_LINE_HEIGHT_RATIO;\n    const framing = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n\n    element.style.bottom = \"auto\";\n\n    const contentHeight = element.scrollHeight;\n\n    element.style.bottom = \"\";\n\n    const floor = minRows * lineHeight + framing;\n    const ceiling = maxRows === undefined ? Number.POSITIVE_INFINITY : maxRows * lineHeight + framing;\n\n    return MathUtils.clamp(contentHeight, floor, ceiling);\n};\n\nconst createAutoHeight = (\n    getRef: Accessor<HTMLElement | undefined>,\n    getIsEnabled: Accessor<boolean>,\n    getMinRows: Accessor<number>,\n    getMaxRows: Accessor<number | undefined>,\n    getValue: Accessor<string>,\n) => {\n    const [getHeight, setHeight] = createSignal(0);\n\n    const measure = (element: HTMLElement) => {\n        setHeight(measureContentHeight(element, getMinRows(), getMaxRows()));\n    };\n\n    createEffect(() => {\n        const ref = getRef();\n\n        if (!ref || !getIsEnabled()) {\n            setHeight(0);\n            return;\n        }\n\n        getValue();\n        getMinRows();\n        getMaxRows();\n\n        measure(ref);\n    });\n\n    createEffect(() => {\n        const ref = getRef();\n\n        if (!ref || !getIsEnabled()) return;\n\n        let lastWidth = ref.clientWidth;\n\n        const observer = new ResizeObserver(([entry]) => {\n            const width = entry.contentBoxSize[0].inlineSize;\n\n            if (width === lastWidth) return;\n\n            lastWidth = width;\n\n            measure(ref);\n        });\n\n        observer.observe(ref);\n\n        onCleanup(() => {\n            observer.disconnect();\n        });\n    });\n\n    return getHeight;\n};\n\nconst TextFieldElement = (props: TextFieldElementProps) => {\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\n    );\n    const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();\n\n    const [getElementRef, setElementRef] = createSignal<TextSyncElement>();\n\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    const getIsReadOnly = () => access(props.flags).isReadOnly;\n\n    const getIsTextArea = () => access(props.element) === \"textarea\";\n\n    const getIsAutoSizing = () => getIsTextArea() && (access(props.isAutoSizing) ?? false);\n\n    const getType = () => (getIsTextArea() ? undefined : (access(props.type) ?? DEFAULT_TEXT_FIELD_TYPE));\n\n    const getIsSpinButton = () => access(props.isSpinButton) ?? false;\n\n    const getValueNow = () => {\n        const parsed = Number(access(props.value));\n\n        return access(props.value) !== \"\" && Number.isFinite(parsed) ? parsed : undefined;\n    };\n\n    const getOverflowY = () => {\n        if (!getIsTextArea()) return undefined;\n\n        return getIsAutoSizing() && access(props.maxRows) === undefined ? \"hidden\" : \"auto\";\n    };\n\n    const { handleInput, handleCompositionStart, handleCompositionEnd } = TextSync.createValueSync(\n        getElementRef,\n        () => access(props.value),\n        {\n            onInput: (value) => {\n                void props.onInput?.(value);\n            },\n            computeMaskedText: props.computeMaskedText,\n        },\n    );\n\n    return (\n        <>\n            {props.renderContent(() => access(props.flags))}\n\n            {props.renderPlaceholder && (\n                <div class={styles.textFieldPlaceholder} style={access(props.textInset)}>\n                    {props.renderPlaceholder(() => access(props.flags), access(props.placeholderHint))}\n                </div>\n            )}\n\n            <Dynamic\n                component={access(props.element)}\n                id={access(props.id)}\n                ref={(element: TextSyncElement) => {\n                    setElementRef(element);\n                    props.ref?.(element);\n                }}\n                type={getType()}\n                rows={getIsAutoSizing() ? 1 : undefined}\n                name={access(props.name)}\n                class={styles.textFieldElement}\n                classList={{ [styles.textFieldTextArea]: getIsTextArea() }}\n                style={{\n                    ...access(props.textInset),\n                    ...props.computeTextStyle?.(() => access(props.flags)),\n                    \"overflow-y\": getOverflowY(),\n                }}\n                autocomplete={access(props.autoComplete)}\n                inputMode={access(props.inputMode)}\n                min={getType() === \"number\" ? access(props.min) : undefined}\n                max={getType() === \"number\" ? access(props.max) : undefined}\n                step={getType() === \"number\" ? access(props.step) : undefined}\n                readOnly={getIsDisabled() || getIsReadOnly()}\n                role={getIsSpinButton() ? \"spinbutton\" : undefined}\n                aria-label={getAriaLabel()}\n                aria-describedby={getAriaDescribedBy()}\n                aria-valuenow={getIsSpinButton() ? getValueNow() : undefined}\n                aria-valuemin={getIsSpinButton() ? access(props.min) : undefined}\n                aria-valuemax={getIsSpinButton() ? access(props.max) : undefined}\n                aria-disabled={getIsDisabled() || undefined}\n                aria-readonly={getIsReadOnly() || undefined}\n                aria-invalid={access(props.flags).hasError || undefined}\n                onInput={(e: InputEvent & { currentTarget: TextSyncElement }) => handleInput(e.currentTarget)}\n                onCompositionStart={handleCompositionStart}\n                onCompositionEnd={(e: CompositionEvent & { currentTarget: TextSyncElement }) =>\n                    handleCompositionEnd(e.currentTarget)\n                }\n                onKeyDown={(e: KeyboardEvent) => {\n                    if (getIsDisabled()) return;\n\n                    void props.onKeyDown?.(e);\n                }}\n                onBlur={() => {\n                    if (getIsDisabled()) return;\n\n                    void props.onBlur?.();\n                }}\n                onMouseEnter={(e: MouseEvent) => {\n                    if (getIsDisabled()) return;\n\n                    void props.onMouseEnter?.(e);\n                }}\n                onMouseLeave={(e: MouseEvent) => {\n                    if (getIsDisabled()) return;\n\n                    void props.onMouseLeave?.(e);\n                }}\n            />\n\n            {props.renderLeading && (\n                <div\n                    ref={props.setLeadingRef}\n                    class={styles.textFieldAdornment}\n                    style={{ left: `${access(props.spreadPadding).paddingLeft}px` }}\n                >\n                    {props.renderLeading(() => access(props.flags))}\n                </div>\n            )}\n\n            {props.renderTrailing && (\n                <div\n                    ref={props.setTrailingRef}\n                    class={styles.textFieldAdornment}\n                    style={{ right: `${access(props.spreadPadding).paddingRight}px` }}\n                >\n                    {props.renderTrailing(() => access(props.flags))}\n                </div>\n            )}\n        </>\n    );\n};\n\nexport const TextField = (props: TextFieldProps) => {\n    const [getControlRef, setControlRef] = createSignal<HTMLElement>();\n    const [getLeadingRef, setLeadingRef] = createSignal<HTMLElement>();\n    const [getTrailingRef, setTrailingRef] = createSignal<HTMLElement>();\n\n    const getLeadingWidth = createAdornmentWidth(getLeadingRef);\n    const getTrailingWidth = createAdornmentWidth(getTrailingRef);\n\n    const getIsAutoSizing = createMemo(\n        () => access(props.element) === \"textarea\" && (access(props.isAutoSizing) ?? false),\n    );\n\n    const getMinRows = () => access(props.minRows) ?? DEFAULT_TEXT_FIELD_MIN_ROWS;\n\n    const getMaxRows = () => access(props.maxRows);\n\n    const getMinHeight = createAutoHeight(getControlRef, getIsAutoSizing, getMinRows, getMaxRows, () =>\n        props.valueSignal[0](),\n    );\n\n    const getSpreadPadding = createMemo(() => {\n        const padding = access(props.padding) ?? DEFAULT_TEXT_FIELD_PADDING;\n\n        return typeof padding === \"number\" ? CSSUtils.spreadPadding(padding) : padding;\n    });\n\n    const getGap = () => access(props.gap) ?? DEFAULT_TEXT_FIELD_GAP;\n\n    const computeInset = (edge: number, adornmentWidth: number) =>\n        edge + (adornmentWidth ? adornmentWidth + getGap() : 0);\n\n    const getLeadingInset = createMemo(() => computeInset(getSpreadPadding().paddingLeft, getLeadingWidth()));\n\n    const getTrailingInset = createMemo(() => computeInset(getSpreadPadding().paddingRight, getTrailingWidth()));\n\n    const getTextInset = createMemo(() =>\n        CSSUtils.spreadableToStyle(\n            { ...getSpreadPadding(), paddingLeft: getLeadingInset(), paddingRight: getTrailingInset() },\n            StringUtils.camelToKebabCase,\n        ),\n    );\n\n    return (\n        <InteractionWrapper\n            {...props}\n            extraFlags={() => ({\n                isEmpty: props.valueSignal[0]() === \"\",\n                isReadOnly: access(props.isReadOnly) ?? false,\n            })}\n            minWidth={() => getLeadingInset() + getTrailingInset()}\n            minHeight={getMinHeight}\n            renderControl={(setElementRef, getFlags) => (\n                <TextFieldElement\n                    ref={(element) => {\n                        setElementRef(element);\n                        setControlRef(element);\n                    }}\n                    id={props.id}\n                    element={props.element}\n                    type={props.type}\n                    name={props.name}\n                    ariaLabel={props.ariaLabel}\n                    isSpinButton={props.isSpinButton}\n                    autoComplete={props.autoComplete}\n                    inputMode={props.inputMode}\n                    computeMaskedText={props.computeMaskedText}\n                    placeholderHint={props.placeholderHint}\n                    min={props.min}\n                    max={props.max}\n                    step={props.step}\n                    isAutoSizing={getIsAutoSizing}\n                    minRows={getMinRows}\n                    maxRows={props.maxRows}\n                    flags={getFlags}\n                    value={() => props.valueSignal[0]()}\n                    textInset={getTextInset}\n                    spreadPadding={getSpreadPadding}\n                    setLeadingRef={setLeadingRef}\n                    setTrailingRef={setTrailingRef}\n                    computeTextStyle={props.computeTextStyle}\n                    renderContent={props.renderContent}\n                    renderPlaceholder={props.renderPlaceholder}\n                    renderLeading={props.renderLeading}\n                    renderTrailing={props.renderTrailing}\n                    onInput={(value) => {\n                        props.valueSignal[1](value);\n\n                        void props.onInput?.(value);\n                    }}\n                    onKeyDown={props.onKeyDown}\n                    onBlur={props.onBlur}\n                    onMouseEnter={props.onMouseEnter}\n                    onMouseLeave={props.onMouseLeave}\n                />\n            )}\n        />\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Input/TextInput/TextInput.js

@@ -0,0 +1,8 @@
+import { TextField } from "../TextField/TextField.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/TextInput/TextInput.tsx
+var TextInput = (props) => createComponent(TextField, mergeProps(props, { element: "input" }));
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=TextInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","names":["TextField","TextInputProps","TextInput","props","_$createComponent","_$mergeProps","element"],"sources":["../../../../src/Fundamentals/Input/TextInput/TextInput.tsx"],"sourcesContent":["import { TextField } from \"../TextField/TextField\";\nimport type { TextInputProps } from \"./TextInput.types\";\n\nexport const TextInput = (props: TextInputProps) => <TextField {...props} element={\"input\"} />;\n"],"mappings":";;;AAGA,IAAaE,aAAaC,UAAqBC,gBAAMJ,WAASK,WAAKF,OAAK,EAAEG,SAAS,QAAO,CAAA,CAAA"}

package/dist/Fundamentals/Input/TimeInput/TimeInput.js

@@ -0,0 +1,139 @@
+import { access, accessSignal } 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 { createEffect, createMemo, createSignal, untrack } from "solid-js";
+import { TimeUtils } from "@thewaver/ss-utils";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/TimeInput/TimeInput.tsx
+var SEGMENT_LENGTH = 2;
+var SEPARATOR = ":";
+var SEGMENT_STRIDE = 3;
+var SEGMENT_UNITS = [
+	"hour",
+	"minute",
+	"second"
+];
+var SEGMENT_HINTS = {
+	hour: "hh",
+	minute: "mm",
+	second: "ss"
+};
+var STEP_KEYS = {
+	ArrowUp: 1,
+	ArrowDown: -1
+};
+var DEFAULT_MERIDIEM = "am";
+var SEGMENT_BOUNDS = {
+	hour: {
+		min: 0,
+		max: 23
+	},
+	minute: {
+		min: 0,
+		max: 59
+	},
+	second: {
+		min: 0,
+		max: 59
+	}
+};
+var TWELVE_HOUR_BOUNDS = {
+	min: 1,
+	max: 12
+};
+var getSegmentAt = (caret) => {
+	const index = Math.min(Math.floor(caret / SEGMENT_STRIDE), SEGMENT_UNITS.length - 1);
+	return {
+		unit: SEGMENT_UNITS[index],
+		start: index * SEGMENT_STRIDE
+	};
+};
+var computeMask = (segmentCount) => Array.from({ length: segmentCount }, () => TextSyncUtils.MASK_DIGIT.repeat(SEGMENT_LENGTH)).join(SEPARATOR);
+var computeHint = (segmentCount) => SEGMENT_UNITS.slice(0, segmentCount).map((unit) => SEGMENT_HINTS[unit]).join(SEPARATOR);
+var getHasImpossibleSegment = (digits, segmentCount, isTwelveHour) => {
+	const units = SEGMENT_UNITS.slice(0, segmentCount);
+	return TextSyncUtils.readGroups(digits, units.map(() => SEGMENT_LENGTH)).some((value, index) => {
+		const bounds = units[index] === "hour" && isTwelveHour ? TWELVE_HOUR_BOUNDS : SEGMENT_BOUNDS[units[index]];
+		return value < bounds.min || value > bounds.max;
+	});
+};
+var TimeInput = (props) => {
+	const valueSignal = accessSignal(() => props.valueSignal);
+	const getIsTwelveHour = () => access(props.isTwelveHour) ?? false;
+	const [getMeridiem, setMeridiem] = createSignal(untrack(() => {
+		const value = valueSignal[0]();
+		return value ? TimeUtils.getMeridiem(value) : DEFAULT_MERIDIEM;
+	}));
+	const toText = (value) => getIsTwelveHour() ? TimeUtils.toTwelveHourText(value) : TimeUtils.toIso(value);
+	const parseText = (text) => getIsTwelveHour() ? TimeUtils.fromTwelveHourText(text, untrack(getMeridiem)) : TimeUtils.fromIso(text);
+	const getSegmentCount = () => access(props.hasSeconds) ? SEGMENT_UNITS.length : SEGMENT_UNITS.length - 1;
+	const getMask = createMemo(() => computeMask(getSegmentCount()));
+	const fromDigits = (digits) => {
+		if (digits.length !== getSegmentCount() * SEGMENT_LENGTH) return void 0;
+		const parsed = parseText(TextSyncUtils.formatWithMask(untrack(getMask), digits));
+		return parsed && TimeUtils.getIsInRange(parsed, access(props.minTime), access(props.maxTime)) ? parsed : void 0;
+	};
+	const field = MaskedField.createField({
+		getValue: () => valueSignal[0](),
+		setValue: (next) => valueSignal[1](() => next),
+		formatDigits: (digits) => TextSyncUtils.formatWithMask(getMask(), digits),
+		getDigitCount: () => getSegmentCount() * SEGMENT_LENGTH,
+		toDigits: (value) => TextSyncUtils.getMaskedDigits(toText(value)),
+		fromDigits,
+		getHasImpossibleDigits: (digits) => getHasImpossibleSegment(digits, getSegmentCount(), getIsTwelveHour()),
+		getIsSame: TimeUtils.isSame
+	});
+	createEffect(() => {
+		const value = valueSignal[0]();
+		if (value) setMeridiem(TimeUtils.getMeridiem(value));
+	});
+	const meridiem = {
+		getValue: getMeridiem,
+		set: (next) => {
+			setMeridiem(next);
+			const value = untrack(() => valueSignal[0]());
+			if (!value) return;
+			field.commit(TimeUtils.clamp(TimeUtils.withMeridiem(value, next), access(props.minTime), access(props.maxTime)));
+		},
+		toggle: () => {
+			meridiem.set(getMeridiem() === "am" ? "pm" : "am");
+		}
+	};
+	const handleKeyDown = (e) => {
+		const delta = STEP_KEYS[e.key];
+		const element = e.currentTarget;
+		const value = valueSignal[0]();
+		if (delta === void 0 || !element || !value) return;
+		const segment = getSegmentAt(element.selectionStart ?? 0);
+		const stepped = TimeUtils.clamp(TimeUtils.addUnit(value, segment.unit, delta), access(props.minTime), access(props.maxTime));
+		e.preventDefault();
+		valueSignal[1](() => stepped);
+		field.textSignal[1](field.formatValue(stepped));
+		element.setSelectionRange(segment.start, segment.start + SEGMENT_LENGTH);
+	};
+	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(getSegmentCount()),
+		hasError: () => (access(props.hasError) ?? false) || field.getHasIssue(),
+		get renderTrailing() {
+			return props.renderTrailing && ((getFlags) => props.renderTrailing(getFlags, meridiem));
+		},
+		get onInput() {
+			return field.onInput;
+		},
+		onKeyDown: handleKeyDown,
+		get onBlur() {
+			return field.onBlur;
+		}
+	}));
+};
+//#endregion
+export { TimeInput };
+
+//# sourceMappingURL=TimeInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","names":["createEffect","createMemo","createSignal","untrack","TimeUtils","TimeValue","TimeValueMeridiem","TimeValueUnit","MaskedField","TextSyncUtils","access","accessSignal","TextField","TimeInputMeridiem","TimeInputProps","SEGMENT_LENGTH","SEPARATOR","SEPARATOR_LENGTH","length","SEGMENT_STRIDE","SEGMENT_UNITS","SEGMENT_HINTS","Record","hour","minute","second","STEP_KEYS","ArrowUp","ArrowDown","DEFAULT_MERIDIEM","SEGMENT_BOUNDS","min","max","TWELVE_HOUR_BOUNDS","getSegmentAt","caret","index","Math","floor","unit","start","computeMask","segmentCount","Array","from","MASK_DIGIT","repeat","join","computeHint","slice","map","getHasImpossibleSegment","digits","isTwelveHour","units","readGroups","some","value","bounds","TimeInput","props","valueSignal","getIsTwelveHour","getMeridiem","setMeridiem","toText","toTwelveHourText","toIso","parseText","text","fromTwelveHourText","fromIso","getSegmentCount","hasSeconds","getMask","fromDigits","undefined","parsed","formatWithMask","getIsInRange","minTime","maxTime","field","createField","getValue","setValue","next","formatDigits","getDigitCount","toDigits","getMaskedDigits","getHasImpossibleDigits","getIsSame","isSame","meridiem","set","commit","clamp","withMeridiem","toggle","handleKeyDown","e","KeyboardEvent","delta","key","element","currentTarget","HTMLInputElement","segment","selectionStart","stepped","addUnit","preventDefault","textSignal","formatValue","setSelectionRange","_$createComponent","_$mergeProps","inputMode","computeMaskedText","previous","applyMask","placeholderHint","hasError","getHasIssue","renderTrailing","getFlags","onInput","onKeyDown","onBlur"],"sources":["../../../../src/Fundamentals/Input/TimeInput/TimeInput.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, untrack } from \"solid-js\";\r\n\r\nimport { TimeUtils } from \"@thewaver/ss-utils\";\r\nimport type { TimeValue, TimeValueMeridiem, TimeValueUnit } from \"@thewaver/ss-utils\";\r\n\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 { TimeInputMeridiem, TimeInputProps } from \"./TimeInput.types\";\r\n\r\nconst SEGMENT_LENGTH = 2;\r\nconst SEPARATOR = \":\";\r\nconst SEPARATOR_LENGTH = SEPARATOR.length;\r\nconst SEGMENT_STRIDE = SEGMENT_LENGTH + SEPARATOR_LENGTH;\r\nconst SEGMENT_UNITS: TimeValueUnit[] = [\"hour\", \"minute\", \"second\"];\r\nconst SEGMENT_HINTS: Record<TimeValueUnit, string> = { hour: \"hh\", minute: \"mm\", second: \"ss\" };\r\nconst STEP_KEYS: Record<string, number> = { ArrowUp: 1, ArrowDown: -1 };\r\nconst DEFAULT_MERIDIEM: TimeValueMeridiem = \"am\";\r\n\r\nconst SEGMENT_BOUNDS: Record<TimeValueUnit, { min: number; max: number }> = {\r\n    hour: { min: 0, max: 23 },\r\n    minute: { min: 0, max: 59 },\r\n    second: { min: 0, max: 59 },\r\n};\r\n\r\nconst TWELVE_HOUR_BOUNDS = { min: 1, max: 12 };\r\n\r\nconst getSegmentAt = (caret: number) => {\r\n    const index = Math.min(Math.floor(caret / SEGMENT_STRIDE), SEGMENT_UNITS.length - 1);\r\n\r\n    return { unit: SEGMENT_UNITS[index], start: index * SEGMENT_STRIDE };\r\n};\r\n\r\nconst computeMask = (segmentCount: number) =>\r\n    Array.from({ length: segmentCount }, () => TextSyncUtils.MASK_DIGIT.repeat(SEGMENT_LENGTH)).join(SEPARATOR);\r\n\r\nconst computeHint = (segmentCount: number) =>\r\n    SEGMENT_UNITS.slice(0, segmentCount)\r\n        .map((unit) => SEGMENT_HINTS[unit])\r\n        .join(SEPARATOR);\r\n\r\nconst getHasImpossibleSegment = (digits: string, segmentCount: number, isTwelveHour: boolean) => {\r\n    const units = SEGMENT_UNITS.slice(0, segmentCount);\r\n\r\n    return TextSyncUtils.readGroups(\r\n        digits,\r\n        units.map(() => SEGMENT_LENGTH),\r\n    ).some((value, index) => {\r\n        const bounds = units[index] === \"hour\" && isTwelveHour ? TWELVE_HOUR_BOUNDS : SEGMENT_BOUNDS[units[index]];\r\n\r\n        return value < bounds.min || value > bounds.max;\r\n    });\r\n};\r\n\r\nexport const TimeInput = (props: TimeInputProps) => {\r\n    const valueSignal = accessSignal(() => props.valueSignal);\r\n\r\n    const getIsTwelveHour = () => access(props.isTwelveHour) ?? false;\r\n\r\n    const [getMeridiem, setMeridiem] = createSignal<TimeValueMeridiem>(\r\n        untrack(() => {\r\n            const value = valueSignal[0]();\r\n\r\n            return value ? TimeUtils.getMeridiem(value) : DEFAULT_MERIDIEM;\r\n        }),\r\n    );\r\n\r\n    const toText = (value: TimeValue) =>\r\n        getIsTwelveHour() ? TimeUtils.toTwelveHourText(value) : TimeUtils.toIso(value);\r\n\r\n    const parseText = (text: string) =>\r\n        getIsTwelveHour() ? TimeUtils.fromTwelveHourText(text, untrack(getMeridiem)) : TimeUtils.fromIso(text);\r\n\r\n    const getSegmentCount = () => (access(props.hasSeconds) ? SEGMENT_UNITS.length : SEGMENT_UNITS.length - 1);\r\n\r\n    const getMask = createMemo(() => computeMask(getSegmentCount()));\r\n\r\n    const fromDigits = (digits: string) => {\r\n        if (digits.length !== getSegmentCount() * SEGMENT_LENGTH) return undefined;\r\n\r\n        const parsed = parseText(TextSyncUtils.formatWithMask(untrack(getMask), digits));\r\n\r\n        return parsed && TimeUtils.getIsInRange(parsed, access(props.minTime), access(props.maxTime))\r\n            ? parsed\r\n            : undefined;\r\n    };\r\n\r\n    const field = MaskedField.createField<TimeValue>({\r\n        getValue: () => valueSignal[0](),\r\n        setValue: (next) => valueSignal[1](() => next),\r\n        formatDigits: (digits) => TextSyncUtils.formatWithMask(getMask(), digits),\r\n        getDigitCount: () => getSegmentCount() * SEGMENT_LENGTH,\r\n        toDigits: (value) => TextSyncUtils.getMaskedDigits(toText(value)),\r\n        fromDigits,\r\n        getHasImpossibleDigits: (digits) => getHasImpossibleSegment(digits, getSegmentCount(), getIsTwelveHour()),\r\n        getIsSame: TimeUtils.isSame,\r\n    });\r\n\r\n    createEffect(() => {\r\n        const value = valueSignal[0]();\r\n\r\n        if (value) setMeridiem(TimeUtils.getMeridiem(value));\r\n    });\r\n\r\n    const meridiem: TimeInputMeridiem = {\r\n        getValue: getMeridiem,\r\n        set: (next) => {\r\n            setMeridiem(next);\r\n\r\n            const value = untrack(() => valueSignal[0]());\r\n\r\n            if (!value) return;\r\n\r\n            field.commit(\r\n                TimeUtils.clamp(TimeUtils.withMeridiem(value, next), access(props.minTime), access(props.maxTime)),\r\n            );\r\n        },\r\n        toggle: () => {\r\n            meridiem.set(getMeridiem() === \"am\" ? \"pm\" : \"am\");\r\n        },\r\n    };\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n        const delta = STEP_KEYS[e.key];\r\n        const element = e.currentTarget as HTMLInputElement | null;\r\n        const value = valueSignal[0]();\r\n\r\n        if (delta === undefined || !element || !value) return;\r\n\r\n        const segment = getSegmentAt(element.selectionStart ?? 0);\r\n        const stepped = TimeUtils.clamp(\r\n            TimeUtils.addUnit(value, segment.unit, delta),\r\n            access(props.minTime),\r\n            access(props.maxTime),\r\n        );\r\n\r\n        e.preventDefault();\r\n\r\n        valueSignal[1](() => stepped);\r\n        field.textSignal[1](field.formatValue(stepped));\r\n        element.setSelectionRange(segment.start, segment.start + SEGMENT_LENGTH);\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(getSegmentCount())}\r\n            hasError={() => (access(props.hasError) ?? false) || field.getHasIssue()}\r\n            renderTrailing={props.renderTrailing && ((getFlags) => props.renderTrailing!(getFlags, meridiem))}\r\n            onInput={field.onInput}\r\n            onKeyDown={handleKeyDown}\r\n            onBlur={field.onBlur}\r\n        />\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Input/TimePicker/TimePicker.js

@@ -0,0 +1,101 @@
+import { access } from "../../../Utils/propUtils.js";
+import { SignalMirror } from "../../../Abstracts/SignalMirror/SignalMirror.js";
+import { Clock } from "../Clock/Clock.js";
+import { Popover } from "../../Popover/Popover.js";
+import { TimeInput } from "../TimeInput/TimeInput.js";
+import { createSignal, createUniqueId } from "solid-js";
+import { createComponent, insert, mergeProps, template, use } from "solid-js/web";
+//#region src/Fundamentals/Input/TimePicker/TimePicker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_TIME_PICKER_PLACEMENT = {
+	x: "left-in",
+	y: "bottom-out"
+};
+var DEFAULT_TIME_PICKER_CLOCK_LABEL = "Choose a time";
+var TimePicker = (props) => {
+	const popupId = createUniqueId();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);
+	const getClockLabel = () => access(props.clockLabel) ?? DEFAULT_TIME_PICKER_CLOCK_LABEL;
+	const dismiss = () => {
+		if (!getIsOpen()) return;
+		setIsOpen(false);
+		getRootRef()?.querySelector("input")?.focus();
+	};
+	const open = () => {
+		setIsOpen(true);
+	};
+	const trigger = {
+		getIsOpen,
+		toggle: () => getIsOpen() ? dismiss() : open()
+	};
+	const renderClock = () => createComponent(Clock, {
+		get valueSignal() {
+			return props.valueSignal;
+		},
+		get min() {
+			return props.minTime;
+		},
+		get max() {
+			return props.maxTime;
+		},
+		get steps() {
+			return props.clockSteps;
+		},
+		get gap() {
+			return props.clockGap;
+		},
+		get hasSeconds() {
+			return props.hasSeconds;
+		},
+		get isTwelveHour() {
+			return props.isTwelveHour;
+		},
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		get locale() {
+			return props.locale;
+		},
+		ariaLabel: getClockLabel,
+		get computeIsTimeDisabled() {
+			return props.computeIsTimeDisabled;
+		},
+		get renderOption() {
+			return props.renderOption;
+		},
+		get renderUnit() {
+			return props.renderUnit;
+		},
+		get renderColumn() {
+			return props.renderColumn;
+		}
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		use(setRootRef, _el$);
+		insert(_el$, createComponent(TimeInput, mergeProps(props, { renderTrailing: (getFlags, meridiem) => props.renderTrailing(getFlags, meridiem, trigger) })), null);
+		insert(_el$, createComponent(Popover, {
+			id: () => popupId,
+			role: "dialog",
+			ariaAttributes: () => ({ "aria-label": getClockLabel() }),
+			isOpen: getIsOpen,
+			anchorRef: getRootRef,
+			placement: () => access(props.placement) ?? DEFAULT_TIME_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(renderClock, getVisibilityTarget, getTransitionDurationMs)
+		}), null);
+		return _el$;
+	})();
+};
+//#endregion
+export { TimePicker };
+
+//# sourceMappingURL=TimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["createSignal","createUniqueId","AnchorPlacement","SignalMirror","access","Popover","Clock","TimeInput","TimePickerProps","TimePickerTrigger","DEFAULT_TIME_PICKER_PLACEMENT","x","y","DEFAULT_TIME_PICKER_CLOCK_LABEL","TimePicker","props","popupId","getRootRef","setRootRef","HTMLElement","getIsOpen","setIsOpen","createOptional","visibilitySignal","getClockLabel","clockLabel","dismiss","querySelector","focus","open","trigger","toggle","renderClock","_$createComponent","valueSignal","min","minTime","max","maxTime","steps","clockSteps","gap","clockGap","hasSeconds","isTwelveHour","isDisabled","locale","ariaLabel","computeIsTimeDisabled","renderOption","renderUnit","renderColumn","_el$","_tmpl$","_$use","_$insert","_$mergeProps","renderTrailing","getFlags","meridiem","id","role","ariaAttributes","isOpen","anchorRef","placement","offset","transitionDurationMs","popupTransitionDurationMs","hasAutoFocus","onDismiss","reason","renderContent","getVisibilityTarget","getTransitionDurationMs","renderPopup"],"sources":["../../../../src/Fundamentals/Input/TimePicker/TimePicker.tsx"],"sourcesContent":["import { createSignal, createUniqueId } from \"solid-js\";\n\nimport type { AnchorPlacement } from \"../../../Abstracts/Anchor/Anchor.types\";\nimport { SignalMirror } from \"../../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../../Utils/propUtils\";\nimport { Popover } from \"../../Popover/Popover\";\nimport { Clock } from \"../Clock/Clock\";\nimport { TimeInput } from \"../TimeInput/TimeInput\";\nimport type { TimePickerProps, TimePickerTrigger } from \"./TimePicker.types\";\n\nconst DEFAULT_TIME_PICKER_PLACEMENT: AnchorPlacement = { x: \"left-in\", y: \"bottom-out\" };\nconst DEFAULT_TIME_PICKER_CLOCK_LABEL = \"Choose a time\";\n\nexport const TimePicker = (props: TimePickerProps) => {\n    const popupId = createUniqueId();\n\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\n    const [getIsOpen, setIsOpen] = SignalMirror.createOptional(() => props.visibilitySignal, false);\n\n    const getClockLabel = () => access(props.clockLabel) ?? DEFAULT_TIME_PICKER_CLOCK_LABEL;\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    const trigger: TimePickerTrigger = {\n        getIsOpen,\n        toggle: () => (getIsOpen() ? dismiss() : open()),\n    };\n\n    const renderClock = () => (\n        <Clock\n            valueSignal={props.valueSignal}\n            min={props.minTime}\n            max={props.maxTime}\n            steps={props.clockSteps}\n            gap={props.clockGap}\n            hasSeconds={props.hasSeconds}\n            isTwelveHour={props.isTwelveHour}\n            isDisabled={props.isDisabled}\n            locale={props.locale}\n            ariaLabel={getClockLabel}\n            computeIsTimeDisabled={props.computeIsTimeDisabled}\n            renderOption={props.renderOption}\n            renderUnit={props.renderUnit}\n            renderColumn={props.renderColumn}\n        />\n    );\n\n    return (\n        <div ref={setRootRef}>\n            <TimeInput\n                {...props}\n                renderTrailing={(getFlags, meridiem) => props.renderTrailing(getFlags, meridiem, trigger)}\n            />\n\n            <Popover\n                id={() => popupId}\n                role={\"dialog\"}\n                ariaAttributes={() => ({ \"aria-label\": getClockLabel() })}\n                isOpen={getIsOpen}\n                anchorRef={getRootRef}\n                placement={() => access(props.placement) ?? DEFAULT_TIME_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(renderClock, getVisibilityTarget, getTransitionDurationMs)\n                }\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAUA,IAAMU,gCAAiD;CAAEC,GAAG;CAAWC,GAAG;AAAa;AACvF,IAAMC,kCAAkC;AAExC,IAAaC,cAAcC,UAA2B;CAClD,MAAMC,UAAUf,eAAe;CAE/B,MAAM,CAACgB,YAAYC,cAAclB,aAA0B;CAC3D,MAAM,CAACoB,WAAWC,aAAalB,aAAamB,qBAAqBP,MAAMQ,kBAAkB,KAAK;CAE9F,MAAMC,sBAAsBpB,OAAOW,MAAMU,UAAU,KAAKZ;CAExD,MAAMa,gBAAgB;EAClB,IAAI,CAACN,UAAU,GAAG;EAElBC,UAAU,KAAK;EACfJ,WAAW,CAAC,EAAEU,cAAc,OAAO,CAAC,EAAEC,MAAM;CAChD;CAEA,MAAMC,aAAa;EACfR,UAAU,IAAI;CAClB;CAEA,MAAMS,UAA6B;EAC/BV;EACAW,cAAeX,UAAU,IAAIM,QAAQ,IAAIG,KAAK;CAClD;CAEA,MAAMG,oBAAcC,gBACf3B,OAAK;EAAA,IACF4B,cAAW;GAAA,OAAEnB,MAAMmB;EAAW;EAAA,IAC9BC,MAAG;GAAA,OAAEpB,MAAMqB;EAAO;EAAA,IAClBC,MAAG;GAAA,OAAEtB,MAAMuB;EAAO;EAAA,IAClBC,QAAK;GAAA,OAAExB,MAAMyB;EAAU;EAAA,IACvBC,MAAG;GAAA,OAAE1B,MAAM2B;EAAQ;EAAA,IACnBC,aAAU;GAAA,OAAE5B,MAAM4B;EAAU;EAAA,IAC5BC,eAAY;GAAA,OAAE7B,MAAM6B;EAAY;EAAA,IAChCC,aAAU;GAAA,OAAE9B,MAAM8B;EAAU;EAAA,IAC5BC,SAAM;GAAA,OAAE/B,MAAM+B;EAAM;EACpBC,WAAWvB;EAAa,IACxBwB,wBAAqB;GAAA,OAAEjC,MAAMiC;EAAqB;EAAA,IAClDC,eAAY;GAAA,OAAElC,MAAMkC;EAAY;EAAA,IAChCC,aAAU;GAAA,OAAEnC,MAAMmC;EAAU;EAAA,IAC5BC,eAAY;GAAA,OAAEpC,MAAMoC;EAAY;CAAA,CAAA;CAIxC,cAAA;EAAA,IAAAC,OAAAC,OAAA;EAAAC,IACcpC,YAAUkC,IAAA;EAAAG,OAAAH,MAAAnB,gBACf1B,WAASiD,WACFzC,OAAK,EACT0C,iBAAiBC,UAAUC,aAAa5C,MAAM0C,eAAeC,UAAUC,UAAU7B,OAAO,EAAC,CAAA,CAAA,GAAA,IAAA;EAAAyB,OAAAH,MAAAnB,gBAG5F5B,SAAO;GACJuD,UAAU5C;GACV6C,MAAM;GACNC,uBAAuB,EAAE,cAActC,cAAc,EAAE;GACvDuC,QAAQ3C;GACR4C,WAAW/C;GACXgD,iBAAiB7D,OAAOW,MAAMkD,SAAS,KAAKvD;GAA6B,IACzEwD,SAAM;IAAA,OAAEnD,MAAMmD;GAAM;GAAA,IACpBC,uBAAoB;IAAA,OAAEpD,MAAMqD;GAAyB;GACrDC,cAAc;GACdC,YAAYC,WAAYA,WAAW,WAAW7C,QAAQ,IAAIL,UAAU,KAAK;GACzEmD,gBAAgBC,qBAAqBC,4BACjC3D,MAAM4D,YAAY3C,aAAayC,qBAAqBC,uBAAuB;EAAC,CAAA,GAAA,IAAA;EAAA,OAAAtB;CAAA,EAAA,CAAA;AAKhG"}

package/dist/Fundamentals/Input/Toggle/Toggle.js

@@ -0,0 +1,18 @@
+import { BinarySwitch } from "../BinarySwitch/BinarySwitch.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Input/Toggle/Toggle.tsx
+var Toggle = (props) => {
+	return createComponent(BinarySwitch, mergeProps(props, {
+		type: "checkbox",
+		isSwitch: true,
+		isChecked: () => props.checkedSignal[0](),
+		onChange: (isChecked) => {
+			props.checkedSignal[1](isChecked);
+			props.onChange?.(isChecked);
+		}
+	}));
+};
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["BinarySwitch","ToggleProps","Toggle","props","_$createComponent","_$mergeProps","type","isSwitch","isChecked","checkedSignal","onChange"],"sources":["../../../../src/Fundamentals/Input/Toggle/Toggle.tsx"],"sourcesContent":["import { BinarySwitch } from \"../BinarySwitch/BinarySwitch\";\nimport type { ToggleProps } from \"./Toggle.types\";\n\nexport const Toggle = (props: ToggleProps) => {\n    return (\n        <BinarySwitch\n            {...props}\n            type={\"checkbox\"}\n            isSwitch={true}\n            isChecked={() => props.checkedSignal[0]()}\n            onChange={(isChecked) => {\n                props.checkedSignal[1](isChecked);\n\n                void props.onChange?.(isChecked);\n            }}\n        />\n    );\n};\n"],"mappings":";;;AAGA,IAAaE,UAAUC,UAAuB;CAC1C,OAAAC,gBACKJ,cAAYK,WACLF,OAAK;EACTG,MAAM;EACNC,UAAU;EACVC,iBAAiBL,MAAMM,cAAc,EAAE,CAAC;EACxCC,WAAWF,cAAc;GACrBL,MAAMM,cAAc,EAAE,CAACD,SAAS;GAEhC,MAAWE,WAAWF,SAAS;EACnC;CAAC,CAAA,CAAA;AAGb"}

package/dist/Fundamentals/InteractionWrapper/InteractionWrapper.css.js

@@ -0,0 +1,15 @@
+/* empty css                                      */
+//#region src/Fundamentals/InteractionWrapper/InteractionWrapper.css.ts
+var interactionDisabled = "_1huh3x80";
+var interactionError = "_1huh3x81";
+var interactionPressed = "_1huh3x82";
+var interactionSizingVariants = {
+	"fit-content": "_1huh3x83",
+	fill: "_1huh3x84"
+};
+var interactionRoot = "_1huh3x85";
+var interactionDecorationWrapper = "_1huh3x86";
+//#endregion
+export { interactionDecorationWrapper, interactionDisabled, interactionError, interactionPressed, interactionRoot, interactionSizingVariants };
+
+//# sourceMappingURL=InteractionWrapper.css.js.map

package/dist/Fundamentals/InteractionWrapper/InteractionWrapper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionWrapper.css.js","names":[],"sources":["../../../src/Fundamentals/InteractionWrapper/InteractionWrapper.css.ts"],"sourcesContent":["import { globalStyle, style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const interactionDisabled = style({});\nexport const interactionError = style({});\nexport const interactionPressed = style({});\n\nexport const interactionSizingVariants = styleVariants({\n    \"fit-content\": {\n        width: \"fit-content\",\n    },\n    \"fill\": {\n        width: \"100%\",\n    },\n});\n\nexport const interactionRoot = style({\n    display: \"flex\",\n    position: \"relative\",\n    maxWidth: \"100%\",\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n\n    selectors: {\n        [`&:not(.${interactionDisabled}).${interactionPressed}, &:not(.${interactionDisabled}):has(:focus-visible)`]: {\n            zIndex: 1,\n        },\n        [`&:not(.${interactionDisabled}):hover`]: {\n            zIndex: 2,\n        },\n    },\n});\n\nexport const interactionDecorationWrapper = style({\n    position: \"absolute\",\n    inset: 0,\n});\n\nglobalStyle(`${interactionRoot} > *`, {\n    margin: \"0 !important\",\n});\n"],"mappings":""}

package/dist/Fundamentals/InteractionWrapper/InteractionWrapper.js

@@ -0,0 +1,80 @@
+import { access } from "../../Utils/propUtils.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { interactionDisabled, interactionError, interactionPressed, interactionRoot, interactionSizingVariants } from "./InteractionWrapper.css.js";
+import { Show, createMemo, createSignal } from "solid-js";
+import { classList, className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Fundamentals/InteractionWrapper/InteractionWrapper.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_INTERACTION_SIZING = "fit-content";
+var DEFAULT_INTERACTION_ROLE = "presentation";
+var InteractionWrapper = (props) => {
+	const [getElementRef, setElementRef] = createSignal();
+	const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_INTERACTION_SIZING);
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getTooltipDefs = createMemo(() => access(props.tooltipDefs));
+	const getIsReachable = createMemo(() => InteractionTracker.computeIsReachable(getIsDisabled(), access(props.isReachableWhenDisabled) ?? false, getTooltipDefs() !== void 0, access(props.isFocusableWhenDisabled) ?? false));
+	const { getFlags: getInternalFlags } = InteractionTracker.wrapElement(getElementRef, getIsDisabled, {
+		getIsReachable,
+		getIsTabbable: props.isTabbable === void 0 ? void 0 : () => access(props.isTabbable)
+	});
+	const getIsActivationUntracked = createMemo(() => getIsDisabled() || props.onActivation === void 0);
+	InteractionTracker.trackActivation(getElementRef, getIsActivationUntracked, (activation) => props.onActivation?.(activation));
+	const getFlags = createMemo(() => ({
+		...getInternalFlags(),
+		isDisabled: getIsDisabled(),
+		isPressed: access(props.isPressed),
+		hasError: access(props.hasError),
+		...access(props.extraFlags) ?? {}
+	}));
+	if (props.isReachableWhenDisabled && !props.tooltipDefs) console.warn("InteractionWrapper: getIsReachableWhenDisabled has no effect without getTooltipDefs — a focusable disabled control with nothing to reveal is worse than one skipped by the tab order.");
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => props.renderControl((element) => {
+			setElementRef(element);
+			props.ref?.(element);
+		}, getFlags), null);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!props.renderDecoration);
+			return () => _c$() && (() => {
+				var _el$2 = _tmpl$();
+				className(_el$2, "_1huh3x86");
+				insert(_el$2, () => props.renderDecoration(getFlags));
+				return _el$2;
+			})();
+		})(), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return getTooltipDefs();
+			},
+			children: (getDefs) => createComponent(Tooltip, mergeProps(getDefs, {
+				renderContent: (getVisibilityTarget, getTransitionDurationMs, getPlacement) => getDefs().renderContent(getVisibilityTarget, getTransitionDurationMs, getPlacement, getFlags),
+				anchorRef: getElementRef
+			}))
+		}), null);
+		effect((_p$) => {
+			var _v$ = [interactionRoot, interactionSizingVariants[getSizing()]].join(" "), _v$2 = access(props.role) ?? DEFAULT_INTERACTION_ROLE, _v$3 = props.minWidth ? `${access(props.minWidth)}px` : void 0, _v$4 = access(props.minHeight) ? `${access(props.minHeight)}px` : void 0, _v$5 = {
+				[interactionDisabled]: getIsDisabled(),
+				[interactionError]: access(props.hasError),
+				[interactionPressed]: access(props.isPressed)
+			};
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "role", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$, "min-width", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$, "min-height", _p$.o = _v$4);
+			_p$.i = classList(_el$, _v$5, _p$.i);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { InteractionWrapper };
+
+//# sourceMappingURL=InteractionWrapper.js.map

package/dist/Fundamentals/InteractionWrapper/InteractionWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionWrapper.js","names":["Show","createMemo","createSignal","InteractionTracker","InteractionFlags","access","Tooltip","InteractionSizing","InteractionWrapperProps","styles","DEFAULT_INTERACTION_SIZING","DEFAULT_INTERACTION_ROLE","InteractionWrapper","props","TExtra","getElementRef","setElementRef","HTMLElement","getSizing","sizing","getIsDisabled","isDisabled","getTooltipDefs","tooltipDefs","getIsReachable","computeIsReachable","isReachableWhenDisabled","undefined","isFocusableWhenDisabled","getFlags","getInternalFlags","wrapElement","getIsTabbable","isTabbable","getIsActivationUntracked","onActivation","trackActivation","activation","isPressed","hasError","extraFlags","console","warn","_el$","_tmpl$","_$insert","renderControl","element","ref","_c$","_$memo","renderDecoration","_el$2","_$className","interactionDecorationWrapper","_$createComponent","when","children","getDefs","_$mergeProps","renderContent","getVisibilityTarget","getTransitionDurationMs","getPlacement","anchorRef","_$effect","_p$","_v$","interactionRoot","interactionSizingVariants","join","_v$2","role","_v$3","minWidth","_v$4","minHeight","_v$5","interactionDisabled","interactionError","interactionPressed","e","t","_$setAttribute","a","_$setStyleProperty","o","i","_$classList"],"sources":["../../../src/Fundamentals/InteractionWrapper/InteractionWrapper.tsx"],"sourcesContent":["import { Show, createMemo, createSignal } from \"solid-js\";\r\n\r\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\r\nimport type { InteractionFlags } from \"../../Abstracts/InteractionTracker/InteractionTracker.types\";\r\nimport { access } from \"../../Utils/propUtils\";\r\nimport { Tooltip } from \"../Tooltip/Tooltip\";\r\nimport type { InteractionSizing, InteractionWrapperProps } from \"./InteractionWrapper.types\";\r\n\r\nimport * as styles from \"./InteractionWrapper.css\";\r\n\r\nconst DEFAULT_INTERACTION_SIZING: InteractionSizing = \"fit-content\";\r\nconst DEFAULT_INTERACTION_ROLE = \"presentation\";\r\n\r\nexport const InteractionWrapper = <TExtra extends object = {}>(props: InteractionWrapperProps<TExtra>) => {\r\n    const [getElementRef, setElementRef] = createSignal<HTMLElement>();\r\n\r\n    const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_INTERACTION_SIZING);\r\n\r\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\r\n\r\n    const getTooltipDefs = createMemo(() => access(props.tooltipDefs));\r\n\r\n    const getIsReachable = createMemo(() =>\r\n        InteractionTracker.computeIsReachable(\r\n            getIsDisabled(),\r\n            access(props.isReachableWhenDisabled) ?? false,\r\n            getTooltipDefs() !== undefined,\r\n            access(props.isFocusableWhenDisabled) ?? false,\r\n        ),\r\n    );\r\n\r\n    const { getFlags: getInternalFlags } = InteractionTracker.wrapElement(getElementRef, getIsDisabled, {\r\n        getIsReachable,\r\n        getIsTabbable: props.isTabbable === undefined ? undefined : () => access(props.isTabbable)!,\r\n    });\r\n\r\n    const getIsActivationUntracked = createMemo(() => getIsDisabled() || props.onActivation === undefined);\r\n\r\n    InteractionTracker.trackActivation(getElementRef, getIsActivationUntracked, (activation) =>\r\n        props.onActivation?.(activation),\r\n    );\r\n\r\n    const getFlags = createMemo((): InteractionFlags<TExtra> => ({\r\n        ...getInternalFlags(),\r\n        isDisabled: getIsDisabled(),\r\n        isPressed: access(props.isPressed),\r\n        hasError: access(props.hasError),\r\n        ...(access(props.extraFlags) ?? ({} as TExtra)),\r\n    }));\r\n\r\n    if (props.isReachableWhenDisabled && !props.tooltipDefs) {\r\n        console.warn(\r\n            \"InteractionWrapper: getIsReachableWhenDisabled has no effect without getTooltipDefs — a focusable disabled control with nothing to reveal is worse than one skipped by the tab order.\",\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div\r\n            class={[styles.interactionRoot, styles.interactionSizingVariants[getSizing()]].join(\" \")}\r\n            role={access(props.role) ?? DEFAULT_INTERACTION_ROLE}\r\n            style={{\r\n                \"min-width\": props.minWidth ? `${access(props.minWidth)}px` : undefined,\r\n                \"min-height\": access(props.minHeight) ? `${access(props.minHeight)}px` : undefined,\r\n            }}\r\n            classList={{\r\n                [styles.interactionDisabled]: getIsDisabled(),\r\n                [styles.interactionError]: access(props.hasError),\r\n                [styles.interactionPressed]: access(props.isPressed),\r\n            }}\r\n        >\r\n            {props.renderControl((element) => {\r\n                setElementRef(element);\r\n                props.ref?.(element);\r\n            }, getFlags)}\r\n\r\n            {props.renderDecoration && (\r\n                <div class={styles.interactionDecorationWrapper}>{props.renderDecoration(getFlags)}</div>\r\n            )}\r\n\r\n            <Show when={getTooltipDefs()}>\r\n                {(getDefs) => (\r\n                    <Tooltip\r\n                        {...getDefs()}\r\n                        renderContent={(getVisibilityTarget, getTransitionDurationMs, getPlacement) =>\r\n                            getDefs().renderContent(\r\n                                getVisibilityTarget,\r\n                                getTransitionDurationMs,\r\n                                getPlacement,\r\n                                getFlags,\r\n                            )\r\n                        }\r\n                        anchorRef={getElementRef}\r\n                    />\r\n                )}\r\n            </Show>\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Menu/Menu.css.js

@@ -0,0 +1,8 @@
+/* empty css                        */
+//#region src/Fundamentals/Menu/Menu.css.ts
+var menuTrigger = "_1ifbzol0";
+var menuItem = "_1ifbzol1";
+//#endregion
+export { menuItem, menuTrigger };
+
+//# sourceMappingURL=Menu.css.js.map

package/dist/Fundamentals/Menu/Menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.css.js","names":[],"sources":["../../../src/Fundamentals/Menu/Menu.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const menuTrigger = 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 menuItem = 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":""}