@smwb/ui-solid 0.1.0

package/dist/assets/styles/less/components/timePicker/timePicker.entry.css

@@ -0,0 +1 @@
+.smwb-time-picker{width:auto;min-width:200px;max-width:328px}.smwb-time-picker__columns{display:flex;border-top:1px solid var(--smui-dividerColor)}.smwb-time-picker__column{flex:1 1 0;min-width:56px}.smwb-time-picker__column:not(:last-child){border-right:1px solid var(--smui-dividerColor)}.smwb-time-picker__overflow{max-height:240px;overflow-y:auto}.smwb-time-picker__list{padding:8px 0;margin:0;list-style:none}.smwb-time-picker__item{display:flex;align-items:center;justify-content:center;height:36px;padding:0 8px;font-size:14px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;user-select:none;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms,color .15s cubic-bezier(.4,0,.2,1) 0ms}.smwb-time-picker__item:hover:not(.smwb-time-picker__item--selected){background-color:var(--smui-onSurfaceHover)}.smwb-time-picker__item:active:not(.smwb-time-picker__item--selected){background-color:var(--smui-onSurfaceActive)}.smwb-time-picker__item--selected{color:var(--smui-primaryColor);background-color:var(--smui-onSurfaceHover)}.smwb-date-time-picker.smwb-date-picker{width:max-content;max-width:none}.smwb-date-time-picker__content{display:flex;flex-direction:row;align-items:stretch;width:max-content;border-top:1px solid var(--smui-dividerColor)}.smwb-date-time-picker__body{width:328px;flex-shrink:0}.smwb-date-time-picker .smwb-time-picker__columns{border-top:none;border-left:1px solid var(--smui-dividerColor);flex:0 0 auto;align-self:stretch}.smwb-date-time-picker .smwb-time-picker__column{flex:0 0 56px;width:56px}.smwb-date-time-picker .smwb-time-picker__overflow{max-height:309px}

package/dist/assets/styles/less/components/toggle/toggle.entry.css

