@smwb/ui-solid 0.2.2 → 0.4.0

package/dist/headless/source/components/navigation/pagination/index.js

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

package/dist/headless/source/components/navigation/pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/pagination/index.ts"],
+  "sourcesContent": ["export { Pagination, default } from \"./pagination\";\nexport type { PaginationProps, PaginationColor } from \"./pagination\";\n"],
+  "mappings": "AAAA,SAAS,YAAY,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/navigation/pagination/pagination.jsx

@@ -0,0 +1,142 @@
+import { For, Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
+const buildItems = (count, page, siblingCount, boundaryCount) => {
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  );
+  return [
+    ...startPages,
+    ...siblingsStart > boundaryCount + 2 ? ["start-ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < count - boundaryCount - 1 ? ["end-ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : [],
+    ...endPages
+  ];
+};
+function Pagination(props) {
+  const merged = mergeProps(
+    {
+      siblingCount: 1,
+      boundaryCount: 1,
+      size: "medium",
+      variant: "filled",
+      shape: "circular",
+      color: "default",
+      disabled: false,
+      showFirstButton: false,
+      showLastButton: false,
+      hidePrevButton: false,
+      hideNextButton: false
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "count",
+    "page",
+    "siblingCount",
+    "boundaryCount",
+    "size",
+    "variant",
+    "shape",
+    "color",
+    "disabled",
+    "showFirstButton",
+    "showLastButton",
+    "hidePrevButton",
+    "hideNextButton",
+    "onChange",
+    "ref"
+  ]);
+  let navEl;
+  const go = (target) => {
+    if (local.disabled || target === local.page || target < 1 || target > local.count) return;
+    local.onChange?.(target);
+  };
+  const onKeyDown = (event) => {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const buttons = Array.from(
+      navEl?.querySelectorAll("button.smwb-pagination__item:not(:disabled)") ?? []
+    );
+    if (buttons.length === 0) return;
+    const current = buttons.indexOf(document.activeElement);
+    let next = current;
+    if (event.key === "ArrowRight") next = Math.min(current + 1, buttons.length - 1);
+    else if (event.key === "ArrowLeft") next = Math.max(current - 1, 0);
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = buttons.length - 1;
+    event.preventDefault();
+    buttons[next]?.focus();
+  };
+  const items = () => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);
+  const navButton = (label, target, iconName, hidden) => <Show when={!hidden}>
+      <li>
+        <button
+    type="button"
+    class="smwb-pagination__item smwb-pagination__nav"
+    aria-label={label}
+    disabled={local.disabled || target < 1 || target > local.count}
+    onClick={() => go(target)}
+  >
+          <Icon name={iconName} size={local.size === "small" ? 16 : 18} />
+        </button>
+      </li>
+    </Show>;
+  return <nav
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => navEl = el)}
+    data-testid="pagination"
+    aria-label="pagination"
+    class={cn(
+      "smwb-pagination",
+      `smwb-pagination_${local.size}`,
+      `smwb-pagination_${local.variant}`,
+      `smwb-pagination_shape-${local.shape}`,
+      local.color !== "default" && `smwb-pagination_color-${local.color}`,
+      { "smwb-pagination_disabled": local.disabled },
+      local.class
+    )}
+  >
+      <ul class="smwb-pagination__list" onKeyDown={onKeyDown}>
+        {navButton("First page", 1, "first_page", !local.showFirstButton)}
+        {navButton("Previous page", local.page - 1, "chevron_left", local.hidePrevButton)}
+        <For each={items()}>
+          {(item) => <Show
+    when={typeof item === "number"}
+    fallback={<li class="smwb-pagination__ellipsis" aria-hidden="true">
+                  …
+                </li>}
+  >
+              <li>
+                <button
+    type="button"
+    class={cn("smwb-pagination__item", { "smwb-pagination__item_selected": item === local.page })}
+    aria-current={item === local.page ? "page" : void 0}
+    disabled={local.disabled}
+    onClick={() => go(item)}
+  >
+                  {item}
+                </button>
+              </li>
+            </Show>}
+        </For>
+        {navButton("Next page", local.page + 1, "chevron_right", local.hideNextButton)}
+        {navButton("Last page", local.count, "last_page", !local.showLastButton)}
+      </ul>
+    </nav>;
+}
+var pagination_default = Pagination;
+export {
+  Pagination,
+  pagination_default as default
+};
+//# sourceMappingURL=pagination.js.map

