@smwb/ui-solid 0.2.2 → 0.4.0

package/dist/headless/source/components/dataDisplay/chip/chip.jsx

@@ -0,0 +1,119 @@
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
+function Chip(props) {
+  const merged = mergeProps(
+    {
+      target: "_blank",
+      variant: "filled",
+      size: "medium",
+      color: "default",
+      disabled: false,
+      deleteAriaLabel: "Remove"
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "label",
+    "class",
+    "deleteIcon",
+    "icon",
+    "onDelete",
+    "onDeleteMouseDown",
+    "asLink",
+    "href",
+    "target",
+    "selected",
+    "variant",
+    "size",
+    "color",
+    "disabled",
+    "onClick",
+    "deleteAriaLabel",
+    "ref"
+  ]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    if (!local.disabled) {
+      rippleActions?.onRipple(event);
+    }
+  };
+  const onDeleteMouseDown = (event) => {
+    callHandler(local.onDeleteMouseDown, event);
+    event.stopPropagation();
+  };
+  const classes = () => cn(
+    "smwb-chip",
+    `smwb-${local.variant}`,
+    `smwb-chip_size-${local.size}`,
+    local.color !== "default" && `smwb-chip_color-${local.color}`,
+    local.class,
+    { "smwb-disabled": local.disabled, "smwb-selected": local.selected }
+  );
+  const clickable = () => !!local.onClick && !local.disabled;
+  const inner = () => <>
+      <Show when={local.icon}>
+        <span class="smwb-chip__icon">{local.icon}</span>
+      </Show>
+      <span class="smwb-chip__label">{local.label}</span>
+      <Show when={local.onDelete}>
+        <button
+    type="button"
+    class="smwb-chip__delete-icon"
+    aria-label={local.deleteAriaLabel}
+    disabled={local.disabled}
+    onClick={local.onDelete}
+    onMouseDown={onDeleteMouseDown}
+  >
+          <Show when={local.deleteIcon} fallback={<Icon name="cancel" size={18} fill={1} />}>
+            {local.deleteIcon}
+          </Show>
+        </button>
+      </Show>
+      <Ripple actionRef={(actions) => rippleActions = actions} />
+    </>;
+  return <Show
+    when={local.asLink && local.href}
+    fallback={<span
+      {...rest}
+      ref={mergeRefs(local.ref)}
+      data-testid="chip"
+      class={classes()}
+      role={clickable() ? "button" : void 0}
+      tabindex={clickable() ? 0 : void 0}
+      aria-disabled={local.disabled || void 0}
+      onClick={clickable() ? () => local.onClick?.() : void 0}
+      onKeyDown={clickable() ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          local.onClick?.();
+        }
+      } : void 0}
+      onPointerDown={onPointerDown}
+    >
+          {inner()}
+        </span>}
+  >
+      <a
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="chip-link"
+    class={classes()}
+    href={local.href}
+    onPointerDown={onPointerDown}
+    target={local.target}
+    rel="noreferrer"
+  >
+        {inner()}
+      </a>
+    </Show>;
+}
+var chip_default = Chip;
+export {
+  Chip,
+  chip_default as default
+};
+//# sourceMappingURL=chip.js.map

package/dist/headless/source/components/dataDisplay/chip/chip.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={local.icon}>\n        <span class=\"smwb-chip__icon\">{local.icon}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <Show when={local.deleteIcon} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n            {local.deleteIcon}\n          </Show>\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"mappings":"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","names":[],"file":"chip.jsx"}

package/dist/headless/source/components/dataDisplay/chip/index.js

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

package/dist/headless/source/components/dataDisplay/chip/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/chip/index.ts"],
+  "sourcesContent": ["export { Chip, default } from \"./chip\";\nexport type { ChipProps, ChipColor } from \"./chip\";\n"],
+  "mappings": "AAAA,SAAS,MAAM,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/dataDisplay/expansionPanel/expansionPanel.jsx

