@smwb/ui-solid 0.3.0 → 0.4.0

package/dist/headless/source/utils/debounce.js

@@ -0,0 +1,23 @@
+function debounce(fn, wait) {
+  let timer;
+  const debounced = (...args) => {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = void 0;
+      fn(...args);
+    }, wait);
+  };
+  debounced.cancel = () => {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  return debounced;
+}
+export {
+  debounce
+};
+//# sourceMappingURL=debounce.js.map

package/dist/headless/source/utils/debounce.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/debounce.ts"],
+  "sourcesContent": ["export interface DebouncedFunction<A extends unknown[]> {\n  (...args: A): void;\n  cancel(): void;\n}\n\nexport function debounce<A extends unknown[]>(fn: (...args: A) => void, wait: number): DebouncedFunction<A> {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  const debounced = (...args: A): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n    }\n    timer = setTimeout(() => {\n      timer = undefined;\n      fn(...args);\n    }, wait);\n  };\n\n  debounced.cancel = (): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n      timer = undefined;\n    }\n  };\n\n  return debounced;\n}\n"],
+  "mappings": "AAKO,SAAS,SAA8B,IAA0B,MAAoC;AAC1G,MAAI;AAEJ,QAAM,YAAY,IAAI,SAAkB;AACtC,QAAI,UAAU,QAAW;AACvB,mBAAa,KAAK;AAAA,IACpB;AACA,YAAQ,WAAW,MAAM;AACvB,cAAQ;AACR,SAAG,GAAG,IAAI;AAAA,IACZ,GAAG,IAAI;AAAA,EACT;AAEA,YAAU,SAAS,MAAY;AAC7B,QAAI,UAAU,QAAW;AACvB,mBAAa,KAAK;AAClB,cAAQ;AAAA,IACV;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/headless/source/utils/floating.js

@@ -0,0 +1,42 @@
+import { autoPlacement, flip, offset, shift } from "@floating-ui/dom";
+const placements = [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "right",
+  "right-start",
+  "right-end",
+  "left",
+  "left-start",
+  "left-end"
+];
+function resolvePlacement(placement) {
+  if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
+    const alignment = placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null;
+    return { autoMiddleware: autoPlacement({ alignment }) };
+  }
+  return { placement };
+}
+const FLOATING_OFFSET_PX = 4;
+const FLOATING_SHIFT_PADDING_PX = 8;
+function buildFloatingMiddleware(resolved, custom) {
+  if (custom?.length) {
+    return [...custom, flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];
+  }
+  if (resolved.autoMiddleware) {
+    return [offset(FLOATING_OFFSET_PX), shift({ padding: FLOATING_SHIFT_PADDING_PX }), resolved.autoMiddleware];
+  }
+  return [offset(FLOATING_OFFSET_PX), flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];
+}
+export {
+  buildFloatingMiddleware,
+  placements,
+  resolvePlacement
+};
+//# sourceMappingURL=floating.js.map

package/dist/headless/source/utils/floating.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/floating.ts"],
+  "sourcesContent": ["import { autoPlacement, flip, type Middleware, offset, type Placement as FloatingUiPlacement, shift } from \"@floating-ui/dom\";\n\nexport type Placement = FloatingUiPlacement | \"auto\" | \"auto-start\" | \"auto-end\";\n\nexport const placements: Placement[] = [\n  \"auto\",\n  \"auto-start\",\n  \"auto-end\",\n  \"top\",\n  \"top-start\",\n  \"top-end\",\n  \"bottom\",\n  \"bottom-start\",\n  \"bottom-end\",\n  \"right\",\n  \"right-start\",\n  \"right-end\",\n  \"left\",\n  \"left-start\",\n  \"left-end\",\n];\n\nexport interface ResolvedPlacement {\n  placement?: FloatingUiPlacement;\n  autoMiddleware?: Middleware;\n}\n\nexport function resolvePlacement(placement: Placement): ResolvedPlacement {\n  if (placement === \"auto\" || placement === \"auto-start\" || placement === \"auto-end\") {\n    const alignment = placement === \"auto-start\" ? \"start\" : placement === \"auto-end\" ? \"end\" : null;\n    return { autoMiddleware: autoPlacement({ alignment }) };\n  }\n  return { placement };\n}\n\nconst FLOATING_OFFSET_PX = 4;\nconst FLOATING_SHIFT_PADDING_PX = 8;\n\nexport function buildFloatingMiddleware(resolved: ResolvedPlacement, custom?: Middleware[]): Middleware[] {\n  if (custom?.length) {\n    return [...custom, flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];\n  }\n  if (resolved.autoMiddleware) {\n    return [offset(FLOATING_OFFSET_PX), shift({ padding: FLOATING_SHIFT_PADDING_PX }), resolved.autoMiddleware];\n  }\n  return [offset(FLOATING_OFFSET_PX), flip(), shift({ padding: FLOATING_SHIFT_PADDING_PX })];\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,MAAuB,QAA+C,aAAa;AAIpG,MAAM,aAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,SAAS,iBAAiB,WAAyC;AACxE,MAAI,cAAc,UAAU,cAAc,gBAAgB,cAAc,YAAY;AAClF,UAAM,YAAY,cAAc,eAAe,UAAU,cAAc,aAAa,QAAQ;AAC5F,WAAO,EAAE,gBAAgB,cAAc,EAAE,UAAU,CAAC,EAAE;AAAA,EACxD;AACA,SAAO,EAAE,UAAU;AACrB;AAEA,MAAM,qBAAqB;AAC3B,MAAM,4BAA4B;AAE3B,SAAS,wBAAwB,UAA6B,QAAqC;AACxG,MAAI,QAAQ,QAAQ;AAClB,WAAO,CAAC,GAAG,QAAQ,KAAK,GAAG,MAAM,EAAE,SAAS,0BAA0B,CAAC,CAAC;AAAA,EAC1E;AACA,MAAI,SAAS,gBAAgB;AAC3B,WAAO,CAAC,OAAO,kBAAkB,GAAG,MAAM,EAAE,SAAS,0BAA0B,CAAC,GAAG,SAAS,cAAc;AAAA,EAC5G;AACA,SAAO,CAAC,OAAO,kBAAkB,GAAG,KAAK,GAAG,MAAM,EAAE,SAAS,0BAA0B,CAAC,CAAC;AAC3F;",
+  "names": []
+}