package/dist/headless/source/components/navigation/pagination/pagination.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  ref?: Ref<HTMLElement>;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0]! - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      siblingCount: 1,\n      boundaryCount: 1,\n      size: \"medium\" as const,\n      variant: \"filled\" as const,\n      shape: \"circular\" as const,\n      color: \"default\" as PaginationColor,\n      disabled: false,\n      showFirstButton: false,\n      showLastButton: false,\n      hidePrevButton: false,\n      hideNextButton: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"count\",\n    \"page\",\n    \"siblingCount\",\n    \"boundaryCount\",\n    \"size\",\n    \"variant\",\n    \"shape\",\n    \"color\",\n    \"disabled\",\n    \"showFirstButton\",\n    \"showLastButton\",\n    \"hidePrevButton\",\n    \"hideNextButton\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  let navEl: HTMLElement | undefined;\n\n  const go = (target: number): void => {\n    if (local.disabled || target === local.page || target < 1 || target > local.count) return;\n    local.onChange?.(target);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n    const buttons = Array.from(\n      navEl?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) return;\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (event.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (event.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = buttons.length - 1;\n    event.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = (): PaginationItem[] => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);\n\n  const navButton = (label: string, target: number, iconName: string, hidden?: boolean): JSX.Element => (\n    <Show when={!hidden}>\n      <li>\n        <button\n          type=\"button\"\n          class=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={local.disabled || target < 1 || target > local.count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={local.size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    </Show>\n  );\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (navEl = el))}\n      data-testid=\"pagination\"\n      aria-label=\"pagination\"\n      class={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${local.size}`,\n        `smwb-pagination_${local.variant}`,\n        `smwb-pagination_shape-${local.shape}`,\n        local.color !== \"default\" && `smwb-pagination_color-${local.color}`,\n        { \"smwb-pagination_disabled\": local.disabled },\n        local.class\n      )}\n    >\n      <ul class=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"First page\", 1, \"first_page\", !local.showFirstButton)}\n        {navButton(\"Previous page\", local.page - 1, \"chevron_left\", local.hidePrevButton)}\n        <For each={items()}>\n          {(item) => (\n            <Show\n              when={typeof item === \"number\"}\n              fallback={\n                <li class=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n                  …\n                </li>\n              }\n            >\n              <li>\n                <button\n                  type=\"button\"\n                  class={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === local.page })}\n                  aria-current={item === local.page ? \"page\" : undefined}\n                  disabled={local.disabled}\n                  onClick={() => go(item as number)}\n                >\n                  {item}\n                </button>\n              </li>\n            </Show>\n          )}\n        </For>\n        {navButton(\"Next page\", local.page + 1, \"chevron_right\", local.hideNextButton)}\n        {navButton(\"Last page\", local.count, \"last_page\", !local.showLastButton)}\n      </ul>\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"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","names":[],"file":"pagination.jsx"}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sidebar/index.ts"],
+  "sourcesContent": ["export { Sidebar, default } from \"./sidebar\";\nexport type { SidebarProps, SidebarMenuItemProps, SidebarVariant } from \"./sidebar\";\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/navigation/sidebar/sidebar.jsx

@@ -0,0 +1,114 @@
+import { For, Show, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+import { Icon } from "../../base/icon";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function NavItem(props) {
+  const [local, rest] = splitProps(props, ["isActive", "icon", "title", "as", "href", "variant"]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
+  return <Dynamic
+    component={local.as ?? "div"}
+    href={local.href}
+    role="menuitem"
+    class={cn("sidebar__nav__item", "smwb-nav-item", local.variant, { active: local.isActive })}
+    onPointerDown={onPointerDown}
+    {...rest}
+  >
+      <Show when={local.icon}>
+        <span class="smwb-nav-item__icon">{local.icon}</span>
+      </Show>
+      <Show when={local.title}>
+        <span class="smwb-nav-item__title">{local.title}</span>
+      </Show>
+      <Ripple actionRef={(actions) => rippleActions = actions} />
+    </Dynamic>;
+}
+function Sidebar(props) {
+  const merged = mergeProps(
+    {
+      variant: "default",
+      defaultActiveItem: null,
+      collapsible: false,
+      defaultCollapsed: false,
+      collapseToggleAriaLabel: "Toggle navigation"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "variant",
+    "menuItems",
+    "activeItem",
+    "defaultActiveItem",
+    "onActiveItemChange",
+    "collapsible",
+    "collapsed",
+    "defaultCollapsed",
+    "onCollapsedChange",
+    "collapseToggleAriaLabel",
+    "ref"
+  ]);
+  const [activeItem, setActiveItem] = createControllableState({
+    value: () => local.activeItem,
+    defaultValue: local.defaultActiveItem,
+    onChange: (next) => {
+      if (next !== null) local.onActiveItemChange?.(next);
+    }
+  });
+  const [collapsed, setCollapsed] = createControllableState({
+    value: () => local.collapsed,
+    defaultValue: local.defaultCollapsed,
+    onChange: (next) => local.onCollapsedChange?.(next)
+  });
+  const effectiveVariant = () => local.collapsible && collapsed() ? "compactMini" : local.variant;
+  return <aside
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-sidebar", local.class, `smwb-${effectiveVariant()}`, {
+      "smwb-sidebar_collapsible": local.collapsible,
+      "smwb-sidebar_collapsed": local.collapsible && collapsed()
+    })}
+    role="menubar"
+  >
+      <Show when={local.collapsible}>
+        <div class="smwb-sidebar__collapse">
+          <button
+    type="button"
+    class="smwb-sidebar__collapse-btn"
+    aria-label={local.collapseToggleAriaLabel}
+    aria-expanded={!collapsed()}
+    onClick={() => setCollapsed(!collapsed())}
+  >
+            <Icon name={collapsed() ? "chevron_right" : "chevron_left"} size={20} />
+          </button>
+        </div>
+      </Show>
+      <nav class="smwb-sidebar__nav">
+        <For each={local.menuItems ?? []}>
+          {(item, idx) => <NavItem
+    as={item.as}
+    isActive={activeItem() === idx()}
+    onClick={(event) => {
+      setActiveItem(idx());
+      if (typeof item.onClick === "function") item.onClick(event);
+    }}
+    icon={item.icon}
+    title={item.title}
+    href={item.href}
+    variant={effectiveVariant()}
+  />}
+        </For>
+      </nav>
+    </aside>;
+}
+var sidebar_default = Sidebar;
+export {
+  Sidebar,
+  sidebar_default as default
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/headless/source/components/navigation/sidebar/sidebar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"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","names":[],"file":"sidebar.jsx"}

