@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":["Accessor","JSX","Index","Show","createEffect","createMemo","createSignal","onCleanup","Size2d","MathUtils","RotationUtils","Barrel","InteractionTracker","LiveAnnouncer","SignalMirror","access","InteractionWrapper","CarouselAxis","CarouselControlProps","CarouselControls","CarouselDir","CarouselFace","CarouselPickRenderProps","CarouselProps","CarouselRotationFlags","CarouselSlideState","CarouselStep","CarouselStepRenderProps","CarouselUtils","styles","DEFAULT_CAROUSEL_DIR","DEFAULT_CAROUSEL_AXIS","DEFAULT_CAROUSEL_SLIDE_SIZE","width","height","DEFAULT_CAROUSEL_TRANSITION_DURATION_MS","DEFAULT_CAROUSEL_GAP","CAROUSEL_SWIPE_COMMIT_RATIO","CAROUSEL_ROLE_DESCRIPTION","SLIDE_ROLE_DESCRIPTION","MIN_ROTATABLE_COUNT","SLIDE_PERCENT","SWIPE_RATIO_LIMIT","STEP_LABELS","Record","previous","next","ROTATION_LABELS","playing","stopped","CarouselControl","props","getIsDisabled","flags","isDisabled","_el$","_tmpl$","$$click","onActivate","_$use","element","ref","_$className","carouselControl","_$insert","renderContent","_$effect","_p$","_v$","ariaLabel","_v$2","undefined","_v$3","isCurrent","e","_$setAttribute","t","a","Carousel","T","getRootRef","setRootRef","HTMLElement","getViewportRef","setViewportRef","getSwipeRatio","setSwipeRatio","getTurnAngle","setTurnAngle","getIndex","setIndex","createOptional","indexSignal","getIsPlaying","setIsPlaying","playingSignal","getCount","slides","length","getCurrentIndex","wrapIndex","getIsDrum","variant","getDir","dir","getAxis","axis","getSlideSize","slideSize","getTravelsAcross","getTransitionDurationMs","transitionDurationMs","getAutoplayDelayMs","autoplayDelayMs","getIsHeld","trackHold","goTo","index","onIndexChange","getIsSwiping","trackSwipe","renderControls","getCommitRatio","onSwipe","progressRatio","clamp","onSwipeEnd","direction","getIsRotating","getAngle","getStepAngle","getSlideLabel","computeSlideLabel","getSlideState","face","count","stepAngle","angle","getTurnSteps","delayMs","from","advance","setTimeout","clearTimeout","announce","renderStepControl","step","Element","getTargetIndex","getStepTarget","_$createComponent","extraFlags","targetIndex","renderControl","setElementRef","getRenderProps","r$","_ref$","computeStepLabel","renderStep","renderPickControl","_ref$2","renderPick","renderRotationControl","isPlaying","isHeld","getFlags","_ref$3","computeRotationLabel","prev","controls","renderSlide","getSlide","renderSlideBack","_el$2","_tmpl$3","carouselRoot","when","fallback","_el$4","_tmpl$4","_el$5","firstChild","carouselViewport","carouselTrack","each","children","_el$6","_tmpl$5","carouselSlide","_v$1","_v$10","_v$11","inert","_v$7","_v$8","_v$9","_v$0","_$setStyleProperty","o","_el$3","_tmpl$2","carouselStage","faces","faceSize","faceRoleDescription","computeFaceDefs","isHidden","renderFace","_v$4","_v$5","gap","_v$6","_$delegateEvents"],"sources":["../../../src/Fundamentals/Carousel/Carousel.tsx"],"sourcesContent":["import type { Accessor, JSX } from \"solid-js\";\r\nimport { Index, Show, createEffect, createMemo, createSignal, onCleanup } from \"solid-js\";\r\n\r\nimport type { Size2d } from \"@thewaver/ss-utils\";\r\nimport { MathUtils, RotationUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport { Barrel } from \"../../Abstracts/Barrel/Barrel\";\r\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\r\nimport { LiveAnnouncer } from \"../../Abstracts/LiveAnnouncer/LiveAnnouncer\";\r\nimport { SignalMirror } from \"../../Abstracts/SignalMirror/SignalMirror\";\r\nimport { access } from \"../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\r\nimport type {\r\n    CarouselAxis,\r\n    CarouselControlProps,\r\n    CarouselControls,\r\n    CarouselDir,\r\n    CarouselFace,\r\n    CarouselPickRenderProps,\r\n    CarouselProps,\r\n    CarouselRotationFlags,\r\n    CarouselSlideState,\r\n    CarouselStep,\r\n    CarouselStepRenderProps,\r\n} from \"./Carousel.types\";\r\nimport { CarouselUtils } from \"./Carousel.utils\";\r\n\r\nimport * as styles from \"./Carousel.css\";\r\n\r\nconst DEFAULT_CAROUSEL_DIR: CarouselDir = \"row\";\r\nconst DEFAULT_CAROUSEL_AXIS: CarouselAxis = \"row\";\r\nconst DEFAULT_CAROUSEL_SLIDE_SIZE: Size2d = { width: 0, height: 0 };\r\nconst DEFAULT_CAROUSEL_TRANSITION_DURATION_MS = 400;\r\nconst DEFAULT_CAROUSEL_GAP = 0;\r\n\r\nconst CAROUSEL_SWIPE_COMMIT_RATIO = 0.2;\r\n\r\nconst CAROUSEL_ROLE_DESCRIPTION = \"carousel\";\r\nconst SLIDE_ROLE_DESCRIPTION = \"slide\";\r\nconst MIN_ROTATABLE_COUNT = 2;\r\nconst SLIDE_PERCENT = 100;\r\nconst SWIPE_RATIO_LIMIT = 1;\r\n\r\nconst STEP_LABELS: Record<CarouselStep, string> = {\r\n    previous: \"Previous slide\",\r\n    next: \"Next slide\",\r\n};\r\n\r\nconst ROTATION_LABELS = {\r\n    playing: \"Stop automatic slide show\",\r\n    stopped: \"Start automatic slide show\",\r\n};\r\n\r\nconst CarouselControl = (props: CarouselControlProps) => {\r\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\r\n\r\n    return (\r\n        <button\r\n            ref={(element) => props.ref?.(element)}\r\n            type=\"button\"\r\n            class={styles.carouselControl}\r\n            aria-label={access(props.ariaLabel)}\r\n            aria-disabled={getIsDisabled() || undefined}\r\n            aria-current={access(props.isCurrent) || undefined}\r\n            onClick={() => {\r\n                if (getIsDisabled()) return;\r\n\r\n                props.onActivate();\r\n            }}\r\n        >\r\n            {props.renderContent(() => access(props.flags))}\r\n        </button>\r\n    );\r\n};\r\n\r\nexport const Carousel = <T,>(props: CarouselProps<T>) => {\r\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\r\n    const [getViewportRef, setViewportRef] = createSignal<HTMLElement>();\r\n    const [getSwipeRatio, setSwipeRatio] = createSignal(0);\r\n    const [getTurnAngle, setTurnAngle] = createSignal(0);\r\n\r\n    const [getIndex, setIndex] = SignalMirror.createOptional(() => props.indexSignal, 0);\r\n    const [getIsPlaying, setIsPlaying] = SignalMirror.createOptional(() => props.playingSignal, true);\r\n\r\n    const getCount = createMemo(() => access(props.slides).length);\r\n\r\n    const getCurrentIndex = createMemo(() => CarouselUtils.wrapIndex(getIndex(), getCount()));\r\n\r\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\r\n\r\n    const getIsDrum = createMemo(() => access(props.variant) === \"drum\");\r\n\r\n    const getDir = createMemo(() => access(props.dir) ?? DEFAULT_CAROUSEL_DIR);\r\n\r\n    const getAxis = createMemo(() => access(props.axis) ?? DEFAULT_CAROUSEL_AXIS);\r\n\r\n    const getSlideSize = createMemo(() => access(props.slideSize) ?? DEFAULT_CAROUSEL_SLIDE_SIZE);\r\n\r\n    const getTravelsAcross = createMemo(() => (getIsDrum() ? getAxis() : getDir()) === \"row\");\r\n\r\n    const getTransitionDurationMs = createMemo(\r\n        () => access(props.transitionDurationMs) ?? DEFAULT_CAROUSEL_TRANSITION_DURATION_MS,\r\n    );\r\n\r\n    const getAutoplayDelayMs = createMemo(() => access(props.autoplayDelayMs));\r\n\r\n    const getIsHeld = InteractionTracker.trackHold(getRootRef);\r\n\r\n    const goTo = (index: number) => {\r\n        const next = CarouselUtils.wrapIndex(index, getCount());\r\n\r\n        if (next === getCurrentIndex()) return;\r\n\r\n        setIndex(next);\r\n\r\n        void props.onIndexChange?.(next);\r\n    };\r\n\r\n    const { getIsSwiping } = InteractionTracker.trackSwipe(\r\n        getViewportRef,\r\n        () => props.renderControls === undefined || getIsDisabled() || getCount() < MIN_ROTATABLE_COUNT,\r\n        {\r\n            getAxis: () => (getTravelsAcross() ? \"horizontal\" : \"vertical\"),\r\n            getCommitRatio: () => CAROUSEL_SWIPE_COMMIT_RATIO,\r\n            onSwipe: (progressRatio) => {\r\n                setSwipeRatio(MathUtils.clamp(progressRatio, -SWIPE_RATIO_LIMIT, SWIPE_RATIO_LIMIT));\r\n            },\r\n            onSwipeEnd: (direction) => {\r\n                setSwipeRatio(0);\r\n\r\n                if (direction === undefined) return;\r\n\r\n                goTo(getCurrentIndex() + (direction === \"left\" || direction === \"up\" ? 1 : -1));\r\n            },\r\n        },\r\n    );\r\n\r\n    const getIsRotating = createMemo(\r\n        () =>\r\n            getAutoplayDelayMs() !== undefined &&\r\n            getIsPlaying() &&\r\n            !getIsHeld() &&\r\n            !getIsSwiping() &&\r\n            !getIsDisabled() &&\r\n            getCount() >= MIN_ROTATABLE_COUNT,\r\n    );\r\n\r\n    const getAngle = createMemo(() => getTurnAngle() + getSwipeRatio() * RotationUtils.getStepAngle(getCount()));\r\n\r\n    const getSlideLabel = (index: number) =>\r\n        props.computeSlideLabel?.(index + 1, getCount()) ?? `${index + 1} of ${getCount()}`;\r\n\r\n    const getSlideState = (index: number, face: CarouselFace): CarouselSlideState => ({\r\n        index,\r\n        count: getCount(),\r\n        face,\r\n        isCurrent: index === getCurrentIndex(),\r\n    });\r\n\r\n    createEffect<{ index: number; count: number } | undefined>((previous) => {\r\n        const index = getCurrentIndex();\r\n        const count = getCount();\r\n        const stepAngle = RotationUtils.getStepAngle(count);\r\n\r\n        if (previous === undefined || previous.count !== count) {\r\n            setTurnAngle(-stepAngle * index);\r\n        } else if (previous.index !== index) {\r\n            setTurnAngle((angle) => angle - CarouselUtils.getTurnSteps(previous.index, index, count) * stepAngle);\r\n        }\r\n\r\n        return { index, count };\r\n    });\r\n\r\n    createEffect(() => {\r\n        const delayMs = getAutoplayDelayMs();\r\n\r\n        if (!getIsRotating() || delayMs === undefined) return;\r\n\r\n        const from = getCurrentIndex();\r\n        const advance = setTimeout(() => goTo(from + 1), delayMs);\r\n\r\n        onCleanup(() => {\r\n            clearTimeout(advance);\r\n        });\r\n    });\r\n\r\n    createEffect<number | undefined>((previous) => {\r\n        const index = getCurrentIndex();\r\n\r\n        if (previous !== undefined && previous !== index && !getIsRotating()) {\r\n            LiveAnnouncer.announce(getSlideLabel(index));\r\n        }\r\n\r\n        return index;\r\n    });\r\n\r\n    const renderStepControl = (step: CarouselStep): JSX.Element => {\r\n        const getTargetIndex = () => CarouselUtils.getStepTarget(step, getCurrentIndex(), getCount());\r\n\r\n        return (\r\n            <InteractionWrapper<CarouselStepRenderProps>\r\n                isDisabled={() => getIsDisabled() || getCount() < MIN_ROTATABLE_COUNT}\r\n                extraFlags={() => ({ step, targetIndex: getTargetIndex() })}\r\n                renderControl={(setElementRef, getRenderProps) => (\r\n                    <CarouselControl\r\n                        ref={setElementRef}\r\n                        isCurrent={false}\r\n                        ariaLabel={() => props.computeStepLabel?.(step) ?? STEP_LABELS[step]}\r\n                        flags={getRenderProps}\r\n                        renderContent={() => props.renderStep?.(() => step, getRenderProps)}\r\n                        onActivate={() => goTo(getTargetIndex())}\r\n                    />\r\n                )}\r\n            />\r\n        );\r\n    };\r\n\r\n    const renderPickControl = (index: number): JSX.Element => (\r\n        <InteractionWrapper<CarouselPickRenderProps>\r\n            isDisabled={getIsDisabled}\r\n            extraFlags={() => ({ index, isCurrent: index === getCurrentIndex() })}\r\n            renderControl={(setElementRef, getRenderProps) => (\r\n                <CarouselControl\r\n                    ref={setElementRef}\r\n                    isCurrent={() => getRenderProps().isCurrent}\r\n                    ariaLabel={() => getSlideLabel(index)}\r\n                    flags={getRenderProps}\r\n                    renderContent={() => props.renderPick?.(() => index, getRenderProps)}\r\n                    onActivate={() => goTo(index)}\r\n                />\r\n            )}\r\n        />\r\n    );\r\n\r\n    const renderRotationControl = (): JSX.Element => (\r\n        <InteractionWrapper<CarouselRotationFlags>\r\n            isDisabled={getIsDisabled}\r\n            extraFlags={() => ({ isPlaying: getIsPlaying(), isHeld: getIsHeld() })}\r\n            renderControl={(setElementRef, getFlags) => (\r\n                <CarouselControl\r\n                    ref={setElementRef}\r\n                    isCurrent={false}\r\n                    ariaLabel={() =>\r\n                        props.computeRotationLabel?.(getIsPlaying()) ??\r\n                        (getIsPlaying() ? ROTATION_LABELS.playing : ROTATION_LABELS.stopped)\r\n                    }\r\n                    flags={getFlags}\r\n                    renderContent={() => props.renderRotationControl?.(getFlags)}\r\n                    onActivate={() => setIsPlaying((prev) => !prev)}\r\n                />\r\n            )}\r\n        />\r\n    );\r\n\r\n    const controls: CarouselControls = {\r\n        getIndex: getCurrentIndex,\r\n        getCount,\r\n        getIsPlaying,\r\n        getIsHeld,\r\n        renderStep: renderStepControl,\r\n        renderPick: renderPickControl,\r\n        renderRotationControl,\r\n    };\r\n\r\n    const renderSlide = (getSlide: Accessor<T>, index: number, face: CarouselFace) =>\r\n        face === \"back\"\r\n            ? props.renderSlideBack?.(getSlide, () => getSlideState(index, face))\r\n            : props.renderSlide(getSlide, () => getSlideState(index, face));\r\n\r\n    return (\r\n        <div\r\n            ref={setRootRef}\r\n            class={styles.carouselRoot}\r\n            style={{\r\n                height: !getIsDrum() && getDir() === \"column\" ? \"100%\" : undefined,\r\n                gap: `${access(props.gap) ?? DEFAULT_CAROUSEL_GAP}px`,\r\n            }}\r\n            role=\"region\"\r\n            aria-roledescription={CAROUSEL_ROLE_DESCRIPTION}\r\n            aria-label={access(props.ariaLabel)}\r\n        >\r\n            <Show\r\n                when={getIsDrum()}\r\n                fallback={\r\n                    <div ref={setViewportRef} class={styles.carouselViewport}>\r\n                        <div\r\n                            class={styles.carouselTrack}\r\n                            style={{\r\n                                \"flex-direction\": getDir(),\r\n                                \"height\": getDir() === \"column\" ? \"100%\" : undefined,\r\n                                \"transform\": `translate${getTravelsAcross() ? \"X\" : \"Y\"}(${(getSwipeRatio() - getCurrentIndex()) * SLIDE_PERCENT}%)`,\r\n                                \"transition-duration\": `${getIsSwiping() ? 0 : getTransitionDurationMs()}ms`,\r\n                            }}\r\n                        >\r\n                            <Index each={access(props.slides)}>\r\n                                {(getSlide, index) => (\r\n                                    <div\r\n                                        class={styles.carouselSlide}\r\n                                        role=\"group\"\r\n                                        aria-roledescription={SLIDE_ROLE_DESCRIPTION}\r\n                                        aria-label={getSlideLabel(index)}\r\n                                        aria-hidden={index !== getCurrentIndex() || undefined}\r\n                                        inert={index !== getCurrentIndex()}\r\n                                    >\r\n                                        {renderSlide(getSlide, index, \"front\")}\r\n                                    </div>\r\n                                )}\r\n                            </Index>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            >\r\n                <div ref={setViewportRef} class={styles.carouselStage}>\r\n                    <Barrel<T>\r\n                        faces={props.slides}\r\n                        axis={getAxis}\r\n                        faceSize={getSlideSize}\r\n                        angle={getAngle}\r\n                        transitionDurationMs={() => (getIsSwiping() ? 0 : getTransitionDurationMs())}\r\n                        faceRoleDescription={SLIDE_ROLE_DESCRIPTION}\r\n                        computeFaceDefs={(index, face) => ({\r\n                            ariaLabel: getSlideLabel(index),\r\n                            isHidden: face === \"back\" || index !== getCurrentIndex(),\r\n                        })}\r\n                        renderFace={renderSlide}\r\n                    />\r\n                </div>\r\n            </Show>\r\n\r\n            {props.renderControls?.(controls)}\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Carousel/Carousel.utils.js

