@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/SlideButton/SlideButton.js

@@ -0,0 +1,192 @@
+import { access } from "../../Utils/propUtils.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { SignalMirror } from "../../Abstracts/SignalMirror/SignalMirror.js";
+import { LabelUtils } from "../Input/Label/Label.utils.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { FormFieldUtils } from "../Input/FormField/FormField.utils.js";
+import { SlideButtonUtils } from "./SlideButton.utils.js";
+import { slideButtonElement } from "./SlideButton.css.js";
+import { createMemo, createRenderEffect, createSignal, onCleanup } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, template, use } from "solid-js/web";
+//#region src/Fundamentals/SlideButton/SlideButton.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var DEFAULT_SLIDE_BUTTON_THUMB_SIZE = 40;
+var DEFAULT_SLIDE_BUTTON_HOLD_DURATION_MS = 1e3;
+var DRAG_THRESHOLD_PX = 4;
+var RATIO_MIN = 0;
+var RATIO_MAX = 1;
+var SlideButtonElement = (props) => {
+	const getAriaLabel = LabelUtils.resolveAriaLabel(props.ariaLabel === void 0 ? void 0 : () => access(props.ariaLabel));
+	const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();
+	const [getTrackRef, setTrackRef] = createSignal();
+	const [getPress, setPress] = createSignal();
+	const [getGrabRatio, setGrabRatio] = createSignal();
+	const [getIsHolding, setIsHolding] = createSignal(false);
+	let holdFrame;
+	const getIsDisabled = createMemo(() => access(props.flags).isDisabled ?? false);
+	const getTrackWidth = () => getTrackRef()?.clientWidth ?? 0;
+	const getThumbRatio = () => SlideButtonUtils.computeWidthRatio(getTrackWidth(), access(props.thumbSize));
+	const stopHold = () => {
+		if (holdFrame !== void 0) cancelAnimationFrame(holdFrame);
+		holdFrame = void 0;
+		if (!getIsHolding()) return;
+		setIsHolding(false);
+		props.setProgressRatio(RATIO_MIN);
+	};
+	const startHold = () => {
+		if (getIsHolding() || getGrabRatio() !== void 0) return;
+		const startedAtMs = performance.now();
+		const step = () => {
+			const ratio = SlideButtonUtils.computeHoldRatio(performance.now() - startedAtMs, access(props.holdDurationMs));
+			props.setProgressRatio(ratio);
+			if (ratio < RATIO_MAX) {
+				holdFrame = requestAnimationFrame(step);
+				return;
+			}
+			holdFrame = void 0;
+			props.onActivate?.();
+		};
+		setIsHolding(true);
+		step();
+	};
+	const { getIsDragging } = InteractionTracker.trackDrag(getTrackRef, getIsDisabled, {
+		onDrag: (ratio) => {
+			const thumbRatio = getThumbRatio();
+			const press = getPress();
+			if (!press) {
+				setPress({
+					ratio: ratio.x,
+					isOnThumb: SlideButtonUtils.computeIsOnThumb(ratio.x, access(props.progressRatio), thumbRatio)
+				});
+				startHold();
+				return;
+			}
+			const grabRatio = getGrabRatio();
+			if (grabRatio !== void 0) {
+				props.setProgressRatio(SlideButtonUtils.computeProgressRatio(ratio.x, grabRatio, thumbRatio));
+				return;
+			}
+			if (!press.isOnThumb) return;
+			if (Math.abs(ratio.x - press.ratio) < SlideButtonUtils.computeWidthRatio(getTrackWidth(), DRAG_THRESHOLD_PX)) return;
+			const nextGrabRatio = SlideButtonUtils.computeGrabRatio(press.ratio, RATIO_MIN, thumbRatio);
+			stopHold();
+			setGrabRatio(nextGrabRatio);
+			props.setProgressRatio(SlideButtonUtils.computeProgressRatio(ratio.x, nextGrabRatio, thumbRatio));
+		},
+		onDragEnd: (reason) => {
+			const grabRatio = getGrabRatio();
+			stopHold();
+			setPress(void 0);
+			if (grabRatio === void 0) return;
+			if (reason === "release" && access(props.progressRatio) >= RATIO_MAX) props.onActivate?.();
+			setGrabRatio(void 0);
+			props.setProgressRatio(RATIO_MIN);
+		}
+	});
+	createRenderEffect(() => {
+		props.setIsDragging(getIsDragging() && getGrabRatio() !== void 0);
+	});
+	createRenderEffect(() => {
+		props.setIsHolding(getIsHolding());
+	});
+	createRenderEffect(() => {
+		if (!getIsDisabled()) return;
+		stopHold();
+		setPress(void 0);
+		setGrabRatio(void 0);
+		props.setProgressRatio(RATIO_MIN);
+	});
+	onCleanup(stopHold);
+	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$.addEventListener("blur", () => stopHold());
+		_el$.$$keyup = (e) => {
+			if (e.key !== "Enter" && e.key !== " ") return;
+			stopHold();
+		};
+		_el$.$$keydown = (e) => {
+			if (getIsDisabled()) return;
+			if (e.repeat) return;
+			if (e.key !== "Enter" && e.key !== " ") return;
+			startHold();
+		};
+		use((element) => {
+			setTrackRef(element);
+			props.ref?.(element);
+		}, _el$);
+		className(_el$, slideButtonElement);
+		insert(_el$, () => props.renderContent(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = getAriaLabel(), _v$3 = getAriaDescribedBy(), _v$4 = getIsDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-describedby", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-disabled", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+var SlideButton = (props) => {
+	const [getProgressRatio, setProgressRatio] = SignalMirror.createOptional(() => props.progressSignal, RATIO_MIN);
+	const [getIsDragging, setIsDragging] = createSignal(false);
+	const [getIsHolding, setIsHolding] = createSignal(false);
+	const getThumbSize = createMemo(() => access(props.thumbSize) ?? DEFAULT_SLIDE_BUTTON_THUMB_SIZE);
+	const getHoldDurationMs = createMemo(() => access(props.holdDurationMs) ?? DEFAULT_SLIDE_BUTTON_HOLD_DURATION_MS);
+	return createComponent(InteractionWrapper, mergeProps(props, {
+		extraFlags: () => ({
+			progressRatio: getProgressRatio(),
+			isDragging: getIsDragging(),
+			isHolding: getIsHolding()
+		}),
+		renderControl: (setElementRef, getRenderProps) => createComponent(SlideButtonElement, {
+			ref(r$) {
+				var _ref$ = setElementRef;
+				typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+			},
+			get id() {
+				return props.id;
+			},
+			get ariaLabel() {
+				return props.ariaLabel;
+			},
+			thumbSize: getThumbSize,
+			holdDurationMs: getHoldDurationMs,
+			flags: getRenderProps,
+			progressRatio: getProgressRatio,
+			get renderContent() {
+				return props.renderContent;
+			},
+			setProgressRatio,
+			setIsDragging,
+			setIsHolding,
+			get onActivate() {
+				return props.onActivate;
+			},
+			get onMouseEnter() {
+				return props.onMouseEnter;
+			},
+			get onMouseLeave() {
+				return props.onMouseLeave;
+			}
+		})
+	}));
+};
+delegateEvents(["keydown", "keyup"]);
+//#endregion
+export { SlideButton };
+
+//# sourceMappingURL=SlideButton.js.map

package/dist/Fundamentals/SlideButton/SlideButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideButton.js","names":["createMemo","createRenderEffect","createSignal","onCleanup","InteractionTracker","SignalMirror","access","FormFieldUtils","LabelUtils","InteractionWrapper","SlideButtonElementProps","SlideButtonPress","SlideButtonProps","SlideButtonRenderProps","SlideButtonUtils","styles","DEFAULT_SLIDE_BUTTON_THUMB_SIZE","DEFAULT_SLIDE_BUTTON_HOLD_DURATION_MS","DRAG_THRESHOLD_PX","RATIO_MIN","RATIO_MAX","SlideButtonElement","props","getAriaLabel","resolveAriaLabel","ariaLabel","undefined","getAriaDescribedBy","resolveAriaDescribedBy","getTrackRef","setTrackRef","HTMLElement","getPress","setPress","getGrabRatio","setGrabRatio","getIsHolding","setIsHolding","holdFrame","getIsDisabled","flags","isDisabled","getTrackWidth","clientWidth","getThumbRatio","computeWidthRatio","thumbSize","stopHold","cancelAnimationFrame","setProgressRatio","startHold","startedAtMs","performance","now","step","ratio","computeHoldRatio","holdDurationMs","requestAnimationFrame","onActivate","getIsDragging","trackDrag","onDrag","thumbRatio","press","x","isOnThumb","computeIsOnThumb","progressRatio","grabRatio","computeProgressRatio","Math","abs","nextGrabRatio","computeGrabRatio","onDragEnd","reason","setIsDragging","_el$","_tmpl$","addEventListener","e","onMouseLeave","onMouseEnter","$$keyup","key","$$keydown","repeat","_$use","element","ref","_$className","slideButtonElement","_$insert","renderContent","_$effect","_p$","_v$","id","_v$2","_v$3","_v$4","_$setAttribute","t","a","o","SlideButton","getProgressRatio","createOptional","progressSignal","getThumbSize","getHoldDurationMs","_$createComponent","_$mergeProps","extraFlags","isDragging","isHolding","renderControl","setElementRef","getRenderProps","r$","_ref$","_$delegateEvents"],"sources":["../../../src/Fundamentals/SlideButton/SlideButton.tsx"],"sourcesContent":["import { createMemo, createRenderEffect, createSignal, onCleanup } from \"solid-js\";\n\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\nimport { access } from \"../../Utils/propUtils\";\nimport { FormFieldUtils } from \"../Input/FormField/FormField.utils\";\nimport { LabelUtils } from \"../Input/Label/Label.utils\";\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\nimport type {\n    SlideButtonElementProps,\n    SlideButtonPress,\n    SlideButtonProps,\n    SlideButtonRenderProps,\n} from \"./SlideButton.types\";\nimport { SlideButtonUtils } from \"./SlideButton.utils\";\n\nimport * as styles from \"./SlideButton.css\";\n\nconst DEFAULT_SLIDE_BUTTON_THUMB_SIZE = 40;\nconst DEFAULT_SLIDE_BUTTON_HOLD_DURATION_MS = 1000;\nconst DRAG_THRESHOLD_PX = 4;\nconst RATIO_MIN = 0;\nconst RATIO_MAX = 1;\n\nconst SlideButtonElement = (props: SlideButtonElementProps) => {\n    const getAriaLabel = LabelUtils.resolveAriaLabel(\n        props.ariaLabel === undefined ? undefined : () => access(props.ariaLabel)!,\n    );\n    const getAriaDescribedBy = FormFieldUtils.resolveAriaDescribedBy();\n\n    const [getTrackRef, setTrackRef] = createSignal<HTMLElement>();\n    const [getPress, setPress] = createSignal<SlideButtonPress>();\n    const [getGrabRatio, setGrabRatio] = createSignal<number>();\n    const [getIsHolding, setIsHolding] = createSignal(false);\n\n    let holdFrame: number | undefined;\n\n    const getIsDisabled = createMemo(() => access(props.flags).isDisabled ?? false);\n\n    const getTrackWidth = () => getTrackRef()?.clientWidth ?? 0;\n\n    const getThumbRatio = () => SlideButtonUtils.computeWidthRatio(getTrackWidth(), access(props.thumbSize));\n\n    const stopHold = () => {\n        if (holdFrame !== undefined) cancelAnimationFrame(holdFrame);\n\n        holdFrame = undefined;\n\n        if (!getIsHolding()) return;\n\n        setIsHolding(false);\n        props.setProgressRatio(RATIO_MIN);\n    };\n\n    const startHold = () => {\n        if (getIsHolding() || getGrabRatio() !== undefined) return;\n\n        const startedAtMs = performance.now();\n\n        const step = () => {\n            const ratio = SlideButtonUtils.computeHoldRatio(\n                performance.now() - startedAtMs,\n                access(props.holdDurationMs),\n            );\n\n            props.setProgressRatio(ratio);\n\n            if (ratio < RATIO_MAX) {\n                holdFrame = requestAnimationFrame(step);\n\n                return;\n            }\n\n            holdFrame = undefined;\n\n            void props.onActivate?.();\n        };\n\n        setIsHolding(true);\n        step();\n    };\n\n    const { getIsDragging } = InteractionTracker.trackDrag(getTrackRef, getIsDisabled, {\n        onDrag: (ratio) => {\n            const thumbRatio = getThumbRatio();\n            const press = getPress();\n\n            if (!press) {\n                setPress({\n                    ratio: ratio.x,\n                    isOnThumb: SlideButtonUtils.computeIsOnThumb(ratio.x, access(props.progressRatio), thumbRatio),\n                });\n                startHold();\n\n                return;\n            }\n\n            const grabRatio = getGrabRatio();\n\n            if (grabRatio !== undefined) {\n                props.setProgressRatio(SlideButtonUtils.computeProgressRatio(ratio.x, grabRatio, thumbRatio));\n\n                return;\n            }\n\n            if (!press.isOnThumb) return;\n            if (\n                Math.abs(ratio.x - press.ratio) < SlideButtonUtils.computeWidthRatio(getTrackWidth(), DRAG_THRESHOLD_PX)\n            ) {\n                return;\n            }\n\n            const nextGrabRatio = SlideButtonUtils.computeGrabRatio(press.ratio, RATIO_MIN, thumbRatio);\n\n            stopHold();\n            setGrabRatio(nextGrabRatio);\n            props.setProgressRatio(SlideButtonUtils.computeProgressRatio(ratio.x, nextGrabRatio, thumbRatio));\n        },\n        onDragEnd: (reason) => {\n            const grabRatio = getGrabRatio();\n\n            stopHold();\n            setPress(undefined);\n\n            if (grabRatio === undefined) return;\n\n            if (reason === \"release\" && access(props.progressRatio) >= RATIO_MAX) void props.onActivate?.();\n\n            setGrabRatio(undefined);\n            props.setProgressRatio(RATIO_MIN);\n        },\n    });\n\n    createRenderEffect(() => {\n        props.setIsDragging(getIsDragging() && getGrabRatio() !== undefined);\n    });\n\n    createRenderEffect(() => {\n        props.setIsHolding(getIsHolding());\n    });\n\n    createRenderEffect(() => {\n        if (!getIsDisabled()) return;\n\n        stopHold();\n        setPress(undefined);\n        setGrabRatio(undefined);\n        props.setProgressRatio(RATIO_MIN);\n    });\n\n    onCleanup(stopHold);\n\n    return (\n        <button\n            id={access(props.id)}\n            ref={(element) => {\n                setTrackRef(element);\n                props.ref?.(element);\n            }}\n            type=\"button\"\n            class={styles.slideButtonElement}\n            aria-label={getAriaLabel()}\n            aria-describedby={getAriaDescribedBy()}\n            aria-disabled={getIsDisabled() || undefined}\n            onKeyDown={(e) => {\n                if (getIsDisabled()) return;\n                if (e.repeat) return;\n                if (e.key !== \"Enter\" && e.key !== \" \") return;\n\n                startHold();\n            }}\n            onKeyUp={(e) => {\n                if (e.key !== \"Enter\" && e.key !== \" \") return;\n\n                stopHold();\n            }}\n            onBlur={() => stopHold()}\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 SlideButton = (props: SlideButtonProps) => {\n    const [getProgressRatio, setProgressRatio] = SignalMirror.createOptional(() => props.progressSignal, RATIO_MIN);\n    const [getIsDragging, setIsDragging] = createSignal(false);\n    const [getIsHolding, setIsHolding] = createSignal(false);\n\n    const getThumbSize = createMemo(() => access(props.thumbSize) ?? DEFAULT_SLIDE_BUTTON_THUMB_SIZE);\n\n    const getHoldDurationMs = createMemo(() => access(props.holdDurationMs) ?? DEFAULT_SLIDE_BUTTON_HOLD_DURATION_MS);\n\n    return (\n        <InteractionWrapper\n            {...props}\n            extraFlags={(): SlideButtonRenderProps => ({\n                progressRatio: getProgressRatio(),\n                isDragging: getIsDragging(),\n                isHolding: getIsHolding(),\n            })}\n            renderControl={(setElementRef, getRenderProps) => (\n                <SlideButtonElement\n                    ref={setElementRef}\n                    id={props.id}\n                    ariaLabel={props.ariaLabel}\n                    thumbSize={getThumbSize}\n                    holdDurationMs={getHoldDurationMs}\n                    flags={getRenderProps}\n                    progressRatio={getProgressRatio}\n                    renderContent={props.renderContent}\n                    setProgressRatio={setProgressRatio}\n                    setIsDragging={setIsDragging}\n                    setIsHolding={setIsHolding}\n                    onActivate={props.onActivate}\n                    onMouseEnter={props.onMouseEnter}\n                    onMouseLeave={props.onMouseLeave}\n                />\n            )}\n        />\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/SlideButton/SlideButton.utils.js

@@ -0,0 +1,27 @@
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/SlideButton/SlideButton.utils.ts
+var RATIO_MIN = 0;
+var RATIO_MAX = 1;
+var computeThumbStart = (progressRatio, thumbRatio) => progressRatio * (RATIO_MAX - thumbRatio);
+var SlideButtonUtils;
+(function(_SlideButtonUtils) {
+	_SlideButtonUtils.computeWidthRatio = (trackWidth, widthPx) => trackWidth > 0 ? Math.min(widthPx / trackWidth, RATIO_MAX) : RATIO_MAX;
+	const computeGrabRatio = _SlideButtonUtils.computeGrabRatio = (pointerRatio, progressRatio, thumbRatio) => pointerRatio - computeThumbStart(progressRatio, thumbRatio);
+	_SlideButtonUtils.computeIsOnThumb = (pointerRatio, progressRatio, thumbRatio) => {
+		const grabRatio = computeGrabRatio(pointerRatio, progressRatio, thumbRatio);
+		return grabRatio >= RATIO_MIN && grabRatio <= thumbRatio;
+	};
+	_SlideButtonUtils.computeProgressRatio = (pointerRatio, grabRatio, thumbRatio) => {
+		const travelRatio = RATIO_MAX - thumbRatio;
+		if (travelRatio <= 0) return RATIO_MIN;
+		return MathUtils.clamp01((pointerRatio - grabRatio) / travelRatio);
+	};
+	_SlideButtonUtils.computeHoldRatio = (elapsedMs, durationMs) => {
+		if (durationMs <= 0) return RATIO_MAX;
+		return MathUtils.clamp01(elapsedMs / durationMs);
+	};
+})(SlideButtonUtils || (SlideButtonUtils = {}));
+//#endregion
+export { SlideButtonUtils };
+
+//# sourceMappingURL=SlideButton.utils.js.map

package/dist/Fundamentals/SlideButton/SlideButton.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideButton.utils.js","names":[],"sources":["../../../src/Fundamentals/SlideButton/SlideButton.utils.ts"],"sourcesContent":["import { MathUtils } from \"@thewaver/ss-utils\";\n\nconst RATIO_MIN = 0;\nconst RATIO_MAX = 1;\n\nconst computeThumbStart = (progressRatio: number, thumbRatio: number) => progressRatio * (RATIO_MAX - thumbRatio);\n\nexport namespace SlideButtonUtils {\n    export const computeWidthRatio = (trackWidth: number, widthPx: number) =>\n        trackWidth > 0 ? Math.min(widthPx / trackWidth, RATIO_MAX) : RATIO_MAX;\n\n    export const computeGrabRatio = (pointerRatio: number, progressRatio: number, thumbRatio: number) =>\n        pointerRatio - computeThumbStart(progressRatio, thumbRatio);\n\n    export const computeIsOnThumb = (pointerRatio: number, progressRatio: number, thumbRatio: number) => {\n        const grabRatio = computeGrabRatio(pointerRatio, progressRatio, thumbRatio);\n\n        return grabRatio >= RATIO_MIN && grabRatio <= thumbRatio;\n    };\n\n    export const computeProgressRatio = (pointerRatio: number, grabRatio: number, thumbRatio: number) => {\n        const travelRatio = RATIO_MAX - thumbRatio;\n\n        if (travelRatio <= 0) return RATIO_MIN;\n\n        return MathUtils.clamp01((pointerRatio - grabRatio) / travelRatio);\n    };\n\n    export const computeHoldRatio = (elapsedMs: number, durationMs: number) => {\n        if (durationMs <= 0) return RATIO_MAX;\n\n        return MathUtils.clamp01(elapsedMs / durationMs);\n    };\n}\n"],"mappings":";;AAEA,IAAM,YAAY;AAClB,IAAM,YAAY;AAElB,IAAM,qBAAqB,eAAuB,eAAuB,iBAAiB,YAAY;AAE/F,IAAU;CAAV,SAAA,mBAAA;CACU,kBAAA,qBAAqB,YAAoB,YAClD,aAAa,IAAI,KAAK,IAAI,UAAU,YAAY,SAAS,IAAI;CAE1D,MAAM,mBAAA,kBAAA,oBAAoB,cAAsB,eAAuB,eAC1E,eAAe,kBAAkB,eAAe,UAAU;CAEjD,kBAAA,oBAAoB,cAAsB,eAAuB,eAAuB;EACjG,MAAM,YAAY,iBAAiB,cAAc,eAAe,UAAU;EAE1E,OAAO,aAAa,aAAa,aAAa;CAClD;CAEa,kBAAA,wBAAwB,cAAsB,WAAmB,eAAuB;EACjG,MAAM,cAAc,YAAY;EAEhC,IAAI,eAAe,GAAG,OAAO;EAE7B,OAAO,UAAU,SAAS,eAAe,aAAa,WAAW;CACrE;CAEa,kBAAA,oBAAoB,WAAmB,eAAuB;EACvE,IAAI,cAAc,GAAG,OAAO;EAE5B,OAAO,UAAU,QAAQ,YAAY,UAAU;CACnD;AACH,EAAA,CAAA,qBAAA,mBAAA,CAAA,EAAD"}

package/dist/Fundamentals/Sortable/Sortable.css.js

@@ -0,0 +1,12 @@
+/* empty css                            */
+//#region src/Fundamentals/Sortable/Sortable.css.ts
+var sortableRow = "_3rl7zw1 _3rl7zw0";
+var sortableColumn = "_3rl7zw2 _3rl7zw0";
+var sortableItem = "_3rl7zw3";
+var sortableMarkerRow = "_3rl7zw5 _3rl7zw4";
+var sortableMarkerColumn = "_3rl7zw6 _3rl7zw4";
+var sortableCarried = "_3rl7zw7";
+//#endregion
+export { sortableCarried, sortableColumn, sortableItem, sortableMarkerColumn, sortableMarkerRow, sortableRow };
+
+//# sourceMappingURL=Sortable.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sortable.css.js","names":[],"sources":["../../../src/Fundamentals/Sortable/Sortable.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\r\n\r\nconst sortableRoot = style({\r\n    display: \"flex\",\r\n    flex: \"1 1 auto\",\r\n    position: \"relative\",\r\n    margin: 0,\r\n    padding: 0,\r\n    listStyle: \"none\",\r\n    pointerEvents: \"all\",\r\n});\r\n\r\nexport const sortableRow = style([\r\n    sortableRoot,\r\n    { flexDirection: \"row\", alignItems: \"stretch\", overflowX: \"auto\", overflowY: \"hidden\" },\r\n]);\r\n\r\nexport const sortableColumn = style([\r\n    sortableRoot,\r\n    { flexDirection: \"column\", alignItems: \"stretch\", overflowY: \"auto\", overflowX: \"hidden\" },\r\n]);\r\n\r\nglobalStyle(`${sortableRow} > *, ${sortableColumn} > *`, {\r\n    flex: \"0 0 auto\",\r\n});\r\n\r\nexport const sortableItem = style({\r\n    display: \"flex\",\r\n    flex: \"1 1 auto\",\r\n    minWidth: 0,\r\n    position: \"relative\",\r\n    touchAction: \"none\",\r\n    pointerEvents: \"all\",\r\n});\r\n\r\nconst sortableMarker = style({\r\n    display: \"flex\",\r\n    position: \"absolute\",\r\n    pointerEvents: \"none\",\r\n});\r\n\r\nexport const sortableMarkerRow = style([sortableMarker, { flexDirection: \"row\", transform: \"translateX(-50%)\" }]);\r\n\r\nexport const sortableMarkerColumn = style([sortableMarker, { flexDirection: \"column\", transform: \"translateY(-50%)\" }]);\r\n\r\nexport const sortableCarried = style({\r\n    display: \"flex\",\r\n    position: \"absolute\",\r\n    top: 0,\r\n    left: 0,\r\n    pointerEvents: \"none\",\r\n    willChange: \"transform\",\r\n});\r\n"],"mappings":""}