@@ -0,0 +1 @@
+.smwb-toggle{width:50px;height:30px;position:relative;cursor:pointer;display:inline-flex}.smwb-toggle__wrapper{display:inline-flex;flex-direction:column;gap:8px}.smwb-toggle__wrapper_label-left{flex-direction:row;align-items:center}.smwb-toggle__wrapper_label-right{flex-direction:row-reverse;align-items:center}.smwb-toggle.smwb-disabled{opacity:.35;pointer-events:none}.smwb-toggle__track{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--smui-toggleTrackColor);border-radius:999px;transition:all .2s ease-in-out;border:2px solid var(--smui-toggleBorderColor)}.smwb-toggle__thumb{position:absolute;z-index:1;width:15px;height:15px;border-radius:50%;background-color:#79747e;left:5px;transform:translateY(-50%);top:50%;transition:all .2s ease-in-out;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-toggle__thumb:before{width:40px;height:40px;border-radius:50%;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:none;opacity:0;transition:all .2s ease-in-out}.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceHover);opacity:1}.smwb-toggle__checkbox{display:none}.smwb-toggle__checkbox:checked~.smwb-toggle__track{background-color:var(--smui-toggleTrackActiveColor);border:2px solid transparent}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb{left:25px;background-color:var(--smui-toggleThumbActiveColor);width:20px;height:20px}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorHover);opacity:1}.smwb-toggle__checkbox:checked:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorActive);opacity:1}.smwb-toggle__checkbox:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceActive);opacity:1}

package/dist/assets/styles/less/components/tooltip/tooltip.entry.css

@@ -0,0 +1 @@
+.smwb-tooltip{border-radius:4px;background-color:var(--smui-tooltipBg);color:var(--smui-tooltipTextColor);z-index:5;font-size:12px;padding:0 8px;height:24px;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;overflow:hidden;opacity:0;visibility:hidden;white-space:nowrap;min-width:50px}.smwb-tooltip__ref{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.smwb-tooltip__ref:hover+.smwb-tooltip{visibility:visible;opacity:1}.smwb-tooltip__wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}

package/dist/assets/styles/less/components/treeView/treeView.entry.css

@@ -0,0 +1 @@
+.smwb-tree__wrapper .smwb-tree__node:first-child{border-left:0}.smwb-tree__wrapper .smwb-tree__node:first-child:before{opacity:0}.smwb-tree__node{padding-left:30px;margin-left:9px;position:relative;border-left:1px solid var(--smui-primaryColor)}.smwb-tree__node:last-child{border-left-color:transparent}.smwb-tree__node:before{position:absolute;top:0;left:-1px;height:20px;width:25px;border-bottom:1px solid var(--smui-primaryColor);border-left:1px solid var(--smui-primaryColor);content:"";font-weight:600;font-size:14px}.smwb-tree__node__label{position:relative;display:inline-flex;align-items:center;gap:10px}.smwb-tree__node__content{display:flex;align-items:center;gap:10px;height:40px;cursor:pointer;user-select:none}.smwb-tree__node_selected>.smwb-tree__node__content{background-color:var(--smui-onSurfaceHover);border-radius:4px}.smwb-tree__node__checkbox{flex-shrink:0;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;cursor:pointer;accent-color:var(--smui-checkboxCheckedBg)}.smwb-tree__node__loading{padding:4px 8px 4px 28px;font-size:13px;color:var(--smui-onSurfaceVariant)}

package/dist/assets/styles/less/components/typography/typography.entry.css

@@ -0,0 +1 @@
+.smwb-typography{margin:0;font-family:var(--smui-fontFamily, inherit);color:var(--smui-onSurfaceColor)}.smwb-typography_h1{font-size:48px;font-weight:300;line-height:1.2}.smwb-typography_h2{font-size:40px;font-weight:300;line-height:1.2}.smwb-typography_h3{font-size:32px;font-weight:400;line-height:1.25}.smwb-typography_h4{font-size:28px;font-weight:400;line-height:1.3}.smwb-typography_h5{font-size:24px;font-weight:500;line-height:1.3}.smwb-typography_h6{font-size:20px;font-weight:500;line-height:1.4}.smwb-typography_subtitle1{font-size:16px;font-weight:500;line-height:1.5}.smwb-typography_subtitle2{font-size:14px;font-weight:500;line-height:1.5}.smwb-typography_body1{font-size:16px;font-weight:400;line-height:1.5}.smwb-typography_body2{font-size:14px;font-weight:400;line-height:1.5}.smwb-typography_caption{font-size:12px;font-weight:400;line-height:1.4}.smwb-typography_overline{font-size:12px;font-weight:600;line-height:1.4}.smwb-typography_button{font-size:14px;font-weight:500;line-height:1.75}.smwb-typography_overline,.smwb-typography_button{text-transform:uppercase;letter-spacing:.06em}.smwb-typography_color-primary{color:var(--smui-primaryColor)}.smwb-typography_color-secondary{color:var(--smui-secondaryColor)}.smwb-typography_color-error{color:var(--smui-errorColor)}.smwb-typography_color-success{color:var(--smui-successColor)}.smwb-typography_color-warning{color:var(--smui-warningColor)}.smwb-typography_color-info{color:var(--smui-infoColor)}.smwb-typography_color-textPrimary{color:var(--smui-primaryTextColor)}.smwb-typography_color-textSecondary{color:var(--smui-onSurfaceVariant)}.smwb-typography_color-disabled{color:var(--smui-disabledTextColor)}.smwb-typography_align-left{text-align:left}.smwb-typography_align-center{text-align:center}.smwb-typography_align-right{text-align:right}.smwb-typography_align-justify{text-align:justify}.smwb-typography_gutter{margin-bottom:.35em}.smwb-typography_nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/dist/components/base/animateHeight/animateHeight.d.ts

@@ -0,0 +1,30 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export type Height = "auto" | number | `${number}%`;
+interface AnimationStateClasses {
+    animating: string;
+    animatingUp: string;
+    animatingDown: string;
+    animatingToHeightZero: string;
+    animatingToHeightAuto: string;
+    animatingToHeightSpecific: string;
+    static: string;
+    staticHeightZero: string;
+    staticHeightAuto: string;
+    staticHeightSpecific: string;
+}
+export interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    animateOpacity?: boolean;
+    animationStateClasses?: Partial<AnimationStateClasses>;
+    applyInlineTransitions?: boolean;
+    contentClassName?: string;
+    delay?: number;
+    duration?: number;
+    easing?: string;
+    height: Height;
+    onHeightAnimationEnd?: (newHeight: Height) => void;
+    onHeightAnimationStart?: (newHeight: Height) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element;
+export default AnimateHeight;

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

@@ -0,0 +1,113 @@
+import { use as $, spread as z, mergeProps as F, insert as M, effect as j, className as L, style as R, template as k } from "solid-js/web";
+import { mergeProps as q, splitProps as B, createSignal as d, onMount as G, createEffect as J, onCleanup as K } from "solid-js";
+import w from "clsx";
+import { mergeRefs as Q } from "../../../primitives/mergeRefs.js";
+var V = /* @__PURE__ */ k("<div><div>");
+const W = (e) => {
+  const o = parseFloat(e);
+  return !isNaN(o) && isFinite(o);
+}, E = (e) => typeof e == "string" && e[e.length - 1] === "%" && W(e.substring(0, e.length - 1)), A = (e, o) => {
+  o === 0 && e?.style && (e.style.display = "none");
+}, X = (e, o) => {
+  o === 0 && e?.style && (e.style.display = "");
+}, Y = {
+  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"
+}, I = (e, o) => w({
+  [e.static]: !0,
+  [e.staticHeightZero]: o === 0,
+  [e.staticHeightSpecific]: typeof o == "number" && o > 0,
+  [e.staticHeightAuto]: o === "auto"
+}), tt = (e) => typeof e == "number" ? `${e}px` : e;
+function ot(e) {
+  const o = q({
+    animateOpacity: !1,
+    applyInlineTransitions: !0,
+    delay: 0,
+    duration: 300,
+    easing: "ease"
+  }, e), [t, y] = B(o, ["animateOpacity", "animationStateClasses", "applyInlineTransitions", "children", "class", "contentClassName", "delay", "duration", "easing", "height", "onHeightAnimationEnd", "onHeightAnimationStart", "style", "ref"]), c = {
+    ...Y,
+    ...t.animationStateClasses
+  };
+  let s, r = t.height, f, H, l = t.height, v = "visible";
+  typeof l == "number" ? (l = l < 0 ? 0 : l, v = "hidden") : E(l) && (l = l === "0%" ? 0 : l, v = "hidden");
+  const [T, S] = d(l), [O, C] = d(v), [P, p] = d(!1), [_, b] = d(I(c, t.height));
+  G(() => A(s, T())), J(() => {
+    const i = t.height;
+    if (i !== r && s) {
+      X(s, r), s.style.overflow = "hidden";
+      const m = s.offsetHeight;
+      s.style.overflow = "";
+      const u = t.duration + t.delay;
+      let a, n, g = "hidden";
+      const h = r === "auto";
+      typeof i == "number" ? (a = i < 0 ? 0 : i, n = a) : E(i) ? (a = i === "0%" ? 0 : i, n = a) : (a = m, n = "auto", g = void 0), h && (n = a, a = m);
+      const x = w({
+        [c.animating]: !0,
+        [c.animatingUp]: r === "auto" || typeof r == "number" && typeof i == "number" && i < r,
+        [c.animatingDown]: i === "auto" || typeof r == "number" && typeof i == "number" && i > r,
+        [c.animatingToHeightZero]: n === 0,
+        [c.animatingToHeightAuto]: n === "auto",
+        [c.animatingToHeightSpecific]: typeof n == "number" && n > 0
+      }), N = I(c, n);
+      S(a), C("hidden"), p(!h), b(x), clearTimeout(f), clearTimeout(H), h ? (f = setTimeout(() => {
+        S(n), C(g), p(!0), t.onHeightAnimationStart?.(n);
+      }, 50), H = setTimeout(() => {
+        p(!1), b(N), A(s, n), t.onHeightAnimationEnd?.(n);
+      }, u)) : (t.onHeightAnimationStart?.(a), f = setTimeout(() => {
+        S(n), C(g), p(!1), b(N), i !== "auto" && A(s, a), t.onHeightAnimationEnd?.(a);
+      }, u));
+    }
+    r = i;
+  }), K(() => {
+    clearTimeout(f), clearTimeout(H);
+  });
+  const Z = () => {
+    const i = {
+      ...typeof t.style == "object" && t.style ? t.style : {},
+      height: tt(T()),
+      overflow: O() ?? "visible"
+    };
+    return P() && t.applyInlineTransitions && (i.transition = `height ${t.duration}ms ${t.easing} ${t.delay}ms`), i;
+  }, D = () => t.animateOpacity ? {
+    transition: `opacity ${t.duration}ms ${t.easing} ${t.delay}ms`,
+    ...T() === 0 ? {
+      opacity: 0
+    } : {}
+  } : {}, U = () => y["aria-hidden"] !== void 0 ? y["aria-hidden"] : t.height === 0;
+  return (() => {
+    var i = V(), m = i.firstChild, u = Q(t.ref);
+    typeof u == "function" && $(u, i), z(i, F(y, {
+      get "aria-hidden"() {
+        return U();
+      },
+      get class() {
+        return w(_(), t.class);
+      },
+      get style() {
+        return Z();
+      }
+    }), !1, !0);
+    var a = s;
+    return typeof a == "function" ? $(a, m) : s = m, M(m, () => t.children), j((n) => {
+      var g = t.contentClassName, h = D();
+      return g !== n.e && L(m, n.e = g), n.t = R(m, h, n.t), n;
+    }, {
+      e: void 0,
+      t: void 0
+    }), i;
+  })();
+}
+export {
+  ot as AnimateHeight
+};
+//# sourceMappingURL=animateHeight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animateHeight.js","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"],"names":["isNumberString","n","number","parseFloat","isNaN","isFinite","isPercentage","height","length","substring","hideContent","element","style","display","showContent","ANIMATION_STATE_CLASSES","animating","animatingUp","animatingDown","animatingToHeightZero","animatingToHeightAuto","animatingToHeightSpecific","static","staticHeightZero","staticHeightAuto","staticHeightSpecific","getStaticStateClasses","s","cn","toCssHeight","AnimateHeight","props","merged","mergeProps","animateOpacity","applyInlineTransitions","delay","duration","easing","local","rest","splitProps","stateClasses","animationStateClasses","contentEl","prevHeight","timeoutId","classesTimeoutId","initHeight","initOverflow","currentHeight","setCurrentHeight","createSignal","overflow","setOverflow","useTransitions","setUseTransitions","stateClassNames","setStateClassNames","onMount","createEffect","contentHeight","offsetHeight","totalDuration","newHeight","timeoutHeight","timeoutOverflow","isCurrentHeightAuto","undefined","animatingClassNames","finalClassNames","clearTimeout","setTimeout","onHeightAnimationStart","onHeightAnimationEnd","onCleanup","componentStyle","base","transition","contentStyle","opacity","ariaHidden","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","_ref$2","_$insert","children","_$effect","_p$","_v$","contentClassName","_v$2","e","_$className","t","_$style"],"mappings":"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"}

package/dist/components/base/animateHeight/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimateHeight, default } from "./animateHeight";
+export type { AnimateHeightProps, Height } from "./animateHeight";

