@smwb/ui-react 2.0.0

package/dist/headless/components/dataDisplay/chat/utils.js

@@ -0,0 +1,61 @@
+import { CHAT_MESSAGE_DELIVERY_STATUSES as f, CHAT_EXPAND_LAYOUTS as l, CHAT_MESSAGE_STATUS_ICONS as o, CHAT_MESSAGE_STATUS_LABELS as a } from "./types.js";
+function i(e) {
+  return f.includes(e);
+}
+function c(e, t) {
+  const r = t == null ? void 0 : t[e];
+  if (r)
+    return r;
+  if (i(e))
+    return o[e];
+}
+function S(e) {
+  return i(e) ? a[e] : String(e);
+}
+function m(e) {
+  var t;
+  return (t = e.mimeType) != null && t.startsWith("image/") ? !0 : /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(e.name);
+}
+function h(e) {
+  if (!e)
+    return "";
+  const t = e instanceof Date ? e : new Date(e);
+  return Number.isNaN(t.getTime()) ? String(e) : new Intl.DateTimeFormat(void 0, {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(t);
+}
+function s(e) {
+  return e == null ? ["floating"] : e.length === 0 ? [] : l.filter((t) => e.includes(t));
+}
+function C(e, t) {
+  var r;
+  return t && t !== "closed" && e.includes(t) ? t : (r = e[0]) != null ? r : "floating";
+}
+function T(e, t) {
+  return s(e).filter(
+    (r) => r !== "closed" && r !== t
+  );
+}
+function A(e) {
+  return e.showCloseButton === !1 ? !1 : e.showCloseButton === !0 || e.overlayContext && e.floatingTrigger && !e.embedded && (e.effectiveLayout === "floating" || e.effectiveLayout === "fullHeight") ? !0 : !!(e.floatingTrigger && !e.embedded && e.effectiveLayout === "floating");
+}
+function E(e, t = {}) {
+  if (e.key !== "Enter")
+    return !1;
+  const { shiftEnterNewline: r = !0, ctrlEnterNewline: u = !0 } = t, n = e.ctrlKey || e.metaKey;
+  return !!(r && e.shiftKey && !n || u && n && !e.shiftKey);
+}
+export {
+  h as formatChatTimestamp,
+  T as getChatLayoutActions,
+  i as isChatMessageDeliveryStatus,
+  m as isImageAttachment,
+  C as pickInitialLayout,
+  s as resolveAllowedLayouts,
+  c as resolveChatMessageStatusIcon,
+  S as resolveChatMessageStatusLabel,
+  E as shouldComposerNewlineOnEnter,
+  A as shouldShowChatCloseButton
+};
+//# sourceMappingURL=utils.js.map

package/dist/headless/components/dataDisplay/chat/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/dataDisplay/chat/utils.ts"],"sourcesContent":["import {\n  ChatAttachment,\n  ChatLayoutMode,\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n  ChatMessageDeliveryStatus,\n  ChatMessageStatus,\n  ChatMessageStatusIcons,\n} from \"./types\";\n\nexport function isChatMessageDeliveryStatus(status: ChatMessageStatus): status is ChatMessageDeliveryStatus {\n  return CHAT_MESSAGE_DELIVERY_STATUSES.includes(status as ChatMessageDeliveryStatus);\n}\n\nexport function resolveChatMessageStatusIcon(\n  status: ChatMessageStatus,\n  icons?: ChatMessageStatusIcons & Record<string, string | undefined>\n): string | undefined {\n  const custom = icons?.[status];\n  if (custom) {\n    return custom;\n  }\n\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_ICONS[status];\n  }\n\n  return undefined;\n}\n\nexport function resolveChatMessageStatusLabel(status: ChatMessageStatus): string {\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_LABELS[status];\n  }\n\n  return String(status);\n}\n\nexport function isImageAttachment(attachment: ChatAttachment): boolean {\n  if (attachment.mimeType?.startsWith(\"image/\")) {\n    return true;\n  }\n\n  return /\\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(attachment.name);\n}\n\nexport function formatChatTimestamp(value?: string | Date): string {\n  if (!value) {\n    return \"\";\n  }\n\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport function resolveAllowedLayouts(input?: ChatLayoutMode[]): ChatLayoutMode[] {\n  if (input == null) {\n    return [\"floating\"];\n  }\n\n  if (input.length === 0) {\n    return [];\n  }\n\n  return CHAT_EXPAND_LAYOUTS.filter((mode) => input.includes(mode));\n}\n\nexport function pickInitialLayout(allowed: ChatLayoutMode[], preferred?: ChatLayoutMode): ChatLayoutMode {\n  if (preferred && preferred !== \"closed\" && allowed.includes(preferred)) {\n    return preferred;\n  }\n\n  return allowed[0] ?? \"floating\";\n}\n\nexport function getChatLayoutActions(\n  allowedLayouts: ChatLayoutMode[],\n  currentLayout?: ChatLayoutMode\n): Exclude<ChatLayoutMode, \"closed\">[] {\n  return resolveAllowedLayouts(allowedLayouts).filter(\n    (mode): mode is Exclude<ChatLayoutMode, \"closed\"> => mode !== \"closed\" && mode !== currentLayout\n  );\n}\n\nexport function shouldShowChatCloseButton(options: {\n  floatingTrigger?: boolean;\n  embedded?: boolean;\n  overlayContext?: boolean;\n  effectiveLayout?: ChatLayoutMode;\n  showCloseButton?: boolean;\n}): boolean {\n  if (options.showCloseButton === false) {\n    return false;\n  }\n\n  if (options.showCloseButton === true) {\n    return true;\n  }\n\n  if (\n    options.overlayContext &&\n    options.floatingTrigger &&\n    !options.embedded &&\n    (options.effectiveLayout === \"floating\" || options.effectiveLayout === \"fullHeight\")\n  ) {\n    return true;\n  }\n\n  return Boolean(options.floatingTrigger && !options.embedded && options.effectiveLayout === \"floating\");\n}\n\nexport interface ChatComposerNewlineOptions {\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n}\n\nexport function shouldComposerNewlineOnEnter(\n  event: { key: string; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },\n  options: ChatComposerNewlineOptions = {}\n): boolean {\n  if (event.key !== \"Enter\") {\n    return false;\n  }\n\n  const { shiftEnterNewline = true, ctrlEnterNewline = true } = options;\n  const isCtrl = event.ctrlKey || event.metaKey;\n\n  if (shiftEnterNewline && event.shiftKey && !isCtrl) {\n    return true;\n  }\n\n  if (ctrlEnterNewline && isCtrl && !event.shiftKey) {\n    return true;\n  }\n\n  return false;\n}\n"],"names":["isChatMessageDeliveryStatus","status","CHAT_MESSAGE_DELIVERY_STATUSES","resolveChatMessageStatusIcon","icons","custom","CHAT_MESSAGE_STATUS_ICONS","resolveChatMessageStatusLabel","CHAT_MESSAGE_STATUS_LABELS","isImageAttachment","attachment","_a","formatChatTimestamp","value","date","resolveAllowedLayouts","input","CHAT_EXPAND_LAYOUTS","mode","pickInitialLayout","allowed","preferred","getChatLayoutActions","allowedLayouts","currentLayout","shouldShowChatCloseButton","options","shouldComposerNewlineOnEnter","event","shiftEnterNewline","ctrlEnterNewline","isCtrl"],"mappings":";AAYO,SAASA,EAA4BC,GAAgE;AAC1G,SAAOC,EAA+B,SAASD,CAAmC;AACpF;AAEO,SAASE,EACdF,GACAG,GACoB;AACpB,QAAMC,IAASD,KAAA,gBAAAA,EAAQH;AACvB,MAAII;AACF,WAAOA;AAGT,MAAIL,EAA4BC,CAAM;AACpC,WAAOK,EAA0BL,CAAM;AAI3C;AAEO,SAASM,EAA8BN,GAAmC;AAC/E,SAAID,EAA4BC,CAAM,IAC7BO,EAA2BP,CAAM,IAGnC,OAAOA,CAAM;AACtB;AAEO,SAASQ,EAAkBC,GAAqC;;AACrE,UAAIC,IAAAD,EAAW,aAAX,QAAAC,EAAqB,WAAW,YAC3B,KAGF,mCAAmC,KAAKD,EAAW,IAAI;AAChE;AAEO,SAASE,EAAoBC,GAA+B;AACjE,MAAI,CAACA;AACH,WAAO;AAGT,QAAMC,IAAOD,aAAiB,OAAOA,IAAQ,IAAI,KAAKA,CAAK;AAE3D,SAAI,OAAO,MAAMC,EAAK,QAAA,CAAS,IACtB,OAAOD,CAAK,IAGd,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA,CACT,EAAE,OAAOC,CAAI;AAChB;AAEO,SAASC,EAAsBC,GAA4C;AAChF,SAAIA,KAAS,OACJ,CAAC,UAAU,IAGhBA,EAAM,WAAW,IACZ,CAAA,IAGFC,EAAoB,OAAO,CAACC,MAASF,EAAM,SAASE,CAAI,CAAC;AAClE;AAEO,SAASC,EAAkBC,GAA2BC,GAA4C;;AACvG,SAAIA,KAAaA,MAAc,YAAYD,EAAQ,SAASC,CAAS,IAC5DA,KAGFV,IAAAS,EAAQ,CAAC,MAAT,OAAAT,IAAc;AACvB;AAEO,SAASW,EACdC,GACAC,GACqC;AACrC,SAAOT,EAAsBQ,CAAc,EAAE;AAAA,IAC3C,CAACL,MAAoDA,MAAS,YAAYA,MAASM;AAAA,EAAA;AAEvF;AAEO,SAASC,EAA0BC,GAM9B;AACV,SAAIA,EAAQ,oBAAoB,KACvB,KAGLA,EAAQ,oBAAoB,MAK9BA,EAAQ,kBACRA,EAAQ,mBACR,CAACA,EAAQ,aACRA,EAAQ,oBAAoB,cAAcA,EAAQ,oBAAoB,gBAEhE,KAGF,GAAQA,EAAQ,mBAAmB,CAACA,EAAQ,YAAYA,EAAQ,oBAAoB;AAC7F;AAOO,SAASC,EACdC,GACAF,IAAsC,IAC7B;AACT,MAAIE,EAAM,QAAQ;AAChB,WAAO;AAGT,QAAM,EAAE,mBAAAC,IAAoB,IAAM,kBAAAC,IAAmB,OAASJ,GACxDK,IAASH,EAAM,WAAWA,EAAM;AAMtC,SAJI,GAAAC,KAAqBD,EAAM,YAAY,CAACG,KAIxCD,KAAoBC,KAAU,CAACH,EAAM;AAK3C;"}

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

