@smwb/ui-solid 0.4.1 → 0.5.0

package/dist/components/dataDisplay/thumbCard/thumbCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbCard.js","sources":["../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"names":["ThumbCard","props","merged","mergeProps","lazy","hoverDelay","local","rest","splitProps","floating","createFloating","placement","previewOpen","setPreviewOpen","createSignal","hoverTimer","clearTimer","clearTimeout","undefined","onEnter","hoverPreview","disabled","setTimeout","onLeave","onCleanup","interactive","onSelect","onKeyDown","event","key","preventDefault","_el$","_tmpl$5","_el$2","firstChild","_ref$","mergeRefs","ref","el","setReference","_$use","_$spread","_$mergeProps","cn","class","selected","role","tabindex","_$memo","onClick","_$insert","_$createComponent","LazyImage","src","fallback","Show","when","topStart","children","_el$3","_tmpl$","topEnd","_el$4","_tmpl$2","caption","_el$5","_tmpl$3","isServer","Portal","_el$6","_tmpl$4","setFloating","_c$","_el$7","_tmpl$6","_$effect","_$setAttribute","_$p","_$style","floatingStyles"],"mappings":"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"}

package/dist/components/feedBack/saveAssetDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { SaveAssetDialog } from "./saveAssetDialog";
+export type { SaveAssetDialogProps } from "./saveAssetDialog";

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.d.ts

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+export interface SaveAssetDialogProps {
+    open: boolean;
+    title?: string;
+    /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */
+    nameLabel?: string;
+    name?: string;
+    onNameChange?: (name: string) => void;
+    /** Preview image URL (e.g. a freshly captured thumbnail). */
+    previewSrc?: string;
+    /** Shows a Capture button when provided. */
+    onCapture?: () => void;
+    captureLabel?: string;
+    /** Disables the actions + name field while a save/capture is in flight. */
+    busy?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onClose: () => void;
+    /** Extra content between the name field/preview and the actions. */
+    children?: JSX.Element;
+    class?: string;
+}
+/**
+ * A "name it / preview a thumbnail / confirm-cancel" dialog on `Modal` — the
+ * save/capture flow apps hand-build for every asset. Pairs with srv-solid's
+ * asset store: `onConfirm` uploads the captured `previewSrc`.
+ */
+export declare function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element;
+export default SaveAssetDialog;

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -0,0 +1,101 @@
+import { createComponent as r, insert as l, effect as s, setAttribute as g, className as p, template as u } from "solid-js/web";
+import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css                                                                         */
+import { splitProps as b, Show as o } from "solid-js";
+import v from "clsx";
+import { Modal as a } from "../modal/modal.js";
+import { TextField as C } from "../../inputs/textField/textField.js";
+import { Button as i } from "../../inputs/button/button.js";
+var h = /* @__PURE__ */ u("<div class=smwb-save-asset-dialog__preview><img alt>"), f = /* @__PURE__ */ u("<div>");
+function k(c) {
+  const [e] = b(c, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), m = () => e.onNameChange !== void 0 || e.name !== void 0;
+  return r(a, {
+    get open() {
+      return e.open;
+    },
+    get onClose() {
+      return e.onClose;
+    },
+    size: "small",
+    get children() {
+      return [r(a.Header, {
+        get children() {
+          return e.title ?? "Save";
+        }
+      }), r(a.Content, {
+        get children() {
+          var t = f();
+          return l(t, r(o, {
+            get when() {
+              return m();
+            },
+            get children() {
+              return r(C, {
+                get label() {
+                  return e.nameLabel ?? "Name";
+                },
+                get value() {
+                  return e.name ?? "";
+                },
+                get disabled() {
+                  return !!e.busy;
+                },
+                onChange: (n) => e.onNameChange?.(n.currentTarget.value)
+              });
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.previewSrc;
+            },
+            get children() {
+              var n = h(), d = n.firstChild;
+              return s(() => g(d, "src", e.previewSrc)), n;
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.onCapture;
+            },
+            get children() {
+              return r(i, {
+                variant: "outlined",
+                size: "small",
+                get disabled() {
+                  return !!e.busy;
+                },
+                onClick: () => e.onCapture?.(),
+                get label() {
+                  return e.captureLabel ?? "Capture preview";
+                }
+              });
+            }
+          }), null), l(t, () => e.children, null), s(() => p(t, v("smwb-save-asset-dialog__body", e.class))), t;
+        }
+      }), r(a.Footer, {
+        get children() {
+          return [r(i, {
+            variant: "text",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onClose(),
+            get label() {
+              return e.cancelLabel ?? "Cancel";
+            }
+          }), r(i, {
+            variant: "contained",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onConfirm(),
+            get label() {
+              return e.confirmLabel ?? "Save";
+            }
+          })];
+        }
+      })];
+    }
+  });
+}
+export {
+  k as SaveAssetDialog
+};
+//# sourceMappingURL=saveAssetDialog.js.map

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"small\">\n      <Modal.Header>{local.title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","props","local","splitProps","showNameField","onNameChange","undefined","name","_$createComponent","Modal","open","onClose","size","children","Header","title","Content","_el$","_tmpl$2","_$insert","Show","when","TextField","label","nameLabel","value","disabled","busy","onChange","event","currentTarget","previewSrc","_el$2","_tmpl$","_el$3","firstChild","_$effect","_$setAttribute","onCapture","Button","variant","onClick","captureLabel","_$className","cn","class","Footer","cancelLabel","onConfirm","confirmLabel"],"mappings":"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"}