@@ -0,0 +1,17 @@
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/Carousel/Carousel.utils.ts
+var HALF = 2;
+var CarouselUtils;
+(function(_CarouselUtils) {
+	const wrapIndex = _CarouselUtils.wrapIndex = MathUtils.wrapIndex;
+	_CarouselUtils.getStepTarget = (step, index, count) => wrapIndex(index + (step === "previous" ? -1 : 1), count);
+	_CarouselUtils.getTurnSteps = (from, to, count) => {
+		if (count <= 0) return 0;
+		const forward = wrapIndex(to - from, count);
+		return forward * HALF > count ? forward - count : forward;
+	};
+})(CarouselUtils || (CarouselUtils = {}));
+//#endregion
+export { CarouselUtils };
+
+//# sourceMappingURL=Carousel.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.utils.js","names":[],"sources":["../../../src/Fundamentals/Carousel/Carousel.utils.ts"],"sourcesContent":["import { MathUtils } from \"@thewaver/ss-utils\";\n\nimport type { CarouselStep } from \"./Carousel.types\";\n\nconst HALF = 2;\n\nexport namespace CarouselUtils {\n    export const wrapIndex = MathUtils.wrapIndex;\n\n    export const getStepTarget = (step: CarouselStep, index: number, count: number) =>\n        wrapIndex(index + (step === \"previous\" ? -1 : 1), count);\n\n    export const getTurnSteps = (from: number, to: number, count: number) => {\n        if (count <= 0) return 0;\n\n        const forward = wrapIndex(to - from, count);\n\n        return forward * HALF > count ? forward - count : forward;\n    };\n}\n"],"mappings":";;AAIA,IAAM,OAAO;AAEN,IAAU;CAAV,SAAA,gBAAA;CACI,MAAM,YAAA,eAAA,YAAY,UAAU;CAEtB,eAAA,iBAAiB,MAAoB,OAAe,UAC7D,UAAU,SAAS,SAAS,aAAa,KAAK,IAAI,KAAK;CAE9C,eAAA,gBAAgB,MAAc,IAAY,UAAkB;EACrE,IAAI,SAAS,GAAG,OAAO;EAEvB,MAAM,UAAU,UAAU,KAAK,MAAM,KAAK;EAE1C,OAAO,UAAU,OAAO,QAAQ,UAAU,QAAQ;CACtD;AACH,EAAA,CAAA,kBAAA,gBAAA,CAAA,EAAD"}