package/dist/headless/source/utils/throttle.js

@@ -0,0 +1,41 @@
+function throttle(fn, wait) {
+  let lastCall = 0;
+  let timer;
+  let lastArgs;
+  const invoke = (time, args) => {
+    lastCall = time;
+    fn(...args);
+  };
+  const throttled = (...args) => {
+    const now = Date.now();
+    const remaining = wait - (now - lastCall);
+    lastArgs = args;
+    if (remaining <= 0 || remaining > wait) {
+      if (timer !== void 0) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+      invoke(now, args);
+    } else if (timer === void 0) {
+      timer = setTimeout(() => {
+        timer = void 0;
+        if (lastArgs !== void 0) {
+          invoke(Date.now(), lastArgs);
+        }
+      }, remaining);
+    }
+  };
+  throttled.cancel = () => {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    lastCall = 0;
+    lastArgs = void 0;
+  };
+  return throttled;
+}
+export {
+  throttle
+};
+//# sourceMappingURL=throttle.js.map

package/dist/headless/source/utils/throttle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/throttle.ts"],
+  "sourcesContent": ["export interface ThrottledFunction<A extends unknown[]> {\n  (...args: A): void;\n  cancel(): void;\n}\n\nexport function throttle<A extends unknown[]>(fn: (...args: A) => void, wait: number): ThrottledFunction<A> {\n  let lastCall = 0;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let lastArgs: A | undefined;\n\n  const invoke = (time: number, args: A): void => {\n    lastCall = time;\n    fn(...args);\n  };\n\n  const throttled = (...args: A): void => {\n    const now = Date.now();\n    const remaining = wait - (now - lastCall);\n    lastArgs = args;\n\n    if (remaining <= 0 || remaining > wait) {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n      invoke(now, args);\n    } else if (timer === undefined) {\n      timer = setTimeout(() => {\n        timer = undefined;\n        if (lastArgs !== undefined) {\n          invoke(Date.now(), lastArgs);\n        }\n      }, remaining);\n    }\n  };\n\n  throttled.cancel = (): void => {\n    if (timer !== undefined) {\n      clearTimeout(timer);\n      timer = undefined;\n    }\n    lastCall = 0;\n    lastArgs = undefined;\n  };\n\n  return throttled;\n}\n"],
+  "mappings": "AAKO,SAAS,SAA8B,IAA0B,MAAoC;AAC1G,MAAI,WAAW;AACf,MAAI;AACJ,MAAI;AAEJ,QAAM,SAAS,CAAC,MAAc,SAAkB;AAC9C,eAAW;AACX,OAAG,GAAG,IAAI;AAAA,EACZ;AAEA,QAAM,YAAY,IAAI,SAAkB;AACtC,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,YAAY,QAAQ,MAAM;AAChC,eAAW;AAEX,QAAI,aAAa,KAAK,YAAY,MAAM;AACtC,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAClB,gBAAQ;AAAA,MACV;AACA,aAAO,KAAK,IAAI;AAAA,IAClB,WAAW,UAAU,QAAW;AAC9B,cAAQ,WAAW,MAAM;AACvB,gBAAQ;AACR,YAAI,aAAa,QAAW;AAC1B,iBAAO,KAAK,IAAI,GAAG,QAAQ;AAAA,QAC7B;AAAA,MACF,GAAG,SAAS;AAAA,IACd;AAAA,EACF;AAEA,YAAU,SAAS,MAAY;AAC7B,QAAI,UAAU,QAAW;AACvB,mBAAa,KAAK;AAClB,cAAQ;AAAA,IACV;AACA,eAAW;AACX,eAAW;AAAA,EACb;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/source/components/base/animateHeight/animateHeight.jsx