package/dist/headless/source/components/navigation/stepper/index.js

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

package/dist/headless/source/components/navigation/stepper/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/stepper/index.ts"],
+  "sourcesContent": ["export { Stepper, default } from \"./stepper\";\nexport type { StepperProps, StepItem } from \"./stepper\";\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/navigation/stepper/stepper.jsx

@@ -0,0 +1,82 @@
+import { For, Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Stepper(props) {
+  const merged = mergeProps({ orientation: "horizontal", alternativeLabel: false }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "steps",
+    "activeStep",
+    "orientation",
+    "alternativeLabel",
+    "onStepClick",
+    "ref"
+  ]);
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="stepper"
+    class={cn(
+      "smwb-stepper",
+      `smwb-stepper_${local.orientation}`,
+      { "smwb-stepper_alt-label": local.alternativeLabel && local.orientation === "horizontal" },
+      local.class
+    )}
+  >
+      <For each={local.steps}>
+        {(step, index) => {
+    const completed = () => index() < local.activeStep;
+    const active = () => index() === local.activeStep;
+    const isLast = () => index() === local.steps.length - 1;
+    const clickable = () => Boolean(local.onStepClick) && !step.disabled;
+    return <>
+              <div
+      class={cn("smwb-stepper__step", {
+        "smwb-stepper__step_active": active(),
+        "smwb-stepper__step_completed": completed(),
+        "smwb-stepper__step_error": step.error,
+        "smwb-stepper__step_disabled": step.disabled,
+        "smwb-stepper__step_clickable": clickable()
+      })}
+      aria-current={active() ? "step" : void 0}
+      aria-disabled={step.disabled || void 0}
+      role={clickable() ? "button" : void 0}
+      tabindex={clickable() ? 0 : void 0}
+      onClick={clickable() ? () => local.onStepClick?.(index()) : void 0}
+      onKeyDown={clickable() ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          local.onStepClick?.(index());
+        }
+      } : void 0}
+    >
+                <div class="smwb-stepper__icon" aria-hidden="true">
+                  <Show when={step.icon} fallback={completed() ? <Icon name="check" size={16} /> : <span>{index() + 1}</span>}>
+                    {step.icon}
+                  </Show>
+                </div>
+                <div class="smwb-stepper__text">
+                  <span class="smwb-stepper__label">{step.label}</span>
+                  <Show when={step.optional}>
+                    <span class="smwb-stepper__optional">{step.optional}</span>
+                  </Show>
+                  <Show when={step.description && local.orientation === "vertical"}>
+                    <span class="smwb-stepper__description">{step.description}</span>
+                  </Show>
+                </div>
+              </div>
+              <Show when={!isLast()}>
+                <div class="smwb-stepper__connector" aria-hidden="true" />
+              </Show>
+            </>;
+  }}
+      </For>
+    </div>;
+}
+var stepper_default = Stepper;
+export {
+  Stepper,
+  stepper_default as default
+};
+//# sourceMappingURL=stepper.js.map