package/dist/Fundamentals/Collapsible/Collapsible.css.js

@@ -0,0 +1,14 @@
+/* empty css                               */
+//#region src/Fundamentals/Collapsible/Collapsible.css.ts
+var collapsibleSizingVariants = {
+	"fit-content": "_14i0vlf0",
+	fill: "_14i0vlf1"
+};
+var collapsibleRoot = "_14i0vlf2";
+var collapsibleTrigger = "_14i0vlf3";
+var collapsibleHeading = "_14i0vlf4";
+var collapsiblePanel = "_14i0vlf5";
+//#endregion
+export { collapsibleHeading, collapsiblePanel, collapsibleRoot, collapsibleSizingVariants, collapsibleTrigger };
+
+//# sourceMappingURL=Collapsible.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.css.js","names":[],"sources":["../../../src/Fundamentals/Collapsible/Collapsible.css.ts"],"sourcesContent":["import { style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const collapsibleSizingVariants = styleVariants({\n    \"fit-content\": {\n        width: \"fit-content\",\n    },\n    \"fill\": {\n        width: \"100%\",\n    },\n});\n\nexport const collapsibleRoot = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n});\n\nexport const collapsibleTrigger = style({\n    display: \"flex\",\n    pointerEvents: \"all\",\n    width: \"100%\",\n    border: \"none\",\n    padding: 0,\n    background: \"none\",\n    font: \"inherit\",\n    color: \"inherit\",\n    textAlign: \"inherit\",\n});\n\nexport const collapsibleHeading = style({\n    margin: 0,\n    font: \"inherit\",\n    color: \"inherit\",\n});\n\nexport const collapsiblePanel = style({\n    overflow: \"hidden\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Collapsible/Collapsible.js