package/dist/components/base/icon/icon.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export type IconColor = "inherit" | "primary" | "secondary" | "error" | "success" | "warning" | "info" | "disabled";
+export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Icon name from https://fonts.google.com/icons
+     * Example: name={"arrow_right_alt"}
+     */
+    name: string;
+    weight?: number;
+    fill?: 0 | 1;
+    /** Pixel number or any CSS length (e.g. "1.5rem"). */
+    size?: number | string;
+    grade?: number;
+    /**
+     * Semantic color token; `inherit` (default) keeps the text color. Any string
+     * is accepted for backward compatibility, but only known {@link IconColor}
+     * tokens emit a color class.
+     */
+    color?: IconColor | (string & {});
+    /**
+     * Accessible name. When provided the icon is exposed as `role="img"`;
+     * otherwise it is `aria-hidden` (decorative).
+     */
+    title?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Icon(props: IconProps): JSX.Element;
+export default Icon;

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

@@ -0,0 +1,47 @@
+import { use as p, spread as m, mergeProps as f, insert as g, effect as d, setStyleProperty as u, template as y } from "solid-js/web";
+import '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
+import { mergeProps as $, splitProps as v } from "solid-js";
+import _ from "clsx";
+import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
+var w = /* @__PURE__ */ y("<span><span class=material-symbols-outlined>");
+const h = ["primary", "secondary", "error", "success", "warning", "info", "disabled"];
+function j(i) {
+  const l = $({
+    weight: 400,
+    fill: 0,
+    size: 20,
+    grade: 100,
+    color: "inherit"
+  }, i), [e, n] = v(l, ["class", "weight", "fill", "size", "grade", "name", "color", "title", "style", "ref"]), r = () => e.title === void 0, a = () => typeof e.color == "string" && h.includes(e.color) ? `smwb-icon_color-${e.color}` : void 0, c = () => typeof e.style == "object" && e.style ? e.style : {};
+  return (() => {
+    var t = w(), o = t.firstChild, s = b(e.ref);
+    return typeof s == "function" && p(s, t), m(t, f(n, {
+      "data-testid": "icon",
+      get role() {
+        return r() ? void 0 : "img";
+      },
+      get "aria-hidden"() {
+        return r() ? !0 : void 0;
+      },
+      get "aria-label"() {
+        return e.title;
+      },
+      get title() {
+        return e.title;
+      },
+      get style() {
+        return {
+          ...c(),
+          "font-variation-settings": `'FILL' ${e.fill}, 'wght' ${e.weight}, 'GRAD' ${e.grade}, 'opsz' 48`
+        };
+      },
+      get class() {
+        return _("smwb-icon__wrapper", a(), e.class);
+      }
+    }), !1, !0), g(o, () => e.name), d((z) => u(o, "font-size", typeof e.size == "number" ? `${e.size}px` : e.size)), t;
+  })();
+}
+export {
+  j as Icon
+};
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { 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"],"names":["COLOR_TOKENS","Icon","props","merged","mergeProps","weight","fill","size","grade","color","local","rest","splitProps","decorative","title","undefined","colorClass","includes","styleObject","style","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","cn","class","_$insert","name","_$effect","_$p","_$setStyleProperty"],"mappings":";;;;;;AAOA,MAAMA,IAAsC,CAC1C,WACA,aACA,SACA,WACA,WACA,QACA,UAAU;AA4BL,SAASC,EAAKC,GAA+B;AAClD,QAAMC,IAASC,EACb;AAAA,IAAEC,QAAQ;AAAA,IAAKC,MAAM;AAAA,IAAYC,MAAM;AAAA,IAAuBC,OAAO;AAAA,IAAKC,OAAO;AAAA,EAAA,GACjFP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,UACA,QACA,QACA,SACA,QACA,SACA,SACA,SACA,KAAK,CACN,GAEKU,IAAaA,MAAeH,EAAMI,UAAUC,QAC5CC,IAAaA,MACjB,OAAON,EAAMD,SAAU,YAAYT,EAAaiB,SAASP,EAAMD,KAAK,IAAI,mBAAmBC,EAAMD,KAAK,KAAKM,QACvGG,IAAcA,MAA0B,OAAOR,EAAMS,SAAU,YAAYT,EAAMS,QAAQT,EAAMS,QAAQ,CAAA;AAE7G,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUf,EAAMgB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBlB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,IAClBmB,OAAI;AAAA,eAAEjB,EAAAA,IAAeE,SAAY;AAAA,MAAK;AAAA,MAAA,IAAA,gBAAA;AAAA,eACzBF,EAAAA,IAAe,KAAOE;AAAAA,MAAS;AAAA,MAAA,IAAA,eAAA;AAAA,eAChCL,EAAMI;AAAAA,MAAK;AAAA,MAAA,IACvBA,QAAK;AAAA,eAAEJ,EAAMI;AAAAA,MAAK;AAAA,MAAA,IAClBK,QAAK;AAAA,eAAE;AAAA,UACL,GAAGD,EAAAA;AAAAA,UACH,2BAA2B,UAAUR,EAAMJ,IAAI,YAAYI,EAAML,MAAM,YAAYK,EAAMF,KAAK;AAAA,QAAA;AAAA,MAC/F;AAAA,MAAA,IAAA,QAAA;AAAA,eACMuB,EAAG,sBAAsBf,EAAAA,GAAcN,EAAMsB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAA,MAMvDZ,EAAMwB,IAAI,GAAAC,EAAAC,CAAAA,MAAAC,EAAAf,GAAA,aAFW,OAAOZ,EAAMH,QAAS,WAAW,GAAGG,EAAMH,IAAI,OAAOG,EAAMH,IAAI,CAAA,GAAAa;AAAAA,EAAA,GAAA;AAM7F;"}

package/dist/components/base/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon, default } from "./icon";
+export type { IconProps, IconColor } from "./icon";

