@smwb/ui-solid 0.3.0 → 0.4.1

package/dist/headless/components/navigation/sidebar/sidebar.js

@@ -1,114 +1,115 @@
-import { use as k, spread as y, mergeProps as A, insert as c, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
-import { mergeProps as L, splitProps as I, Show as v, For as S } from "solid-js";
+import { use as k, spread as y, mergeProps as A, insert as s, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
+import { mergeProps as L, splitProps as I, Show as v, For as S, children as V } from "solid-js";
 import $ from "clsx";
 import { createControllableState as w } from "../../../primitives/createControllableState.js";
-import { mergeRefs as V } from "../../../primitives/mergeRefs.js";
-import { Icon as z } from "../../base/icon/icon.js";
-import { Ripple as E } from "../../base/ripple/ripple.js";
-var F = /* @__PURE__ */ p("<span class=smwb-nav-item__icon>"), M = /* @__PURE__ */ p("<span class=smwb-nav-item__title>"), N = /* @__PURE__ */ p("<div class=smwb-sidebar__collapse><button type=button class=smwb-sidebar__collapse-btn>"), j = /* @__PURE__ */ p("<aside><nav class=smwb-sidebar__nav>");
-function q(u) {
-  const [l, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
-  let m;
+import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
+import { Icon as E } from "../../base/icon/icon.js";
+import { Ripple as F } from "../../base/ripple/ripple.js";
+var M = /* @__PURE__ */ p("<span class=smwb-nav-item__icon>"), N = /* @__PURE__ */ p("<span class=smwb-nav-item__title>"), j = /* @__PURE__ */ p("<div class=smwb-sidebar__collapse><button type=button class=smwb-sidebar__collapse-btn>"), q = /* @__PURE__ */ p("<aside><nav class=smwb-sidebar__nav>");
+function x(u) {
+  const [r, e] = I(u, ["isActive", "icon", "title", "as", "href", "variant"]);
+  let c;
+  const m = V(() => r.icon);
   return n(T, A({
     get component() {
-      return l.as ?? "div";
+      return r.as ?? "div";
     },
     get href() {
-      return l.href;
+      return r.href;
     },
     role: "menuitem",
     get class() {
-      return $("sidebar__nav__item", "smwb-nav-item", l.variant, {
-        active: l.isActive
+      return $("sidebar__nav__item", "smwb-nav-item", r.variant, {
+        active: r.isActive
       });
     },
     onPointerDown: (t) => {
-      m?.onRipple(t);
+      c?.onRipple(t);
     }
   }, e, {
     get children() {
       return [n(v, {
         get when() {
-          return l.icon;
+          return m();
         },
         get children() {
-          var t = F();
-          return c(t, () => l.icon), t;
+          var t = M();
+          return s(t, m), t;
         }
       }), n(v, {
         get when() {
-          return l.title;
+          return r.title;
         },
         get children() {
-          var t = M();
-          return c(t, () => l.title), t;
+          var t = N();
+          return s(t, () => r.title), t;
         }
-      }), n(E, {
-        actionRef: (t) => m = t
+      }), n(F, {
+        actionRef: (t) => c = t
       })];
     }
   }));
 }
-function Q(u) {
-  const l = L({
+function U(u) {
+  const r = L({
     variant: "default",
     defaultActiveItem: null,
     collapsible: !1,
     defaultCollapsed: !1,
     collapseToggleAriaLabel: "Toggle navigation"
-  }, u), [e, m] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [f, t] = w({
+  }, u), [e, c] = I(r, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [m, d] = w({
     value: () => e.activeItem,
     defaultValue: e.defaultActiveItem,
-    onChange: (r) => {
-      r !== null && e.onActiveItemChange?.(r);
+    onChange: (l) => {
+      l !== null && e.onActiveItemChange?.(l);
     }
-  }), [s, P] = w({
+  }), [t, P] = w({
     value: () => e.collapsed,
     defaultValue: e.defaultCollapsed,
-    onChange: (r) => e.onCollapsedChange?.(r)
-  }), d = () => e.collapsible && s() ? "compactMini" : e.variant;
+    onChange: (l) => e.onCollapsedChange?.(l)
+  }), f = () => e.collapsible && t() ? "compactMini" : e.variant;
   return (() => {
-    var r = j(), g = r.firstChild, b = V(e.ref);
-    return typeof b == "function" && k(b, r), y(r, A(m, {
+    var l = q(), g = l.firstChild, b = z(e.ref);
+    return typeof b == "function" && k(b, l), y(l, A(c, {
       get class() {
-        return $("smwb-sidebar", e.class, `smwb-${d()}`, {
+        return $("smwb-sidebar", e.class, `smwb-${f()}`, {
           "smwb-sidebar_collapsible": e.collapsible,
-          "smwb-sidebar_collapsed": e.collapsible && s()
+          "smwb-sidebar_collapsed": e.collapsible && t()
         });
       },
       role: "menubar"
-    }), !1, !0), c(r, n(v, {
+    }), !1, !0), s(l, n(v, {
       get when() {
         return e.collapsible;
       },
       get children() {
-        var a = N(), i = a.firstChild;
-        return i.$$click = () => P(!s()), c(i, n(z, {
+        var a = j(), i = a.firstChild;
+        return i.$$click = () => P(!t()), s(i, n(E, {
           get name() {
-            return s() ? "chevron_right" : "chevron_left";
+            return t() ? "chevron_right" : "chevron_left";
           },
           size: 20
         })), R((o) => {
-          var _ = e.collapseToggleAriaLabel, h = !s();
-          return _ !== o.e && C(i, "aria-label", o.e = _), h !== o.t && C(i, "aria-expanded", o.t = h), o;
+          var h = e.collapseToggleAriaLabel, _ = !t();
+          return h !== o.e && C(i, "aria-label", o.e = h), _ !== o.t && C(i, "aria-expanded", o.t = _), o;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), g), c(g, n(S, {
+    }), g), s(g, n(S, {
       get each() {
         return e.menuItems ?? [];
       },
-      children: (a, i) => n(q, {
+      children: (a, i) => n(x, {
         get as() {
           return a.as;
         },
         get isActive() {
-          return f() === i();
+          return m() === i();
         },
         onClick: (o) => {
-          t(i()), typeof a.onClick == "function" && a.onClick(o);
+          d(i()), typeof a.onClick == "function" && a.onClick(o);
         },
         get icon() {
           return a.icon;
@@ -120,14 +121,14 @@ function Q(u) {
           return a.href;
         },
         get variant() {
-          return d();
+          return f();
         }
       })
-    })), r;
+    })), l;
   })();
 }
 D(["click"]);
 export {
-  Q as Sidebar
+  U as Sidebar
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/headless/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={local.icon}>\n        <span class=\"smwb-nav-item__icon\">{local.icon}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      role=\"menubar\"\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","children","Show","when","icon","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      role=\"menubar\"\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}

package/dist/headless/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.jsx.map

package/dist/headless/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":"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","names":[],"file":"animateHeight.jsx"}

package/dist/headless/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/headless/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/headless/source/components/base/icon/icon.jsx

@@ -0,0 +1,60 @@
+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.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,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/headless/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/headless/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/headless/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/headless/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/headless/source/components/base/ripple/ripple.jsx

@@ -0,0 +1,63 @@
+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.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,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"}