@@ -0,0 +1,156 @@
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { collapsibleHeading, collapsiblePanel, collapsibleRoot, collapsibleSizingVariants, collapsibleTrigger } from "./Collapsible.css.js";
+import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { Dynamic, className, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+//#region src/Fundamentals/Collapsible/Collapsible.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div><div><div>`);
+var DEFAULT_COLLAPSIBLE_TRANSITION_DURATION_MS = 200;
+var DEFAULT_COLLAPSIBLE_SIZING = "fill";
+var HEADING_TAGS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+var CollapsibleTrigger = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$click = () => {
+			if (getIsDisabled()) return;
+			props.onToggle();
+		};
+		use((element) => props.ref?.(element), _el$);
+		className(_el$, collapsibleTrigger);
+		insert(_el$, () => props.renderTrigger(() => access(props.flags)));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.isExpanded), _v$3 = access(props.panelId), _v$4 = getIsDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-expanded", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-controls", _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 Collapsible = (props) => {
+	const expandedSignal = accessSignal(() => props.expandedSignal);
+	const triggerId = createUniqueId();
+	const panelId = createUniqueId();
+	const [getRootRef, setRootRef] = createSignal();
+	const [getTriggerRef, setTriggerRef] = createSignal();
+	const [getContentRef, setContentRef] = createSignal();
+	const [getIsAwaitingScroll, setIsAwaitingScroll] = createSignal(false);
+	const getIsExpanded = () => expandedSignal[0]();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_COLLAPSIBLE_TRANSITION_DURATION_MS);
+	const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_COLLAPSIBLE_SIZING);
+	const getHasPanelContent = createMemo((hasContent) => hasContent || access(props.isPanelBuiltOnExpand) !== true || getIsExpanded(), false);
+	const getContentHeight = ElementObserver.createBorderBoxHeightObserver(getContentRef, getHasPanelContent);
+	const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(getIsExpanded, { getTransitionDurationMs });
+	createEffect(on(getIsExpanded, (isExpanded) => setIsAwaitingScroll(isExpanded), { defer: true }));
+	createEffect(() => {
+		if (!getIsAwaitingScroll() || !getHasTransitionFinished()) return;
+		setIsAwaitingScroll(false);
+		const root = getRootRef();
+		const trigger = getTriggerRef();
+		if (access(props.isScrolledIntoViewOnExpand) !== true || !root || !trigger) return;
+		const scrollIntoView = () => {
+			root.scrollIntoView({ block: "nearest" });
+			trigger.scrollIntoView({ block: "nearest" });
+		};
+		scrollIntoView();
+		const frameId = requestAnimationFrame(scrollIntoView);
+		onCleanup(() => {
+			cancelAnimationFrame(frameId);
+		});
+	});
+	const getHeadingTag = createMemo(() => {
+		const level = access(props.headingLevel);
+		return level === void 0 ? void 0 : HEADING_TAGS[MathUtils.clamp(level, 1, HEADING_TAGS.length) - 1];
+	});
+	const renderWrapper = () => createComponent(InteractionWrapper, mergeProps(props, {
+		sizing: "fill",
+		extraFlags: () => ({ isExpanded: getIsExpanded() }),
+		renderControl: (setElementRef, getFlags) => createComponent(CollapsibleTrigger, {
+			ref: (element) => {
+				setElementRef(element);
+				setTriggerRef(element);
+				props.ref?.(element);
+			},
+			id: () => access(props.id) ?? triggerId,
+			panelId: () => panelId,
+			flags: getFlags,
+			isExpanded: getIsExpanded,
+			get renderTrigger() {
+				return props.renderTrigger;
+			},
+			onToggle: () => expandedSignal[1]((prev) => !prev)
+		})
+	}));
+	return (() => {
+		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+		use(setRootRef, _el$2);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return getHeadingTag();
+			},
+			get fallback() {
+				return renderWrapper();
+			},
+			children: (getTag) => createComponent(Dynamic, {
+				get component() {
+					return getTag();
+				},
+				"class": collapsibleHeading,
+				get children() {
+					return renderWrapper();
+				}
+			})
+		}), _el$3);
+		setAttribute(_el$3, "id", panelId);
+		className(_el$3, collapsiblePanel);
+		spread(_el$3, mergeProps({
+			get style() {
+				return {
+					"height": `${getTransitionTarget() === 1 ? getContentHeight() : 0}px`,
+					"transition-property": "height",
+					"transition-duration": `${getTransitionDurationMs()}ms`
+				};
+			},
+			get role() {
+				return access(props.panelRole);
+			}
+		}, () => access(props.panelAriaAttributes) ?? {}, { get inert() {
+			return !getIsExpanded();
+		} }), false, true);
+		use(setContentRef, _el$4);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return getHasPanelContent();
+			},
+			get children() {
+				return props.renderPanel(getTransitionTarget, getTransitionDurationMs);
+			}
+		}));
+		effect(() => className(_el$2, [collapsibleRoot, collapsibleSizingVariants[getSizing()]].join(" ")));
+		return _el$2;
+	})();
+};
+delegateEvents(["click"]);
+//#endregion
+export { Collapsible };
+
+//# sourceMappingURL=Collapsible.js.map