package/dist/components/base/ripple/index.d.ts

@@ -0,0 +1,2 @@
+export { Ripple, default } from "./ripple";
+export type { RippleProps, RippleActionsRef, RippleClasses } from "./ripple";

package/dist/components/base/ripple/ripple.d.ts

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface RippleActionsRef {
+    onRipple: (event: MouseEvent) => void;
+}
+export interface RippleClasses {
+    ripple?: string;
+    child?: string;
+}
+export interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    /** Receives the imperative API once on mount. */
+    actionRef?: (actions: RippleActionsRef) => void;
+    classes?: RippleClasses;
+    center?: boolean | undefined;
+    /** Ripple lifetime in ms. */
+    duration?: number;
+    /** Ripple color (any CSS color). Defaults to inherited currentColor. */
+    color?: string | undefined;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * ⚠️ For this effect to work, the parent element must have CSS
+ * `position: relative;`.
+ */
+export declare function Ripple(props: RippleProps): JSX.Element;
+export default Ripple;

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

@@ -0,0 +1,58 @@
+import { use as P, spread as b, mergeProps as z, insert as $, createComponent as k, effect as C, className as S, setStyleProperty as c, template as T } from "solid-js/web";
+import '../../../assets/styles/less/components/ripple/ripple.entry.css';/* empty css                                                       */
+import { mergeProps as X, splitProps as Y, createSignal as B, For as F } from "solid-js";
+import f from "clsx";
+import { mergeRefs as K } from "../../../primitives/mergeRefs.js";
+var g = /* @__PURE__ */ T("<span>");
+function D(u) {
+  const v = X({
+    duration: 600
+  }, u), [o, x] = Y(v, ["actionRef", "class", "classes", "center", "duration", "color", "ref", "style"]), [y, m] = B([]);
+  let w = 0;
+  const R = (i) => {
+    const t = i.currentTarget.getBoundingClientRect(), r = Math.max(t.width, t.height), e = r / 2;
+    let s, n;
+    o.center ? (s = t.width > t.height ? 0 : t.width / 2 - e, n = t.height > t.width ? 0 : t.height / 2 - e) : (s = i.clientX - t.left - e, n = i.clientY - t.top - e);
+    const l = w++;
+    m((a) => [...a, {
+      key: l,
+      x: s,
+      y: n,
+      size: r
+    }]), setTimeout(() => m((a) => a.slice(1)), o.duration);
+  };
+  return o.actionRef?.({
+    onRipple: R
+  }), (() => {
+    var i = g(), d = K(o.ref);
+    return typeof d == "function" && P(d, i), b(i, z(x, {
+      get class() {
+        return f("smwb-ripple", o.class, o.classes?.ripple);
+      },
+      "data-testid": "ripple",
+      "aria-hidden": "true"
+    }), !1, !0), $(i, k(F, {
+      get each() {
+        return y();
+      },
+      children: (t) => (() => {
+        var r = g();
+        return C((e) => {
+          var s = f("smwb-ripple__child", o.classes?.child), n = `${t.x}px`, l = `${t.y}px`, a = `${t.size}px`, p = `${t.size}px`, h = o.color;
+          return s !== e.e && S(r, e.e = s), n !== e.t && c(r, "left", e.t = n), l !== e.a && c(r, "top", e.a = l), a !== e.o && c(r, "width", e.o = a), p !== e.i && c(r, "height", e.i = p), h !== e.n && c(r, "background-color", e.n = h), e;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0
+        }), r;
+      })()
+    })), i;
+  })();
+}
+export {
+  D as Ripple
+};
+//# sourceMappingURL=ripple.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import { 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"],"names":["Ripple","props","merged","mergeProps","duration","local","rest","splitProps","ripples","setRipples","createSignal","nextKey","onRipple","event","rect","currentTarget","getBoundingClientRect","diameter","Math","max","width","height","radius","coordX","coordY","center","clientX","left","clientY","top","key","prev","x","y","size","setTimeout","slice","actionRef","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","classes","ripple","_$insert","_$createComponent","For","each","children","_el$2","_$effect","_p$","_v$","child","_v$2","_v$3","_v$4","_v$5","_v$6","color","e","_$className","t","_$setStyleProperty","a","o","i","n","undefined"],"mappings":"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"}