package/dist/headless/source/components/navigation/stepper/stepper.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as const, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      class={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation === \"horizontal\" },\n        local.class\n      )}\n    >\n      <For each={local.steps}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === local.steps.length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description && local.orientation === \"vertical\"}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nexport default Stepper;\n"],"mappings":"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","names":[],"file":"stepper.jsx"}

package/dist/headless/source/components/navigation/tabs/index.js

@@ -0,0 +1,10 @@
+import { Tabs } from "./tabs";
+import { Tab } from "./tab/tab";
+import { TabsContext, useTabsContext } from "./tabsContext";
+export {
+  Tab,
+  Tabs,
+  TabsContext,
+  useTabsContext
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/navigation/tabs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/tabs/index.ts"],
+  "sourcesContent": ["export { Tabs } from \"./tabs\";\nexport type { TabsProps } from \"./tabs\";\nexport { Tab } from \"./tab/tab\";\nexport type { TabProps } from \"./tab/tab\";\nexport { TabsContext, useTabsContext } from \"./tabsContext\";\nexport type { TabsContextValue } from \"./tabsContext\";\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW;AAEpB,SAAS,aAAa,sBAAsB;",
+  "names": []
+}

package/dist/headless/source/components/navigation/tabs/tab/tab.jsx

@@ -0,0 +1,75 @@
+import { Show, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Ripple } from "../../../base/ripple";
+import { useTabsContext } from "../tabsContext";
+import { mergeRefs } from "../../../../primitives/mergeRefs";
+import { callHandler } from "../../../../primitives/callHandler";
+function Tab(props) {
+  const ctx = useTabsContext();
+  const index = ctx ? ctx.registerTab() : -1;
+  const merged = mergeProps({ isActive: false, stacked: false }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "label",
+    "isActive",
+    "contentRef",
+    "icon",
+    "stacked",
+    "tag",
+    "disabled",
+    "onClick",
+    "ref"
+  ]);
+  let rippleActions;
+  const active = () => ctx ? ctx.value() === index : local.isActive;
+  const onClick = (event) => {
+    if (ctx) {
+      ctx.onChange(event, index);
+    } else {
+      callHandler(local.onClick, event);
+    }
+  };
+  const onPointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
+  const tag = () => local.tag ?? "button";
+  return <Dynamic
+    component={tag()}
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-tab", local.class, {
+      "smwb-tab--active": active(),
+      "smwb-tab--stacked": local.stacked,
+      "smwb-tab--disabled": local.disabled
+    })}
+    onClick={onClick}
+    onPointerDown={onPointerDown}
+    role="tab"
+    aria-selected={active()}
+    aria-disabled={local.disabled || void 0}
+    tabindex={active() ? 0 : -1}
+    disabled={tag() === "button" ? local.disabled : void 0}
+  >
+      <span
+    class="smwb-tab__content"
+    ref={mergeRefs(local.contentRef, (el) => {
+      if (ctx?.indicatorContent) ctx.setContentRef(index, el);
+    })}
+  >
+        <Show when={local.icon}>
+          <span class="smwb-tab__icon">{local.icon}</span>
+        </Show>
+        <Show when={local.label}>
+          <span class="smwb-tab__text-label">{local.label}</span>
+        </Show>
+      </span>
+      <Ripple actionRef={(actions) => rippleActions = actions} classes={{ child: "tab__ripple-child" }} />
+    </Dynamic>;
+}
+var tab_default = Tab;
+export {
+  Tab,
+  tab_default as default
+};
+//# sourceMappingURL=tab.js.map