package/dist/Fundamentals/Collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","names":["Show","createEffect","createMemo","createSignal","createUniqueId","on","onCleanup","Dynamic","MathUtils","ElementFader","ElementObserver","access","accessSignal","InteractionWrapper","CollapsibleFlags","CollapsibleProps","CollapsibleSizing","CollapsibleTriggerProps","styles","DEFAULT_COLLAPSIBLE_TRANSITION_DURATION_MS","DEFAULT_COLLAPSIBLE_SIZING","HEADING_TAGS","const","CollapsibleTrigger","props","getIsDisabled","flags","isDisabled","_el$","_tmpl$","$$click","onToggle","_$use","element","ref","_$className","collapsibleTrigger","_$insert","renderTrigger","_$effect","_p$","_v$","id","_v$2","isExpanded","_v$3","panelId","_v$4","undefined","e","_$setAttribute","t","a","o","Collapsible","expandedSignal","triggerId","getRootRef","setRootRef","HTMLElement","getTriggerRef","setTriggerRef","getContentRef","setContentRef","getIsAwaitingScroll","setIsAwaitingScroll","getIsExpanded","getTransitionDurationMs","transitionDurationMs","getSizing","sizing","getHasPanelContent","hasContent","isPanelBuiltOnExpand","getContentHeight","createBorderBoxHeightObserver","getTransitionTarget","getHasTransitionFinished","createFader","defer","root","trigger","isScrolledIntoViewOnExpand","scrollIntoView","block","frameId","requestAnimationFrame","cancelAnimationFrame","getHeadingTag","level","headingLevel","clamp","length","renderWrapper","_$createComponent","_$mergeProps","extraFlags","renderControl","setElementRef","getFlags","prev","_el$2","_tmpl$2","_el$3","firstChild","_el$4","when","fallback","children","getTag","component","collapsibleHeading","collapsiblePanel","_$spread","style","role","panelRole","panelAriaAttributes","inert","renderPanel","collapsibleRoot","collapsibleSizingVariants","join","_$delegateEvents"],"sources":["../../../src/Fundamentals/Collapsible/Collapsible.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup } from \"solid-js\";\r\nimport { Dynamic } from \"solid-js/web\";\r\n\r\nimport { MathUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\r\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\r\nimport { access, accessSignal } from \"../../Utils/propUtils\";\r\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\r\nimport type {\r\n    CollapsibleFlags,\r\n    CollapsibleProps,\r\n    CollapsibleSizing,\r\n    CollapsibleTriggerProps,\r\n} from \"./Collapsible.types\";\r\n\r\nimport * as styles from \"./Collapsible.css\";\r\n\r\nconst DEFAULT_COLLAPSIBLE_TRANSITION_DURATION_MS = 200;\r\nconst DEFAULT_COLLAPSIBLE_SIZING: CollapsibleSizing = \"fill\";\r\n\r\nconst HEADING_TAGS = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"] as const;\r\n\r\nconst CollapsibleTrigger = (props: CollapsibleTriggerProps) => {\r\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\r\n\r\n    return (\r\n        <button\r\n            id={access(props.id)}\r\n            ref={(element) => props.ref?.(element)}\r\n            type=\"button\"\r\n            class={styles.collapsibleTrigger}\r\n            aria-expanded={access(props.isExpanded)}\r\n            aria-controls={access(props.panelId)}\r\n            aria-disabled={getIsDisabled() || undefined}\r\n            onClick={() => {\r\n                if (getIsDisabled()) return;\r\n\r\n                props.onToggle();\r\n            }}\r\n        >\r\n            {props.renderTrigger(() => access(props.flags))}\r\n        </button>\r\n    );\r\n};\r\n\r\nexport const Collapsible = (props: CollapsibleProps) => {\r\n    const expandedSignal = accessSignal(() => props.expandedSignal);\r\n\r\n    const triggerId = createUniqueId();\r\n    const panelId = createUniqueId();\r\n\r\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\r\n    const [getTriggerRef, setTriggerRef] = createSignal<HTMLElement>();\r\n    const [getContentRef, setContentRef] = createSignal<HTMLElement>();\r\n    const [getIsAwaitingScroll, setIsAwaitingScroll] = createSignal(false);\r\n\r\n    const getIsExpanded = () => expandedSignal[0]();\r\n\r\n    const getTransitionDurationMs = createMemo(\r\n        () => access(props.transitionDurationMs) ?? DEFAULT_COLLAPSIBLE_TRANSITION_DURATION_MS,\r\n    );\r\n\r\n    const getSizing = createMemo(() => access(props.sizing) ?? DEFAULT_COLLAPSIBLE_SIZING);\r\n\r\n    const getHasPanelContent = createMemo(\r\n        (hasContent: boolean) => hasContent || access(props.isPanelBuiltOnExpand) !== true || getIsExpanded(),\r\n        false,\r\n    );\r\n\r\n    const getContentHeight = ElementObserver.createBorderBoxHeightObserver(getContentRef, getHasPanelContent);\r\n\r\n    const { getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(getIsExpanded, {\r\n        getTransitionDurationMs,\r\n    });\r\n\r\n    createEffect(on(getIsExpanded, (isExpanded) => setIsAwaitingScroll(isExpanded), { defer: true }));\r\n\r\n    createEffect(() => {\r\n        if (!getIsAwaitingScroll() || !getHasTransitionFinished()) return;\r\n\r\n        setIsAwaitingScroll(false);\r\n\r\n        const root = getRootRef();\r\n        const trigger = getTriggerRef();\r\n\r\n        if (access(props.isScrolledIntoViewOnExpand) !== true || !root || !trigger) return;\r\n\r\n        const scrollIntoView = () => {\r\n            root.scrollIntoView({ block: \"nearest\" });\r\n            trigger.scrollIntoView({ block: \"nearest\" });\r\n        };\r\n\r\n        scrollIntoView();\r\n\r\n        const frameId = requestAnimationFrame(scrollIntoView);\r\n\r\n        onCleanup(() => {\r\n            cancelAnimationFrame(frameId);\r\n        });\r\n    });\r\n\r\n    const getHeadingTag = createMemo(() => {\r\n        const level = access(props.headingLevel);\r\n\r\n        return level === undefined ? undefined : HEADING_TAGS[MathUtils.clamp(level, 1, HEADING_TAGS.length) - 1];\r\n    });\r\n\r\n    const renderWrapper = () => (\r\n        <InteractionWrapper\r\n            {...props}\r\n            sizing={\"fill\"}\r\n            extraFlags={(): CollapsibleFlags => ({ isExpanded: getIsExpanded() })}\r\n            renderControl={(setElementRef, getFlags) => (\r\n                <CollapsibleTrigger\r\n                    ref={(element) => {\r\n                        setElementRef(element);\r\n                        setTriggerRef(element);\r\n                        props.ref?.(element);\r\n                    }}\r\n                    id={() => access(props.id) ?? triggerId}\r\n                    panelId={() => panelId}\r\n                    flags={getFlags}\r\n                    isExpanded={getIsExpanded}\r\n                    renderTrigger={props.renderTrigger}\r\n                    onToggle={() => expandedSignal[1]((prev) => !prev)}\r\n                />\r\n            )}\r\n        />\r\n    );\r\n\r\n    return (\r\n        <div ref={setRootRef} class={[styles.collapsibleRoot, styles.collapsibleSizingVariants[getSizing()]].join(\" \")}>\r\n            <Show when={getHeadingTag()} fallback={renderWrapper()}>\r\n                {(getTag) => (\r\n                    <Dynamic component={getTag()} class={styles.collapsibleHeading}>\r\n                        {renderWrapper()}\r\n                    </Dynamic>\r\n                )}\r\n            </Show>\r\n\r\n            <div\r\n                id={panelId}\r\n                class={styles.collapsiblePanel}\r\n                style={{\r\n                    \"height\": `${getTransitionTarget() === 1 ? getContentHeight() : 0}px`,\r\n                    \"transition-property\": \"height\",\r\n                    \"transition-duration\": `${getTransitionDurationMs()}ms`,\r\n                }}\r\n                role={access(props.panelRole)}\r\n                {...(access(props.panelAriaAttributes) ?? {})}\r\n                inert={!getIsExpanded()}\r\n            >\r\n                <div ref={setContentRef}>\r\n                    <Show when={getHasPanelContent()}>\r\n                        {props.renderPanel(getTransitionTarget, getTransitionDurationMs)}\r\n                    </Show>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Corners/Corners.css.js

@@ -0,0 +1,15 @@
+/* empty css                           */
+//#region src/Fundamentals/Corners/Corners.css.ts
+var cornersRoot = "_1h0gmb70";
+var cornersGlow = "_1h0gmb71";
+var cornerSVG = "_1h0gmb72";
+var cornerVariant = {
+	bottomLeft: "_1h0gmb73",
+	bottomRight: "_1h0gmb74",
+	topLeft: "_1h0gmb75",
+	topRight: "_1h0gmb76"
+};
+//#endregion
+export { cornerSVG, cornerVariant, cornersGlow, cornersRoot };
+
+//# sourceMappingURL=Corners.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Corners.css.js","names":[],"sources":["../../../src/Fundamentals/Corners/Corners.css.ts"],"sourcesContent":["import { style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const cornersRoot = style({\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const cornersGlow = style({\n    position: \"absolute\",\n    inset: 0,\n    pointerEvents: \"none\",\n});\n\nexport const cornerSVG = style({\n    position: \"absolute\",\n    zIndex: 1,\n    pointerEvents: \"none\",\n});\n\nexport const cornerVariant = styleVariants({\n    bottomLeft: {\n        bottom: 0,\n        left: 0,\n        transform: \"scale(1, -1)\",\n    },\n    bottomRight: {\n        bottom: 0,\n        right: 0,\n        transform: \"scale(-1, -1)\",\n    },\n    topLeft: {\n        top: 0,\n        left: 0,\n        transform: \"scale(1, 1)\",\n    },\n    topRight: {\n        top: 0,\n        right: 0,\n        transform: \"scale(-1, 1)\",\n    },\n});\n"],"mappings":""}

package/dist/Fundamentals/Corners/Corners.js

@@ -0,0 +1,80 @@
+import { access } from "../../Utils/propUtils.js";
+import { cornerSVG, cornerVariant, cornersGlow, cornersRoot } from "./Corners.css.js";
+import { For, createMemo } from "solid-js";
+import "@thewaver/ss-utils";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Fundamentals/Corners/Corners.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg overflow=visible><polygon fill=currentColor>`);
+var DEFAULT_CORNERS_TRANSITION_DURATION_MS = 200;
+var DEFAULT_CORNERS_STROKE_THICKNESS = 4;
+var DEFAULT_CORNERS_CORNER_LENGTH = {
+	width: 20,
+	height: 20
+};
+var DEFAULT_CORNERS_VISIBLE_CORNERS = /* @__PURE__ */ new Set([
+	"bottomLeft",
+	"bottomRight",
+	"topLeft",
+	"topRight"
+]);
+var Corners = (props) => {
+	const getColor = createMemo(() => access(props.color) ?? "currentColor");
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_CORNERS_TRANSITION_DURATION_MS);
+	const getCornerLength = createMemo(() => access(props.cornerLength) ?? DEFAULT_CORNERS_CORNER_LENGTH);
+	const getStrokeThickness = createMemo(() => access(props.strokeThickness) ?? DEFAULT_CORNERS_STROKE_THICKNESS);
+	const getVisibleCorners = createMemo(() => [...access(props.visibleCorners) ?? DEFAULT_CORNERS_VISIBLE_CORNERS]);
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		className(_el$, cornersRoot);
+		className(_el$2, cornersGlow);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return getVisibleCorners();
+			},
+			children: (cornerKey) => (() => {
+				var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
+				effect((_p$) => {
+					var _v$4 = `${cornerSVG} ${cornerVariant[cornerKey]}`, _v$5 = getCornerLength().width, _v$6 = getCornerLength().height, _v$7 = `0 0 ${getCornerLength().width} ${getCornerLength().height}`, _v$8 = [
+						`0,0`,
+						`${getCornerLength().width},0`,
+						`${getCornerLength().width - getStrokeThickness()},${getStrokeThickness()}`,
+						`${getStrokeThickness()},${getStrokeThickness()}`,
+						`${getStrokeThickness()},${getCornerLength().height - getStrokeThickness()}`,
+						`0,${getCornerLength().height}`
+					].join(" ");
+					_v$4 !== _p$.e && setAttribute(_el$3, "class", _p$.e = _v$4);
+					_v$5 !== _p$.t && setAttribute(_el$3, "width", _p$.t = _v$5);
+					_v$6 !== _p$.a && setAttribute(_el$3, "height", _p$.a = _v$6);
+					_v$7 !== _p$.o && setAttribute(_el$3, "viewBox", _p$.o = _v$7);
+					_v$8 !== _p$.i && setAttribute(_el$4, "points", _p$.i = _v$8);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0
+				});
+				return _el$3;
+			})()
+		}));
+		insert(_el$, () => props.children, null);
+		effect((_p$) => {
+			var _v$ = getColor(), _v$2 = `drop-shadow(0 0 8px ${getColor()}) drop-shadow(0 0 16px ${getColor()})`, _v$3 = `color ${getTransitionDurationMs()}ms, filter ${getTransitionDurationMs()}ms`;
+			_v$ !== _p$.e && setStyleProperty(_el$2, "color", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "filter", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "transition", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Corners };
+
+//# sourceMappingURL=Corners.js.map

package/dist/Fundamentals/Corners/Corners.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Corners.js","names":["For","createMemo","ParentProps","Size2d","access","CornerKey","CornersProps","styles","DEFAULT_CORNERS_TRANSITION_DURATION_MS","DEFAULT_CORNERS_STROKE_THICKNESS","DEFAULT_CORNERS_CORNER_LENGTH","width","height","DEFAULT_CORNERS_VISIBLE_CORNERS","Set","Corners","props","getColor","color","getTransitionDurationMs","transitionDurationMs","getCornerLength","cornerLength","getStrokeThickness","strokeThickness","getVisibleCorners","visibleCorners","_el$","_tmpl$","_el$2","firstChild","_$className","cornersRoot","cornersGlow","_$insert","_$createComponent","each","children","cornerKey","_el$3","_tmpl$2","_el$4","_$effect","_p$","_v$4","cornerSVG","cornerVariant","_v$5","_v$6","_v$7","_v$8","join","e","_$setAttribute","t","a","o","i","undefined","_v$","_v$2","_v$3","_$setStyleProperty"],"sources":["../../../src/Fundamentals/Corners/Corners.tsx"],"sourcesContent":["import { For, createMemo } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\n\nimport { Size2d } from \"@thewaver/ss-utils\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport type { CornerKey, CornersProps } from \"./Corners.types\";\n\nimport * as styles from \"./Corners.css\";\n\nconst DEFAULT_CORNERS_TRANSITION_DURATION_MS = 200;\nconst DEFAULT_CORNERS_STROKE_THICKNESS = 4;\nconst DEFAULT_CORNERS_CORNER_LENGTH: Size2d = { width: 20, height: 20 };\nconst DEFAULT_CORNERS_VISIBLE_CORNERS: Set<CornerKey> = new Set([\"bottomLeft\", \"bottomRight\", \"topLeft\", \"topRight\"]);\n\nexport const Corners = (props: ParentProps<CornersProps>) => {\n    const getColor = createMemo(() => access(props.color) ?? \"currentColor\");\n\n    const getTransitionDurationMs = createMemo(\n        () => access(props.transitionDurationMs) ?? DEFAULT_CORNERS_TRANSITION_DURATION_MS,\n    );\n\n    const getCornerLength = createMemo(() => access(props.cornerLength) ?? DEFAULT_CORNERS_CORNER_LENGTH);\n\n    const getStrokeThickness = createMemo(() => access(props.strokeThickness) ?? DEFAULT_CORNERS_STROKE_THICKNESS);\n\n    const getVisibleCorners = createMemo(() => [...(access(props.visibleCorners) ?? DEFAULT_CORNERS_VISIBLE_CORNERS)]);\n\n    return (\n        <div class={styles.cornersRoot}>\n            <div\n                class={styles.cornersGlow}\n                style={{\n                    color: getColor(),\n                    filter: `drop-shadow(0 0 8px ${getColor()}) drop-shadow(0 0 16px ${getColor()})`,\n                    transition: `color ${getTransitionDurationMs()}ms, filter ${getTransitionDurationMs()}ms`,\n                }}\n                aria-hidden=\"true\"\n            >\n                <For each={getVisibleCorners()}>\n                    {(cornerKey) => (\n                        <svg\n                            class={`${styles.cornerSVG} ${styles.cornerVariant[cornerKey]}`}\n                            width={getCornerLength().width}\n                            height={getCornerLength().height}\n                            viewBox={`0 0 ${getCornerLength().width} ${getCornerLength().height}`}\n                            overflow=\"visible\"\n                        >\n                            <polygon\n                                fill=\"currentColor\"\n                                points={[\n                                    `0,0`,\n                                    `${getCornerLength().width},0`,\n                                    `${getCornerLength().width - getStrokeThickness()},${getStrokeThickness()}`,\n                                    `${getStrokeThickness()},${getStrokeThickness()}`,\n                                    `${getStrokeThickness()},${getCornerLength().height - getStrokeThickness()}`,\n                                    `0,${getCornerLength().height}`,\n                                ].join(\" \")}\n                            />\n                        </svg>\n                    )}\n                </For>\n            </div>\n\n            {props.children}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Drawer/Drawer.js

@@ -0,0 +1,12 @@
+import { Modal } from "../Modal/Modal.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/Drawer/Drawer.tsx
+var Drawer = (props) => {
+	return createComponent(Modal, mergeProps(props, { get alignment() {
+		return props.edge;
+	} }));
+};
+//#endregion
+export { Drawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/Fundamentals/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["Modal","DrawerProps","Drawer","props","_$createComponent","_$mergeProps","alignment","edge"],"sources":["../../../src/Fundamentals/Drawer/Drawer.tsx"],"sourcesContent":["import { Modal } from \"../Modal/Modal\";\nimport type { DrawerProps } from \"./Drawer.types\";\n\nexport const Drawer = (props: DrawerProps) => {\n    return <Modal {...props} alignment={props.edge} />;\n};\n"],"mappings":";;;AAGA,IAAaE,UAAUC,UAAuB;CAC1C,OAAAC,gBAAQJ,OAAKK,WAAKF,OAAK,EAAA,IAAEG,YAAS;EAAA,OAAEH,MAAMI;CAAI,EAAA,CAAA,CAAA;AAClD"}

package/dist/Fundamentals/DrumCarousel/DrumCarousel.js

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

package/dist/Fundamentals/DrumCarousel/DrumCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrumCarousel.js","names":["Carousel","DrumCarouselProps","DrumCarousel","props","T","_$createComponent","_$mergeProps","variant"],"sources":["../../../src/Fundamentals/DrumCarousel/DrumCarousel.tsx"],"sourcesContent":["import { Carousel } from \"../Carousel/Carousel\";\nimport type { DrumCarouselProps } from \"../Carousel/Carousel.types\";\n\nexport const DrumCarousel = <T,>(props: DrumCarouselProps<T>) => <Carousel<T> {...props} variant={\"drum\"} />;\n"],"mappings":";;;AAGA,IAAaE,gBAAoBC,UAA2BE,gBAAML,UAAQM,WAAQH,OAAK,EAAEI,SAAS,OAAM,CAAA,CAAA"}

package/dist/Fundamentals/Form/Form.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "solid-js";
+//#region src/Fundamentals/Form/Form.context.ts
+var FormContext = createContext();
+var FormContextProvider = FormContext.Provider;
+var useFormContext = () => useContext(FormContext);
+//#endregion
+export { FormContextProvider, useFormContext };
+
+//# sourceMappingURL=Form.context.js.map

package/dist/Fundamentals/Form/Form.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.context.js","names":[],"sources":["../../../src/Fundamentals/Form/Form.context.ts"],"sourcesContent":["import { createContext, useContext } from \"solid-js\";\n\nimport type { FormContextType } from \"./Form.context.types\";\n\nconst FormContext = createContext<FormContextType>();\n\nexport const FormContextProvider = FormContext.Provider;\n\nexport const useFormContext = () => useContext(FormContext);\n"],"mappings":";;AAIA,IAAM,cAAc,cAA+B;AAEnD,IAAa,sBAAsB,YAAY;AAE/C,IAAa,uBAAuB,WAAW,WAAW"}

package/dist/Fundamentals/Form/Form.js

@@ -0,0 +1,57 @@
+import { access } from "../../Utils/propUtils.js";
+import { FormContextProvider } from "./Form.context.js";
+import { createMemo, createSignal } from "solid-js";
+import { createComponent, effect, insert, setAttribute, template } from "solid-js/web";
+//#region src/Fundamentals/Form/Form.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<form novalidate>`);
+var Form = (props) => {
+	const [getEntries, setEntries] = createSignal([]);
+	const [getHasSubmitted, setHasSubmitted] = createSignal(false);
+	const getIsValid = createMemo(() => getEntries().every((entry) => !entry.getHasError()));
+	const getState = createMemo(() => ({
+		isValid: getIsValid(),
+		hasSubmitted: getHasSubmitted()
+	}));
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.addEventListener("reset", (e) => {
+			e.preventDefault();
+			setHasSubmitted(false);
+			props.onReset?.();
+		});
+		_el$.addEventListener("submit", (e) => {
+			e.preventDefault();
+			setHasSubmitted(true);
+			props.onSubmit?.();
+		});
+		insert(_el$, createComponent(FormContextProvider, {
+			value: {
+				register: (entry) => setEntries((prev) => [...prev, entry]),
+				unregister: (entry) => setEntries((prev) => prev.filter((held) => held !== entry)),
+				getIsValid,
+				getHasSubmitted
+			},
+			get children() {
+				return props.renderContent(getState);
+			}
+		}));
+		effect((_p$) => {
+			var _v$ = access(props.id), _v$2 = access(props.name), _v$3 = access(props.ariaLabel), _v$4 = access(props.ariaLabelledBy);
+			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "name", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "aria-labelledby", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { Form };
+
+//# sourceMappingURL=Form.js.map

package/dist/Fundamentals/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":["createMemo","createSignal","access","FormContextProvider","FormEntry","FormProps","FormState","Form","props","getEntries","setEntries","getHasSubmitted","setHasSubmitted","getIsValid","every","entry","getHasError","getState","isValid","hasSubmitted","_el$","_tmpl$","addEventListener","e","preventDefault","onReset","onSubmit","_$insert","_$createComponent","value","register","prev","unregister","filter","held","children","renderContent","_$effect","_p$","_v$","id","_v$2","name","_v$3","ariaLabel","_v$4","ariaLabelledBy","_$setAttribute","t","a","o","undefined"],"sources":["../../../src/Fundamentals/Form/Form.tsx"],"sourcesContent":["import { createMemo, createSignal } from \"solid-js\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { FormContextProvider } from \"./Form.context\";\nimport type { FormEntry } from \"./Form.context.types\";\nimport type { FormProps, FormState } from \"./Form.types\";\n\nexport const Form = (props: FormProps) => {\n    const [getEntries, setEntries] = createSignal<FormEntry[]>([]);\n    const [getHasSubmitted, setHasSubmitted] = createSignal(false);\n\n    const getIsValid = createMemo(() => getEntries().every((entry) => !entry.getHasError()));\n\n    const getState = createMemo((): FormState => ({ isValid: getIsValid(), hasSubmitted: getHasSubmitted() }));\n\n    return (\n        <form\n            id={access(props.id)}\n            name={access(props.name)}\n            aria-label={access(props.ariaLabel)}\n            aria-labelledby={access(props.ariaLabelledBy)}\n            noValidate\n            onSubmit={(e) => {\n                e.preventDefault();\n\n                setHasSubmitted(true);\n\n                void props.onSubmit?.();\n            }}\n            onReset={(e) => {\n                e.preventDefault();\n\n                setHasSubmitted(false);\n\n                void props.onReset?.();\n            }}\n        >\n            <FormContextProvider\n                value={{\n                    register: (entry) => setEntries((prev) => [...prev, entry]),\n                    unregister: (entry) => setEntries((prev) => prev.filter((held) => held !== entry)),\n                    getIsValid,\n                    getHasSubmitted,\n                }}\n            >\n                {props.renderContent(getState)}\n            </FormContextProvider>\n        </form>\n    );\n};\n"],"mappings":";;;;;;AAOA,IAAaO,QAAQC,UAAqB;CACtC,MAAM,CAACC,YAAYC,cAAcT,aAA0B,CAAA,CAAE;CAC7D,MAAM,CAACU,iBAAiBC,mBAAmBX,aAAa,KAAK;CAE7D,MAAMY,aAAab,iBAAiBS,WAAW,CAAC,CAACK,OAAOC,UAAU,CAACA,MAAMC,YAAY,CAAC,CAAC;CAEvF,MAAMC,WAAWjB,kBAA6B;EAAEkB,SAASL,WAAW;EAAGM,cAAcR,gBAAgB;CAAE,EAAE;CAEzG,cAAA;EAAA,IAAAS,OAAAC,OAAA;EAAAD,KAAAE,iBAAA,UAckBC,MAAM;GACZA,EAAEC,eAAe;GAEjBZ,gBAAgB,KAAK;GAErB,MAAWa,UAAU;EACzB,CAAC;EAAAL,KAAAE,iBAAA,WAbUC,MAAM;GACbA,EAAEC,eAAe;GAEjBZ,gBAAgB,IAAI;GAEpB,MAAWc,WAAW;EAC1B,CAAC;EAAAC,OAAAP,MAAAQ,gBASAzB,qBAAmB;GAChB0B,OAAO;IACHC,WAAWf,UAAUL,YAAYqB,SAAS,CAAC,GAAGA,MAAMhB,KAAK,CAAC;IAC1DiB,aAAajB,UAAUL,YAAYqB,SAASA,KAAKE,QAAQC,SAASA,SAASnB,KAAK,CAAC;IACjFF;IACAF;GACJ;GAAC,IAAAwB,WAAA;IAAA,OAEA3B,MAAM4B,cAAcnB,QAAQ;GAAC;EAAA,CAAA,CAAA;EAAAoB,QAAAC,QAAA;GAAA,IAAAC,MA5B9BrC,OAAOM,MAAMgC,EAAE,GAACC,OACdvC,OAAOM,MAAMkC,IAAI,GAACC,OACZzC,OAAOM,MAAMoC,SAAS,GAACC,OAClB3C,OAAOM,MAAMsC,cAAc;GAACP,QAAAD,IAAAf,KAAAwB,aAAA3B,MAAA,MAAAkB,IAAAf,IAAAgB,GAAA;GAAAE,SAAAH,IAAAU,KAAAD,aAAA3B,MAAA,QAAAkB,IAAAU,IAAAP,IAAA;GAAAE,SAAAL,IAAAW,KAAAF,aAAA3B,MAAA,cAAAkB,IAAAW,IAAAN,IAAA;GAAAE,SAAAP,IAAAY,KAAAH,aAAA3B,MAAA,mBAAAkB,IAAAY,IAAAL,IAAA;GAAA,OAAAP;EAAA,GAAA;GAAAf,GAAA4B,KAAAA;GAAAH,GAAAG,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;EAAA,CAAA;EAAA,OAAA/B;CAAA,EAAA,CAAA;AA6BzD"}

package/dist/Fundamentals/ImageSwitcher/ImageSwitcher.css.js

@@ -0,0 +1,8 @@
+/* empty css                                 */
+//#region src/Fundamentals/ImageSwitcher/ImageSwitcher.css.ts
+var imageSwitcherRoot = "hrfz3p0";
+var imageSwitcherImage = "hrfz3p1";
+//#endregion
+export { imageSwitcherImage, imageSwitcherRoot };
+
+//# sourceMappingURL=ImageSwitcher.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwitcher.css.js","names":[],"sources":["../../../src/Fundamentals/ImageSwitcher/ImageSwitcher.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const imageSwitcherRoot = style({\n    position: \"relative\",\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const imageSwitcherImage = style({\n    position: \"absolute\",\n    inset: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"block\",\n    objectFit: \"cover\",\n    objectPosition: \"center center\",\n    transitionProperty: \"opacity\",\n});\n"],"mappings":""}

package/dist/Fundamentals/ImageSwitcher/ImageSwitcher.js

@@ -0,0 +1,77 @@
+import { access } from "../../Utils/propUtils.js";
+import { imageSwitcherImage, imageSwitcherRoot } from "./ImageSwitcher.css.js";
+import { createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, effect, setAttribute, setStyleProperty, template } from "solid-js/web";
+//#region src/Fundamentals/ImageSwitcher/ImageSwitcher.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><img alt><img alt>`);
+var DEFAULT_IMAGE_SWITCHER_TRANSITION_DURATION_MS = 100;
+var ImageSwitcher = (props) => {
+	const [getPrevImage, setPrevImage] = createSignal();
+	const [getCurrentImage, setCurrentImage] = createSignal();
+	const [getVersion, setVersion] = createSignal(0);
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_IMAGE_SWITCHER_TRANSITION_DURATION_MS);
+	const isEven = createMemo(() => MathUtils.isEven(getVersion()));
+	createEffect(() => {
+		const src = access(props.src);
+		const onLoad = props.onLoad;
+		if (src === untrack(getCurrentImage)) return;
+		const swap = () => {
+			setPrevImage(untrack(getCurrentImage));
+			setCurrentImage(src);
+			setVersion((prev) => prev + 1);
+		};
+		if (!src) {
+			swap();
+			return;
+		}
+		const img = new Image();
+		onCleanup(() => {
+			img.onload = null;
+			img.onerror = null;
+			img.src = "";
+		});
+		img.crossOrigin = "anonymous";
+		img.onload = (e) => {
+			swap();
+			onLoad?.call(img, e);
+		};
+		img.onerror = () => {
+			console.warn(`ImageSwitcher: failed to preload image: ${src}`);
+			swap();
+		};
+		img.src = src;
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		className(_el$, imageSwitcherRoot);
+		className(_el$2, imageSwitcherImage);
+		className(_el$3, imageSwitcherImage);
+		effect((_p$) => {
+			var _v$ = isEven() ? 1 : 0, _v$2 = `${getTransitionDurationMs()}ms`, _v$3 = (isEven() ? getCurrentImage() : getPrevImage()) ? void 0 : "hidden", _v$4 = isEven() ? getCurrentImage() : getPrevImage(), _v$5 = !isEven() ? 1 : 0, _v$6 = `${getTransitionDurationMs()}ms`, _v$7 = (!isEven() ? getCurrentImage() : getPrevImage()) ? void 0 : "hidden", _v$8 = !isEven() ? getCurrentImage() : getPrevImage();
+			_v$ !== _p$.e && setStyleProperty(_el$2, "opacity", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "transition-duration", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "visibility", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$2, "src", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$3, "opacity", _p$.i = _v$5);
+			_v$6 !== _p$.n && setStyleProperty(_el$3, "transition-duration", _p$.n = _v$6);
+			_v$7 !== _p$.s && setStyleProperty(_el$3, "visibility", _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$3, "src", _p$.h = _v$8);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0
+		});
+		return _el$;
+	})();
+};
+//#endregion
+export { ImageSwitcher };
+
+//# sourceMappingURL=ImageSwitcher.js.map