@@ -0,0 +1,164 @@
+import { Show, createEffect, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { Button } from "../../inputs/button";
+import { Icon } from "../../base/icon";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const DEFAULT_LABELS = {
+  expandRow: "Expand to full row",
+  collapseRow: "Collapse to grid",
+  expandFullscreen: "Expand to fullscreen",
+  closeFullscreen: "Close fullscreen",
+  placeholder: "Panel is open in fullscreen",
+  placeholderClose: "Close"
+};
+function ExpansionPanel(props) {
+  const merged = mergeProps(
+    { defaultMode: "tile", disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },
+    props
+  );
+  const [local] = splitProps(merged, [
+    "class",
+    "header",
+    "mode",
+    "defaultMode",
+    "onModeChange",
+    "disableExpand",
+    "noControls",
+    "renderControls",
+    "closeOnOutsideClick",
+    "closeOnEsc",
+    "labels",
+    "children",
+    "ref"
+  ]);
+  const [mode, setMode] = createControllableState({
+    value: () => local.mode,
+    defaultValue: local.defaultMode,
+    onChange: (next) => local.onModeChange?.(next)
+  });
+  const labels = () => ({ ...DEFAULT_LABELS, ...local.labels });
+  const effectiveMode = () => local.disableExpand ? "tile" : mode();
+  const isFullRow = () => effectiveMode() === "row";
+  const isFullscreen = () => effectiveMode() === "fullscreen";
+  const toggleRow = () => setMode((current) => current === "row" ? "tile" : "row");
+  const openFullscreen = () => setMode("fullscreen");
+  const closeFullscreen = () => setMode("tile");
+  const controlsContext = (overlay) => ({
+    mode: effectiveMode(),
+    isFullscreen: overlay,
+    isFullRow: overlay ? false : isFullRow(),
+    setMode,
+    toggleRow,
+    openFullscreen,
+    closeFullscreen,
+    labels: labels()
+  });
+  const renderChildren = (overlay) => {
+    const ctx = { mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() };
+    return typeof local.children === "function" ? local.children(ctx) : local.children;
+  };
+  const defaultControls = (overlay) => {
+    if (overlay) {
+      return <Button
+        type="button"
+        variant="outlined"
+        size="small"
+        aria-label={labels().closeFullscreen}
+        title={labels().closeFullscreen}
+        onClick={closeFullscreen}
+        data-testid="expansion-panel-close"
+        icon={<Icon name="close" size={18} />}
+      />;
+    }
+    return <>
+        <Button
+      type="button"
+      variant="outlined"
+      size="small"
+      aria-pressed={isFullRow()}
+      aria-label={isFullRow() ? labels().collapseRow : labels().expandRow}
+      title={isFullRow() ? labels().collapseRow : labels().expandRow}
+      onClick={toggleRow}
+      data-testid="expansion-panel-row"
+      icon={<Icon name={isFullRow() ? "grid_view" : "table_rows"} size={18} />}
+    />
+        <Button
+      type="button"
+      variant="outlined"
+      size="small"
+      aria-label={labels().expandFullscreen}
+      title={labels().expandFullscreen}
+      onClick={openFullscreen}
+      data-testid="expansion-panel-fullscreen"
+      icon={<Icon name="open_in_full" size={18} />}
+    />
+      </>;
+  };
+  const controlBar = (overlay) => {
+    if (local.disableExpand || local.noControls) return null;
+    const content = local.renderControls ? typeof local.renderControls === "function" ? local.renderControls(controlsContext(overlay)) : local.renderControls : defaultControls(overlay);
+    return <Show when={content}>{(c) => <div class="smwb-expansion-panel__controls">{c()}</div>}</Show>;
+  };
+  createEffect(() => {
+    if (!isFullscreen()) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    onCleanup(() => {
+      document.body.style.overflow = prev;
+    });
+  });
+  createEffect(() => {
+    if (!isFullscreen() || !local.closeOnEsc) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMode("tile");
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+  const card = () => <div
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-expansion-panel", { "smwb-expansion-panel_row": isFullRow() }, local.class)}
+    data-testid="expansion-panel"
+  >
+      <div class="smwb-expansion-panel__head">
+        <div class="smwb-expansion-panel__header">{local.header}</div>
+        {controlBar(false)}
+      </div>
+      <div class="smwb-expansion-panel__body">{renderChildren(false)}</div>
+    </div>;
+  return <Show when={isFullscreen()} fallback={card()}>
+      <>
+        <div class="smwb-expansion-panel__placeholder" data-testid="expansion-panel-placeholder">
+          <span>{labels().placeholder}</span>
+          <Button type="button" variant="outlined" size="small" label={labels().placeholderClose} onClick={() => setMode("tile")} />
+        </div>
+        <Portal mount={isServer ? void 0 : document.body}>
+          <div
+    class="smwb-expansion-panel__overlay smwb-dark"
+    role="dialog"
+    aria-modal="true"
+    data-testid="expansion-panel-overlay"
+    onClick={local.closeOnOutsideClick ? (event) => {
+      if (event.target === event.currentTarget) setMode("tile");
+    } : void 0}
+  >
+            <div class="smwb-expansion-panel__dialog">
+              <div class="smwb-expansion-panel__head">
+                <div class="smwb-expansion-panel__header">{local.header}</div>
+                {controlBar(true)}
+              </div>
+              <div class="smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen">{renderChildren(true)}</div>
+            </div>
+          </div>
+        </Portal>
+      </>
+    </Show>;
+}
+var expansionPanel_default = ExpansionPanel;
+export {
+  ExpansionPanel,
+  expansionPanel_default as default
+};
+//# sourceMappingURL=expansionPanel.js.map

package/dist/headless/source/components/dataDisplay/expansionPanel/expansionPanel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  expandRow?: string;\n  collapseRow?: string;\n  expandFullscreen?: string;\n  closeFullscreen?: string;\n  placeholder?: string;\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = JSX.Element | ((ctx: ExpansionPanelRenderContext) => JSX.Element);\ntype ExpansionPanelControls = JSX.Element | ((ctx: ExpansionPanelControlsContext) => JSX.Element);\n\nexport interface ExpansionPanelProps {\n  class?: string;\n  header?: JSX.Element;\n  mode?: ExpansionMode;\n  defaultMode?: ExpansionMode;\n  onModeChange?: (mode: ExpansionMode) => void;\n  disableExpand?: boolean;\n  noControls?: boolean;\n  renderControls?: ExpansionPanelControls;\n  closeOnOutsideClick?: boolean;\n  closeOnEsc?: boolean;\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nexport function ExpansionPanel(props: ExpansionPanelProps): JSX.Element {\n  const merged = mergeProps(\n    { defaultMode: \"tile\" as ExpansionMode, disableExpand: false, noControls: false, closeOnOutsideClick: true, closeOnEsc: true },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"header\",\n    \"mode\",\n    \"defaultMode\",\n    \"onModeChange\",\n    \"disableExpand\",\n    \"noControls\",\n    \"renderControls\",\n    \"closeOnOutsideClick\",\n    \"closeOnEsc\",\n    \"labels\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [mode, setMode] = createControllableState<ExpansionMode>({\n    value: () => local.mode,\n    defaultValue: local.defaultMode,\n    onChange: (next) => local.onModeChange?.(next),\n  });\n\n  const labels = (): Required<ExpansionPanelLabels> => ({ ...DEFAULT_LABELS, ...local.labels });\n  const effectiveMode = (): ExpansionMode => (local.disableExpand ? \"tile\" : mode());\n  const isFullRow = (): boolean => effectiveMode() === \"row\";\n  const isFullscreen = (): boolean => effectiveMode() === \"fullscreen\";\n\n  const toggleRow = (): void => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = (): void => setMode(\"fullscreen\");\n  const closeFullscreen = (): void => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode(),\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow(),\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: labels(),\n  });\n\n  const renderChildren = (overlay: boolean): JSX.Element => {\n    const ctx: ExpansionPanelRenderContext = { mode: effectiveMode(), isFullscreen: overlay, isFullRow: overlay ? false : isFullRow() };\n    return typeof local.children === \"function\" ? local.children(ctx) : local.children;\n  };\n\n  const defaultControls = (overlay: boolean): JSX.Element => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().closeFullscreen}\n          title={labels().closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow()}\n          aria-label={isFullRow() ? labels().collapseRow : labels().expandRow}\n          title={isFullRow() ? labels().collapseRow : labels().expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow() ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={labels().expandFullscreen}\n          title={labels().expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const controlBar = (overlay: boolean): JSX.Element => {\n    if (local.disableExpand || local.noControls) return null;\n    const content = local.renderControls\n      ? typeof local.renderControls === \"function\"\n        ? local.renderControls(controlsContext(overlay))\n        : local.renderControls\n      : defaultControls(overlay);\n    return <Show when={content}>{(c) => <div class=\"smwb-expansion-panel__controls\">{c() as JSX.Element}</div>}</Show>;\n  };\n\n  // Lock body scroll while fullscreen.\n  createEffect(() => {\n    if (!isFullscreen()) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  // Escape closes fullscreen.\n  createEffect(() => {\n    if (!isFullscreen() || !local.closeOnEsc) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") setMode(\"tile\");\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const card = (): JSX.Element => (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow() }, local.class)}\n      data-testid=\"expansion-panel\"\n    >\n      <div class=\"smwb-expansion-panel__head\">\n        <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n        {controlBar(false)}\n      </div>\n      <div class=\"smwb-expansion-panel__body\">{renderChildren(false)}</div>\n    </div>\n  );\n\n  return (\n    <Show when={isFullscreen()} fallback={card()}>\n      <>\n        <div class=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n          <span>{labels().placeholder}</span>\n          <Button type=\"button\" variant=\"outlined\" size=\"small\" label={labels().placeholderClose} onClick={() => setMode(\"tile\")} />\n        </div>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <div\n            class=\"smwb-expansion-panel__overlay smwb-dark\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            data-testid=\"expansion-panel-overlay\"\n            onClick={\n              local.closeOnOutsideClick\n                ? (event) => {\n                    if (event.target === event.currentTarget) setMode(\"tile\");\n                  }\n                : undefined\n            }\n          >\n            <div class=\"smwb-expansion-panel__dialog\">\n              <div class=\"smwb-expansion-panel__head\">\n                <div class=\"smwb-expansion-panel__header\">{local.header}</div>\n                {controlBar(true)}\n              </div>\n              <div class=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">{renderChildren(true)}</div>\n            </div>\n          </div>\n        </Portal>\n      </>\n    </Show>\n  );\n}\n\nexport default ExpansionPanel;\n"],"mappings":"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","names":[],"file":"expansionPanel.jsx"}

package/dist/headless/source/components/dataDisplay/expansionPanel/index.js

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

package/dist/headless/source/components/dataDisplay/expansionPanel/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/expansionPanel/index.ts"],
+  "sourcesContent": ["export { ExpansionPanel, default } from \"./expansionPanel\";\nexport type {\n  ExpansionPanelProps,\n  ExpansionPanelLabels,\n  ExpansionPanelRenderContext,\n  ExpansionPanelControlsContext,\n  ExpansionMode,\n} from \"./expansionPanel\";\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/dataDisplay/imagesList/imagesList.jsx

@@ -0,0 +1,25 @@
+import { mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { ImagesListContext } from "./imagesListContext";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function ImagesList(props) {
+  const merged = mergeProps({ gap: 4, cols: 3, rowsHeight: 0, variant: "default" }, props);
+  const [local] = splitProps(merged, ["class", "children", "gap", "cols", "rowsHeight", "variant", "aria-label", "id", "ref"]);
+  return <ImagesListContext.Provider value={{ rowsHeight: local.rowsHeight, variant: local.variant }}>
+      <div class={cn("smwb-gallery", local.class)} data-testid="images-list" ref={mergeRefs(local.ref)} id={local.id}>
+        <ul
+    aria-label={local["aria-label"]}
+    class={cn("smwb-gallery__list", `smwb-${local.variant}`)}
+    style={{ "--cols-count": `${local.cols}`, "--gap": `${local.gap}px` }}
+  >
+          {local.children}
+        </ul>
+      </div>
+    </ImagesListContext.Provider>;
+}
+var imagesList_default = ImagesList;
+export {
+  ImagesList,
+  imagesList_default as default
+};
+//# sourceMappingURL=imagesList.js.map

package/dist/headless/source/components/dataDisplay/imagesList/imagesList.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ImagesListProps {\n  class?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ImagesList(props: ParentProps<ImagesListProps>): JSX.Element {\n  const merged = mergeProps({ gap: 4, cols: 3, rowsHeight: 0, variant: \"default\" as const }, props);\n  const [local] = splitProps(merged, [\"class\", \"children\", \"gap\", \"cols\", \"rowsHeight\", \"variant\", \"aria-label\", \"id\", \"ref\"]);\n\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight: local.rowsHeight, variant: local.variant }}>\n      <div class={cn(\"smwb-gallery\", local.class)} data-testid=\"images-list\" ref={mergeRefs(local.ref)} id={local.id}>\n        <ul\n          aria-label={local[\"aria-label\"]}\n          class={cn(\"smwb-gallery__list\", `smwb-${local.variant}`)}\n          style={{ \"--cols-count\": `${local.cols}`, \"--gap\": `${local.gap}px` }}\n        >\n          {local.children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n}\n\nexport default ImagesList;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,yBAAyB;AAClC,SAAS,iBAA2B;AAa7B,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,UAAmB,GAAG,KAAK;AAChG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,OAAO,QAAQ,cAAc,WAAW,cAAc,MAAM,KAAK,CAAC;AAE3H,SACE,CAAC,kBAAkB,SAAS,OAAO,EAAE,YAAY,MAAM,YAAY,SAAS,MAAM,QAAQ,GAAG;AAAA,MAC3F,CAAC,IAAI,OAAO,GAAG,gBAAgB,MAAM,KAAK,GAAG,YAAY,cAAc,KAAK,UAAU,MAAM,GAAG,GAAG,IAAI,MAAM,IAAI;AAAA,QAC9G,CAAC;AAAA,IACC,YAAY,MAAM,YAAY;AAAA,IAC9B,OAAO,GAAG,sBAAsB,QAAQ,MAAM,OAAO,EAAE;AAAA,IACvD,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI,IAAI,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,GACrE;AAAA,WACE,MAAM,SAAS;AAAA,QAClB,EANC,GAMI;AAAA,MACP,EARC,IAQK;AAAA,IACR,EAVC,kBAAkB;AAYvB;AAEA,IAAO,qBAAQ;","names":[],"file":"imagesList.jsx"}

package/dist/headless/source/components/dataDisplay/imagesList/imagesList.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=imagesList.types.js.map

package/dist/headless/source/components/dataDisplay/imagesList/imagesList.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/headless/source/components/dataDisplay/imagesList/imagesListContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "solid-js";
+const ImagesListContext = createContext({ rowsHeight: 0 });
+const useImagesListContext = () => useContext(ImagesListContext);
+export {
+  ImagesListContext,
+  useImagesListContext
+};
+//# sourceMappingURL=imagesListContext.js.map

package/dist/headless/source/components/dataDisplay/imagesList/imagesListContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/imagesList/imagesListContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface ImagesListContextValue {\n  rowsHeight?: number;\n  variant?: \"woven\" | \"masonry\" | \"default\" | null;\n}\n\nexport const ImagesListContext = createContext<ImagesListContextValue>({ rowsHeight: 0 });\n\nexport const useImagesListContext = (): ImagesListContextValue => useContext(ImagesListContext);\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAOnC,MAAM,oBAAoB,cAAsC,EAAE,YAAY,EAAE,CAAC;AAEjF,MAAM,uBAAuB,MAA8B,WAAW,iBAAiB;",
+  "names": []
+}

package/dist/headless/source/components/dataDisplay/imagesList/imagesListItem/imagesListItem.jsx

@@ -0,0 +1,55 @@
+import { Show, createEffect, createSignal, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { ImagesListItemModal } from "./imagesListItemModal";
+import { useImagesListContext } from "../imagesListContext";
+function ImagesListItem(props) {
+  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: "bottom", alt: "image" }, props);
+  const [local] = splitProps(merged, [
+    "class",
+    "src",
+    "rounded",
+    "itemBarContent",
+    "cols",
+    "rows",
+    "itemBarPlacement",
+    "alt"
+  ]);
+  const ctx = useImagesListContext();
+  const [isOpen, setIsOpen] = createSignal(false);
+  createEffect(() => {
+    document.body.style.overflow = isOpen() ? "hidden" : "auto";
+  });
+  const style = () => ({
+    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : "",
+    "grid-row-end": `span ${local.rows}`,
+    "grid-column-end": `span ${local.cols}`
+  });
+  return <>
+      <li
+    data-testid="images-list-item"
+    class={cn("smwb-gallery__list__item", local.class, "smwb-gallery-item", `smwb-${ctx.variant}`)}
+    onClick={() => setIsOpen(true)}
+    style={style()}
+  >
+        <div class="smwb-gallery-item__inner">
+          <div class="smwb-gallery-item__img-wrapper">
+            <img src={local.src} alt={local.alt || "image"} class={cn("smwb-gallery-item__img", { "smwb-rounded": local.rounded })} />
+          </div>
+          <Show when={local.itemBarContent}>
+            <div
+    class={cn("smwb-gallery-item__bar", local.class, `smwb-${local.itemBarPlacement}`, { "smwb-rounded": local.rounded })}
+  >
+              {local.itemBarContent}
+            </div>
+          </Show>
+        </div>
+      </li>
+      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />
+    </>;
+}
+var imagesListItem_default = ImagesListItem;
+export {
+  ImagesListItem,
+  imagesListItem_default as default
+};
+//# sourceMappingURL=imagesListItem.js.map

package/dist/headless/source/components/dataDisplay/imagesList/imagesListItem/imagesListItem.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  createEffect(() => {\n    document.body.style.overflow = isOpen() ? \"hidden\" : \"auto\";\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={local.itemBarContent}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {local.itemBarContent}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"mappings":"AAAA,SAAmB,MAAM,cAAc,cAAc,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAc9B,SAAS,eAAe,OAAyC;AACtE,QAAM,SAAS,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,kBAAkB,UAAmB,KAAK,QAAQ,GAAG,KAAK;AACxG,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,MAAM,qBAAqB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,eAAa,MAAM;AACjB,aAAS,KAAK,MAAM,WAAW,OAAO,IAAI,WAAW;AAAA,EACvD,CAAC;AAED,QAAM,QAAQ,OAA0B;AAAA,IACtC,QAAQ,IAAI,aAAa,GAAG,IAAI,aAAa,MAAM,IAAI,OAAO;AAAA,IAC9D,gBAAgB,QAAQ,MAAM,IAAI;AAAA,IAClC,mBAAmB,QAAQ,MAAM,IAAI;AAAA,EACvC;AAEA,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,YAAY;AAAA,IACZ,OAAO,GAAG,4BAA4B,MAAM,OAAO,qBAAqB,QAAQ,IAAI,OAAO,EAAE;AAAA,IAC7F,SAAS,MAAM,UAAU,IAAI;AAAA,IAC7B,OAAO,MAAM;AAAA,GACd;AAAA,QACC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC,IAAI,MAAM,iCAAiC;AAAA,YAC1C,CAAC,IAAI,KAAK,MAAM,KAAK,KAAK,MAAM,OAAO,SAAS,OAAO,GAAG,0BAA0B,EAAE,gBAAgB,MAAM,QAAQ,CAAC,GAAG,EAAE;AAAA,UAC5H,EAFC,IAEK;AAAA,UACN,CAAC,KAAK,MAAM,MAAM,gBAAgB;AAAA,YAChC,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,MAAM,OAAO,QAAQ,MAAM,gBAAgB,IAAI,EAAE,gBAAgB,MAAM,QAAQ,CAAC;AAAA,GACrH;AAAA,eACE,MAAM,eAAe;AAAA,YACxB,EAJC,IAIK;AAAA,UACR,EANC,KAMM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAlBC,GAkBI;AAAA,MACL,CAAC,oBAAoB,KAAK,MAAM,KAAK,SAAS,MAAM,UAAU,KAAK,GAAG,QAAQ,OAAO,GAAG,EAAE;AAAA,IAC5F;AAEJ;AAEA,IAAO,yBAAQ;","names":[],"file":"imagesListItem.jsx"}

package/dist/headless/source/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.jsx

@@ -0,0 +1,30 @@
+import { Show } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import cn from "clsx";
+import { createCssTransition } from "../../../../primitives/createCssTransition";
+function ImagesListItemModal(props) {
+  const transition = createCssTransition({
+    in: () => props.isOpen,
+    timeout: { enter: 100, exit: 100 },
+    classNames: {
+      enterActive: "smwb-image-modal__overlay-enter-active",
+      enterDone: "smwb-image-modal__overlay-enter-done"
+    },
+    appear: false
+  });
+  return <Show when={transition.mounted()}>
+      <Portal mount={isServer ? void 0 : document.body}>
+        <div class={cn("smwb-image-modal__overlay", transition.classes())} onClick={() => props.onClose()}>
+          <div class="smwb-image-modal" onClick={(event) => event.stopPropagation()}>
+            <img src={props.src} alt="" class="smwb-image-modal__img" />
+          </div>
+        </div>
+      </Portal>
+    </Show>;
+}
+var imagesListItemModal_default = ImagesListItemModal;
+export {
+  ImagesListItemModal,
+  imagesListItemModal_default as default
+};
+//# sourceMappingURL=imagesListItemModal.js.map

package/dist/headless/source/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../../primitives/createCssTransition\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nexport function ImagesListItemModal(props: ImagesListItemModalProps): JSX.Element {\n  const transition = createCssTransition({\n    in: () => props.isOpen,\n    timeout: { enter: 100, exit: 100 },\n    classNames: {\n      enterActive: \"smwb-image-modal__overlay-enter-active\",\n      enterDone: \"smwb-image-modal__overlay-enter-done\",\n    },\n    appear: false,\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div class={cn(\"smwb-image-modal__overlay\", transition.classes())} onClick={() => props.onClose()}>\n          <div class=\"smwb-image-modal\" onClick={(event) => event.stopPropagation()}>\n            <img src={props.src} alt=\"\" class=\"smwb-image-modal__img\" />\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport default ImagesListItemModal;\n"],"mappings":"AAAA,SAAmB,YAAY;AAC/B,SAAS,QAAQ,gBAAgB;AACjC,OAAO,QAAQ;AACf,SAAS,2BAA2B;AAQ7B,SAAS,oBAAoB,OAA8C;AAChF,QAAM,aAAa,oBAAoB;AAAA,IACrC,IAAI,MAAM,MAAM;AAAA,IAChB,SAAS,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,IACjC,YAAY;AAAA,MACV,aAAa;AAAA,MACb,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,EACV,CAAC;AAED,SACE,CAAC,KAAK,MAAM,WAAW,QAAQ,GAAG;AAAA,MAChC,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,MAAe;AAAA,QAC7D,CAAC,IAAI,OAAO,GAAG,6BAA6B,WAAW,QAAQ,CAAC,GAAG,SAAS,MAAM,MAAM,QAAQ,GAAG;AAAA,UACjG,CAAC,IAAI,MAAM,mBAAmB,SAAS,CAAC,UAAU,MAAM,gBAAgB,GAAG;AAAA,YACzE,CAAC,IAAI,KAAK,MAAM,KAAK,IAAI,GAAG,MAAM,wBAAwB,EAAE;AAAA,UAC9D,EAFC,IAEK;AAAA,QACR,EAJC,IAIK;AAAA,MACR,EANC,OAMQ;AAAA,IACX,EARC;AAUL;AAEA,IAAO,8BAAQ;","names":[],"file":"imagesListItemModal.jsx"}

package/dist/headless/source/components/dataDisplay/imagesList/index.js

@@ -0,0 +1,12 @@
+import { ImagesList } from "./imagesList";
+import { ImagesListItem } from "./imagesListItem/imagesListItem";
+import { ImagesListItemModal } from "./imagesListItem/imagesListItemModal";
+import { ImagesListContext, useImagesListContext } from "./imagesListContext";
+export {
+  ImagesList,
+  ImagesListContext,
+  ImagesListItem,
+  ImagesListItemModal,
+  useImagesListContext
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/imagesList/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/imagesList/index.ts"],
+  "sourcesContent": ["export { ImagesList } from \"./imagesList\";\nexport type { ImagesListProps } from \"./imagesList\";\nexport { ImagesListItem } from \"./imagesListItem/imagesListItem\";\nexport type { ImagesListItemProps } from \"./imagesListItem/imagesListItem\";\nexport { ImagesListItemModal } from \"./imagesListItem/imagesListItemModal\";\nexport type { ImagesListItemModalProps } from \"./imagesListItem/imagesListItemModal\";\nexport { ImagesListContext, useImagesListContext } from \"./imagesListContext\";\nexport type { ImagesListContextValue } from \"./imagesListContext\";\nexport type { ImageItem } from \"./imagesList.types\";\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB,4BAA4B;",
+  "names": []
+}

package/dist/headless/source/components/dataDisplay/list/index.js

@@ -0,0 +1,8 @@
+import { List, default as default2 } from "./list";
+import { ListItem } from "./listItem";
+export {
+  List,
+  ListItem,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/list/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/list/index.ts"],
+  "sourcesContent": ["export { List, default } from \"./list\";\nexport type { ListProps } from \"./list\";\nexport { ListItem } from \"./listItem\";\nexport type { ListItemProps } from \"./listItem\";\n"],
+  "mappings": "AAAA,SAAS,MAAM,WAAAA,gBAAe;AAE9B,SAAS,gBAAgB;",
+  "names": ["default"]
+}

package/dist/headless/source/components/dataDisplay/list/list.jsx

@@ -0,0 +1,24 @@
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function List(props) {
+  const [local, rest] = splitProps(props, ["class", "dense", "subheader", "children", "ref"]);
+  return <ul
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid="list"
+    role="list"
+    class={cn("smwb-list", { "smwb-list_dense": local.dense }, local.class)}
+  >
+      <Show when={local.subheader}>
+        <li class="smwb-list__subheader">{local.subheader}</li>
+      </Show>
+      {local.children}
+    </ul>;
+}
+var list_default = List;
+export {
+  List,
+  list_default as default
+};
+//# sourceMappingURL=list.js.map

package/dist/headless/source/components/dataDisplay/list/list.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\"]);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"list\"\n      role=\"list\"\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={local.subheader}>\n        <li class=\"smwb-list__subheader\">{local.subheader}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAU7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAC1F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,aAAa,EAAE,mBAAmB,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,GACvE;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,WAAW;AAAA,QAC3B,CAAC,GAAG,MAAM,wBAAwB,MAAM,UAAU,EAAjD,GAAsD;AAAA,MACzD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,IAClB,EAXC;AAaL;AAEA,IAAO,eAAQ;","names":[],"file":"list.jsx"}