package/dist/headless/source/components/navigation/tabs/tab/tab.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const index = ctx ? ctx.registerTab() : -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\n        <Show when={local.icon}>\n          <span class=\"smwb-tab__icon\">{local.icon}</span>\n        </Show>\n        <Show when={local.label}>\n          <span class=\"smwb-tab__text-label\">{local.label}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAarB,SAAS,IAAI,OAA2C;AAC7D,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,MAAM,IAAI,YAAY,IAAI;AACxC,QAAM,SAAS,WAAW,EAAE,UAAU,OAAO,SAAS,MAAM,GAAG,KAAK;AACpE,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,MAAI;AAEJ,QAAM,SAAS,MAAgB,MAAM,IAAI,MAAM,MAAM,QAAQ,MAAM;AAEnE,QAAM,UAA+E,CAAC,UAAU;AAC9F,QAAI,KAAK;AACP,UAAI,SAAS,OAAO,KAAK;AAAA,IAC3B,OAAO;AACL,kBAAY,MAAM,SAAS,KAAK;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,QAAM,MAAM,MAAc,MAAM,OAAO;AAEvC,SACE,CAAC;AAAA,IACC,WAAW,IAAI;AAAA,QACX;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,MAAM,OAAO;AAAA,MACjC,oBAAoB,OAAO;AAAA,MAC3B,qBAAqB,MAAM;AAAA,MAC3B,sBAAsB,MAAM;AAAA,IAC9B,CAAC;AAAA,IACD,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,YAAY;AAAA,IACjC,UAAU,OAAO,IAAI,IAAI;AAAA,IACzB,UAAU,IAAI,MAAM,WAAW,MAAM,WAAW;AAAA,GACjD;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,KAAK,UAAU,MAAM,YAAY,CAAC,OAAO;AACvC,UAAI,KAAK,iBAAkB,KAAI,cAAc,OAAO,EAAqB;AAAA,IAC3E,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,MAAM,MAAM;AAAA,UACtB,CAAC,KAAK,MAAM,kBAAkB,MAAM,KAAK,EAAxC,KAA+C;AAAA,QAClD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,QACzD,EAFC,KAEM;AAAA,MACT,EAZC,KAYM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,SAAS,EAAE,OAAO,oBAAoB,GAAG,EAAE;AAAA,IACxG,EA/BC;AAiCL;AAEA,IAAO,cAAQ;","names":[],"file":"tab.jsx"}