@@ -0,0 +1,177 @@
+import { createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const isNumberString = (n) => {
+  const number = parseFloat(n);
+  return !isNaN(number) && isFinite(number);
+};
+const isPercentage = (height) => typeof height === "string" && height[height.length - 1] === "%" && isNumberString(height.substring(0, height.length - 1));
+const hideContent = (element, height) => {
+  if (height === 0 && element?.style) element.style.display = "none";
+};
+const showContent = (element, height) => {
+  if (height === 0 && element?.style) element.style.display = "";
+};
+const ANIMATION_STATE_CLASSES = {
+  animating: "rah-animating",
+  animatingUp: "rah-animating--up",
+  animatingDown: "rah-animating--down",
+  animatingToHeightZero: "rah-animating--to-height-zero",
+  animatingToHeightAuto: "rah-animating--to-height-auto",
+  animatingToHeightSpecific: "rah-animating--to-height-specific",
+  static: "rah-static",
+  staticHeightZero: "rah-static--height-zero",
+  staticHeightAuto: "rah-static--height-auto",
+  staticHeightSpecific: "rah-static--height-specific"
+};
+const getStaticStateClasses = (s, height) => cn({
+  [s.static]: true,
+  [s.staticHeightZero]: height === 0,
+  [s.staticHeightSpecific]: typeof height === "number" && height > 0,
+  [s.staticHeightAuto]: height === "auto"
+});
+const toCssHeight = (height) => typeof height === "number" ? `${height}px` : height;
+function AnimateHeight(props) {
+  const merged = mergeProps(
+    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: "ease" },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "animateOpacity",
+    "animationStateClasses",
+    "applyInlineTransitions",
+    "children",
+    "class",
+    "contentClassName",
+    "delay",
+    "duration",
+    "easing",
+    "height",
+    "onHeightAnimationEnd",
+    "onHeightAnimationStart",
+    "style",
+    "ref"
+  ]);
+  const stateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };
+  let contentEl;
+  let prevHeight = local.height;
+  let timeoutId;
+  let classesTimeoutId;
+  let initHeight = local.height;
+  let initOverflow = "visible";
+  if (typeof initHeight === "number") {
+    initHeight = initHeight < 0 ? 0 : initHeight;
+    initOverflow = "hidden";
+  } else if (isPercentage(initHeight)) {
+    initHeight = initHeight === "0%" ? 0 : initHeight;
+    initOverflow = "hidden";
+  }
+  const [currentHeight, setCurrentHeight] = createSignal(initHeight);
+  const [overflow, setOverflow] = createSignal(initOverflow);
+  const [useTransitions, setUseTransitions] = createSignal(false);
+  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));
+  onMount(() => hideContent(contentEl, currentHeight()));
+  createEffect(() => {
+    const height = local.height;
+    if (height !== prevHeight && contentEl) {
+      showContent(contentEl, prevHeight);
+      contentEl.style.overflow = "hidden";
+      const contentHeight = contentEl.offsetHeight;
+      contentEl.style.overflow = "";
+      const totalDuration = local.duration + local.delay;
+      let newHeight;
+      let timeoutHeight;
+      let timeoutOverflow = "hidden";
+      const isCurrentHeightAuto = prevHeight === "auto";
+      if (typeof height === "number") {
+        newHeight = height < 0 ? 0 : height;
+        timeoutHeight = newHeight;
+      } else if (isPercentage(height)) {
+        newHeight = height === "0%" ? 0 : height;
+        timeoutHeight = newHeight;
+      } else {
+        newHeight = contentHeight;
+        timeoutHeight = "auto";
+        timeoutOverflow = void 0;
+      }
+      if (isCurrentHeightAuto) {
+        timeoutHeight = newHeight;
+        newHeight = contentHeight;
+      }
+      const animatingClassNames = cn({
+        [stateClasses.animating]: true,
+        [stateClasses.animatingUp]: prevHeight === "auto" || typeof prevHeight === "number" && typeof height === "number" && height < prevHeight,
+        [stateClasses.animatingDown]: height === "auto" || typeof prevHeight === "number" && typeof height === "number" && height > prevHeight,
+        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,
+        [stateClasses.animatingToHeightAuto]: timeoutHeight === "auto",
+        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === "number" && timeoutHeight > 0
+      });
+      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);
+      setCurrentHeight(newHeight);
+      setOverflow("hidden");
+      setUseTransitions(!isCurrentHeightAuto);
+      setStateClassNames(animatingClassNames);
+      clearTimeout(timeoutId);
+      clearTimeout(classesTimeoutId);
+      if (isCurrentHeightAuto) {
+        timeoutId = setTimeout(() => {
+          setCurrentHeight(timeoutHeight);
+          setOverflow(timeoutOverflow);
+          setUseTransitions(true);
+          local.onHeightAnimationStart?.(timeoutHeight);
+        }, 50);
+        classesTimeoutId = setTimeout(() => {
+          setUseTransitions(false);
+          setStateClassNames(finalClassNames);
+          hideContent(contentEl, timeoutHeight);
+          local.onHeightAnimationEnd?.(timeoutHeight);
+        }, totalDuration);
+      } else {
+        local.onHeightAnimationStart?.(newHeight);
+        timeoutId = setTimeout(() => {
+          setCurrentHeight(timeoutHeight);
+          setOverflow(timeoutOverflow);
+          setUseTransitions(false);
+          setStateClassNames(finalClassNames);
+          if (height !== "auto") hideContent(contentEl, newHeight);
+          local.onHeightAnimationEnd?.(newHeight);
+        }, totalDuration);
+      }
+    }
+    prevHeight = height;
+  });
+  onCleanup(() => {
+    clearTimeout(timeoutId);
+    clearTimeout(classesTimeoutId);
+  });
+  const componentStyle = () => {
+    const base = {
+      ...typeof local.style === "object" && local.style ? local.style : {},
+      height: toCssHeight(currentHeight()),
+      overflow: overflow() ?? "visible"
+    };
+    if (useTransitions() && local.applyInlineTransitions) {
+      base.transition = `height ${local.duration}ms ${local.easing} ${local.delay}ms`;
+    }
+    return base;
+  };
+  const contentStyle = () => {
+    if (!local.animateOpacity) return {};
+    return {
+      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,
+      ...currentHeight() === 0 ? { opacity: 0 } : {}
+    };
+  };
+  const ariaHidden = () => rest["aria-hidden"] !== void 0 ? rest["aria-hidden"] : local.height === 0;
+  return <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>
+      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>
+        {local.children}
+      </div>
+    </div>;
+}
+var animateHeight_default = AnimateHeight;
+export {
+  AnimateHeight,
+  animateHeight_default as default
+};
+//# sourceMappingURL=animateHeight.js.map