package/dist/components/inputs/valueSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { ValueSlider } from "./valueSlider";
+export type { ValueSliderProps } from "./valueSlider";

package/dist/components/inputs/valueSlider/valueSlider.d.ts

@@ -0,0 +1,23 @@
+import { type JSX } from "solid-js";
+import { type SliderProps, type SliderValue } from "../slider";
+export interface ValueSliderProps extends SliderProps {
+    /**
+     * Read-only value readout beside the label. `true` shows the raw value; pass a
+     * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.
+     */
+    readout?: boolean | ((value: SliderValue | undefined) => string);
+    /** Content at the end of the header row — a reset button, a favourite star, etc. */
+    endAdornment?: JSX.Element;
+    /** Renders a built-in reset control in the header; called on click. */
+    onReset?: () => void;
+    /** Accessible label for the reset control. */
+    resetLabel?: string;
+}
+/**
+ * `Slider` plus the value-readout + adornment header row every app rebuilds: a
+ * read-only formatted value next to the label, an optional reset "eraser", and an
+ * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`
+ * props pass through; the label is rendered in the header instead of inside Slider.
+ */
+export declare function ValueSlider(props: ValueSliderProps): JSX.Element;
+export default ValueSlider;

package/dist/components/inputs/valueSlider/valueSlider.js

