@solibo/solibo-ui 1.0.14 → 1.0.16

package/dist/components/list/index.js

@@ -1,52 +1,55 @@
-import { jsx as c, jsxs as E, Fragment as N } from "react/jsx-runtime";
-import { t as d } from "../../classix-DG18itHa.js";
+import { jsx as u, jsxs as x, Fragment as z } from "react/jsx-runtime";
+import { t as F } from "../../classix-DG18itHa.js";
 import e from "react";
-import '../../assets/index49.css';function x(n) {
-  return e.isValidElement(n) && n.type === e.Fragment;
+import '../../assets/index47.css';function V(t) {
+  return e.isValidElement(t) && t.type === e.Fragment;
 }
-function p(n, l = []) {
-  return e.Children.forEach(n, (s) => {
-    x(s) ? p(s.props.children, l) : l.push(s);
-  }), l;
+function N(t, n = []) {
+  return e.Children.forEach(t, (s) => {
+    V(s) ? N(s.props.children, n) : n.push(s);
+  }), n;
 }
-function y(n, {
-  wrapper: l = "li"
+function p(t, {
+  wrapper: n = "li"
 } = {}) {
-  return p(n).filter((t) => t !== null).map((t, i) => {
-    if (e.isValidElement(t) && t.type === l)
-      return t;
-    const a = e.isValidElement(t) && t.key != null ? t.key : i;
-    return e.createElement(l, {
-      key: a
-    }, t);
+  return N(t).filter((l) => l !== null).map((l, c) => {
+    if (e.isValidElement(l) && l.type === n)
+      return l;
+    const r = e.isValidElement(l) && l.key != null ? l.key : c;
+    return e.createElement(n, {
+      key: r
+    }, l);
   });
 }
-const z = "_controls_1lnsr_1", F = "_horizontal_1lnsr_6", V = "_list_1lnsr_17", g = "_columns_1lnsr_58", o = {
-  controls: z,
-  horizontal: F,
-  list: V,
-  columns: g
+const d = "_controls_uq9c5_1", g = "_horizontal_uq9c5_6", k = "_list_uq9c5_17", C = "_columns_uq9c5_58", i = {
+  controls: d,
+  horizontal: g,
+  list: k,
+  columns: C
+}, E = (t, n) => {
+  typeof t == "function" ? t(n) : t && (t.current = n);
 };
-function v({
-  children: n,
-  className: l,
+function M({
+  children: t,
+  className: n,
   columns: s = 1,
-  controls: r,
-  horizontal: t,
-  ordered: i,
-  style: a,
+  controls: o,
+  horizontal: l,
+  ordered: c,
+  ref: r,
+  style: q,
   ...m
 }) {
-  const u = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, f = d(l, o.list, u > 1 && o.columns, t && o.horizontal), _ = {
-    ...a,
-    "--list-columns": u
-  }, h = i ? /* @__PURE__ */ c("ol", { className: f, style: _, ...m, children: y(n) }) : /* @__PURE__ */ c("ul", { className: f, style: _, ...m, children: y(n) });
-  return r == null ? h : /* @__PURE__ */ E(N, { children: [
-    /* @__PURE__ */ c("div", { className: o.controls, children: r }),
+  const f = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, _ = F(n, i.list, f > 1 && i.columns, l && i.horizontal), y = {
+    ...q,
+    "--list-columns": f
+  }, h = c ? /* @__PURE__ */ u("ol", { className: _, ref: (a) => E(r, a), style: y, ...m, children: p(t) }) : /* @__PURE__ */ u("ul", { className: _, ref: (a) => E(r, a), style: y, ...m, children: p(t) });
+  return o == null ? h : /* @__PURE__ */ x(z, { children: [
+    /* @__PURE__ */ u("div", { className: i.controls, children: o }),
     h
   ] });
 }
 export {
-  v as List
+  M as List
 };
 //# sourceMappingURL=index.js.map

package/dist/components/list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/lib/wrap-children.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/wrap-children';\n\nimport styles from './styles.module.css';\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  ordered?: boolean;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  controls,\n  horizontal,\n  ordered,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n\n  if (controls === undefined || controls === null) return list;\n\n  return (\n    <>\n      <div className={styles.controls}>{controls}</div>\n      {list}\n    </>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","List","className","columns","controls","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx","jsxs"],"mappings":";;;AAMA,SAASA,EACPC,GAC4D;AAC5D,SAAOC,EAAMC,eAAeF,CAAI,KAAKA,EAAKG,SAASF,EAAMG;AAC3D;AAEA,SAASC,EAAgBC,GAA2BC,IAAyB,IAAI;AAC/EN,SAAAA,EAAMO,SAASC,QAAQH,GAAWI,CAAAA,MAAU;AAC1C,IAAIX,EAAkBW,CAAK,IACzBL,EAAgBK,EAAMC,MAAML,UAAUC,CAAG,IAEzCA,EAAIK,KAAKF,CAAK;AAAA,EAElB,CAAC,GACMH;AACT;AAEO,SAASM,EACdP,GACA;AAAA,EAAEQ,SAAAA,IAAU;AAA0B,IAAI,IAC1C;AAKA,SAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,CAAAA,MAAUA,MAAU,IAAI,EAEtCM,IAAI,CAACN,GAAOO,MAAM;AAClC,QAAIhB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMP,SAASW;AAChD,aAAOJ;AAGT,UAAMQ,IAAMjB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMQ,OAAO,OAAOR,EAAMQ,MAAMD;AAE3E,WAAOhB,EAAMkB,cAAcL,GAAS;AAAA,MAAEI,KAAAA;AAAAA,IAAAA,GAAOR,CAAK;AAAA,EACpD,CAAC;AACH;;;;;;;AC3BO,SAASU,EAAK;AAAA,EACnBd,UAAAA;AAAAA,EACAe,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACA,GAAGf;AACM,GAAG;AACZ,QAAMgB,IAAOC,OAAOC,SAASP,CAAO,IAAIQ,KAAKC,IAAI,GAAGD,KAAKE,MAAMV,CAAO,CAAC,IAAI,GAErEW,IAAUC,EACdb,GACAc,EAAOC,MACPT,IAAO,KAAKQ,EAAOb,SACnBE,KAAcW,EAAOX,UACvB,GAMMa,IAAqB;AAAA,IACzB,GAAGX;AAAAA,IACH,kBAAkBC;AAAAA,EAAAA,GAGdS,IAAOX,IACX,gBAAAa,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAI1B,GAEHE,UAAAA,EAAaP,CAAQ,GACxB,IAEA,gBAAAgC,EAAC,MAAA,EACC,WAAWL,GACX,OAAOI,GACP,GAAI1B,GAEHE,UAAAA,EAAaP,CAAQ,EAAA,CACxB;AAGF,SAA8BiB,KAAa,OAAaa,IAGtD,gBAAAG,EAAAnC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAkC,EAAC,OAAA,EAAI,WAAWH,EAAOZ,UAAWA,UAAAA,GAAS;AAAA,IAC1Ca;AAAAA,EAAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/lib/wrap-children.tsx","../../../src/components/list/index.tsx"],"sourcesContent":["import React, { JSX } from 'react';\n\ntype WrapOptions<T extends keyof JSX.IntrinsicElements = 'li'> = {\n  wrapper?: T;\n};\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }> {\n  return React.isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction flattenChildren(children: React.ReactNode, out: React.ReactNode[] = []) {\n  React.Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      flattenChildren(child.props.children, out);\n    } else {\n      out.push(child);\n    }\n  });\n  return out;\n}\n\nexport function wrapChildren<T extends keyof JSX.IntrinsicElements = 'li'>(\n  children: React.ReactNode,\n  { wrapper = 'li' as T }: WrapOptions<T> = {}\n) {\n  const flat = flattenChildren(children);\n\n  const filterNull = flat.filter((child) => child !== null);\n\n  return filterNull.map((child, i) => {\n    if (React.isValidElement(child) && child.type === wrapper) {\n      return child;\n    }\n\n    const key = React.isValidElement(child) && child.key != null ? child.key : i;\n\n    return React.createElement(wrapper, { key }, child);\n  });\n}\n","import cx from 'classix';\n\nimport { wrapChildren } from '@/lib/wrap-children';\n\nimport styles from './styles.module.css';\n\ntype ListElement = HTMLUListElement | HTMLOListElement;\n\nconst setListRef = (ref: React.Ref<ListElement> | undefined, node: ListElement | null) => {\n  if (typeof ref === 'function') ref(node);\n  else if (ref) ref.current = node;\n};\n\nexport type ListProps = React.ComponentPropsWithoutRef<'ul'> & {\n  columns?: number;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  ordered?: boolean;\n  ref?: React.Ref<ListElement>;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  controls,\n  horizontal,\n  ordered,\n  ref,\n  style,\n  ...props\n}: ListProps) {\n  const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n\n  const classes = cx(\n    className,\n    styles.list,\n    cols > 1 && styles.columns,\n    horizontal && styles.horizontal\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      ref={(node) => setListRef(ref, node)}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      ref={(node) => setListRef(ref, node)}\n      style={withVars}\n      {...props}\n    >\n      {wrapChildren(children)}\n    </ul>\n  );\n\n  if (controls === undefined || controls === null) return list;\n\n  return (\n    <>\n      <div className={styles.controls}>{controls}</div>\n      {list}\n    </>\n  );\n}\n"],"names":["isFragmentElement","node","React","isValidElement","type","Fragment","flattenChildren","children","out","Children","forEach","child","props","push","wrapChildren","wrapper","filter","map","i","key","createElement","setListRef","ref","current","List","className","columns","controls","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx","jsxs"],"mappings":";;;AAMA,SAASA,EACPC,GAC4D;AAC5D,SAAOC,EAAMC,eAAeF,CAAI,KAAKA,EAAKG,SAASF,EAAMG;AAC3D;AAEA,SAASC,EAAgBC,GAA2BC,IAAyB,IAAI;AAC/EN,SAAAA,EAAMO,SAASC,QAAQH,GAAWI,CAAAA,MAAU;AAC1C,IAAIX,EAAkBW,CAAK,IACzBL,EAAgBK,EAAMC,MAAML,UAAUC,CAAG,IAEzCA,EAAIK,KAAKF,CAAK;AAAA,EAElB,CAAC,GACMH;AACT;AAEO,SAASM,EACdP,GACA;AAAA,EAAEQ,SAAAA,IAAU;AAA0B,IAAI,IAC1C;AAKA,SAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,CAAAA,MAAUA,MAAU,IAAI,EAEtCM,IAAI,CAACN,GAAOO,MAAM;AAClC,QAAIhB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMP,SAASW;AAChD,aAAOJ;AAGT,UAAMQ,IAAMjB,EAAMC,eAAeQ,CAAK,KAAKA,EAAMQ,OAAO,OAAOR,EAAMQ,MAAMD;AAE3E,WAAOhB,EAAMkB,cAAcL,GAAS;AAAA,MAAEI,KAAAA;AAAAA,IAAAA,GAAOR,CAAK;AAAA,EACpD,CAAC;AACH;;;;;;GChCMU,IAAaA,CAACC,GAAyCrB,MAA6B;AACxF,EAAI,OAAOqB,KAAQ,aAAYA,EAAIrB,CAAI,IAC9BqB,QAASC,UAAUtB;AAC9B;AAUO,SAASuB,EAAK;AAAA,EACnBjB,UAAAA;AAAAA,EACAkB,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAP,KAAAA;AAAAA,EACAQ,OAAAA;AAAAA,EACA,GAAGlB;AACM,GAAG;AACZ,QAAMmB,IAAOC,OAAOC,SAASP,CAAO,IAAIQ,KAAKC,IAAI,GAAGD,KAAKE,MAAMV,CAAO,CAAC,IAAI,GAErEW,IAAUC,EACdb,GACAc,EAAOC,MACPT,IAAO,KAAKQ,EAAOb,SACnBE,KAAcW,EAAOX,UACvB,GAMMa,IAAqB;AAAA,IACzB,GAAGX;AAAAA,IACH,kBAAkBC;AAAAA,EAAAA,GAGdS,IAAOX,IACX,gBAAAa,EAAC,MAAA,EACC,WAAWL,GACX,KAAMpC,CAAAA,MAASoB,EAAWC,GAAKrB,CAAI,GACnC,OAAOwC,GACP,GAAI7B,GAEHE,UAAAA,EAAaP,CAAQ,EAAA,CACxB,sBAEC,MAAA,EACC,WAAW8B,GACX,KAAMpC,OAASoB,EAAWC,GAAKrB,CAAI,GACnC,OAAOwC,GACP,GAAI7B,GAEHE,UAAAA,EAAaP,CAAQ,GACxB;AAGF,SAA8BoB,KAAa,OAAaa,IAGtD,gBAAAG,EAAAtC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAqC,EAAC,OAAA,EAAI,WAAWH,EAAOZ,UAAWA,UAAAA,GAAS;AAAA,IAC1Ca;AAAAA,EAAAA,GACH;AAEJ;"}

package/dist/components/loading/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index50.css');const t=require("react/jsx-runtime"),d=require("../../classix-5H4IWnMA.cjs"),c="_loading_1d5zd_23",l="_spin_1d5zd_1",_="_ping_1d5zd_39",r="_sticky_1d5zd_65",n={loading:c,default:"_default_1d5zd_28",spin:l,ping:_,sticky:r},g=({variant:i="default",size:s,sticky:o=!1,...a})=>{const e={"--border-size":s?s/8+"px":void 0,"--size":s?s+"px":void 0};return t.jsx("div",{className:d.t(n.loading,o&&n.sticky),"data-component":"loading",children:t.jsx("span",{className:d.t(n.loading,n[i]),style:e,...a})})};exports.Loading=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index48.css');const t=require("react/jsx-runtime"),i=require("../../classix-5H4IWnMA.cjs"),e="_loading_1csd4_23",l="_spin_1csd4_1",_="_ping_1csd4_39",r="_sticky_1csd4_65",n={loading:e,default:"_default_1csd4_28",spin:l,ping:_,sticky:r},g=({variant:o="default",size:s,sticky:c=!1,...d})=>{const a={"--border-size":s?s/8+"px":void 0,"--size":s?s+"px":void 0};return t.jsx("div",{className:i.t(n.loading,c&&n.sticky),"data-component":"loading",children:t.jsx("span",{className:i.t(n.loading,n[o]),style:a,...d})})};exports.Loading=g;
 //# sourceMappingURL=index.cjs.map

package/dist/components/loading/index.js

@@ -1,22 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
-import { t as s } from "../../classix-DG18itHa.js";
-import '../../assets/index50.css';const l = "_loading_1d5zd_23", _ = "_spin_1d5zd_1", p = "_ping_1d5zd_39", e = "_sticky_1d5zd_65", n = {
+import { t } from "../../classix-DG18itHa.js";
+import '../../assets/index48.css';const l = "_loading_1csd4_23", _ = "_spin_1csd4_1", p = "_ping_1csd4_39", e = "_sticky_1csd4_65", n = {
   loading: l,
-  default: "_default_1d5zd_28",
+  default: "_default_1csd4_28",
   spin: _,
   ping: p,
   sticky: e
 }, m = ({
-  variant: t = "default",
-  size: d,
-  sticky: i = !1,
-  ...a
+  variant: i = "default",
+  size: s,
+  sticky: d = !1,
+  ...c
 }) => {
-  const c = {
-    "--border-size": d ? d / 8 + "px" : void 0,
-    "--size": d ? d + "px" : void 0
+  const a = {
+    "--border-size": s ? s / 8 + "px" : void 0,
+    "--size": s ? s + "px" : void 0
   };
-  return /* @__PURE__ */ o("div", { className: s(n.loading, i && n.sticky), "data-component": "loading", children: /* @__PURE__ */ o("span", { className: s(n.loading, n[t]), style: c, ...a }) });
+  return /* @__PURE__ */ o("div", { className: t(n.loading, d && n.sticky), "data-component": "loading", children: /* @__PURE__ */ o("span", { className: t(n.loading, n[i]), style: a, ...c }) });
 };
 export {
   m as Loading

package/dist/components/menu/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const a=require("react/jsx-runtime"),h=require("../../classix-5H4IWnMA.cjs"),p=require("react"),v=require("../button/index.cjs"),g=require("../icon/index.cjs"),j=require("../list/index.cjs"),m=require("../popover/index.cjs"),D="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",q="_danger_z7awx_47",f={list:D,item:y,active:w,danger:q};function k(o){return[...o].sort((r,c)=>+!!r.isDanger-+!!c.isDanger)}const _=({itemRefs:o,items:r,menuAccessibleLabel:c,onKeyDown:i,onSelect:l,usesMenuSemantics:u=!1})=>a.jsx(j.List,{"aria-label":c,className:f.list,onKeyDown:i,role:u?"menu":void 0,"data-component":"menulist",children:k(r).map((e,t)=>a.jsx("li",{role:u?"none":void 0,children:a.jsxs(v.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:h.t(f.item,e.isActive&&f.active,e.isDanger&&f.danger),disabled:e.disabled,onClick:()=>l(e),ref:d=>{o&&(o.current[t]=d)},role:u?"menuitem":void 0,variant:"tertiary",children:[e.icon&&a.jsx(g.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),a.jsx("span",{children:e.label})]})},e.id??t))});function z(o){return o.filter(r=>!!(r&&!r.disabled))}const B=({close:o,initialFocus:r,items:c,menuAccessibleLabel:i,onItemSelect:l})=>{const u=p.useRef([]),e=p.useCallback(n=>{const s=z(u.current);if(s.length===0)return;if(n==="first"){s[0].focus();return}if(n==="last"){s[s.length-1].focus();return}const x=s.indexOf(document.activeElement),b=n==="next"?(x+1)%s.length:(x-1+s.length)%s.length;s[b].focus()},[]);p.useEffect(()=>{e(r??"first")},[e,r]);const t=n=>{if(n.key==="ArrowDown"){n.preventDefault(),e("next");return}if(n.key==="ArrowUp"){n.preventDefault(),e("previous");return}if(n.key==="Home"){n.preventDefault(),e("first");return}n.key==="End"&&(n.preventDefault(),e("last"))},d=n=>{var s;(s=n.onSelect)==null||s.call(n),l==null||l(n),o()};return a.jsx(_,{itemRefs:u,items:c,menuAccessibleLabel:i,onKeyDown:t,onSelect:d,usesMenuSemantics:!0,"data-component":"menupanel"})},M=({inline:o=!1,items:r,menuAccessibleLabel:c="Menu",onItemSelect:i,triggerAccessibleLabel:l="Open menu",variant:u="popover"})=>{if(u==="simple"){const e=t=>{var d;(d=t.onSelect)==null||d.call(t),i==null||i(t)};return a.jsx(_,{items:r,menuAccessibleLabel:c,onSelect:e,"data-component":"menu"})}return a.jsx(m.Popover,{inline:o,triggerAccessibleLabel:l,triggerAriaHasPopup:"menu",triggerButtonContent:a.jsx(g.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:e,initialFocus:t})=>a.jsx(B,{close:e,initialFocus:t,items:r,menuAccessibleLabel:c,onItemSelect:i})})};exports.Menu=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),x=require("../button/index.cjs"),j=require("../icon/index.cjs"),c=require("../../menu-popover-D1ALaiV5.cjs");function M(e){return[...e].sort((n,u)=>+!!n.isDanger-+!!u.isDanger)}const v=e=>M(e).map(n=>({button:r.jsxs(x.Button,{"aria-label":n.accessibleLabel,disabled:n.disabled,children:[n.icon&&r.jsx(j.Icon,{fill:!0,gap:"right",name:n.icon,size:"small"}),r.jsx("span",{children:n.label})]}),id:n.id,isActive:n.isActive,isDanger:n.isDanger,value:n})),f=({inline:e=!1,items:n,menuAccessibleLabel:u="Menu",onItemSelect:s,triggerAccessibleLabel:t="Open menu",triggerIcon:p="dots",triggerLabel:b,variant:g="popover"})=>{const d=v(n);return g==="simple"?r.jsx(c.MenuActionList,{actions:d,menuAccessibleLabel:u,onSelect:o=>{var a;(a=o.onSelect)==null||a.call(o),s==null||s(o)},"data-component":"menu"}):r.jsx(c.MenuPopover,{inline:e,triggerAccessibleLabel:t,triggerIcon:p,triggerLabel:b,"data-component":"menu",children:({close:o,initialFocus:a})=>r.jsx(c.MenuActionList,{actions:d,initialFocus:a,menuAccessibleLabel:u,onSelect:i=>{var l;(l=i.onSelect)==null||l.call(i),s==null||s(i),o()},usesMenuSemantics:!0})})};exports.Menu=f;
 //# sourceMappingURL=index.cjs.map

package/dist/components/menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n  itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  onSelect: (item: MenuItem) => void;\n  usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\n};\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n  return [...items].sort(\n    (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n  );\n}\n\nconst MenuList = ({\n  itemRefs,\n  items,\n  menuAccessibleLabel,\n  onKeyDown,\n  onSelect,\n  usesMenuSemantics = false,\n}: MenuListProps) => (\n  <List\n    aria-label={menuAccessibleLabel}\n    className={styles.list}\n    onKeyDown={onKeyDown}\n    role={usesMenuSemantics ? 'menu' : undefined}\n  >\n    {sortDangerItemsLast(items).map((item, index) => (\n      <li\n        key={item.id ?? index}\n        role={usesMenuSemantics ? 'none' : undefined}\n      >\n        <Button\n          aria-current={item.isActive ? 'true' : undefined}\n          aria-label={item.accessibleLabel}\n          className={cx(\n            styles.item,\n            item.isActive && styles.active,\n            item.isDanger && styles.danger\n          )}\n          disabled={item.disabled}\n          onClick={() => onSelect(item)}\n          ref={(node) => {\n            if (itemRefs) itemRefs.current[index] = node;\n          }}\n          role={usesMenuSemantics ? 'menuitem' : undefined}\n          variant='tertiary'\n        >\n          {item.icon && (\n            <Icon\n              fill\n              gap='right'\n              name={item.icon}\n              size='small'\n            />\n          )}\n          <span>{item.label}</span>\n        </Button>\n      </li>\n    ))}\n  </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n  return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n  close,\n  initialFocus,\n  items,\n  menuAccessibleLabel,\n  onItemSelect,\n}: MenuPanelProps) => {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const focusItem = useCallback((target: MenuFocusTarget) => {\n    const focusableItems = getFocusableItems(itemRefs.current);\n\n    if (focusableItems.length === 0) {\n      return;\n    }\n\n    if (target === 'first') {\n      focusableItems[0].focus();\n      return;\n    }\n\n    if (target === 'last') {\n      focusableItems[focusableItems.length - 1].focus();\n      return;\n    }\n\n    const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n    const nextIndex =\n      target === 'next'\n        ? (currentIndex + 1) % focusableItems.length\n        : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n    focusableItems[nextIndex].focus();\n  }, []);\n\n  useEffect(() => {\n    focusItem(initialFocus ?? 'first');\n  }, [focusItem, initialFocus]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem('next');\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      focusItem('previous');\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusItem('first');\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusItem('last');\n    }\n  };\n\n  const handleItemSelect = (item: MenuItem) => {\n    item.onSelect?.();\n    onItemSelect?.(item);\n    close();\n  };\n\n  return (\n    <MenuList\n      itemRefs={itemRefs}\n      items={items}\n      menuAccessibleLabel={menuAccessibleLabel}\n      onKeyDown={handleKeyDown}\n      onSelect={handleItemSelect}\n      usesMenuSemantics\n    />\n  );\n};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  variant = 'popover',\n}: MenuProps) => {\n  if (variant === 'simple') {\n    const handleItemSelect = (item: MenuItem) => {\n      item.onSelect?.();\n      onItemSelect?.(item);\n    };\n\n    return (\n      <MenuList\n        items={items}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={handleItemSelect}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerAriaHasPopup='menu'\n      triggerButtonContent={\n        <Icon\n          name='dots'\n          size='medium'\n        />\n      }\n    >\n      {({ close, initialFocus }) => (\n        <MenuPanel\n          close={close}\n          initialFocus={initialFocus}\n          items={items}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onItemSelect={onItemSelect}\n        />\n      )}\n    </Popover>\n  );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","MenuList","itemRefs","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\n\nimport { type MenuAction, MenuActionList } from './action-list';\nimport { MenuPopover } from './menu-popover';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerIcon?: IconName;\n  triggerLabel?: React.ReactNode;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  triggerIcon?: never;\n  triggerLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n  return [...items].sort(\n    (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n  );\n}\n\nconst getActions = (items: MenuItem[]): MenuAction<MenuItem>[] =>\n  sortDangerItemsLast(items).map((item) => ({\n    button: (\n      <Button\n        aria-label={item.accessibleLabel}\n        disabled={item.disabled}\n      >\n        {item.icon && (\n          <Icon\n            fill\n            gap='right'\n            name={item.icon}\n            size='small'\n          />\n        )}\n        <span>{item.label}</span>\n      </Button>\n    ),\n    id: item.id,\n    isActive: item.isActive,\n    isDanger: item.isDanger,\n    value: item,\n  }));\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  triggerIcon = 'dots',\n  triggerLabel,\n  variant = 'popover',\n}: MenuProps) => {\n  const actions = getActions(items);\n\n  if (variant === 'simple') {\n    return (\n      <MenuActionList\n        actions={actions}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={(item) => {\n          item.onSelect?.();\n          onItemSelect?.(item);\n        }}\n      />\n    );\n  }\n\n  return (\n    <MenuPopover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerIcon={triggerIcon}\n      triggerLabel={triggerLabel}\n    >\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={(item) => {\n            item.onSelect?.();\n            onItemSelect?.(item);\n            close();\n          }}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","getActions","map","item","button","Button","accessibleLabel","disabled","icon","jsx","Icon","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus"],"mappings":"kOA0CA,SAASA,EAAoBC,EAAmB,CAC9C,MAAO,CAAC,GAAGA,CAAK,EAAEC,KAChB,CAACC,EAAMC,IAAUC,CAAOC,EAAQH,EAAKI,SAAaF,CAAOC,EAAQF,EAAMG,QACzE,CACF,CAEA,MAAMC,EAAcP,GAClBD,EAAoBC,CAAK,EAAEQ,IAAKC,IAAU,CACxCC,cACGC,SAAA,CACC,aAAYF,EAAKG,gBACjB,SAAUH,EAAKI,SAEdJ,SAAAA,CAAAA,EAAKK,MACJC,EAAAA,IAACC,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMP,EAAKK,KACX,KAAK,OAAA,CAAO,EAGhBC,EAAAA,IAAC,OAAA,CAAMN,SAAAA,EAAKQ,KAAAA,CAAM,CAAA,EACpB,EAEFC,GAAIT,EAAKS,GACTC,SAAUV,EAAKU,SACfb,SAAUG,EAAKH,SACfc,MAAOX,CACT,EAAE,EAESY,EAAOA,CAAC,CACnBC,OAAAA,EAAS,GACTtB,MAAAA,EACAuB,oBAAAA,EAAsB,OACtBC,aAAAA,EACAC,uBAAAA,EAAyB,YACzBC,YAAAA,EAAc,OACdC,aAAAA,EACAC,QAAAA,EAAU,SACD,IAAM,CACf,MAAMC,EAAUtB,EAAWP,CAAK,EAEhC,OAAI4B,IAAY,SAEZb,EAAAA,IAACe,EAAAA,eAAA,CACC,QAAAD,EACA,oBAAAN,EACA,SAAWd,GAAS,QAClBA,EAAAA,EAAKsB,WAALtB,MAAAA,EAAAA,KAAAA,GACAe,GAAAA,MAAAA,EAAef,EACjB,EAAE,iBAAA,OAAA,EAMNM,MAACiB,EAAAA,aACC,OAAAV,EACA,uBAAAG,EACA,YAAAC,EACA,aAAAC,EAA2B,iBAAA,OAE1B,SAAA,CAAC,CAAEM,MAAAA,EAAOC,aAAAA,CAAAA,IACTnB,EAAAA,IAACe,EAAAA,eAAA,CACC,QAAAD,EACA,aAAAK,EACA,oBAAAX,EACA,SAAWd,GAAS,QAClBA,EAAAA,EAAKsB,WAALtB,MAAAA,EAAAA,KAAAA,GACAe,GAAAA,MAAAA,EAAef,GACfwB,EAAAA,CACF,EACA,kBAAiB,EAAA,CAAA,EAGvB,CAEJ"}

package/dist/components/menu/index.js

@@ -1,92 +1,42 @@
-import { jsx as s, jsxs as v } from "react/jsx-runtime";
-import { t as x } from "../../classix-DG18itHa.js";
-import { useRef as D, useCallback as _, useEffect as b } from "react";
-import { Button as w } from "../button/index.js";
-import { Icon as m } from "../icon/index.js";
-import { List as y } from "../list/index.js";
-import { Popover as k } from "../popover/index.js";
-import '../../assets/index16.css';const z = "_list_z7awx_3", B = "_item_z7awx_15", A = "_active_z7awx_38", N = "_danger_z7awx_47", d = {
-  list: z,
-  item: B,
-  active: A,
-  danger: N
-};
-function C(t) {
-  return [...t].sort((r, l) => +!!r.isDanger - +!!l.isDanger);
-}
-const g = ({
-  itemRefs: t,
-  items: r,
-  menuAccessibleLabel: l,
-  onKeyDown: i,
-  onSelect: u,
-  usesMenuSemantics: c = !1
-}) => /* @__PURE__ */ s(y, { "aria-label": l, className: d.list, onKeyDown: i, role: c ? "menu" : void 0, "data-component": "menulist", children: C(r).map((e, a) => /* @__PURE__ */ s("li", { role: c ? "none" : void 0, children: /* @__PURE__ */ v(w, { "aria-current": e.isActive ? "true" : void 0, "aria-label": e.accessibleLabel, className: x(d.item, e.isActive && d.active, e.isDanger && d.danger), disabled: e.disabled, onClick: () => u(e), ref: (f) => {
-  t && (t.current[a] = f);
-}, role: c ? "menuitem" : void 0, variant: "tertiary", children: [
-  e.icon && /* @__PURE__ */ s(m, { fill: !0, gap: "right", name: e.icon, size: "small" }),
-  /* @__PURE__ */ s("span", { children: e.label })
-] }) }, e.id ?? a)) });
-function E(t) {
-  return t.filter((r) => !!(r && !r.disabled));
+import { jsx as o, jsxs as M } from "react/jsx-runtime";
+import { Button as v } from "../button/index.js";
+import { Icon as D } from "../icon/index.js";
+import { M as d, a as h } from "../../menu-popover-DQHDIw-8.js";
+function t(a) {
+  return [...a].sort((n, u) => +!!n.isDanger - +!!u.isDanger);
 }
-const K = ({
-  close: t,
-  initialFocus: r,
-  items: l,
-  menuAccessibleLabel: i,
-  onItemSelect: u
+const x = (a) => t(a).map((n) => ({
+  button: /* @__PURE__ */ M(v, { "aria-label": n.accessibleLabel, disabled: n.disabled, children: [
+    n.icon && /* @__PURE__ */ o(D, { fill: !0, gap: "right", name: n.icon, size: "small" }),
+    /* @__PURE__ */ o("span", { children: n.label })
+  ] }),
+  id: n.id,
+  isActive: n.isActive,
+  isDanger: n.isDanger,
+  value: n
+})), N = ({
+  inline: a = !1,
+  items: n,
+  menuAccessibleLabel: u = "Menu",
+  onItemSelect: r,
+  triggerAccessibleLabel: e = "Open menu",
+  triggerIcon: f = "dots",
+  triggerLabel: g,
+  variant: b = "popover"
 }) => {
-  const c = D([]), e = _((n) => {
-    const o = E(c.current);
-    if (o.length === 0)
-      return;
-    if (n === "first") {
-      o[0].focus();
-      return;
-    }
-    if (n === "last") {
-      o[o.length - 1].focus();
-      return;
-    }
-    const p = o.indexOf(document.activeElement), h = n === "next" ? (p + 1) % o.length : (p - 1 + o.length) % o.length;
-    o[h].focus();
-  }, []);
-  return b(() => {
-    e(r ?? "first");
-  }, [e, r]), /* @__PURE__ */ s(g, { itemRefs: c, items: l, menuAccessibleLabel: i, onKeyDown: (n) => {
-    if (n.key === "ArrowDown") {
-      n.preventDefault(), e("next");
-      return;
-    }
-    if (n.key === "ArrowUp") {
-      n.preventDefault(), e("previous");
-      return;
-    }
-    if (n.key === "Home") {
-      n.preventDefault(), e("first");
-      return;
-    }
-    n.key === "End" && (n.preventDefault(), e("last"));
-  }, onSelect: (n) => {
-    var o;
-    (o = n.onSelect) == null || o.call(n), u == null || u(n), t();
-  }, usesMenuSemantics: !0, "data-component": "menupanel" });
-}, R = ({
-  inline: t = !1,
-  items: r,
-  menuAccessibleLabel: l = "Menu",
-  onItemSelect: i,
-  triggerAccessibleLabel: u = "Open menu",
-  variant: c = "popover"
-}) => c === "simple" ? /* @__PURE__ */ s(g, { items: r, menuAccessibleLabel: l, onSelect: (a) => {
-  var f;
-  (f = a.onSelect) == null || f.call(a), i == null || i(a);
-}, "data-component": "menu" }) : /* @__PURE__ */ s(k, { inline: t, triggerAccessibleLabel: u, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ s(m, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
-  close: e,
-  initialFocus: a
-}) => /* @__PURE__ */ s(K, { close: e, initialFocus: a, items: r, menuAccessibleLabel: l, onItemSelect: i }) });
+  const c = x(n);
+  return b === "simple" ? /* @__PURE__ */ o(d, { actions: c, menuAccessibleLabel: u, onSelect: (s) => {
+    var i;
+    (i = s.onSelect) == null || i.call(s), r == null || r(s);
+  }, "data-component": "menu" }) : /* @__PURE__ */ o(h, { inline: a, triggerAccessibleLabel: e, triggerIcon: f, triggerLabel: g, "data-component": "menu", children: ({
+    close: s,
+    initialFocus: i
+  }) => /* @__PURE__ */ o(d, { actions: c, initialFocus: i, menuAccessibleLabel: u, onSelect: (p) => {
+    var l;
+    (l = p.onSelect) == null || l.call(p), r == null || r(p), s();
+  }, usesMenuSemantics: !0 }) });
+};
 export {
-  R as Menu
+  N as Menu
 };
 //# sourceMappingURL=index.js.map

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n  itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  onSelect: (item: MenuItem) => void;\n  usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\n};\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n  return [...items].sort(\n    (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n  );\n}\n\nconst MenuList = ({\n  itemRefs,\n  items,\n  menuAccessibleLabel,\n  onKeyDown,\n  onSelect,\n  usesMenuSemantics = false,\n}: MenuListProps) => (\n  <List\n    aria-label={menuAccessibleLabel}\n    className={styles.list}\n    onKeyDown={onKeyDown}\n    role={usesMenuSemantics ? 'menu' : undefined}\n  >\n    {sortDangerItemsLast(items).map((item, index) => (\n      <li\n        key={item.id ?? index}\n        role={usesMenuSemantics ? 'none' : undefined}\n      >\n        <Button\n          aria-current={item.isActive ? 'true' : undefined}\n          aria-label={item.accessibleLabel}\n          className={cx(\n            styles.item,\n            item.isActive && styles.active,\n            item.isDanger && styles.danger\n          )}\n          disabled={item.disabled}\n          onClick={() => onSelect(item)}\n          ref={(node) => {\n            if (itemRefs) itemRefs.current[index] = node;\n          }}\n          role={usesMenuSemantics ? 'menuitem' : undefined}\n          variant='tertiary'\n        >\n          {item.icon && (\n            <Icon\n              fill\n              gap='right'\n              name={item.icon}\n              size='small'\n            />\n          )}\n          <span>{item.label}</span>\n        </Button>\n      </li>\n    ))}\n  </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n  return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n  close,\n  initialFocus,\n  items,\n  menuAccessibleLabel,\n  onItemSelect,\n}: MenuPanelProps) => {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const focusItem = useCallback((target: MenuFocusTarget) => {\n    const focusableItems = getFocusableItems(itemRefs.current);\n\n    if (focusableItems.length === 0) {\n      return;\n    }\n\n    if (target === 'first') {\n      focusableItems[0].focus();\n      return;\n    }\n\n    if (target === 'last') {\n      focusableItems[focusableItems.length - 1].focus();\n      return;\n    }\n\n    const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n    const nextIndex =\n      target === 'next'\n        ? (currentIndex + 1) % focusableItems.length\n        : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n    focusableItems[nextIndex].focus();\n  }, []);\n\n  useEffect(() => {\n    focusItem(initialFocus ?? 'first');\n  }, [focusItem, initialFocus]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem('next');\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      focusItem('previous');\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusItem('first');\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusItem('last');\n    }\n  };\n\n  const handleItemSelect = (item: MenuItem) => {\n    item.onSelect?.();\n    onItemSelect?.(item);\n    close();\n  };\n\n  return (\n    <MenuList\n      itemRefs={itemRefs}\n      items={items}\n      menuAccessibleLabel={menuAccessibleLabel}\n      onKeyDown={handleKeyDown}\n      onSelect={handleItemSelect}\n      usesMenuSemantics\n    />\n  );\n};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  variant = 'popover',\n}: MenuProps) => {\n  if (variant === 'simple') {\n    const handleItemSelect = (item: MenuItem) => {\n      item.onSelect?.();\n      onItemSelect?.(item);\n    };\n\n    return (\n      <MenuList\n        items={items}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={handleItemSelect}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerAriaHasPopup='menu'\n      triggerButtonContent={\n        <Icon\n          name='dots'\n          size='medium'\n        />\n      }\n    >\n      {({ close, initialFocus }) => (\n        <MenuPanel\n          close={close}\n          initialFocus={initialFocus}\n          items={items}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onItemSelect={onItemSelect}\n        />\n      )}\n    </Popover>\n  );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","MenuList","itemRefs","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\n\nimport { type MenuAction, MenuActionList } from './action-list';\nimport { MenuPopover } from './menu-popover';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerIcon?: IconName;\n  triggerLabel?: React.ReactNode;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  triggerIcon?: never;\n  triggerLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n  return [...items].sort(\n    (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n  );\n}\n\nconst getActions = (items: MenuItem[]): MenuAction<MenuItem>[] =>\n  sortDangerItemsLast(items).map((item) => ({\n    button: (\n      <Button\n        aria-label={item.accessibleLabel}\n        disabled={item.disabled}\n      >\n        {item.icon && (\n          <Icon\n            fill\n            gap='right'\n            name={item.icon}\n            size='small'\n          />\n        )}\n        <span>{item.label}</span>\n      </Button>\n    ),\n    id: item.id,\n    isActive: item.isActive,\n    isDanger: item.isDanger,\n    value: item,\n  }));\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  triggerIcon = 'dots',\n  triggerLabel,\n  variant = 'popover',\n}: MenuProps) => {\n  const actions = getActions(items);\n\n  if (variant === 'simple') {\n    return (\n      <MenuActionList\n        actions={actions}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={(item) => {\n          item.onSelect?.();\n          onItemSelect?.(item);\n        }}\n      />\n    );\n  }\n\n  return (\n    <MenuPopover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerIcon={triggerIcon}\n      triggerLabel={triggerLabel}\n    >\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={(item) => {\n            item.onSelect?.();\n            onItemSelect?.(item);\n            close();\n          }}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","getActions","map","item","button","Button","accessibleLabel","disabled","icon","jsx","Icon","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus"],"mappings":";;;;AA0CA,SAASA,EAAoBC,GAAmB;AAC9C,SAAO,CAAC,GAAGA,CAAK,EAAEC,KAChB,CAACC,GAAMC,MAAUC,CAAOC,EAAQH,EAAKI,WAAaF,CAAOC,EAAQF,EAAMG,QACzE;AACF;AAEA,MAAMC,IAAaA,CAACP,MAClBD,EAAoBC,CAAK,EAAEQ,IAAKC,CAAAA,OAAU;AAAA,EACxCC,0BACGC,GAAA,EACC,cAAYF,EAAKG,iBACjB,UAAUH,EAAKI,UAEdJ,UAAAA;AAAAA,IAAAA,EAAKK,QACJ,gBAAAC,EAACC,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMP,EAAKK,MACX,MAAK,QAAA,CAAO;AAAA,IAGhB,gBAAAC,EAAC,QAAA,EAAMN,UAAAA,EAAKQ,MAAAA,CAAM;AAAA,EAAA,GACpB;AAAA,EAEFC,IAAIT,EAAKS;AAAAA,EACTC,UAAUV,EAAKU;AAAAA,EACfb,UAAUG,EAAKH;AAAAA,EACfc,OAAOX;AACT,EAAE,GAESY,IAAOA,CAAC;AAAA,EACnBC,QAAAA,IAAS;AAAA,EACTtB,OAAAA;AAAAA,EACAuB,qBAAAA,IAAsB;AAAA,EACtBC,cAAAA;AAAAA,EACAC,wBAAAA,IAAyB;AAAA,EACzBC,aAAAA,IAAc;AAAA,EACdC,cAAAA;AAAAA,EACAC,SAAAA,IAAU;AACD,MAAM;AACf,QAAMC,IAAUtB,EAAWP,CAAK;AAEhC,SAAI4B,MAAY,WAEZ,gBAAAb,EAACe,GAAA,EACC,SAAAD,GACA,qBAAAN,GACA,UAAWd,CAAAA,MAAS;;AAClBA,KAAAA,IAAAA,EAAKsB,aAALtB,QAAAA,EAAAA,KAAAA,IACAe,KAAAA,QAAAA,EAAef;AAAAA,EACjB,GAAE,kBAAA,QAAA,IAMN,gBAAAM,EAACiB,KACC,QAAAV,GACA,wBAAAG,GACA,aAAAC,GACA,cAAAC,GAA2B,kBAAA,QAE1B,UAAA,CAAC;AAAA,IAAEM,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,EAAAA,MACT,gBAAAnB,EAACe,GAAA,EACC,SAAAD,GACA,cAAAK,GACA,qBAAAX,GACA,UAAWd,CAAAA,MAAS;;AAClBA,KAAAA,IAAAA,EAAKsB,aAALtB,QAAAA,EAAAA,KAAAA,IACAe,KAAAA,QAAAA,EAAef,IACfwB,EAAAA;AAAAA,EACF,GACA,mBAAiB,GAAA,CAAA,GAGvB;AAEJ;"}

package/dist/components/message/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const e=require("react/jsx-runtime"),v=require("../../classix-5H4IWnMA.cjs"),x=require("../avatar/index.cjs"),j=require("../icon/index.cjs"),h="_message_fif28_1",w="_timestamp_fif28_95",S="_attachments_fif28_100",b="_preview_fif28_119",t={"message-group":"_message-group_fif28_1",message:h,timestamp:w,attachments:S,preview:b},q=({appearance:o="default",attachments:n,author:a,authorColor:r,authorImageUrl:l,authorRole:d,content:g,iconName:_="info",id:p,preview:f,timestamp:m,timestampText:u,type:s="default"})=>{const i=m?new Date(m):void 0,c=i?e.jsx("time",{className:t.timestamp,dateTime:i.toISOString(),children:u??i.toLocaleString()}):null;return e.jsxs("div",{className:t["message-group"],"data-message-type":s,"data-component":"message",children:[a&&e.jsx(x.Avatar,{accessibleLabel:a,color:r,imageUrl:l,name:a,role:d}),s==="system"&&c,e.jsxs("div",{className:v.t(t.message,f&&t.preview),"data-appearance":o,"data-id":p,"data-type":s,children:[s=="system"&&e.jsx(j.Icon,{fill:!0,gap:"right",name:_}),g]}),n&&e.jsx("div",{className:t.attachments,children:n}),s!=="system"&&c]})};exports.Message=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const e=require("react/jsx-runtime"),v=require("../../classix-5H4IWnMA.cjs"),j=require("../avatar/index.cjs"),h=require("../icon/index.cjs"),f="_attachments_opxtp_1",w="_message_opxtp_11",S="_timestamp_opxtp_125",b="_preview_opxtp_130",t={attachments:f,"message-group":"_message-group_opxtp_11",message:w,timestamp:S,preview:b},q=({appearance:c="default",attachments:i,author:a,authorColor:r,authorImageUrl:l,authorRole:p,content:d,iconName:g="info",id:_,preview:x,timestamp:m,timestampText:u,type:s="default"})=>{const n=m?new Date(m):void 0,o=n?e.jsx("time",{className:t.timestamp,dateTime:n.toISOString(),children:u??n.toLocaleString()}):null;return e.jsxs("div",{className:t["message-group"],"data-message-type":s,"data-component":"message",children:[a&&e.jsx(j.Avatar,{accessibleLabel:a,color:r,imageUrl:l,name:a,role:p}),s==="system"&&o,e.jsxs("div",{className:v.t(t.message,x&&t.preview),"data-appearance":c,"data-id":_,"data-type":s,children:[s=="system"&&e.jsx(h.Icon,{fill:!0,gap:"right",name:g}),d]}),i&&e.jsx("div",{className:t.attachments,children:i}),s!=="system"&&o]})};exports.Message=q;
 //# sourceMappingURL=index.cjs.map

package/dist/components/message/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorRole?: string;\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  timestamp?: Date | string;\n  timestampText?: React.ReactNode;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorRole,\n  content,\n  iconName = 'info',\n  id,\n  preview,\n  timestamp,\n  timestampText,\n  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\n  const timestampElement = date ? (\n    <time\n      className={styles.timestamp}\n      dateTime={date.toISOString()}\n    >\n      {timestampText ?? date.toLocaleString()}\n    </time>\n  ) : null;\n\n  return (\n    <div\n      className={styles['message-group']}\n      data-message-type={type}\n    >\n      {author && (\n        <Avatar\n          accessibleLabel={author}\n          color={authorColor}\n          imageUrl={authorImageUrl}\n          name={author}\n          role={authorRole}\n        />\n      )}\n      {type === 'system' && timestampElement}\n      <div\n        className={cx(styles.message, preview && styles.preview)}\n        data-appearance={appearance}\n        data-id={id}\n        data-type={type}\n      >\n        {type == 'system' && (\n          <Icon\n            fill\n            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' && timestampElement}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":"uZAwBaA,EAAUA,CAAC,CACtBC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,OACXC,GAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,cAAAA,EACAC,KAAAA,EAAO,SACO,IAAM,CACpB,MAAMC,EAAOH,EAAY,IAAII,KAAKJ,CAAS,EAAIK,OACzCC,EAAmBH,EACvBI,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAOR,UAClB,SAAUG,EAAKM,cAEdR,SAAAA,GAAiBE,EAAKO,eAAAA,EACzB,EACE,KAEJ,OACEC,OAAC,OACC,UAAWH,EAAO,eAAe,EACjC,oBAAmBN,EAAK,iBAAA,UAEvBV,SAAAA,CAAAA,GACCe,EAAAA,IAACK,EAAAA,OAAA,CACC,gBAAiBpB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGpBO,IAAS,UAAYI,EACtBK,EAAAA,KAAC,MAAA,CACC,UAAWE,EAAAA,EAAGL,EAAOM,QAASf,GAAWS,EAAOT,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,gBACNa,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMlB,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAegB,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAOjB,YAAcA,SAAAA,EAAY,EAChEW,IAAS,UAAYI,CAAAA,EACxB,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorRole?: string;\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  timestamp?: Date | string;\n  timestampText?: React.ReactNode;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorRole,\n  content,\n  iconName = 'info',\n  id,\n  preview,\n  timestamp,\n  timestampText,\n  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\n  const timestampElement = date ? (\n    <time\n      className={styles.timestamp}\n      dateTime={date.toISOString()}\n    >\n      {timestampText ?? date.toLocaleString()}\n    </time>\n  ) : null;\n\n  return (\n    <div\n      className={styles['message-group']}\n      data-message-type={type}\n    >\n      {author && (\n        <Avatar\n          accessibleLabel={author}\n          color={authorColor}\n          imageUrl={authorImageUrl}\n          name={author}\n          role={authorRole}\n        />\n      )}\n      {type === 'system' && timestampElement}\n      <div\n        className={cx(styles.message, preview && styles.preview)}\n        data-appearance={appearance}\n        data-id={id}\n        data-type={type}\n      >\n        {type == 'system' && (\n          <Icon\n            fill\n            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' && timestampElement}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":"wZAwBaA,EAAUA,CAAC,CACtBC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,OACXC,GAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,cAAAA,EACAC,KAAAA,EAAO,SACO,IAAM,CACpB,MAAMC,EAAOH,EAAY,IAAII,KAAKJ,CAAS,EAAIK,OACzCC,EAAmBH,EACvBI,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAOR,UAClB,SAAUG,EAAKM,cAEdR,SAAAA,GAAiBE,EAAKO,eAAAA,EACzB,EACE,KAEJ,OACEC,OAAC,OACC,UAAWH,EAAO,eAAe,EACjC,oBAAmBN,EAAK,iBAAA,UAEvBV,SAAAA,CAAAA,GACCe,EAAAA,IAACK,EAAAA,OAAA,CACC,gBAAiBpB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGpBO,IAAS,UAAYI,EACtBK,EAAAA,KAAC,MAAA,CACC,UAAWE,EAAAA,EAAGL,EAAOM,QAASf,GAAWS,EAAOT,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,gBACNa,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMlB,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAegB,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAOjB,YAAcA,SAAAA,EAAY,EAChEW,IAAS,UAAYI,CAAAA,EACxB,CAEJ"}

package/dist/components/message/index.js

@@ -1,37 +1,37 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { t as u } from "../../classix-DG18itHa.js";
-import { Avatar as w } from "../avatar/index.js";
-import { Icon as N } from "../icon/index.js";
-import '../../assets/index15.css';const x = "_message_fif28_1", S = "_timestamp_fif28_95", b = "_attachments_fif28_100", j = "_preview_fif28_119", s = {
-  "message-group": "_message-group_fif28_1",
-  message: x,
-  timestamp: S,
-  attachments: b,
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import { t as h } from "../../classix-DG18itHa.js";
+import { Avatar as u } from "../avatar/index.js";
+import { Icon as w } from "../icon/index.js";
+import '../../assets/index15.css';const N = "_attachments_opxtp_1", S = "_message_opxtp_11", b = "_timestamp_opxtp_125", j = "_preview_opxtp_130", t = {
+  attachments: N,
+  "message-group": "_message-group_opxtp_11",
+  message: S,
+  timestamp: b,
   preview: j
 }, D = ({
-  appearance: c = "default",
-  attachments: i,
-  author: t,
-  authorColor: l,
-  authorImageUrl: d,
-  authorRole: f,
+  appearance: p = "default",
+  attachments: o,
+  author: a,
+  authorColor: c,
+  authorImageUrl: l,
+  authorRole: d,
   content: g,
-  iconName: p = "info",
-  id: _,
-  preview: v,
-  timestamp: o,
-  timestampText: h,
+  iconName: _ = "info",
+  id: v,
+  preview: f,
+  timestamp: i,
+  timestampText: x,
   type: e = "default"
 }) => {
-  const m = o ? new Date(o) : void 0, r = m ? /* @__PURE__ */ a("time", { className: s.timestamp, dateTime: m.toISOString(), children: h ?? m.toLocaleString() }) : null;
-  return /* @__PURE__ */ n("div", { className: s["message-group"], "data-message-type": e, "data-component": "message", children: [
-    t && /* @__PURE__ */ a(w, { accessibleLabel: t, color: l, imageUrl: d, name: t, role: f }),
+  const m = i ? new Date(i) : void 0, r = m ? /* @__PURE__ */ s("time", { className: t.timestamp, dateTime: m.toISOString(), children: x ?? m.toLocaleString() }) : null;
+  return /* @__PURE__ */ n("div", { className: t["message-group"], "data-message-type": e, "data-component": "message", children: [
+    a && /* @__PURE__ */ s(u, { accessibleLabel: a, color: c, imageUrl: l, name: a, role: d }),
     e === "system" && r,
-    /* @__PURE__ */ n("div", { className: u(s.message, v && s.preview), "data-appearance": c, "data-id": _, "data-type": e, children: [
-      e == "system" && /* @__PURE__ */ a(N, { fill: !0, gap: "right", name: p }),
+    /* @__PURE__ */ n("div", { className: h(t.message, f && t.preview), "data-appearance": p, "data-id": v, "data-type": e, children: [
+      e == "system" && /* @__PURE__ */ s(w, { fill: !0, gap: "right", name: _ }),
       g
     ] }),
-    i && /* @__PURE__ */ a("div", { className: s.attachments, children: i }),
+    o && /* @__PURE__ */ s("div", { className: t.attachments, children: o }),
     e !== "system" && r
   ] });
 };

package/dist/components/messages/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const s=require("react/jsx-runtime"),w=require("../../classix-5H4IWnMA.cjs"),o=require("react"),M=require("../editor/index.cjs"),S=require("../list/index.cjs"),E=require("../tooltip/index.cjs"),I=require("../message/index.cjs"),L="_messages_5h1dw_1",T="_fill_5h1dw_20",g={messages:L,fill:T},H=({fill:f=!1,files:i,handleUpload:p,maxEditorRows:_=5,message:r="",messages:t,minEditorRows:x=1,onChange:q,onFilesChange:n,onSubmit:j,placeholder:y,sending:R,tooltipLabel:c})=>{var u;const a=o.useRef(null),[b,h]=o.useState([]),l=i??b,d=(u=t[t.length-1])==null?void 0:u.id,v=r.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return o.useLayoutEffect(()=>{var m;const e=(m=a.current)==null?void 0:m.querySelector("[data-message-list]");!e||d===void 0||(e.scrollTop=e.scrollHeight)},[d]),s.jsxs("div",{className:w.t(g.messages,f&&g.fill),"data-component":"messages",ref:a,children:[s.jsx(S.List,{"data-message-list":!0,children:t.map(e=>s.jsx(I.Message,{...e},e.id))}),c&&s.jsx(E.Tooltip,{variant:"static",children:c}),s.jsx(M.Editor,{autofocus:!0,content:r,disabled:R||v&&l.length===0,files:l,maxRows:_,minRows:x,onChange:q,onFilesChange:e=>{i===void 0&&h(e),n==null||n(e)},onSubmit:j,onUpload:p,placeholder:y,submitLabel:"Send message"})]})};exports.Messages=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const s=require("react/jsx-runtime"),S=require("../../classix-5H4IWnMA.cjs"),o=require("react"),h=require("../editor/index.cjs"),w=require("../list/index.cjs"),E=require("../tooltip/index.cjs"),I=require("../message/index.cjs"),L="_messages_pqp89_1",T="_fill_pqp89_20",p={messages:L,fill:T},H=({fill:g=!1,files:i,handleUpload:f,maxEditorRows:_=5,message:r="",messages:t,minEditorRows:q=1,onChange:x,onFilesChange:n,onSubmit:j,placeholder:y,sending:R,tooltipLabel:c})=>{var d;const a=o.useRef(null),[b,v]=o.useState([]),l=i??b,u=(d=t[t.length-1])==null?void 0:d.id,M=r.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return o.useLayoutEffect(()=>{var m;const e=(m=a.current)==null?void 0:m.querySelector("[data-message-list]");!e||u===void 0||(e.scrollTop=e.scrollHeight)},[u]),s.jsxs("div",{className:S.t(p.messages,g&&p.fill),"data-component":"messages",ref:a,children:[s.jsx(w.List,{"data-message-list":!0,children:t.map(e=>s.jsx(I.Message,{...e},e.id))}),c&&s.jsx(E.Tooltip,{variant:"static",children:c}),s.jsx(h.Editor,{autofocus:!0,content:r,disabled:R||M&&l.length===0,files:l,maxRows:_,minRows:q,onChange:x,onFilesChange:e=>{i===void 0&&v(e),n==null||n(e)},onSubmit:j,onUpload:f,placeholder:y,submitLabel:"Send message"})]})};exports.Messages=H;
 //# sourceMappingURL=index.cjs.map

package/dist/components/messages/index.js

@@ -1,40 +1,40 @@
-import { jsxs as E, jsx as e } from "react/jsx-runtime";
-import { t as I } from "../../classix-DG18itHa.js";
-import { useRef as L, useState as M, useLayoutEffect as S } from "react";
-import { Editor as j } from "../editor/index.js";
-import { List as q } from "../list/index.js";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { t as E } from "../../classix-DG18itHa.js";
+import { useRef as I, useState as L, useLayoutEffect as M } from "react";
+import { Editor as S } from "../editor/index.js";
+import { List as j } from "../list/index.js";
 import { Tooltip as T } from "../tooltip/index.js";
 import { Message as H } from "../message/index.js";
-import '../../assets/index13.css';const N = "_messages_5h1dw_1", U = "_fill_5h1dw_20", f = {
+import '../../assets/index13.css';const N = "_messages_pqp89_1", U = "_fill_pqp89_20", p = {
   messages: N,
   fill: U
 }, K = ({
-  fill: p = !1,
+  fill: d = !1,
   files: r,
   handleUpload: u,
   maxEditorRows: g = 5,
   message: i = "",
   messages: t,
   minEditorRows: _ = 1,
-  onChange: h,
+  onChange: q,
   onFilesChange: o,
-  onSubmit: w,
-  placeholder: v,
-  sending: y,
+  onSubmit: v,
+  placeholder: y,
+  sending: R,
   tooltipLabel: a
 }) => {
   var c;
-  const l = L(null), [R, b] = M([]), m = r ?? R, n = (c = t[t.length - 1]) == null ? void 0 : c.id, x = i.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
-  return S(() => {
-    var d;
-    const s = (d = l.current) == null ? void 0 : d.querySelector("[data-message-list]");
+  const l = I(null), [b, h] = L([]), m = r ?? b, n = (c = t[t.length - 1]) == null ? void 0 : c.id, w = i.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
+  return M(() => {
+    var f;
+    const s = (f = l.current) == null ? void 0 : f.querySelector("[data-message-list]");
     !s || n === void 0 || (s.scrollTop = s.scrollHeight);
-  }, [n]), /* @__PURE__ */ E("div", { className: I(f.messages, p && f.fill), "data-component": "messages", ref: l, children: [
-    /* @__PURE__ */ e(q, { "data-message-list": !0, children: t.map((s) => /* @__PURE__ */ e(H, { ...s }, s.id)) }),
+  }, [n]), /* @__PURE__ */ x("div", { className: E(p.messages, d && p.fill), "data-component": "messages", ref: l, children: [
+    /* @__PURE__ */ e(j, { "data-message-list": !0, children: t.map((s) => /* @__PURE__ */ e(H, { ...s }, s.id)) }),
     a && /* @__PURE__ */ e(T, { variant: "static", children: a }),
-    /* @__PURE__ */ e(j, { autofocus: !0, content: i, disabled: y || x && m.length === 0, files: m, maxRows: g, minRows: _, onChange: h, onFilesChange: (s) => {
-      r === void 0 && b(s), o == null || o(s);
-    }, onSubmit: w, onUpload: u, placeholder: v, submitLabel: "Send message" })
+    /* @__PURE__ */ e(S, { autofocus: !0, content: i, disabled: R || w && m.length === 0, files: m, maxRows: g, minRows: _, onChange: q, onFilesChange: (s) => {
+      r === void 0 && h(s), o == null || o(s);
+    }, onSubmit: v, onUpload: u, placeholder: y, submitLabel: "Send message" })
   ] });
 };
 export {