package/dist/components/clickAwayListener/clickAwayListener.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+type ClickAwayMouseEventHandler = "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp";
+type ClickAwayTouchEventHandler = "onTouchStart" | "onTouchEnd";
+export interface ClickAwayListenerProps {
+    children: JSX.Element;
+    mouseEvent?: ClickAwayMouseEventHandler | false;
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    touchEvent?: ClickAwayTouchEventHandler | false;
+    /** When false, the listener is inert without unmounting the child. */
+    enabled?: boolean;
+}
+/**
+ * Solid redesign of MUI's ClickAwayListener. React's version cloned the child
+ * to inject a ref + synthetic handlers; Solid resolves the child to its DOM
+ * node and uses `composedPath`/`contains` containment checks against document
+ * listeners — no element cloning.
+ */
+export declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
+export default ClickAwayListener;

package/dist/components/clickAwayListener/clickAwayListener.js

@@ -0,0 +1,61 @@
+import { memo as f } from "solid-js/web";
+import { mergeProps as E, children as v, onMount as h, onCleanup as s, createEffect as p } from "solid-js";
+function a(o) {
+  return o.substring(2).toLowerCase();
+}
+function L(o, n) {
+  return n.documentElement.clientWidth < o.clientX || n.documentElement.clientHeight < o.clientY;
+}
+function A(o) {
+  const n = E({
+    mouseEvent: "onMouseUp",
+    touchEvent: "onTouchEnd",
+    enabled: !0
+  }, o), m = v(() => n.children), l = () => {
+    const e = m(), t = Array.isArray(e) ? e.find((c) => c instanceof Element) : e;
+    return t instanceof Element ? t : void 0;
+  };
+  let d = !1, i = !1;
+  h(() => {
+    const e = setTimeout(() => {
+      d = !0;
+    }, 0);
+    s(() => clearTimeout(e));
+  });
+  const r = (e) => {
+    const t = l();
+    if (!n.enabled || !d || !t || "clientX" in e && L(e, document))
+      return;
+    if (i) {
+      i = !1;
+      return;
+    }
+    let c;
+    if (e.composedPath)
+      c = e.composedPath().indexOf(t) > -1;
+    else {
+      const u = e.target;
+      c = !document.documentElement.contains(u) || t.contains(u);
+    }
+    c || n.onClickAway(e);
+  };
+  return p(() => {
+    const e = () => {
+      i = !0;
+    };
+    if (n.touchEvent !== !1) {
+      const t = a(n.touchEvent);
+      document.addEventListener(t, r), document.addEventListener("touchmove", e), s(() => {
+        document.removeEventListener(t, r), document.removeEventListener("touchmove", e);
+      });
+    }
+    if (n.mouseEvent !== !1) {
+      const t = a(n.mouseEvent);
+      document.addEventListener(t, r), s(() => document.removeEventListener(t, r));
+    }
+  }), f(m);
+}
+export {
+  A as ClickAwayListener
+};
+//# sourceMappingURL=clickAwayListener.js.map