@@ -0,0 +1,57 @@
+import { insert as t, createComponent as s, effect as p, setAttribute as _, className as f, template as a, delegateEvents as w } from "solid-js/web";
+import '../../../assets/styles/less/components/valueSlider/valueSlider.entry.css';/* empty css                                                                 */
+import { splitProps as $, Show as d } from "solid-js";
+import g from "clsx";
+import { Slider as R } from "../slider/slider.js";
+var k = /* @__PURE__ */ a("<span class=smwb-value-slider__label>"), A = /* @__PURE__ */ a("<span class=smwb-value-slider__readout>"), y = /* @__PURE__ */ a('<button type=button class=smwb-value-slider__reset><svg viewBox="0 0 24 24"width=16 height=16 aria-hidden=true fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"stroke-linecap=round stroke-linejoin=round>'), S = /* @__PURE__ */ a("<div class=smwb-value-slider__header><span class=smwb-value-slider__spacer>"), C = /* @__PURE__ */ a("<div>");
+const x = (o, e) => typeof o == "function" ? o(e) : Array.isArray(e) ? `${e[0]} – ${e[1]}` : e == null ? "" : String(e);
+function E(o) {
+  const [e, u] = $(o, ["readout", "endAdornment", "onReset", "resetLabel", "label", "class"]), c = () => e.readout !== void 0 && e.readout !== !1, v = () => e.label != null || c() || e.endAdornment != null || e.onReset != null;
+  return (() => {
+    var i = C();
+    return t(i, s(d, {
+      get when() {
+        return v();
+      },
+      get children() {
+        var l = S(), b = l.firstChild;
+        return t(l, s(d, {
+          get when() {
+            return e.label != null;
+          },
+          get children() {
+            var r = k();
+            return t(r, () => e.label), r;
+          }
+        }), b), t(l, s(d, {
+          get when() {
+            return c();
+          },
+          get children() {
+            var r = A();
+            return t(r, () => x(e.readout, u.value)), r;
+          }
+        }), null), t(l, () => e.endAdornment, null), t(l, s(d, {
+          get when() {
+            return e.onReset != null;
+          },
+          get children() {
+            var r = y();
+            return r.$$click = () => e.onReset?.(), p((n) => {
+              var m = e.resetLabel ?? "Reset", h = u.disabled;
+              return m !== n.e && _(r, "aria-label", n.e = m), h !== n.t && (r.disabled = n.t = h), n;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
+          }
+        }), null), l;
+      }
+    }), null), t(i, s(R, u), null), p(() => f(i, g("smwb-value-slider", e.class))), i;
+  })();
+}
+w(["click"]);
+export {
+  E as ValueSlider
+};
+//# sourceMappingURL=valueSlider.js.map

package/dist/components/inputs/valueSlider/valueSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {local.endAdornment}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","Array","isArray","String","ValueSlider","props","local","sliderProps","splitProps","hasReadout","undefined","showHeader","label","endAdornment","onReset","_el$","_tmpl$5","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$4","_el$4","firstChild","_el$3","_tmpl$","_el$5","_tmpl$2","_el$6","_tmpl$3","$$click","_$effect","_p$","_v$","resetLabel","_v$2","disabled","e","_$setAttribute","t","Slider","_$className","cn","class","_$delegateEvents"],"mappings":";;;;;;AAmBA,MAAMA,IAAgBA,CACpBC,GACAC,MAEI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnDC,MAAMC,QAAQF,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAKG,OAAOH,CAAK;AASnC,SAASI,EAAYC,GAAsC;AAChE,QAAM,CAACC,GAAOC,CAAW,IAAIC,EAAWH,GAAO,CAC7C,WACA,gBACA,WACA,cACA,SACA,OAAO,CACR,GAEKI,IAAaA,MAAeH,EAAMP,YAAYW,UAAaJ,EAAMP,YAAY,IAC7EY,IAAaA,MACjBL,EAAMM,SAAS,QAAQH,OAAgBH,EAAMO,gBAAgB,QAAQP,EAAMQ,WAAW;AAExF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAAU,WAAA;AAAA,YAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAR,eAAAA,EAAAK,GAAAJ,EAEnBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEd,EAAMM,SAAS;AAAA,UAAI;AAAA,UAAA,IAAAS,WAAA;AAAA,gBAAAK,IAAAC,EAAAA;AAAAV,mBAAAA,EAAAS,GAAA,MACWpB,EAAMM,KAAK,GAAAc;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAF,CAAA,GAAAP,EAAAK,GAAAJ,EAGpDC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEX,EAAAA;AAAAA,UAAY;AAAA,UAAA,IAAAY,WAAA;AAAA,gBAAAO,IAAAC,EAAAA;AAAAZ,mBAAAA,EAAAW,GAAA,MACoB9B,EAAcQ,EAAMP,SAASQ,EAAYP,KAAK,CAAC,GAAA4B;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAX,EAAAK,GAAA,MAE1FhB,EAAMO,cAAY,IAAA,GAAAI,EAAAK,GAAAJ,EAClBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEd,EAAMQ,WAAW;AAAA,UAAI;AAAA,UAAA,IAAAO,WAAA;AAAA,gBAAAS,IAAAC,EAAAA;AAAAD,mBAAAA,EAAAE,UAMpB,MAAM1B,EAAMQ,UAAAA,GAAWmB,EAAAC,CAAAA,MAAA;AAAA,kBAAAC,IAFpB7B,EAAM8B,cAAc,SAAOC,IAC7B9B,EAAY+B;AAAQH,qBAAAA,MAAAD,EAAAK,KAAAC,EAAAV,GAAA,cAAAI,EAAAK,IAAAJ,CAAA,GAAAE,MAAAH,EAAAO,MAAAX,EAAAQ,WAAAJ,EAAAO,IAAAJ,IAAAH;AAAAA,YAAA,GAAA;AAAA,cAAAK,GAAA7B;AAAAA,cAAA+B,GAAA/B;AAAAA,YAAAA,CAAA,GAAAoB;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAR;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAL,EAAAF,GAAAG,EAUrCwB,GAAWnC,CAAW,GAAA,IAAA,GAAA0B,EAAA,MAAAU,EAAA5B,GA1Bb6B,EAAG,qBAAqBtC,EAAMuC,KAAK,CAAC,CAAA,GAAA9B;AAAAA,EAAA,GAAA;AA6BpD;AAE2B+B,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/navigation/overflowMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { OverflowMenu } from "./overflowMenu";
+export type { OverflowMenuProps, OverflowMenuItem } from "./overflowMenu";

package/dist/components/navigation/overflowMenu/overflowMenu.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import type { Placement } from "@floating-ui/dom";
+export interface OverflowMenuItem {
+    id: string;
+    label: string;
+    icon?: JSX.Element | string;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface OverflowMenuProps {
+    items: OverflowMenuItem[];
+    /** Trigger icon name (default `more_vert`). */
+    icon?: string;
+    placement?: Placement;
+    "aria-label"?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * A one-shot kebab / overflow menu: a trigger icon button wired to a floating
+ * `Menu` over an `items` array, with open/close state baked in. The card 3-dot
+ * menu every app hand-builds (button + absolutely-positioned surface + open
+ * state) collapses to passing an items list.
+ */
+export declare function OverflowMenu(props: OverflowMenuProps): JSX.Element;
+export default OverflowMenu;

package/dist/components/navigation/overflowMenu/overflowMenu.js

@@ -0,0 +1,88 @@
+import { insert as a, createComponent as t, mergeProps as b, memo as s, effect as h, className as v, template as w } from "solid-js/web";
+import '../../../assets/styles/less/components/overflowMenu/overflowMenu.entry.css';/* empty css                                                                   */
+import { mergeProps as C, splitProps as _, createSignal as c, For as M, Show as P } from "solid-js";
+import i from "clsx";
+import { Button as k } from "../../inputs/button/button.js";
+import { Menu as I } from "../menu/menu.js";
+import { MenuItem as O } from "../menu/menuItem.js";
+import { Icon as S } from "../../base/icon/icon.js";
+var $ = /* @__PURE__ */ w("<span>");
+function j(m) {
+  const p = C({
+    icon: "more_vert"
+  }, m), [r] = _(p, ["items", "icon", "placement", "aria-label", "disabled", "class"]), [u, g] = c(null), [d, o] = c(!1), l = () => {
+    o(!1);
+  }, f = (n) => {
+    n.disabled || (n.onSelect?.(), l());
+  };
+  return (() => {
+    var n = $();
+    return a(n, t(k, {
+      ref: (e) => {
+        g(e);
+      },
+      variant: "text",
+      size: "small",
+      get icon() {
+        return r.icon;
+      },
+      get "aria-label"() {
+        return r["aria-label"] ?? "More actions";
+      },
+      "aria-haspopup": "menu",
+      get disabled() {
+        return !!r.disabled;
+      },
+      onClick: () => {
+        o((e) => !e);
+      }
+    }), null), a(n, t(I, b({
+      get isOpen() {
+        return d();
+      },
+      onClose: l,
+      get anchorElement() {
+        return u();
+      }
+    }, () => r.placement ? {
+      placement: r.placement
+    } : {}, {
+      get children() {
+        return t(M, {
+          get each() {
+            return r.items;
+          },
+          children: (e) => t(O, {
+            get class() {
+              return i({
+                "smwb-overflow-menu__item--danger": e.danger
+              });
+            },
+            get disabled() {
+              return e.disabled;
+            },
+            onClick: () => f(e),
+            get children() {
+              return [t(P, {
+                get when() {
+                  return e.icon;
+                },
+                get children() {
+                  return s(() => typeof e.icon == "string")() ? t(S, {
+                    get name() {
+                      return e.icon;
+                    }
+                  }) : e.icon;
+                }
+              }), s(() => e.label)];
+            }
+          })
+        });
+      }
+    })), null), h(() => v(n, i("smwb-overflow-menu", r.class))), n;
+  })();
+}
+export {
+  j as OverflowMenu
+};
+//# sourceMappingURL=overflowMenu.js.map

package/dist/components/navigation/overflowMenu/overflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflowMenu.js","sources":["../../../../src/components/navigation/overflowMenu/overflowMenu.tsx"],"sourcesContent":["import { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { Button } from \"../../inputs/button\";\nimport { Icon } from \"../../base/icon\";\nimport { Menu, MenuItem } from \"../menu\";\n\nexport interface OverflowMenuItem {\n  id: string;\n  label: string;\n  icon?: JSX.Element | string;\n  danger?: boolean;\n  disabled?: boolean;\n  onSelect?: () => void;\n}\n\nexport interface OverflowMenuProps {\n  items: OverflowMenuItem[];\n  /** Trigger icon name (default `more_vert`). */\n  icon?: string;\n  placement?: Placement;\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  class?: string;\n}\n\n/**\n * A one-shot kebab / overflow menu: a trigger icon button wired to a floating\n * `Menu` over an `items` array, with open/close state baked in. The card 3-dot\n * menu every app hand-builds (button + absolutely-positioned surface + open\n * state) collapses to passing an items list.\n */\nexport function OverflowMenu(props: OverflowMenuProps): JSX.Element {\n  const merged = mergeProps({ icon: \"more_vert\" }, props);\n  const [local] = splitProps(merged, [\"items\", \"icon\", \"placement\", \"aria-label\", \"disabled\", \"class\"]);\n\n  const [anchor, setAnchor] = createSignal<HTMLElement | null>(null);\n  const [open, setOpen] = createSignal(false);\n  const close = (): void => {\n    setOpen(false);\n  };\n\n  const onItemClick = (item: OverflowMenuItem): void => {\n    if (item.disabled) return;\n    item.onSelect?.();\n    close();\n  };\n\n  return (\n    <span class={cn(\"smwb-overflow-menu\", local.class)}>\n      <Button\n        ref={(el) => {\n          setAnchor(el as HTMLElement);\n        }}\n        variant=\"text\"\n        size=\"small\"\n        icon={local.icon}\n        aria-label={local[\"aria-label\"] ?? \"More actions\"}\n        aria-haspopup=\"menu\"\n        disabled={!!local.disabled}\n        onClick={() => {\n          setOpen((value) => !value);\n        }}\n      />\n      <Menu\n        isOpen={open()}\n        onClose={close}\n        anchorElement={anchor()}\n        {...(local.placement ? { placement: local.placement } : {})}\n      >\n        <For each={local.items}>\n          {(item) => (\n            <MenuItem\n              class={cn({ \"smwb-overflow-menu__item--danger\": item.danger })}\n              disabled={item.disabled}\n              onClick={() => onItemClick(item)}\n            >\n              <Show when={item.icon}>\n                {typeof item.icon === \"string\" ? <Icon name={item.icon} /> : (item.icon as JSX.Element)}\n              </Show>\n              {item.label}\n            </MenuItem>\n          )}\n        </For>\n      </Menu>\n    </span>\n  );\n}\n\nexport default OverflowMenu;\n"],"names":["OverflowMenu","props","merged","mergeProps","icon","local","splitProps","anchor","setAnchor","createSignal","open","setOpen","close","onItemClick","item","disabled","onSelect","_el$","_tmpl$","_$insert","_$createComponent","Button","ref","el","variant","size","onClick","value","Menu","_$mergeProps","isOpen","onClose","anchorElement","placement","children","For","each","items","MenuItem","cn","danger","Show","when","_$memo","Icon","name","label","_$effect","_$className","class"],"mappings":";;;;;;;;;AAiCO,SAASA,EAAaC,GAAuC;AAClE,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAAeH,CAAK,GAChD,CAACI,CAAK,IAAIC,EAAWJ,GAAQ,CAAC,SAAS,QAAQ,aAAa,cAAc,YAAY,OAAO,CAAC,GAE9F,CAACK,GAAQC,CAAS,IAAIC,EAAiC,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAa,EAAK,GACpCG,IAAQA,MAAY;AACxBD,IAAAA,EAAQ,EAAK;AAAA,EACf,GAEME,IAAcA,CAACC,MAAiC;AACpD,IAAIA,EAAKC,aACTD,EAAKE,WAAAA,GACLJ,EAAAA;AAAAA,EACF;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAM;AAAA,MAAAC,KACCC,CAAAA,MAAO;AACXf,QAAAA,EAAUe,CAAiB;AAAA,MAC7B;AAAA,MACAC,SAAO;AAAA,MACPC,MAAI;AAAA,MAAA,IACJrB,OAAI;AAAA,eAAEC,EAAMD;AAAAA,MAAI;AAAA,MAAA,IAAA,eAAA;AAAA,eACJC,EAAM,YAAY,KAAK;AAAA,MAAc;AAAA,MAAA,iBAAA;AAAA,MAAA,IAEjDU,WAAQ;AAAA,eAAE,CAAC,CAACV,EAAMU;AAAAA,MAAQ;AAAA,MAC1BW,SAASA,MAAM;AACbf,QAAAA,EAASgB,CAAAA,MAAU,CAACA,CAAK;AAAA,MAC3B;AAAA,IAAA,CAAC,GAAA,IAAA,GAAAR,EAAAF,GAAAG,EAEFQ,GAAIC,EAAA;AAAA,MAAA,IACHC,SAAM;AAAA,eAAEpB,EAAAA;AAAAA,MAAM;AAAA,MACdqB,SAASnB;AAAAA,MAAK,IACdoB,gBAAa;AAAA,eAAEzB,EAAAA;AAAAA,MAAQ;AAAA,IAAA,GAAA,MAClBF,EAAM4B,YAAY;AAAA,MAAEA,WAAW5B,EAAM4B;AAAAA,IAAAA,IAAc,IAAE;AAAA,MAAA,IAAAC,WAAA;AAAA,eAAAd,EAEzDe,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE/B,EAAMgC;AAAAA,UAAK;AAAA,UAAAH,UAClBpB,CAAAA,MAAIM,EACHkB,GAAQ;AAAA,YAAA,IAAA,QAAA;AAAA,qBACAC,EAAG;AAAA,gBAAE,oCAAoCzB,EAAK0B;AAAAA,cAAAA,CAAQ;AAAA,YAAC;AAAA,YAAA,IAC9DzB,WAAQ;AAAA,qBAAED,EAAKC;AAAAA,YAAQ;AAAA,YACvBW,SAASA,MAAMb,EAAYC,CAAI;AAAA,YAAC,IAAAoB,WAAA;AAAA,qBAAA,CAAAd,EAE/BqB,GAAI;AAAA,gBAAA,IAACC,OAAI;AAAA,yBAAE5B,EAAKV;AAAAA,gBAAI;AAAA,gBAAA,IAAA8B,WAAA;AAAA,yBAClBS,EAAA,MAAA,OAAO7B,EAAKV,QAAS,QAAQ,EAAA,IAAAgB,EAAIwB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE/B,EAAKV;AAAAA,oBAAI;AAAA,kBAAA,CAAA,IAAQU,EAAKV;AAAAA,gBAAoB;AAAA,cAAA,CAAA,GAAAuC,EAAA,MAExF7B,EAAKgC,KAAK,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAEd;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAA,IAAA,GAAAC,EAAA,MAAAC,EAAA/B,GAjCMsB,EAAG,sBAAsBlC,EAAM4C,KAAK,CAAC,CAAA,GAAAhC;AAAAA,EAAA,GAAA;AAsCtD;"}

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js

@@ -0,0 +1,143 @@
+import { addEventListener as P, use as E, insert as g, createComponent as o, effect as m, style as h, setStyleProperty as w, className as O, template as c } from "solid-js/web";
+import { mergeProps as W, splitProps as Y, createSignal as f, onMount as F, createMemo as _, Show as p, For as v, onCleanup as G } from "solid-js";
+import N from "clsx";
+import { createVirtualList as V } from "../../../primitives/createVirtualList.js";
+var j = /* @__PURE__ */ c("<div class=smwb-asset-grid__sizer style=position:relative><div class=smwb-asset-grid__band style=position:absolute;top:0;left:0;right:0>"), q = /* @__PURE__ */ c("<div>"), b = /* @__PURE__ */ c("<div class=smwb-asset-grid__plain>"), B = /* @__PURE__ */ c("<div class=smwb-asset-grid__skeleton>"), D = /* @__PURE__ */ c("<div class=smwb-asset-grid__empty>"), J = /* @__PURE__ */ c("<div class=smwb-asset-grid__row>");
+function Z(y) {
+  const x = W({
+    minColumn: 160,
+    gap: 8,
+    overscan: 2,
+    loadingCount: 12
+  }, y), [t] = Y(x, ["items", "renderItem", "minColumn", "rowHeight", "gap", "overscan", "loading", "loadingCount", "emptyLabel", "class", "style"]);
+  let l;
+  const [C, H] = f(0), [S, I] = f(0), [M, k] = f(!1);
+  F(() => {
+    if (!l || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => {
+      l && (H(l.clientWidth), I(l.clientHeight), k(!0));
+    });
+    r.observe(l), G(() => r.disconnect());
+  });
+  const u = _(() => {
+    const r = C();
+    return r <= 0 ? 1 : Math.max(1, Math.floor((r + t.gap) / (t.minColumn + t.gap)));
+  }), L = _(() => Math.ceil(t.items.length / u())), d = V({
+    itemCount: L,
+    itemHeight: () => t.rowHeight + t.gap,
+    viewportHeight: () => S() || 1,
+    overscan: t.overscan
+  }), R = _(() => {
+    const r = [];
+    for (let e = d.startIndex(); e < d.endIndex(); e++) r.push(e);
+    return r;
+  }), z = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${u()}, minmax(0, 1fr))`,
+    gap: `${t.gap}px`,
+    height: `${t.rowHeight}px`,
+    "margin-bottom": `${t.gap}px`
+  }), $ = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(auto-fill, minmax(${t.minColumn}px, 1fr))`,
+    gap: `${t.gap}px`,
+    "grid-auto-rows": `${t.rowHeight}px`
+  });
+  return (() => {
+    var r = q();
+    return P(r, "scroll", d.onScroll), E((e) => l = e, r), g(r, o(p, {
+      get when() {
+        return !t.loading;
+      },
+      get fallback() {
+        return (() => {
+          var e = b();
+          return g(e, o(v, {
+            get each() {
+              return Array.from({
+                length: t.loadingCount
+              });
+            },
+            children: () => (() => {
+              var n = B();
+              return m((s) => w(n, "height", `${t.rowHeight}px`)), n;
+            })()
+          })), m((n) => h(e, $(), n)), e;
+        })();
+      },
+      get children() {
+        return o(p, {
+          get when() {
+            return t.items.length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var e = D();
+              return g(e, () => t.emptyLabel), e;
+            })();
+          },
+          get children() {
+            return o(p, {
+              get when() {
+                return M();
+              },
+              get fallback() {
+                return (() => {
+                  var e = b();
+                  return g(e, o(v, {
+                    get each() {
+                      return t.items;
+                    },
+                    children: (n, s) => t.renderItem(n, s())
+                  })), m((n) => h(e, $(), n)), e;
+                })();
+              },
+              get children() {
+                var e = j(), n = e.firstChild;
+                return g(n, o(v, {
+                  get each() {
+                    return R();
+                  },
+                  children: (s) => (() => {
+                    var a = J();
+                    return g(a, o(v, {
+                      get each() {
+                        return Array.from({
+                          length: u()
+                        }, (i, A) => s * u() + A);
+                      },
+                      children: (i) => o(p, {
+                        get when() {
+                          return i < t.items.length;
+                        },
+                        get children() {
+                          return t.renderItem(t.items[i], i);
+                        }
+                      })
+                    })), m((i) => h(a, z(), i)), a;
+                  })()
+                })), m((s) => {
+                  var a = `${d.totalHeight()}px`, i = `translateY(${d.offsetY()}px)`;
+                  return a !== s.e && w(e, "height", s.e = a), i !== s.t && w(n, "transform", s.t = i), s;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), e;
+              }
+            });
+          }
+        });
+      }
+    })), m((e) => {
+      var n = N("smwb-asset-grid", t.class), s = t.style;
+      return n !== e.e && O(r, e.e = n), e.t = h(r, s, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+export {
+  Z as AssetGrid
+};
+//# sourceMappingURL=assetGrid.js.map

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetGrid.js","sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => JSX.Element;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: JSX.Element;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `createVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element {\n  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);\n  const [local] = splitProps(merged, [\n    \"items\",\n    \"renderItem\",\n    \"minColumn\",\n    \"rowHeight\",\n    \"gap\",\n    \"overscan\",\n    \"loading\",\n    \"loadingCount\",\n    \"emptyLabel\",\n    \"class\",\n    \"style\",\n  ]);\n\n  let viewportEl: HTMLDivElement | undefined;\n  const [width, setWidth] = createSignal(0);\n  const [height, setHeight] = createSignal(0);\n  const [ready, setReady] = createSignal(false);\n\n  onMount(() => {\n    if (!viewportEl || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      if (!viewportEl) return;\n      setWidth(viewportEl.clientWidth);\n      setHeight(viewportEl.clientHeight);\n      setReady(true);\n    });\n    ro.observe(viewportEl);\n    onCleanup(() => ro.disconnect());\n  });\n\n  const cols = createMemo(() => {\n    const w = width();\n    if (w <= 0) return 1;\n    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));\n  });\n  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));\n  const rowStride = (): number => local.rowHeight + local.gap;\n\n  const vl = createVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowStride,\n    viewportHeight: () => height() || 1,\n    overscan: local.overscan,\n  });\n\n  const visibleRows = createMemo(() => {\n    const out: number[] = [];\n    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);\n    return out;\n  });\n\n  const rowStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(${cols()}, minmax(0, 1fr))`,\n    gap: `${local.gap}px`,\n    height: `${local.rowHeight}px`,\n    \"margin-bottom\": `${local.gap}px`,\n  });\n\n  const plainStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,\n    gap: `${local.gap}px`,\n    \"grid-auto-rows\": `${local.rowHeight}px`,\n  });\n\n  return (\n    <div\n      ref={(el) => (viewportEl = el)}\n      class={cn(\"smwb-asset-grid\", local.class)}\n      style={local.style}\n      onScroll={vl.onScroll}\n    >\n      <Show\n        when={!local.loading}\n        fallback={\n          <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n            <For each={Array.from({ length: local.loadingCount })}>\n              {() => <div class=\"smwb-asset-grid__skeleton\" style={{ height: `${local.rowHeight}px` }} />}\n            </For>\n          </div>\n        }\n      >\n        <Show\n          when={local.items.length > 0}\n          fallback={<div class=\"smwb-asset-grid__empty\">{local.emptyLabel}</div>}\n        >\n          <Show\n            when={ready()}\n            fallback={\n              <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>\n              </div>\n            }\n          >\n            <div class=\"smwb-asset-grid__sizer\" style={{ height: `${vl.totalHeight()}px`, position: \"relative\" }}>\n              <div\n                class=\"smwb-asset-grid__band\"\n                style={{ position: \"absolute\", top: \"0\", left: \"0\", right: \"0\", transform: `translateY(${vl.offsetY()}px)` }}\n              >\n                <For each={visibleRows()}>\n                  {(row) => (\n                    <div class=\"smwb-asset-grid__row\" style={rowStyle()}>\n                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>\n                        {(index) => (\n                          <Show when={index < local.items.length}>\n                            {local.renderItem(local.items[index] as T, index)}\n                          </Show>\n                        )}\n                      </For>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","props","merged","mergeProps","minColumn","gap","overscan","loadingCount","local","splitProps","viewportEl","width","setWidth","createSignal","height","setHeight","ready","setReady","onMount","ResizeObserver","ro","clientWidth","clientHeight","observe","onCleanup","disconnect","cols","createMemo","w","Math","max","floor","rowCount","ceil","items","length","vl","createVirtualList","itemCount","itemHeight","rowStride","rowHeight","viewportHeight","visibleRows","out","row","startIndex","endIndex","push","rowStyle","display","plainStyle","_el$","_tmpl$2","_$addEventListener","onScroll","_$use","el","_$insert","_$createComponent","Show","when","loading","fallback","_el$4","_tmpl$3","For","each","Array","from","children","_el$5","_tmpl$4","_$effect","_$p","_$setStyleProperty","_$style","_el$6","_tmpl$5","emptyLabel","_el$7","item","index","renderItem","_el$2","_tmpl$","_el$3","firstChild","_el$8","_tmpl$6","_","c","_p$","_v$","totalHeight","_v$2","offsetY","e","t","undefined","_v$3","cn","class","_v$4","style","_$className"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js

@@ -0,0 +1,57 @@
+import { spread as g, mergeProps as n, insert as p, createComponent as o, template as f } from "solid-js/web";
+import { mergeProps as v, splitProps as h, For as b } from "solid-js";
+import C from "clsx";
+import { Chip as z } from "../chip/chip.js";
+var P = /* @__PURE__ */ f("<div>");
+function _(i) {
+  const a = v({
+    size: "medium",
+    color: "primary"
+  }, i), [e, c] = h(a, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), l = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], s = (t) => l().includes(t), u = (t) => {
+    if (e.multiple) {
+      const r = l(), m = r.includes(t) ? r.filter((d) => d !== t) : [...r, t];
+      e.onChange?.(m);
+    } else
+      e.onChange?.(t);
+  };
+  return (() => {
+    var t = P();
+    return g(t, n(c, {
+      role: "group",
+      get class() {
+        return C("smwb-chip-group", e.class);
+      }
+    }), !1, !0), p(t, o(b, {
+      get each() {
+        return e.options;
+      },
+      children: (r) => o(z, n({
+        get label() {
+          return r.label;
+        },
+        get size() {
+          return e.size;
+        },
+        get color() {
+          return e.color;
+        },
+        get selected() {
+          return s(r.value);
+        },
+        get variant() {
+          return s(r.value) ? "filled" : "outlined";
+        },
+        get disabled() {
+          return !!(e.disabled || r.disabled);
+        },
+        onClick: () => u(r.value)
+      }, () => r.icon ? {
+        icon: r.icon
+      } : {}))
+    })), t;
+  })();
+}
+export {
+  _ as ChipGroup
+};
+//# sourceMappingURL=chipGroup.js.map