package/dist/source/components/base/animateHeight/animateHeight.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/base/animateHeight/animateHeight.tsx"],"sourcesContent":["// Solid port of react-animate-height (MIT, © Stanko Tadić)\n// https://github.com/Stanko/react-animate-height\nimport { type JSX, type ParentProps, createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type Height = \"auto\" | number | `${number}%`;\ntype Overflow = \"auto\" | \"visible\" | \"hidden\" | undefined;\n\ninterface AnimationStateClasses {\n  animating: string;\n  animatingUp: string;\n  animatingDown: string;\n  animatingToHeightZero: string;\n  animatingToHeightAuto: string;\n  animatingToHeightSpecific: string;\n  static: string;\n  staticHeightZero: string;\n  staticHeightAuto: string;\n  staticHeightSpecific: string;\n}\n\nconst isNumberString = (n: string): boolean => {\n  const number = parseFloat(n);\n  return !isNaN(number) && isFinite(number);\n};\n\nconst isPercentage = (height: Height): height is `${number}%` =>\n  typeof height === \"string\" && height[height.length - 1] === \"%\" && isNumberString(height.substring(0, height.length - 1));\n\nconst hideContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"none\";\n};\nconst showContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"\";\n};\n\nconst ANIMATION_STATE_CLASSES: AnimationStateClasses = {\n  animating: \"rah-animating\",\n  animatingUp: \"rah-animating--up\",\n  animatingDown: \"rah-animating--down\",\n  animatingToHeightZero: \"rah-animating--to-height-zero\",\n  animatingToHeightAuto: \"rah-animating--to-height-auto\",\n  animatingToHeightSpecific: \"rah-animating--to-height-specific\",\n  static: \"rah-static\",\n  staticHeightZero: \"rah-static--height-zero\",\n  staticHeightAuto: \"rah-static--height-auto\",\n  staticHeightSpecific: \"rah-static--height-specific\",\n};\n\nconst getStaticStateClasses = (s: AnimationStateClasses, height: Height): string =>\n  cn({\n    [s.static]: true,\n    [s.staticHeightZero]: height === 0,\n    [s.staticHeightSpecific]: typeof height === \"number\" && height > 0,\n    [s.staticHeightAuto]: height === \"auto\",\n  });\n\nconst toCssHeight = (height: Height): string => (typeof height === \"number\" ? `${height}px` : height);\n\nexport interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  animateOpacity?: boolean;\n  animationStateClasses?: Partial<AnimationStateClasses>;\n  applyInlineTransitions?: boolean;\n  contentClassName?: string;\n  delay?: number;\n  duration?: number;\n  easing?: string;\n  height: Height;\n  onHeightAnimationEnd?: (newHeight: Height) => void;\n  onHeightAnimationStart?: (newHeight: Height) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element {\n  const merged = mergeProps(\n    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: \"ease\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"animateOpacity\",\n    \"animationStateClasses\",\n    \"applyInlineTransitions\",\n    \"children\",\n    \"class\",\n    \"contentClassName\",\n    \"delay\",\n    \"duration\",\n    \"easing\",\n    \"height\",\n    \"onHeightAnimationEnd\",\n    \"onHeightAnimationStart\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const stateClasses: AnimationStateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };\n\n  let contentEl: HTMLDivElement | undefined;\n  let prevHeight: Height = local.height;\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  let classesTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  let initHeight: Height = local.height;\n  let initOverflow: Overflow = \"visible\";\n  if (typeof initHeight === \"number\") {\n    initHeight = initHeight < 0 ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  } else if (isPercentage(initHeight)) {\n    initHeight = initHeight === \"0%\" ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  }\n\n  const [currentHeight, setCurrentHeight] = createSignal<Height>(initHeight);\n  const [overflow, setOverflow] = createSignal<Overflow>(initOverflow);\n  const [useTransitions, setUseTransitions] = createSignal(false);\n  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));\n\n  onMount(() => hideContent(contentEl, currentHeight()));\n\n  createEffect(() => {\n    const height = local.height;\n    if (height !== prevHeight && contentEl) {\n      showContent(contentEl, prevHeight);\n      contentEl.style.overflow = \"hidden\";\n      const contentHeight = contentEl.offsetHeight;\n      contentEl.style.overflow = \"\";\n\n      const totalDuration = local.duration + local.delay;\n      let newHeight: Height;\n      let timeoutHeight: Height;\n      let timeoutOverflow: Overflow = \"hidden\";\n      const isCurrentHeightAuto = prevHeight === \"auto\";\n\n      if (typeof height === \"number\") {\n        newHeight = height < 0 ? 0 : height;\n        timeoutHeight = newHeight;\n      } else if (isPercentage(height)) {\n        newHeight = height === \"0%\" ? 0 : height;\n        timeoutHeight = newHeight;\n      } else {\n        newHeight = contentHeight;\n        timeoutHeight = \"auto\";\n        timeoutOverflow = undefined;\n      }\n\n      if (isCurrentHeightAuto) {\n        timeoutHeight = newHeight;\n        newHeight = contentHeight;\n      }\n\n      const animatingClassNames = cn({\n        [stateClasses.animating]: true,\n        [stateClasses.animatingUp]:\n          prevHeight === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height < prevHeight),\n        [stateClasses.animatingDown]:\n          height === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height > prevHeight),\n        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,\n        [stateClasses.animatingToHeightAuto]: timeoutHeight === \"auto\",\n        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === \"number\" && timeoutHeight > 0,\n      });\n      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);\n\n      setCurrentHeight(newHeight);\n      setOverflow(\"hidden\");\n      setUseTransitions(!isCurrentHeightAuto);\n      setStateClassNames(animatingClassNames);\n\n      clearTimeout(timeoutId);\n      clearTimeout(classesTimeoutId);\n\n      if (isCurrentHeightAuto) {\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(true);\n          local.onHeightAnimationStart?.(timeoutHeight);\n        }, 50);\n        classesTimeoutId = setTimeout(() => {\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          hideContent(contentEl, timeoutHeight);\n          local.onHeightAnimationEnd?.(timeoutHeight);\n        }, totalDuration);\n      } else {\n        local.onHeightAnimationStart?.(newHeight);\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          if (height !== \"auto\") hideContent(contentEl, newHeight);\n          local.onHeightAnimationEnd?.(newHeight);\n        }, totalDuration);\n      }\n    }\n    prevHeight = height;\n  });\n\n  onCleanup(() => {\n    clearTimeout(timeoutId);\n    clearTimeout(classesTimeoutId);\n  });\n\n  const componentStyle = (): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      height: toCssHeight(currentHeight()),\n      overflow: overflow() ?? \"visible\",\n    };\n    if (useTransitions() && local.applyInlineTransitions) {\n      base.transition = `height ${local.duration}ms ${local.easing} ${local.delay}ms`;\n    }\n    return base;\n  };\n\n  const contentStyle = (): JSX.CSSProperties => {\n    if (!local.animateOpacity) return {};\n    return {\n      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,\n      ...(currentHeight() === 0 ? { opacity: 0 } : {}),\n    };\n  };\n\n  const ariaHidden = (): boolean | undefined =>\n    rest[\"aria-hidden\"] !== undefined ? (rest[\"aria-hidden\"] as boolean) : local.height === 0;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>\n      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>\n        {local.children}\n      </div>\n    </div>\n  );\n}\n\nexport default AnimateHeight;\n"],"mappings":"AAEA,SAAqC,cAAc,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACnH,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkBpC,MAAM,iBAAiB,CAAC,MAAuB;AAC7C,QAAM,SAAS,WAAW,CAAC;AAC3B,SAAO,CAAC,MAAM,MAAM,KAAK,SAAS,MAAM;AAC1C;AAEA,MAAM,eAAe,CAAC,WACpB,OAAO,WAAW,YAAY,OAAO,OAAO,SAAS,CAAC,MAAM,OAAO,eAAe,OAAO,UAAU,GAAG,OAAO,SAAS,CAAC,CAAC;AAE1H,MAAM,cAAc,CAAC,SAAqC,WAAyB;AACjF,MAAI,WAAW,KAAK,SAAS,MAAO,SAAQ,MAAM,UAAU;AAC9D;AACA,MAAM,cAAc,CAAC,SAAqC,WAAyB;AACjF,MAAI,WAAW,KAAK,SAAS,MAAO,SAAQ,MAAM,UAAU;AAC9D;AAEA,MAAM,0BAAiD;AAAA,EACrD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,EAC3B,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,sBAAsB;AACxB;AAEA,MAAM,wBAAwB,CAAC,GAA0B,WACvD,GAAG;AAAA,EACD,CAAC,EAAE,MAAM,GAAG;AAAA,EACZ,CAAC,EAAE,gBAAgB,GAAG,WAAW;AAAA,EACjC,CAAC,EAAE,oBAAoB,GAAG,OAAO,WAAW,YAAY,SAAS;AAAA,EACjE,CAAC,EAAE,gBAAgB,GAAG,WAAW;AACnC,CAAC;AAEH,MAAM,cAAc,CAAC,WAA4B,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAgBvF,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS;AAAA,IACb,EAAE,gBAAgB,OAAO,wBAAwB,MAAM,OAAO,GAAG,UAAU,KAAK,QAAQ,OAAO;AAAA,IAC/F;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAsC,EAAE,GAAG,yBAAyB,GAAG,MAAM,sBAAsB;AAEzG,MAAI;AACJ,MAAI,aAAqB,MAAM;AAC/B,MAAI;AACJ,MAAI;AAEJ,MAAI,aAAqB,MAAM;AAC/B,MAAI,eAAyB;AAC7B,MAAI,OAAO,eAAe,UAAU;AAClC,iBAAa,aAAa,IAAI,IAAI;AAClC,mBAAe;AAAA,EACjB,WAAW,aAAa,UAAU,GAAG;AACnC,iBAAa,eAAe,OAAO,IAAI;AACvC,mBAAe;AAAA,EACjB;AAEA,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAqB,UAAU;AACzE,QAAM,CAAC,UAAU,WAAW,IAAI,aAAuB,YAAY;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAa,KAAK;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAa,sBAAsB,cAAc,MAAM,MAAM,CAAC;AAE5G,UAAQ,MAAM,YAAY,WAAW,cAAc,CAAC,CAAC;AAErD,eAAa,MAAM;AACjB,UAAM,SAAS,MAAM;AACrB,QAAI,WAAW,cAAc,WAAW;AACtC,kBAAY,WAAW,UAAU;AACjC,gBAAU,MAAM,WAAW;AAC3B,YAAM,gBAAgB,UAAU;AAChC,gBAAU,MAAM,WAAW;AAE3B,YAAM,gBAAgB,MAAM,WAAW,MAAM;AAC7C,UAAI;AACJ,UAAI;AACJ,UAAI,kBAA4B;AAChC,YAAM,sBAAsB,eAAe;AAE3C,UAAI,OAAO,WAAW,UAAU;AAC9B,oBAAY,SAAS,IAAI,IAAI;AAC7B,wBAAgB;AAAA,MAClB,WAAW,aAAa,MAAM,GAAG;AAC/B,oBAAY,WAAW,OAAO,IAAI;AAClC,wBAAgB;AAAA,MAClB,OAAO;AACL,oBAAY;AACZ,wBAAgB;AAChB,0BAAkB;AAAA,MACpB;AAEA,UAAI,qBAAqB;AACvB,wBAAgB;AAChB,oBAAY;AAAA,MACd;AAEA,YAAM,sBAAsB,GAAG;AAAA,QAC7B,CAAC,aAAa,SAAS,GAAG;AAAA,QAC1B,CAAC,aAAa,WAAW,GACvB,eAAe,UAAW,OAAO,eAAe,YAAY,OAAO,WAAW,YAAY,SAAS;AAAA,QACrG,CAAC,aAAa,aAAa,GACzB,WAAW,UAAW,OAAO,eAAe,YAAY,OAAO,WAAW,YAAY,SAAS;AAAA,QACjG,CAAC,aAAa,qBAAqB,GAAG,kBAAkB;AAAA,QACxD,CAAC,aAAa,qBAAqB,GAAG,kBAAkB;AAAA,QACxD,CAAC,aAAa,yBAAyB,GAAG,OAAO,kBAAkB,YAAY,gBAAgB;AAAA,MACjG,CAAC;AACD,YAAM,kBAAkB,sBAAsB,cAAc,aAAa;AAEzE,uBAAiB,SAAS;AAC1B,kBAAY,QAAQ;AACpB,wBAAkB,CAAC,mBAAmB;AACtC,yBAAmB,mBAAmB;AAEtC,mBAAa,SAAS;AACtB,mBAAa,gBAAgB;AAE7B,UAAI,qBAAqB;AACvB,oBAAY,WAAW,MAAM;AAC3B,2BAAiB,aAAa;AAC9B,sBAAY,eAAe;AAC3B,4BAAkB,IAAI;AACtB,gBAAM,yBAAyB,aAAa;AAAA,QAC9C,GAAG,EAAE;AACL,2BAAmB,WAAW,MAAM;AAClC,4BAAkB,KAAK;AACvB,6BAAmB,eAAe;AAClC,sBAAY,WAAW,aAAa;AACpC,gBAAM,uBAAuB,aAAa;AAAA,QAC5C,GAAG,aAAa;AAAA,MAClB,OAAO;AACL,cAAM,yBAAyB,SAAS;AACxC,oBAAY,WAAW,MAAM;AAC3B,2BAAiB,aAAa;AAC9B,sBAAY,eAAe;AAC3B,4BAAkB,KAAK;AACvB,6BAAmB,eAAe;AAClC,cAAI,WAAW,OAAQ,aAAY,WAAW,SAAS;AACvD,gBAAM,uBAAuB,SAAS;AAAA,QACxC,GAAG,aAAa;AAAA,MAClB;AAAA,IACF;AACA,iBAAa;AAAA,EACf,CAAC;AAED,YAAU,MAAM;AACd,iBAAa,SAAS;AACtB,iBAAa,gBAAgB;AAAA,EAC/B,CAAC;AAED,QAAM,iBAAiB,MAAyB;AAC9C,UAAM,OAA0B;AAAA,MAC9B,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,MACpE,QAAQ,YAAY,cAAc,CAAC;AAAA,MACnC,UAAU,SAAS,KAAK;AAAA,IAC1B;AACA,QAAI,eAAe,KAAK,MAAM,wBAAwB;AACpD,WAAK,aAAa,UAAU,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI,MAAM,KAAK;AAAA,IAC7E;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAyB;AAC5C,QAAI,CAAC,MAAM,eAAgB,QAAO,CAAC;AACnC,WAAO;AAAA,MACL,YAAY,WAAW,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI,MAAM,KAAK;AAAA,MACtE,GAAI,cAAc,MAAM,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,aAAa,MACjB,KAAK,aAAa,MAAM,SAAa,KAAK,aAAa,IAAgB,MAAM,WAAW;AAE1F,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,aAAa,WAAW,GAAG,OAAO,GAAG,gBAAgB,GAAG,MAAM,KAAK,GAAG,OAAO,eAAe,GAAG;AAAA,MACvI,CAAC,IAAI,OAAO,MAAM,kBAAkB,OAAO,aAAa,GAAG,KAAK,WAAW;AAAA,SACxE,MAAM,SAAS;AAAA,MAClB,EAFC,IAEK;AAAA,IACR,EAJC;AAML;AAEA,IAAO,wBAAQ;","names":[],"file":"animateHeight.jsx"}