@@ -0,0 +1,98 @@
+import { jsx as t, jsxs as E, Fragment as F } from "react/jsx-runtime";
+import v from "react";
+import I from "clsx";
+import { Ripple as K } from "../../base/ripple/ripple.js";
+import { Icon as q } from "../../base/icon/icon.js";
+const S = v.forwardRef(function({
+  label: N,
+  className: x,
+  deleteIcon: l,
+  icon: m,
+  onDelete: r,
+  onMouseDown: n,
+  onDeleteMouseDown: c,
+  asLink: y,
+  href: o,
+  target: $ = "_blank",
+  selected: g,
+  variant: j = "filled",
+  size: z = "medium",
+  color: d = "default",
+  disabled: i = !1,
+  onClick: a,
+  deleteAriaLabel: B = "Remove",
+  ...p
+}, f) {
+  const b = v.useRef(null), h = (e) => {
+    n == null || n(e);
+  }, u = (e) => {
+    var R;
+    i || (R = b.current) == null || R.onRipple(e);
+  }, k = (e) => {
+    c == null || c(e), e.stopPropagation();
+  }, w = I(
+    "smwb-chip",
+    `smwb-${j}`,
+    `smwb-chip_size-${z}`,
+    d !== "default" && `smwb-chip_color-${d}`,
+    x,
+    { "smwb-disabled": i, "smwb-selected": g }
+  ), _ = /* @__PURE__ */ E(F, { children: [
+    m && /* @__PURE__ */ t("span", { className: "smwb-chip__icon", children: m }),
+    /* @__PURE__ */ t("span", { className: "smwb-chip__label", children: N }),
+    !!r && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: "smwb-chip__delete-icon",
+        "aria-label": B,
+        disabled: i,
+        onClick: r,
+        onMouseDown: k,
+        children: l || /* @__PURE__ */ t(q, { name: "cancel", size: 18, fill: 1 })
+      }
+    ),
+    /* @__PURE__ */ t(K, { actionRef: b })
+  ] });
+  if (y && o)
+    return /* @__PURE__ */ t(
+      "a",
+      {
+        ref: f,
+        "data-testid": "chip-link",
+        className: w,
+        href: o,
+        onMouseDown: h,
+        onPointerDown: u,
+        target: $,
+        rel: "noreferrer",
+        ...p,
+        children: _
+      }
+    );
+  const s = !!a && !i;
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: f,
+      "data-testid": "chip",
+      className: w,
+      role: s ? "button" : void 0,
+      tabIndex: s ? 0 : void 0,
+      "aria-disabled": i || void 0,
+      onClick: s ? a : void 0,
+      onKeyDown: s ? (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a == null || a());
+      } : void 0,
+      onMouseDown: h,
+      onPointerDown: u,
+      ...p,
+      children: _
+    }
+  );
+});
+export {
+  S as Chip,
+  S as default
+};
+//# sourceMappingURL=chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  className?: string;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: React.SyntheticEvent) => void;\n  icon?: React.ReactNode;\n  deleteIcon?: React.ReactNode;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: React.MouseEventHandler;\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}\n\nexport const Chip = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, ChipProps>(function Chip(\n  {\n    label,\n    className,\n    deleteIcon,\n    icon,\n    onDelete,\n    onMouseDown: onMouseDownProp,\n    onDeleteMouseDown: onDeleteMouseDownProp,\n    asLink,\n    href,\n    target = \"_blank\",\n    selected,\n    variant = \"filled\",\n    size = \"medium\",\n    color = \"default\",\n    disabled = false,\n    onClick,\n    deleteAriaLabel = \"Remove\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown = (event: React.MouseEvent) => {\n    onDeleteMouseDownProp?.(event);\n    event.stopPropagation();\n  };\n\n  const classes = cn(\n    \"smwb-chip\",\n    `smwb-${variant}`,\n    `smwb-chip_size-${size}`,\n    color !== \"default\" && `smwb-chip_color-${color}`,\n    className,\n    { \"smwb-disabled\": disabled, \"smwb-selected\": selected }\n  );\n\n  const deleteBtn = !!onDelete && (\n    <button\n      type=\"button\"\n      className=\"smwb-chip__delete-icon\"\n      aria-label={deleteAriaLabel}\n      disabled={disabled}\n      onClick={onDelete}\n      onMouseDown={onDeleteMouseDown}\n    >\n      {deleteIcon ? deleteIcon : <Icon name=\"cancel\" size={18} fill={1} />}\n    </button>\n  );\n\n  const inner = (\n    <>\n      {icon && <span className=\"smwb-chip__icon\">{icon}</span>}\n      <span className=\"smwb-chip__label\">{label}</span>\n      {deleteBtn}\n      <Ripple actionRef={rippleRef} />\n    </>\n  );\n\n  if (asLink && href) {\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        data-testid=\"chip-link\"\n        className={classes}\n        href={href}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        target={target}\n        rel=\"noreferrer\"\n        {...rest}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  const clickable = !!onClick && !disabled;\n\n  return (\n    <span\n      ref={ref}\n      data-testid=\"chip\"\n      className={classes}\n      role={clickable ? \"button\" : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={\n        clickable\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.();\n              }\n            }\n          : undefined\n      }\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {inner}\n    </span>\n  );\n});\n\nexport default Chip;\n"],"names":["Chip","React","label","className","deleteIcon","icon","onDelete","onMouseDownProp","onDeleteMouseDownProp","asLink","href","target","selected","variant","size","color","disabled","onClick","deleteAriaLabel","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","onDeleteMouseDown","classes","cn","inner","jsxs","Fragment","jsx","Icon","Ripple","clickable"],"mappings":";;;;;AA4BO,MAAMA,IAAOC,EAAM,WAA2D,SACnF;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAaC;AAAA,EACb,mBAAmBC;AAAA,EACnB,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYpB,EAAM,OAAyB,IAAI,GAE/CqB,IAAc,CAACC,MAAiE;AACpF,IAAAhB,KAAA,QAAAA,EAAkBgB;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAmE;;AACxF,IAAKP,MACHS,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAEhC,GAEMG,IAAoB,CAACH,MAA4B;AACrD,IAAAf,KAAA,QAAAA,EAAwBe,IACxBA,EAAM,gBAAA;AAAA,EACR,GAEMI,IAAUC;AAAA,IACd;AAAA,IACA,QAAQf,CAAO;AAAA,IACf,kBAAkBC,CAAI;AAAA,IACtBC,MAAU,aAAa,mBAAmBA,CAAK;AAAA,IAC/CZ;AAAA,IACA,EAAE,iBAAiBa,GAAU,iBAAiBJ,EAAA;AAAA,EAAS,GAgBnDiB,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA1B,KAAQ,gBAAA2B,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA3B,GAAK;AAAA,IACjD,gBAAA2B,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA9B,GAAM;AAAA,IAhB5B,CAAC,CAACI,KAClB,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAYd;AAAA,QACZ,UAAAF;AAAA,QACA,SAASV;AAAA,QACT,aAAaoB;AAAA,QAEZ,UAAAtB,KAA0B,gBAAA4B,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,MAAM,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IASlE,gBAAAD,EAACE,GAAA,EAAO,WAAWb,EAAA,CAAW;AAAA,EAAA,GAChC;AAGF,MAAIZ,KAAUC;AACZ,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,eAAY;AAAA,QACZ,WAAWO;AAAA,QACX,MAAAjB;AAAA,QACA,aAAAY;AAAA,QACA,eAAAE;AAAA,QACA,QAAAb;AAAA,QACA,KAAI;AAAA,QACH,GAAGQ;AAAA,QAEH,UAAAU;AAAA,MAAA;AAAA,IAAA;AAKP,QAAMM,IAAY,CAAC,CAAClB,KAAW,CAACD;AAEhC,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWO;AAAA,MACX,MAAMQ,IAAY,WAAW;AAAA,MAC7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,iBAAenB,KAAY;AAAA,MAC3B,SAASmB,IAAYlB,IAAU;AAAA,MAC/B,WACEkB,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFlB,KAAA,QAAAA;AAAA,MAEJ,IACA;AAAA,MAEN,aAAAK;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAAU;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,173 @@
+import { jsxs as t, jsx as n, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as T, useState as I, useEffect as R } from "react";
+import K from "clsx";
+import { createPortal as U } from "react-dom";
+import { Button as p } from "../../inputs/button/button.js";
+import { Icon as u } from "../../base/icon/icon.js";
+import { useControllableState as V } from "../../../hooks/useControllableState.js";
+import { useSafeLayoutEffect as q } from "../../../hooks/useSafeLayoutEffect.js";
+const G = {
+  expandRow: "Expand to full row",
+  collapseRow: "Collapse to grid",
+  expandFullscreen: "Expand to fullscreen",
+  closeFullscreen: "Close fullscreen",
+  placeholder: "Panel is open in fullscreen",
+  placeholderClose: "Close"
+}, N = (o, i) => typeof o == "function" ? o(i) : o, H = (o, i) => typeof o == "function" ? o(i) : o, ee = T(function({
+  className: i,
+  header: m,
+  mode: g,
+  defaultMode: k = "tile",
+  onModeChange: E,
+  disableExpand: f = !1,
+  noControls: z = !1,
+  renderControls: w,
+  closeOnOutsideClick: L = !0,
+  closeOnEsc: x = !0,
+  labels: P,
+  children: b
+}, S) {
+  const [B, s] = V({
+    value: g,
+    defaultValue: k,
+    onChange: E
+  }), l = { ...G, ...P }, [_, D] = I();
+  q(() => {
+    D(document.body);
+  }, []);
+  const r = f ? "tile" : B, a = r === "row", c = r === "fullscreen", v = () => s((e) => e === "row" ? "tile" : "row"), h = () => s("fullscreen"), y = () => s("tile"), j = (e) => ({
+    mode: r,
+    isFullscreen: e,
+    isFullRow: e ? !1 : a,
+    setMode: s,
+    toggleRow: v,
+    openFullscreen: h,
+    closeFullscreen: y,
+    labels: l
+  }), A = (e) => e ? /* @__PURE__ */ n(
+    p,
+    {
+      type: "button",
+      variant: "outlined",
+      size: "small",
+      "aria-label": l.closeFullscreen,
+      title: l.closeFullscreen,
+      onClick: y,
+      "data-testid": "expansion-panel-close",
+      icon: /* @__PURE__ */ n(u, { name: "close", size: 18 })
+    }
+  ) : /* @__PURE__ */ t(C, { children: [
+    /* @__PURE__ */ n(
+      p,
+      {
+        type: "button",
+        variant: "outlined",
+        size: "small",
+        "aria-pressed": a,
+        "aria-label": a ? l.collapseRow : l.expandRow,
+        title: a ? l.collapseRow : l.expandRow,
+        onClick: v,
+        "data-testid": "expansion-panel-row",
+        icon: /* @__PURE__ */ n(u, { name: a ? "grid_view" : "table_rows", size: 18 })
+      }
+    ),
+    /* @__PURE__ */ n(
+      p,
+      {
+        type: "button",
+        variant: "outlined",
+        size: "small",
+        "aria-label": l.expandFullscreen,
+        title: l.expandFullscreen,
+        onClick: h,
+        "data-testid": "expansion-panel-fullscreen",
+        icon: /* @__PURE__ */ n(u, { name: "open_in_full", size: 18 })
+      }
+    )
+  ] }), F = (e) => {
+    if (f || z)
+      return null;
+    const d = w ? H(w, j(e)) : A(e);
+    return d ? /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__controls", children: d }) : null;
+  };
+  R(() => {
+    if (!c)
+      return;
+    const e = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = e;
+    };
+  }, [c]), R(() => {
+    if (!c || !x)
+      return;
+    const e = (d) => {
+      d.key === "Escape" && s("tile");
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [c, x, s]);
+  const M = /* @__PURE__ */ t(
+    "div",
+    {
+      ref: S,
+      className: K("smwb-expansion-panel", { "smwb-expansion-panel_row": a }, i),
+      "data-testid": "expansion-panel",
+      children: [
+        /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__head", children: [
+          /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__header", children: m }),
+          F(!1)
+        ] }),
+        /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__body", children: N(b, {
+          mode: r,
+          isFullscreen: !1,
+          isFullRow: a
+        }) })
+      ]
+    }
+  );
+  return !c || !_ ? M : /* @__PURE__ */ t(C, { children: [
+    /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__placeholder", "data-testid": "expansion-panel-placeholder", children: [
+      /* @__PURE__ */ n("span", { children: l.placeholder }),
+      /* @__PURE__ */ n(
+        p,
+        {
+          type: "button",
+          variant: "outlined",
+          size: "small",
+          label: l.placeholderClose,
+          onClick: () => s("tile")
+        }
+      )
+    ] }),
+    U(
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: "smwb-expansion-panel__overlay smwb-dark",
+          role: "dialog",
+          "aria-modal": "true",
+          "data-testid": "expansion-panel-overlay",
+          onClick: L ? (e) => {
+            e.target === e.currentTarget && s("tile");
+          } : void 0,
+          children: /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__dialog", children: [
+            /* @__PURE__ */ t("div", { className: "smwb-expansion-panel__head", children: [
+              /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__header", children: m }),
+              F(!0)
+            ] }),
+            /* @__PURE__ */ n("div", { className: "smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen", children: N(b, {
+              mode: r,
+              isFullscreen: !0,
+              isFullRow: !1
+            }) })
+          ] })
+        }
+      ),
+      _
+    )
+  ] });
+});
+export {
+  ee as ExpansionPanel,
+  ee as default
+};
+//# sourceMappingURL=expansionPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expansionPanel.js","sources":["../../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useState } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  /** Tooltip/aria for the control that expands a tile to a full grid row. */\n  expandRow?: string;\n  /** Tooltip/aria for the control that collapses a full row back to a tile. */\n  collapseRow?: string;\n  /** Tooltip/aria for the control that opens the panel fullscreen. */\n  expandFullscreen?: string;\n  /** Tooltip/aria for the control that closes fullscreen. */\n  closeFullscreen?: string;\n  /** Text shown in the original slot while the panel is fullscreen. */\n  placeholder?: string;\n  /** Label of the button in the placeholder that closes fullscreen. */\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 = ReactNode | ((ctx: ExpansionPanelRenderContext) => ReactNode);\ntype ExpansionPanelControls = ReactNode | ((ctx: ExpansionPanelControlsContext) => ReactNode);\n\nexport interface ExpansionPanelProps {\n  className?: string;\n  /** Content of the panel header (left side of the control bar). */\n  header?: ReactNode;\n  /** Controlled layout mode. */\n  mode?: ExpansionMode;\n  /** Initial mode for the uncontrolled component. */\n  defaultMode?: ExpansionMode;\n  /** Fired with the next mode whenever it changes. */\n  onModeChange?: (mode: ExpansionMode) => void;\n  /** Render the panel as a plain card without row/fullscreen controls. */\n  disableExpand?: boolean;\n  /** Hide the built-in control bar (consumer drives `mode` itself). */\n  noControls?: boolean;\n  /** Replace the built-in row/fullscreen controls with a custom node or render prop. */\n  renderControls?: ExpansionPanelControls;\n  /** Close fullscreen when the backdrop is clicked. Default: true. */\n  closeOnOutsideClick?: boolean;\n  /** Close fullscreen when Escape is pressed. Default: true. */\n  closeOnEsc?: boolean;\n  /** Accessible labels / tooltips for the built-in controls. */\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\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\nconst resolveChildren = (children: ExpansionPanelChildren, ctx: ExpansionPanelRenderContext): ReactNode =>\n  typeof children === \"function\" ? children(ctx) : children;\n\nconst resolveControls = (controls: ExpansionPanelControls, ctx: ExpansionPanelControlsContext): ReactNode =>\n  typeof controls === \"function\" ? controls(ctx) : controls;\n\nexport const ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(function ExpansionPanel(\n  {\n    className,\n    header,\n    mode: modeProp,\n    defaultMode = \"tile\",\n    onModeChange,\n    disableExpand = false,\n    noControls = false,\n    renderControls,\n    closeOnOutsideClick = true,\n    closeOnEsc = true,\n    labels,\n    children,\n  },\n  ref\n) {\n  const [mode, setMode] = useControllableState<ExpansionMode>({\n    value: modeProp,\n    defaultValue: defaultMode,\n    onChange: onModeChange,\n  });\n\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // `disableExpand` renders a plain card regardless of the requested mode,\n  // without mutating state — works in both controlled and uncontrolled use.\n  const effectiveMode: ExpansionMode = disableExpand ? \"tile\" : mode;\n  const isFullRow = effectiveMode === \"row\";\n  const isFullscreen = effectiveMode === \"fullscreen\";\n\n  const toggleRow = () => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = () => setMode(\"fullscreen\");\n  const closeFullscreen = () => 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: l,\n  });\n\n  const defaultControls = (overlay: boolean) => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.closeFullscreen}\n          title={l.closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\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 ? l.collapseRow : l.expandRow}\n          title={isFullRow ? l.collapseRow : l.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={l.expandFullscreen}\n          title={l.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 renderControlBar = (overlay: boolean) => {\n    if (disableExpand || noControls) {\n      return null;\n    }\n\n    const content = renderControls\n      ? resolveControls(renderControls, controlsContext(overlay))\n      : defaultControls(overlay);\n\n    if (!content) {\n      return null;\n    }\n\n    return <div className=\"smwb-expansion-panel__controls\">{content}</div>;\n  };\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      return;\n    }\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen || !closeOnEsc) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isFullscreen, closeOnEsc, setMode]);\n\n  const card = (\n    <div\n      ref={ref}\n      className={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow }, className)}\n      data-testid=\"expansion-panel\"\n    >\n      <div className=\"smwb-expansion-panel__head\">\n        <div className=\"smwb-expansion-panel__header\">{header}</div>\n        {renderControlBar(false)}\n      </div>\n      <div className=\"smwb-expansion-panel__body\">\n        {resolveChildren(children, {\n          mode: effectiveMode,\n          isFullscreen: false,\n          isFullRow,\n        })}\n      </div>\n    </div>\n  );\n\n  if (!isFullscreen || !domRoot) {\n    return card;\n  }\n\n  return (\n    <>\n      <div className=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n        <span>{l.placeholder}</span>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          label={l.placeholderClose}\n          onClick={() => setMode(\"tile\")}\n        />\n      </div>\n      {createPortal(\n        <div\n          className=\"smwb-expansion-panel__overlay smwb-dark\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          data-testid=\"expansion-panel-overlay\"\n          onClick={\n            closeOnOutsideClick\n              ? (e) => {\n                  if (e.target === e.currentTarget) {\n                    setMode(\"tile\");\n                  }\n                }\n              : undefined\n          }\n        >\n          <div className=\"smwb-expansion-panel__dialog\">\n            <div className=\"smwb-expansion-panel__head\">\n              <div className=\"smwb-expansion-panel__header\">{header}</div>\n              {renderControlBar(true)}\n            </div>\n            <div className=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">\n              {resolveChildren(children, {\n                mode: effectiveMode,\n                isFullscreen: true,\n                isFullRow: false,\n              })}\n            </div>\n          </div>\n        </div>,\n        domRoot\n      )}\n    </>\n  );\n});\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","resolveChildren","children","ctx","resolveControls","controls","ExpansionPanel","forwardRef","className","header","modeProp","defaultMode","onModeChange","disableExpand","noControls","renderControls","closeOnOutsideClick","closeOnEsc","labels","ref","mode","setMode","useControllableState","domRoot","setDomRoot","useState","useSafeLayoutEffect","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","closeFullscreen","controlsContext","overlay","defaultControls","jsx","Button","Icon","jsxs","Fragment","renderControlBar","content","useEffect","prev","onKeyDown","event","card","cn","createPortal"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import s from "clsx";
+import { ImagesListContext as n } from "./imagesListContext.js";
+const x = f(function({ className: t, children: l, gap: r = 4, cols: i = 3, rowsHeight: m = 0, variant: e = "default", "aria-label": o, id: c }, d) {
+  return /* @__PURE__ */ a(n.Provider, { value: { rowsHeight: m, variant: e }, children: /* @__PURE__ */ a("div", { className: s("smwb-gallery", t), "data-testid": "images-list", ref: d, id: c, children: /* @__PURE__ */ a(
+    "ul",
+    {
+      "aria-label": o,
+      className: s("smwb-gallery__list", `smwb-${e}`),
+      style: { "--cols-count": i, "--gap": `${r}px` },
+      children: l
+    }
+  ) }) });
+});
+export {
+  x as ImagesList,
+  x as default
+};
+//# sourceMappingURL=imagesList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imagesList.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\n\nexport interface ImagesListProps {\n  className?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  /** Accessible label for the image list. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ImagesList = forwardRef<HTMLDivElement, PropsWithChildren<ImagesListProps>>(function ImagesList(\n  { className, children, gap = 4, cols = 3, rowsHeight = 0, variant = \"default\", \"aria-label\": ariaLabel, id },\n  ref\n) {\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight, variant }}>\n      <div className={cn(\"smwb-gallery\", className)} data-testid=\"images-list\" ref={ref} id={id}>\n        <ul\n          aria-label={ariaLabel}\n          className={cn(\"smwb-gallery__list\", `smwb-${variant}`)}\n          style={{ \"--cols-count\": cols, \"--gap\": `${gap}px` } as CSSProperties}\n        >\n          {children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n});\n\nexport default ImagesList;\n"],"names":["ImagesList","forwardRef","className","children","gap","cols","rowsHeight","variant","ariaLabel","id","ref","ImagesListContext","cn","jsx"],"mappings":";;;;AAeO,MAAMA,IAAaC,EAA+D,SACvF,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,IAAM,GAAG,MAAAC,IAAO,GAAG,YAAAC,IAAa,GAAG,SAAAC,IAAU,WAAW,cAAcC,GAAW,IAAAC,EAAA,GACxGC,GACA;AACA,2BACGC,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAL,GAAY,SAAAC,EAAA,GAC/C,4BAAC,OAAA,EAAI,WAAWK,EAAG,gBAAgBV,CAAS,GAAG,eAAY,eAAc,KAAAQ,GAAU,IAAAD,GACjF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYL;AAAA,MACZ,WAAWI,EAAG,sBAAsB,QAAQL,CAAO,EAAE;AAAA,MACrD,OAAO,EAAE,gBAAgBF,GAAM,SAAS,GAAGD,CAAG,KAAA;AAAA,MAE7C,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;"}

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