package/dist/components/clickAwayListener/clickAwayListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickAwayListener.js","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"],"names":["mapEventPropToEvent","eventProp","substring","toLowerCase","clickedRootScrollbar","event","doc","documentElement","clientWidth","clientX","clientHeight","clientY","ClickAwayListener","props","merged","mergeProps","mouseEvent","touchEvent","enabled","resolved","resolveChildren","children","getNode","c","el","Array","isArray","find","x","Element","undefined","activated","moved","onMount","timer","setTimeout","onCleanup","clearTimeout","handleClickAway","node","document","insideDOM","composedPath","indexOf","target","contains","onClickAway","createEffect","handleTouchMove","mapped","addEventListener","removeEventListener","_$memo"],"mappings":";;AAOA,SAASA,EAAoBC,GAAiF;AAC5G,SAAOA,EAAUC,UAAU,CAAC,EAAEC,YAAAA;AAChC;AAEA,SAASC,EAAqBC,GAAmBC,GAAwB;AACvE,SAAOA,EAAIC,gBAAgBC,cAAcH,EAAMI,WAAWH,EAAIC,gBAAgBG,eAAeL,EAAMM;AACrG;AAiBO,SAASC,EAAkBC,GAA4C;AAC5E,QAAMC,IAASC,EACb;AAAA,IAAEC,YAAY;AAAA,IAA2CC,YAAY;AAAA,IAA4CC,SAAS;AAAA,EAAA,GAC1HL,CACF,GACMM,IAAWC,EAAgB,MAAMN,EAAOO,QAAQ,GAEhDC,IAAUA,MAA2B;AACzC,UAAMC,IAAIJ,EAAAA,GACJK,IAAKC,MAAMC,QAAQH,CAAC,IAAIA,EAAEI,KAAMC,CAAAA,MAAMA,aAAaC,OAAO,IAAIN;AACpE,WAAOC,aAAcK,UAAUL,IAAKM;AAAAA,EACtC;AAEA,MAAIC,IAAY,IACZC,IAAQ;AAEZC,EAAAA,EAAQ,MAAM;AAGZ,UAAMC,IAAQC,WAAW,MAAM;AAC7BJ,MAAAA,IAAY;AAAA,IACd,GAAG,CAAC;AACJK,IAAAA,EAAU,MAAMC,aAAaH,CAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAMI,IAAkBA,CAACjC,MAAyC;AAChE,UAAMkC,IAAOjB,EAAAA;AACb,QAAI,CAACR,EAAOI,WAAW,CAACa,KAAa,CAACQ,KAAS,aAAalC,KAASD,EAAqBC,GAAOmC,QAAQ;AACvG;AAEF,QAAIR,GAAO;AACTA,MAAAA,IAAQ;AACR;AAAA,IACF;AACA,QAAIS;AACJ,QAAIpC,EAAMqC;AACRD,MAAAA,IAAYpC,EAAMqC,aAAAA,EAAeC,QAAQJ,CAAI,IAAI;AAAA,SAC5C;AACL,YAAMK,IAASvC,EAAMuC;AACrBH,MAAAA,IAAY,CAACD,SAASjC,gBAAgBsC,SAASD,CAAM,KAAKL,EAAKM,SAASD,CAAM;AAAA,IAChF;AACA,IAAKH,KACH3B,EAAOgC,YAAYzC,CAAK;AAAA,EAE5B;AAEA0C,SAAAA,EAAa,MAAM;AACjB,UAAMC,IAAkBA,MAAY;AAClChB,MAAAA,IAAQ;AAAA,IACV;AACA,QAAIlB,EAAOG,eAAe,IAAO;AAC/B,YAAMgC,IAASjD,EAAoBc,EAAOG,UAAU;AACpDuB,eAASU,iBAAiBD,GAAQX,CAAgC,GAClEE,SAASU,iBAAiB,aAAaF,CAAe,GACtDZ,EAAU,MAAM;AACdI,iBAASW,oBAAoBF,GAAQX,CAAgC,GACrEE,SAASW,oBAAoB,aAAaH,CAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAIlC,EAAOE,eAAe,IAAO;AAC/B,YAAMiC,IAASjD,EAAoBc,EAAOE,UAAU;AACpDwB,eAASU,iBAAiBD,GAAQX,CAAgC,GAClEF,EAAU,MAAMI,SAASW,oBAAoBF,GAAQX,CAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC,GAEDc,EAAUjC,CAAQ;AACpB;"}