package/dist/source/components/base/animateHeight/index.js

@@ -0,0 +1,6 @@
+import { AnimateHeight, default as default2 } from "./animateHeight";
+export {
+  AnimateHeight,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/base/animateHeight/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/base/animateHeight/index.ts"],
+  "sourcesContent": ["export { AnimateHeight, default } from \"./animateHeight\";\nexport type { AnimateHeightProps, Height } from \"./animateHeight\";\n"],
+  "mappings": "AAAA,SAAS,eAAe,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/base/icon/icon.jsx

@@ -0,0 +1,61 @@
+import "/sourcecraft/workspace/packages/styles/less/components/icon/icon.entry.less";
+import { mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const COLOR_TOKENS = [
+  "primary",
+  "secondary",
+  "error",
+  "success",
+  "warning",
+  "info",
+  "disabled"
+];
+function Icon(props) {
+  const merged = mergeProps(
+    { weight: 400, fill: 0, size: 20, grade: 100, color: "inherit" },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "weight",
+    "fill",
+    "size",
+    "grade",
+    "name",
+    "color",
+    "title",
+    "style",
+    "ref"
+  ]);
+  const decorative = () => local.title === void 0;
+  const colorClass = () => typeof local.color === "string" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : void 0;
+  const styleObject = () => typeof local.style === "object" && local.style ? local.style : {};
+  return <span
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="icon"
+    role={decorative() ? void 0 : "img"}
+    aria-hidden={decorative() ? true : void 0}
+    aria-label={local.title}
+    title={local.title}
+    style={{
+      ...styleObject(),
+      "font-variation-settings": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`
+    }}
+    class={cn("smwb-icon__wrapper", colorClass(), local.class)}
+  >
+      <span
+    class="material-symbols-outlined"
+    style={{ "font-size": typeof local.size === "number" ? `${local.size}px` : local.size }}
+  >
+        {local.name}
+      </span>
+    </span>;
+}
+var icon_default = Icon;
+export {
+  Icon,
+  icon_default as default
+};
+//# sourceMappingURL=icon.js.map

package/dist/source/components/base/icon/icon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/icon/icon.entry.less\";\nimport { type JSX, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Example: name={\"arrow_right_alt\"}\n   */\n  name: string;\n  weight?: number;\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      <span\n        class=\"material-symbols-outlined\"\n        style={{ \"font-size\": typeof local.size === \"number\" ? `${local.size}px` : local.size }}\n      >\n        {local.name}\n      </span>\n    </span>\n  );\n}\n\nexport default Icon;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,YAAY,kBAAkB;AACjD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAIpC,MAAM,eAAsC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2BO,SAAS,KAAK,OAA+B;AAClD,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,KAAK,MAAM,GAAY,MAAM,IAAuB,OAAO,KAAK,OAAO,UAAgC;AAAA,IACjH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAe,MAAM,UAAU;AAClD,QAAM,aAAa,MACjB,OAAO,MAAM,UAAU,YAAY,aAAa,SAAS,MAAM,KAAK,IAAI,mBAAmB,MAAM,KAAK,KAAK;AAC7G,QAAM,cAAc,MAA0B,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAE9G,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,MAAM,WAAW,IAAI,SAAY;AAAA,IACjC,aAAa,WAAW,IAAI,OAAO;AAAA,IACnC,YAAY,MAAM;AAAA,IAClB,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,MACL,GAAG,YAAY;AAAA,MACf,2BAA2B,UAAU,MAAM,IAAI,YAAY,MAAM,MAAM,YAAY,MAAM,KAAK;AAAA,IAChG;AAAA,IACA,OAAO,GAAG,sBAAsB,WAAW,GAAG,MAAM,KAAK;AAAA,GAC1D;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO,EAAE,aAAa,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,GACvF;AAAA,SACE,MAAM,KAAK;AAAA,MACd,EALC,KAKM;AAAA,IACT,EApBC;AAsBL;AAEA,IAAO,eAAQ;","names":[],"file":"icon.jsx"}

package/dist/source/components/base/icon/index.js

@@ -0,0 +1,6 @@
+import { Icon, default as default2 } from "./icon";
+export {
+  Icon,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/base/icon/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/base/icon/index.ts"],
+  "sourcesContent": ["export { Icon, default } from \"./icon\";\nexport type { IconProps, IconColor } from \"./icon\";\n"],
+  "mappings": "AAAA,SAAS,MAAM,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/base/ripple/index.js

@@ -0,0 +1,6 @@
+import { Ripple, default as default2 } from "./ripple";
+export {
+  Ripple,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/base/ripple/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/base/ripple/index.ts"],
+  "sourcesContent": ["export { Ripple, default } from \"./ripple\";\nexport type { RippleProps, RippleActionsRef, RippleClasses } from \"./ripple\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/base/ripple/ripple.jsx

@@ -0,0 +1,64 @@
+import "/sourcecraft/workspace/packages/styles/less/components/ripple/ripple.entry.less";
+import { For, createSignal, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Ripple(props) {
+  const merged = mergeProps({ duration: 600 }, props);
+  const [local, rest] = splitProps(merged, [
+    "actionRef",
+    "class",
+    "classes",
+    "center",
+    "duration",
+    "color",
+    "ref",
+    "style"
+  ]);
+  const [ripples, setRipples] = createSignal([]);
+  let nextKey = 0;
+  const onRipple = (event) => {
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const diameter = Math.max(rect.width, rect.height);
+    const radius = diameter / 2;
+    let coordX;
+    let coordY;
+    if (local.center) {
+      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;
+      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;
+    } else {
+      coordX = event.clientX - rect.left - radius;
+      coordY = event.clientY - rect.top - radius;
+    }
+    const key = nextKey++;
+    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);
+    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);
+  };
+  local.actionRef?.({ onRipple });
+  return <span
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-ripple", local.class, local.classes?.ripple)}
+    data-testid="ripple"
+    aria-hidden="true"
+  >
+      <For each={ripples()}>
+        {(ripple) => <span
+    class={cn("smwb-ripple__child", local.classes?.child)}
+    style={{
+      left: `${ripple.x}px`,
+      top: `${ripple.y}px`,
+      width: `${ripple.size}px`,
+      height: `${ripple.size}px`,
+      "background-color": local.color
+    }}
+  />}
+      </For>
+    </span>;
+}
+var ripple_default = Ripple;
+export {
+  Ripple,
+  ripple_default as default
+};
+//# sourceMappingURL=ripple.js.map

package/dist/source/components/base/ripple/ripple.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import \"/sourcecraft/workspace/packages/styles/less/components/ripple/ripple.entry.less\";\nimport { type JSX, For, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"style\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n\n  const onRipple = (event: MouseEvent): void => {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid=\"ripple\"\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,KAAK,cAAc,YAAY,kBAAkB;AACpE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkC7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,UAAU,IAAI,GAAG,KAAK;AAClD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAC5D,MAAI,UAAU;AAEd,QAAM,WAAW,CAAC,UAA4B;AAC5C,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AACjD,UAAM,SAAS,WAAW;AAE1B,QAAI;AACJ,QAAI;AACJ,QAAI,MAAM,QAAQ;AAChB,eAAS,KAAK,QAAQ,KAAK,SAAS,IAAI,KAAK,QAAQ,IAAI;AACzD,eAAS,KAAK,SAAS,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI;AAAA,IAC5D,OAAO;AACL,eAAS,MAAM,UAAU,KAAK,OAAO;AACrC,eAAS,MAAM,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAM,MAAM;AACZ,eAAW,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,MAAM,SAAS,CAAC,CAAC;AAC7E,eAAW,MAAM,WAAW,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ;AAAA,EACtE;AAEA,QAAM,YAAY,EAAE,SAAS,CAAC;AAE9B,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,eAAe,MAAM,OAAO,MAAM,SAAS,MAAM;AAAA,IAC3D,YAAY;AAAA,IACZ,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,MAAM,QAAQ,GAAG;AAAA,SACnB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,GAAG,sBAAsB,MAAM,SAAS,KAAK;AAAA,IACpD,OAAO;AAAA,MACL,MAAM,GAAG,OAAO,CAAC;AAAA,MACjB,KAAK,GAAG,OAAO,CAAC;AAAA,MAChB,OAAO,GAAG,OAAO,IAAI;AAAA,MACrB,QAAQ,GAAG,OAAO,IAAI;AAAA,MACtB,oBAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EArBC;AAuBL;AAEA,IAAO,iBAAQ;","names":[],"file":"ripple.jsx"}

package/dist/source/components/clickAwayListener/clickAwayListener.jsx

@@ -0,0 +1,73 @@
+import { children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from "solid-js";
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+function ClickAwayListener(props) {
+  const merged = mergeProps(
+    { mouseEvent: "onMouseUp", touchEvent: "onTouchEnd", enabled: true },
+    props
+  );
+  const resolved = resolveChildren(() => merged.children);
+  const getNode = () => {
+    const c = resolved();
+    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;
+    return el instanceof Element ? el : void 0;
+  };
+  let activated = false;
+  let moved = false;
+  onMount(() => {
+    const timer = setTimeout(() => {
+      activated = true;
+    }, 0);
+    onCleanup(() => clearTimeout(timer));
+  });
+  const handleClickAway = (event) => {
+    const node = getNode();
+    if (!merged.enabled || !activated || !node || "clientX" in event && clickedRootScrollbar(event, document)) {
+      return;
+    }
+    if (moved) {
+      moved = false;
+      return;
+    }
+    let insideDOM;
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(node) > -1;
+    } else {
+      const target = event.target;
+      insideDOM = !document.documentElement.contains(target) || node.contains(target);
+    }
+    if (!insideDOM) {
+      merged.onClickAway(event);
+    }
+  };
+  createEffect(() => {
+    const handleTouchMove = () => {
+      moved = true;
+    };
+    if (merged.touchEvent !== false) {
+      const mapped = mapEventPropToEvent(merged.touchEvent);
+      document.addEventListener(mapped, handleClickAway);
+      document.addEventListener("touchmove", handleTouchMove);
+      onCleanup(() => {
+        document.removeEventListener(mapped, handleClickAway);
+        document.removeEventListener("touchmove", handleTouchMove);
+      });
+    }
+    if (merged.mouseEvent !== false) {
+      const mapped = mapEventPropToEvent(merged.mouseEvent);
+      document.addEventListener(mapped, handleClickAway);
+      onCleanup(() => document.removeEventListener(mapped, handleClickAway));
+    }
+  });
+  return <>{resolved()}</>;
+}
+var clickAwayListener_default = ClickAwayListener;
+export {
+  ClickAwayListener,
+  clickAwayListener_default as default
+};
+//# sourceMappingURL=clickAwayListener.js.map

package/dist/source/components/clickAwayListener/clickAwayListener.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n  return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: JSX.Element;\n  mouseEvent?: ClickAwayMouseEventHandler | false;\n  onClickAway: (event: MouseEvent | TouchEvent) => void;\n  touchEvent?: ClickAwayTouchEventHandler | false;\n  /** When false, the listener is inert without unmounting the child. */\n  enabled?: boolean;\n}\n\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n  const merged = mergeProps(\n    { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n    props\n  );\n  const resolved = resolveChildren(() => merged.children);\n\n  const getNode = (): Element | undefined => {\n    const c = resolved();\n    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n    return el instanceof Element ? el : undefined;\n  };\n\n  let activated = false;\n  let moved = false;\n\n  onMount(() => {\n    // Defer activation a tick so the opening interaction doesn't immediately\n    // trigger a click-away (see facebook/react#20074).\n    const timer = setTimeout(() => {\n      activated = true;\n    }, 0);\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n    const node = getNode();\n    if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n      return;\n    }\n    if (moved) {\n      moved = false;\n      return;\n    }\n    let insideDOM: boolean;\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(node) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n      insideDOM = !document.documentElement.contains(target) || node.contains(target);\n    }\n    if (!insideDOM) {\n      merged.onClickAway(event);\n    }\n  };\n\n  createEffect(() => {\n    const handleTouchMove = (): void => {\n      moved = true;\n    };\n    if (merged.touchEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.touchEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n      onCleanup(() => {\n        document.removeEventListener(mapped, handleClickAway as EventListener);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      });\n    }\n    if (merged.mouseEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.mouseEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"mappings":"AAAA,SAAmB,YAAY,iBAAiB,cAAc,YAAY,WAAW,eAAe;AAOpG,SAAS,oBAAoB,WAAiF;AAC5G,SAAO,UAAU,UAAU,CAAC,EAAE,YAAY;AAC5C;AAEA,SAAS,qBAAqB,OAAmB,KAAwB;AACvE,SAAO,IAAI,gBAAgB,cAAc,MAAM,WAAW,IAAI,gBAAgB,eAAe,MAAM;AACrG;AAiBO,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb,EAAE,YAAY,aAA2C,YAAY,cAA4C,SAAS,KAAK;AAAA,IAC/H;AAAA,EACF;AACA,QAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ;AAEtD,QAAM,UAAU,MAA2B;AACzC,UAAM,IAAI,SAAS;AACnB,UAAM,KAAK,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,aAAa,OAAO,IAAI;AACpE,WAAO,cAAc,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,YAAY;AAChB,MAAI,QAAQ;AAEZ,UAAQ,MAAM;AAGZ,UAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAY;AAAA,IACd,GAAG,CAAC;AACJ,cAAU,MAAM,aAAa,KAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAM,kBAAkB,CAAC,UAAyC;AAChE,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,QAAS,aAAa,SAAS,qBAAqB,OAAO,QAAQ,GAAI;AAC3G;AAAA,IACF;AACA,QAAI,OAAO;AACT,cAAQ;AACR;AAAA,IACF;AACA,QAAI;AACJ,QAAI,MAAM,cAAc;AACtB,kBAAY,MAAM,aAAa,EAAE,QAAQ,IAAI,IAAI;AAAA,IACnD,OAAO;AACL,YAAM,SAAS,MAAM;AACrB,kBAAY,CAAC,SAAS,gBAAgB,SAAS,MAAM,KAAK,KAAK,SAAS,MAAM;AAAA,IAChF;AACA,QAAI,CAAC,WAAW;AACd,aAAO,YAAY,KAAK;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,UAAM,kBAAkB,MAAY;AAClC,cAAQ;AAAA,IACV;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,eAAS,iBAAiB,aAAa,eAAe;AACtD,gBAAU,MAAM;AACd,iBAAS,oBAAoB,QAAQ,eAAgC;AACrE,iBAAS,oBAAoB,aAAa,eAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,gBAAU,MAAM,SAAS,oBAAoB,QAAQ,eAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC;AAED,SAAO,GAAG,SAAS,EAAE;AACvB;AAEA,IAAO,4BAAQ;","names":[],"file":"clickAwayListener.jsx"}

package/dist/source/components/clickAwayListener/index.js

@@ -0,0 +1,6 @@
+import { ClickAwayListener, default as default2 } from "./clickAwayListener";
+export {
+  ClickAwayListener,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map