@@ -0,0 +1,8 @@
+import t from "react";
+const o = t.createContext({
+  rowsHeight: 0
+});
+export {
+  o as ImagesListContext
+};
+//# sourceMappingURL=imagesListContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListContext.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListContext.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const ImagesListContext = React.createContext<{\n  rowsHeight?: number;\n  variant?: \"woven\" | \"masonry\" | \"default\" | null;\n}>({\n  rowsHeight: 0,\n});\n"],"names":["ImagesListContext","React"],"mappings":";AAEO,MAAMA,IAAoBC,EAAM,cAGpC;AAAA,EACD,YAAY;AACd,CAAC;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js

@@ -0,0 +1,54 @@
+import { jsxs as n, Fragment as _, jsx as e } from "react/jsx-runtime";
+import { useContext as y, useEffect as u } from "react";
+import t from "clsx";
+import { useModalState as h } from "../../../../hooks/useModalState.js";
+import { ImagesListContext as v } from "../imagesListContext.js";
+import x from "./imagesListItemModal.js";
+const j = ({
+  className: s,
+  src: i,
+  rounded: o,
+  itemBarContent: l,
+  cols: d = 1,
+  rows: a = 1,
+  itemBarPlacement: g = "bottom",
+  alt: c = "image"
+}) => {
+  const { isOpen: m, onClose: b, onOpen: p } = h(), { rowsHeight: r, variant: w } = y(v);
+  u(() => {
+    m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
+  }, [m]);
+  const f = {
+    height: r ? `${r * a}px` : "",
+    gridRowEnd: `span ${a}`,
+    gridColumnEnd: `span ${d}`
+  };
+  return /* @__PURE__ */ n(_, { children: [
+    /* @__PURE__ */ e(
+      "li",
+      {
+        "data-testid": "images-list-item",
+        className: t("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
+        onClick: p,
+        style: f,
+        children: /* @__PURE__ */ n("div", { className: "smwb-gallery-item__inner", children: [
+          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: t("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
+          l && /* @__PURE__ */ e(
+            "div",
+            {
+              className: t("smwb-gallery-item__bar", s, `smwb-${g}`, {
+                "smwb-rounded": o
+              }),
+              children: l
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(x, { src: i, onClose: b, isOpen: m })
+  ] });
+};
+export {
+  j as default
+};
+//# sourceMappingURL=imagesListItem.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    height: rowsHeight ? `${rowsHeight * rows}px` : \"\",\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;AAkBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAE5D,EAAAC,EAAU,MAAM;AACd,IAAIR,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW;AAAA,EAEnC,GAAG,CAACA,CAAM,CAAC;AAEX,QAAMS,IAAuB;AAAA,IAC3B,QAAQL,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BrB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAO;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAAnB,GAAU,KAAKM,KAAO,SAAS,WAAWc,EAAG,0BAA0B,EAAE,gBAAgBnB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BrB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAiB,EAACE,GAAA,EAAoB,KAAArB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import { createPortal as n } from "react-dom";
+import { CSSTransition as l } from "react-transition-group";
+const g = ({ src: o, onClose: a, isOpen: t }) => {
+  const m = i(null);
+  return n(
+    /* @__PURE__ */ e(
+      l,
+      {
+        timeout: 100,
+        in: t,
+        classNames: {
+          enterActive: "smwb-image-modal__overlay-enter-active",
+          enterDone: "smwb-image-modal__overlay-enter-done"
+        },
+        mountOnEnter: !0,
+        unmountOnExit: !0,
+        nodeRef: m,
+        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: a, ref: m, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ e("img", { src: o, alt: "", className: "smwb-image-modal__img" }) }) })
+      }
+    ),
+    document.body
+  );
+};
+export {
+  g as default
+};
+//# sourceMappingURL=imagesListItemModal.js.map

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    document.body\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","createPortal","jsx","CSSTransition","e"],"mappings":";;;;AAUA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI;AAC3C,SAAOC;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIL;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAASL,GAAS,KAAKE,GAChE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAN,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}

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

@@ -0,0 +1,24 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import n from "clsx";
+const p = a(function({ className: t, dense: i, subheader: s, children: l, ...r }, e) {
+  return /* @__PURE__ */ m(
+    "ul",
+    {
+      ref: e,
+      "data-testid": "list",
+      role: "list",
+      className: n("smwb-list", { "smwb-list_dense": i }, t),
+      ...r,
+      children: [
+        s ? /* @__PURE__ */ o("li", { className: "smwb-list__subheader", children: s }) : null,
+        l
+      ]
+    }
+  );
+});
+export {
+  p as List,
+  p as default
+};
+//# sourceMappingURL=list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid=\"list\"\n      role=\"list\"\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","props","ref","jsxs","cn","jsx"],"mappings":";;;AAWO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAWE,EAAG,aAAa,EAAE,mBAAmBN,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF,IAAY,gBAAAM,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/headless/components/dataDisplay/list/listItem.js

@@ -0,0 +1,37 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import c from "clsx";
+const N = b(function({ className: r, children: _, disabled: s, selected: m, dense: d, divider: n, startAdornment: l, endAdornment: o, onClick: t }, w) {
+  const a = !!t && !s;
+  return /* @__PURE__ */ f(
+    "li",
+    {
+      ref: w,
+      role: "listitem",
+      tabIndex: a ? 0 : void 0,
+      "aria-disabled": s || void 0,
+      "aria-selected": m || void 0,
+      onClick: s ? void 0 : t,
+      onKeyDown: a ? (e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t == null || t(e));
+      } : void 0,
+      className: c("smwb-list__item", r, {
+        "smwb-disabled": s,
+        "smwb-selected": m,
+        "smwb-list__item_dense": d,
+        "smwb-list__item_divider": n
+      }),
+      "data-testid": "list-item",
+      children: [
+        /* @__PURE__ */ i("span", { className: "smwb-list__item__start", children: l }),
+        /* @__PURE__ */ i("span", { className: "smwb-list__item__main", children: _ }),
+        /* @__PURE__ */ i("span", { className: "smwb-list__item__end", children: o })
+      ]
+    }
+  );
+});
+export {
+  N as ListItem,
+  N as default
+};
+//# sourceMappingURL=listItem.js.map

package/dist/headless/components/dataDisplay/list/listItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listItem.js","sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, onClick },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span className=\"smwb-list__item__start\">{startAdornment}</span>\n      <span className=\"smwb-list__item__main\">{children}</span>\n      <span className=\"smwb-list__item__end\">{endAdornment}</span>\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","onClick","ref","interactive","jsxs","cn","jsx"],"mappings":";;;AAgBO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,SAAAC,EAAA,GACzFC,GACA;AACA,QAAMC,IAAc,CAAC,CAACF,KAAW,CAACN;AAElC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,UAAUC,IAAc,IAAI;AAAA,MAC5B,iBAAeR,KAAY;AAAA,MAC3B,iBAAeC,KAAY;AAAA,MAC3B,SAASD,IAAW,SAAYM;AAAA,MAChC,WACEE,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFF,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWI,EAAG,mBAAmBZ,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,yBAAyBC;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAP,GAAe;AAAA,QACzD,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAZ,EAAA,CAAS;AAAA,QAClD,gBAAAY,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAN,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,CAAC;"}