package/dist/components/clickAwayListener/index.d.ts

@@ -0,0 +1,2 @@
+export { ClickAwayListener, default } from "./clickAwayListener";
+export type { ClickAwayListenerProps } from "./clickAwayListener";

package/dist/components/dataDisplay/accordion/accordion.d.ts

@@ -0,0 +1,25 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface AccordionProps {
+    class?: string;
+    title?: string;
+    isOpenByDefault?: boolean;
+    /** Controlled open state. When set, the component is controlled. */
+    open?: boolean;
+    /** Disable toggling. */
+    disabled?: boolean;
+    /** Custom expand icon (replaces the default chevron). */
+    icon?: JSX.Element;
+    id?: string;
+    startAdornment?: (isOpen: boolean) => JSX.Element;
+    noIcon?: boolean;
+    onToggleClick?: (e: MouseEvent & {
+        currentTarget: HTMLButtonElement;
+        target: Element;
+    }) => void;
+    /** Fired with the next open state on toggle. */
+    onChange?: (open: boolean) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Accordion(props: ParentProps<AccordionProps>): JSX.Element;
+export default Accordion;

package/dist/components/dataDisplay/accordion/accordion.js

@@ -0,0 +1,83 @@
+import { use as $, setAttribute as i, insert as a, createComponent as c, effect as O, className as k, template as _, delegateEvents as A } from "solid-js/web";
+import '../../../assets/styles/less/components/accordion/accordion.entry.css';/* empty css                                                             */
+import { mergeProps as x, splitProps as B, Show as l } from "solid-js";
+import v from "clsx";
+import { AnimateHeight as D } from "../../base/animateHeight/animateHeight.js";
+import { createControllableState as P } from "../../../primitives/createControllableState.js";
+import { createId as S } from "../../../primitives/createId.js";
+import { mergeRefs as T } from "../../../primitives/mergeRefs.js";
+import { Icon as z } from "../../base/icon/icon.js";
+var E = /* @__PURE__ */ _("<div role=region>"), H = /* @__PURE__ */ _("<div data-testid=accordion><button class=smwb-accordion__header type=button><span class=smwb-accordion__title>");
+function L(w) {
+  const C = x({
+    isOpenByDefault: !1
+  }, w), [e] = B(C, ["class", "title", "isOpenByDefault", "open", "disabled", "icon", "id", "children", "startAdornment", "noIcon", "onToggleClick", "onChange", "ref"]), [o, I] = P({
+    value: () => e.open,
+    defaultValue: e.isOpenByDefault,
+    onChange: (r) => e.onChange?.(r)
+  }), d = S(e.id), s = `${d}-content`, m = `${d}-header`, y = (r) => {
+    e.disabled || (I(!o()), e.onToggleClick?.(r));
+  };
+  return (() => {
+    var r = H(), n = r.firstChild, u = n.firstChild, f = T(e.ref);
+    return typeof f == "function" && $(f, r), n.$$click = y, i(n, "id", m), a(n, () => e.startAdornment?.(o()), u), a(u, () => e.title), a(n, c(l, {
+      get when() {
+        return !e.noIcon;
+      },
+      get children() {
+        return c(l, {
+          get when() {
+            return e.icon;
+          },
+          get fallback() {
+            return c(z, {
+              get class() {
+                return v("smwb-accordion__arrow-icon", {
+                  "smwb-accordion__arrow-icon_opened": o()
+                });
+              },
+              name: "expand_more",
+              size: 24
+            });
+          },
+          get children() {
+            return e.icon;
+          }
+        });
+      }
+    }), null), a(r, c(l, {
+      get when() {
+        return e.children;
+      },
+      get children() {
+        var t = E();
+        return i(t, "id", s), i(t, "aria-labelledby", m), a(t, c(D, {
+          get height() {
+            return o() ? "auto" : 0;
+          },
+          animateOpacity: !0,
+          duration: 300,
+          class: "smwb-accordion__content",
+          get children() {
+            return e.children;
+          }
+        })), t;
+      }
+    }), null), O((t) => {
+      var g = v("smwb-accordion", {
+        "smwb-disabled": e.disabled
+      }, e.class), h = e.disabled, p = o(), b = e.children ? s : void 0;
+      return g !== t.e && k(r, t.e = g), h !== t.t && (n.disabled = t.t = h), p !== t.a && i(n, "aria-expanded", t.a = p), b !== t.o && i(n, "aria-controls", t.o = b), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), r;
+  })();
+}
+A(["click"]);
+export {
+  L as Accordion
+};
+//# sourceMappingURL=accordion.js.map