@solibo/solibo-ui 2.0.0 → 2.0.2

package/dist/components/list/index.js

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as F, Fragment as V } from "react/jsx-runtime";
-import { t as d } from "../../classix-DG18itHa.js";
+import { t as g } from "../../classix-DG18itHa.js";
 import e from "react";
-import '../../assets/index50.css';function g(t) {
+import '../../assets/index50.css';function k(t) {
   return e.isValidElement(t) && t.type === e.Fragment;
 }
 function x(t, n = []) {
   return e.Children.forEach(t, (s) => {
-    g(s) ? x(s.props.children, n) : n.push(s);
+    k(s) ? x(s.props.children, n) : n.push(s);
   }), n;
 }
 function E(t, {
@@ -21,9 +21,9 @@ function E(t, {
     }, l);
   });
 }
-const k = "_controls_1i7ll_1", C = "_horizontal_1i7ll_6", j = "_list_1i7ll_17", v = "_columns_1i7ll_57", L = "_compact_1i7ll_74", o = {
-  controls: k,
-  horizontal: C,
+const C = "_controls_1i7ll_1", d = "_horizontal_1i7ll_6", j = "_list_1i7ll_17", v = "_columns_1i7ll_57", L = "_compact_1i7ll_74", o = {
+  controls: C,
+  horizontal: d,
   list: j,
   columns: v,
   compact: L
@@ -42,7 +42,7 @@ function w({
   style: z,
   ...f
 }) {
-  const _ = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, p = d(n, o.list, _ > 1 && o.columns, i && o.horizontal, m && o.compact), y = {
+  const _ = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, p = g(n, o.list, _ > 1 && o.columns, i && o.horizontal, m && o.compact), y = {
     ...z,
     "--list-columns": _
   }, h = r ? /* @__PURE__ */ a("ol", { className: p, ref: (c) => N(u, c), style: y, ...f, children: E(t) }) : /* @__PURE__ */ a("ul", { className: p, ref: (c) => N(u, c), style: y, ...f, children: E(t) });

package/dist/components/message/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),x=require("../../classix-5H4IWnMA.cjs"),j=require("../avatar/index.cjs"),h=require("../icon/index.cjs"),k="_attachments_1tffk_1",w="_message_1tffk_11",S="_timestamp_1tffk_144",b="_preview_1tffk_149",t={attachments:k,"message-group":"_message-group_1tffk_11",message:w,timestamp:S,preview:b},q=({appearance:o="default",attachments:m,author:a,authorColor:r,authorImageUrl:l,authorLink:d,authorRole:g,content:_,iconName:p="Info",id:f,preview:u,timestamp:i,timestampText:v,type:s="default"})=>{const n=i?new Date(i):void 0,c=n?e.jsx("time",{className:t.timestamp,dateTime:n.toISOString(),children:v??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,link:d,name:a,role:g}),s==="system"&&c,e.jsxs("div",{className:x.t(t.message,u&&t.preview),"data-appearance":o,"data-id":f,"data-type":s,children:[s=="system"&&e.jsx(h.Icon,{gap:"right",name:p}),_]}),m&&e.jsx("div",{className:t.attachments,children:m}),s!=="system"&&c]})};exports.Message=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),f=require("../../classix-5H4IWnMA.cjs"),h=require("../avatar/index.cjs"),k=require("../icon/index.cjs"),N="_attachments_77ukg_1",w="_footer_77ukg_27",S="_message_77ukg_11",b="_timestamp_77ukg_152",q="_actions_77ukg_157",y="_preview_77ukg_169",s={attachments:N,"message-group":"_message-group_77ukg_11",footer:w,message:S,timestamp:b,actions:q,preview:y},I=({actions:c,appearance:r="default",attachments:i,author:a,authorColor:g,authorImageUrl:l,authorLink:d,authorRole:_,content:u,iconName:p="Info",id:v,preview:x,timestamp:m,timestampText:j,type:t="default"})=>{const n=m?new Date(m):void 0,o=n?e.jsx("time",{className:s.timestamp,dateTime:n.toISOString(),children:j??n.toLocaleString()}):null;return e.jsxs("div",{className:s["message-group"],"data-message-type":t,"data-component":"message",children:[a&&e.jsx(h.Avatar,{accessibleLabel:a,color:g,imageUrl:l,link:d,name:a,role:_}),t==="system"&&o,e.jsxs("div",{className:f.t(s.message,x&&s.preview),"data-appearance":r,"data-id":v,"data-type":t,children:[t=="system"&&e.jsx(k.Icon,{gap:"right",name:p}),u]}),i&&e.jsx("div",{className:s.attachments,children:i}),t!=="system"&&(c?e.jsxs("div",{className:s.footer,children:[o,e.jsx("div",{className:s.actions,"data-message-actions":!0,children:c})]}):o)]})};exports.Message=I;
 //# 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 type { IconName } from '@/components/icon';\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  authorLink?: 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  authorLink,\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          link={authorLink}\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            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","authorLink","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":"wZAyBaA,EAAUA,CAAC,CACtBC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,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,UAEvBX,SAAAA,CAAAA,GACCgB,EAAAA,IAACK,EAAAA,OAAA,CACC,gBAAiBrB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMC,EACN,KAAMH,EACN,KAAMI,EAAW,EAGpBO,IAAS,UAAYI,EACtBK,EAAAA,KAAC,MAAA,CACC,UAAWE,EAAAA,EAAGL,EAAOM,QAASf,GAAWS,EAAOT,OAAO,EACvD,kBAAiBV,EACjB,UAASS,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,UACPK,EAAAA,IAACQ,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMlB,EAAS,EAGlBD,CAAAA,EACH,EACCN,GAAeiB,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAOlB,YAAcA,SAAAA,EAAY,EAChEY,IAAS,UAAYI,CAAAA,EACxB,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport type { IconName } from '@/components/icon';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  /** Controls shown under the message, e.g. a delete button for the author's own message. */\n  actions?: React.ReactNode;\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorLink?: 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  actions,\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorLink,\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          link={authorLink}\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            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' &&\n        (actions ? (\n          <div className={styles.footer}>\n            {timestampElement}\n            <div\n              className={styles.actions}\n              data-message-actions\n            >\n              {actions}\n            </div>\n          </div>\n        ) : (\n          timestampElement\n        ))}\n    </div>\n  );\n};\n"],"names":["Message","actions","appearance","attachments","author","authorColor","authorImageUrl","authorLink","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon","footer"],"mappings":"udA2BaA,EAAUA,CAAC,CACtBC,QAAAA,EACAC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,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,UAEvBX,SAAAA,CAAAA,GACCgB,EAAAA,IAACK,EAAAA,OAAA,CACC,gBAAiBrB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMC,EACN,KAAMH,EACN,KAAMI,EAAW,EAGpBO,IAAS,UAAYI,EACtBK,EAAAA,KAAC,MAAA,CACC,UAAWE,EAAAA,EAAGL,EAAOM,QAASf,GAAWS,EAAOT,OAAO,EACvD,kBAAiBV,EACjB,UAASS,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,UACPK,EAAAA,IAACQ,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMlB,EAAS,EAGlBD,CAAAA,EACH,EACCN,GAAeiB,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAOlB,YAAcA,SAAAA,EAAY,EAChEY,IAAS,WACPd,SACE,MAAA,CAAI,UAAWoB,EAAOQ,OACpBV,SAAAA,CAAAA,QACA,MAAA,CACC,UAAWE,EAAOpB,QAClB,uBAAoB,GAEnBA,SAAAA,CAAAA,CACH,CAAA,CAAA,CACF,EAEAkB,EAAAA,EAEN,CAEJ"}

package/dist/components/message/index.js

@@ -1,42 +1,48 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { t as u } from "../../classix-DG18itHa.js";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { t as N } from "../../classix-DG18itHa.js";
 import { Avatar as w } from "../avatar/index.js";
-import { Icon as N } from "../icon/index.js";
-import '../../assets/index16.css';const x = "_attachments_1tffk_1", I = "_message_1tffk_11", S = "_timestamp_1tffk_144", b = "_preview_1tffk_149", s = {
-  attachments: x,
-  "message-group": "_message-group_1tffk_11",
-  message: I,
-  timestamp: S,
-  preview: b
-}, D = ({
-  appearance: c = "default",
-  attachments: i,
-  author: a,
+import { Icon as x } from "../icon/index.js";
+import '../../assets/index16.css';const I = "_attachments_77ukg_1", S = "_footer_77ukg_27", b = "_message_77ukg_11", j = "_timestamp_77ukg_152", y = "_actions_77ukg_157", L = "_preview_77ukg_169", e = {
+  attachments: I,
+  "message-group": "_message-group_77ukg_11",
+  footer: S,
+  message: b,
+  timestamp: j,
+  actions: y,
+  preview: L
+}, O = ({
+  actions: n,
+  appearance: g = "default",
+  attachments: c,
+  author: t,
   authorColor: l,
   authorImageUrl: d,
-  authorLink: g,
+  authorLink: _,
   authorRole: p,
-  content: f,
-  iconName: _ = "Info",
+  content: u,
+  iconName: f = "Info",
   id: v,
   preview: h,
-  timestamp: n,
+  timestamp: r,
   timestampText: k,
-  type: e = "default"
+  type: s = "default"
 }) => {
-  const m = n ? new Date(n) : void 0, o = m ? /* @__PURE__ */ t("time", { className: s.timestamp, dateTime: m.toISOString(), children: k ?? m.toLocaleString() }) : null;
-  return /* @__PURE__ */ r("div", { className: s["message-group"], "data-message-type": e, "data-component": "message", children: [
-    a && /* @__PURE__ */ t(w, { accessibleLabel: a, color: l, imageUrl: d, link: g, name: a, role: p }),
-    e === "system" && o,
-    /* @__PURE__ */ r("div", { className: u(s.message, h && s.preview), "data-appearance": c, "data-id": v, "data-type": e, children: [
-      e == "system" && /* @__PURE__ */ t(N, { gap: "right", name: _ }),
-      f
+  const m = r ? new Date(r) : void 0, o = m ? /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: k ?? m.toLocaleString() }) : null;
+  return /* @__PURE__ */ i("div", { className: e["message-group"], "data-message-type": s, "data-component": "message", children: [
+    t && /* @__PURE__ */ a(w, { accessibleLabel: t, color: l, imageUrl: d, link: _, name: t, role: p }),
+    s === "system" && o,
+    /* @__PURE__ */ i("div", { className: N(e.message, h && e.preview), "data-appearance": g, "data-id": v, "data-type": s, children: [
+      s == "system" && /* @__PURE__ */ a(x, { gap: "right", name: f }),
+      u
     ] }),
-    i && /* @__PURE__ */ t("div", { className: s.attachments, children: i }),
-    e !== "system" && o
+    c && /* @__PURE__ */ a("div", { className: e.attachments, children: c }),
+    s !== "system" && (n ? /* @__PURE__ */ i("div", { className: e.footer, children: [
+      o,
+      /* @__PURE__ */ a("div", { className: e.actions, "data-message-actions": !0, children: n })
+    ] }) : o)
   ] });
 };
 export {
-  D as Message
+  O as Message
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport type { IconName } from '@/components/icon';\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  authorLink?: 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  authorLink,\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          link={authorLink}\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            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","authorLink","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":";;;;;;;;;;GAyBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK,QACzCC,IAAmBH,IACvB,gBAAAI,EAAC,QAAA,EACC,WAAWC,EAAOR,WAClB,UAAUG,EAAKM,eAEdR,UAAAA,KAAiBE,EAAKO,eAAAA,GACzB,IACE;AAEJ,SACE,gBAAAC,EAAC,SACC,WAAWH,EAAO,eAAe,GACjC,qBAAmBN,GAAK,kBAAA,WAEvBX,UAAAA;AAAAA,IAAAA,KACC,gBAAAgB,EAACK,GAAA,EACC,iBAAiBrB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMC,GACN,MAAMH,GACN,MAAMI,GAAW;AAAA,IAGpBO,MAAS,YAAYI;AAAAA,IACtB,gBAAAK,EAAC,OAAA,EACC,WAAWE,EAAGL,EAAOM,SAASf,KAAWS,EAAOT,OAAO,GACvD,mBAAiBV,GACjB,WAASS,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,YACP,gBAAAK,EAACQ,GAAA,EACC,KAAI,SACJ,MAAMlB,GAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCN,KAAe,gBAAAiB,EAAC,OAAA,EAAI,WAAWC,EAAOlB,aAAcA,UAAAA,GAAY;AAAA,IAChEY,MAAS,YAAYI;AAAAA,EAAAA,GACxB;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport type { IconName } from '@/components/icon';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  /** Controls shown under the message, e.g. a delete button for the author's own message. */\n  actions?: React.ReactNode;\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorLink?: 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  actions,\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorLink,\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          link={authorLink}\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            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' &&\n        (actions ? (\n          <div className={styles.footer}>\n            {timestampElement}\n            <div\n              className={styles.actions}\n              data-message-actions\n            >\n              {actions}\n            </div>\n          </div>\n        ) : (\n          timestampElement\n        ))}\n    </div>\n  );\n};\n"],"names":["Message","actions","appearance","attachments","author","authorColor","authorImageUrl","authorLink","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon","footer"],"mappings":";;;;;;;;;;;;GA2BaA,IAAUA,CAAC;AAAA,EACtBC,SAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK,QACzCC,IAAmBH,IACvB,gBAAAI,EAAC,QAAA,EACC,WAAWC,EAAOR,WAClB,UAAUG,EAAKM,eAEdR,UAAAA,KAAiBE,EAAKO,eAAAA,GACzB,IACE;AAEJ,SACE,gBAAAC,EAAC,SACC,WAAWH,EAAO,eAAe,GACjC,qBAAmBN,GAAK,kBAAA,WAEvBX,UAAAA;AAAAA,IAAAA,KACC,gBAAAgB,EAACK,GAAA,EACC,iBAAiBrB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMC,GACN,MAAMH,GACN,MAAMI,GAAW;AAAA,IAGpBO,MAAS,YAAYI;AAAAA,IACtB,gBAAAK,EAAC,OAAA,EACC,WAAWE,EAAGL,EAAOM,SAASf,KAAWS,EAAOT,OAAO,GACvD,mBAAiBV,GACjB,WAASS,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,YACP,gBAAAK,EAACQ,GAAA,EACC,KAAI,SACJ,MAAMlB,GAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCN,KAAe,gBAAAiB,EAAC,OAAA,EAAI,WAAWC,EAAOlB,aAAcA,UAAAA,GAAY;AAAA,IAChEY,MAAS,aACPd,sBACE,OAAA,EAAI,WAAWoB,EAAOQ,QACpBV,UAAAA;AAAAA,MAAAA;AAAAA,wBACA,OAAA,EACC,WAAWE,EAAOpB,SAClB,wBAAoB,IAEnBA,UAAAA,EAAAA,CACH;AAAA,IAAA,EAAA,CACF,IAEAkB;AAAAA,EAAAA,GAEN;AAEJ;"}

package/dist/components/nav/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const l=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),u=require("react"),b=require("../../icons-Dv_p0bUF.cjs"),m="_nav_xrgjg_3",v="_label_xrgjg_9",p="_item_xrgjg_17",x="_actions_xrgjg_36",j="_highlighted_xrgjg_60",f="_horizontal_xrgjg_64",N="_sidebar_xrgjg_74",w="_tabs_xrgjg_117",q="_pills_xrgjg_137",t={nav:m,label:v,item:p,actions:x,highlighted:j,horizontal:f,sidebar:N,tabs:w,pills:q},y={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},z=({className:a,...e})=>l.jsx("span",{className:r.t(a,t.label),...e,"data-component":"navlabel"}),S=({actions:a,children:e,className:o,highlighted:n=!1,...s})=>l.jsxs("div",{className:r.t(t.item,n&&t.highlighted,o),"data-nav-item":!0,...s,"data-component":"navitem",children:[e,a&&l.jsx("span",{className:t.actions,children:a})]}),C=({animation:a,children:e,className:o,horizontal:n=!1,variant:s="default",...g})=>{const[d,c]=u.useState(!1),_={"--icon-svg":b.iconSVG("CaretDown")};return l.jsx("nav",{className:r.t(o,n&&t.horizontal,t.nav,y[s]),"data-animation":a,"data-open":d?"true":"false","data-orientation":n?"horizontal":"vertical",onBlurCapture:i=>{if(s!=="pills"||window.innerWidth>960)return;const h=i.relatedTarget;i.currentTarget.contains(h)||c(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||c(i=>!i)},style:_,...g,"data-component":"nav",children:e})};exports.Nav=C;exports.NavItem=S;exports.NavLabel=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),b=require("react"),m=require("../../icons-Dv_p0bUF.cjs"),v="_nav_rztyo_3",p="_label_rztyo_9",g="_item_rztyo_17",y="_actions_rztyo_36",z="_highlighted_rztyo_60",f="_horizontal_rztyo_64",N="_sidebar_rztyo_74",x="_tabs_rztyo_131",j="_pills_rztyo_151",t={nav:v,label:p,item:g,actions:y,highlighted:z,horizontal:f,sidebar:N,tabs:x,pills:j},w={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},q=({className:a,...e})=>i.jsx("span",{className:r.t(a,t.label),...e,"data-component":"navlabel"}),S=({actions:a,children:e,className:l,highlighted:n=!1,...s})=>i.jsxs("div",{className:r.t(t.item,n&&t.highlighted,l),"data-nav-item":!0,...s,"data-component":"navitem",children:[e,a&&i.jsx("span",{className:t.actions,children:a})]}),C=({animation:a,children:e,className:l,horizontal:n=!1,variant:s="default",...d})=>{const[_,c]=b.useState(!1),h={"--icon-svg":m.iconSVG("CaretDown")};return i.jsx("nav",{className:r.t(l,n&&t.horizontal,t.nav,w[s]),"data-animation":a,"data-open":_?"true":"false","data-orientation":n?"horizontal":"vertical",onBlurCapture:o=>{if(s!=="pills"||window.innerWidth>960)return;const u=o.relatedTarget;o.currentTarget.contains(u)||c(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||c(o=>!o)},style:h,...d,"data-component":"nav",children:e})};exports.Nav=C;exports.NavItem=S;exports.NavLabel=q;
 //# sourceMappingURL=index.cjs.map

package/dist/components/nav/index.js

@@ -1,18 +1,18 @@
-import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
 import { t as r } from "../../classix-DG18itHa.js";
-import { useState as p } from "react";
-import { i as b } from "../../icons-dUP7sKyt.js";
-import '../../assets/index13.css';const f = "_nav_xrgjg_3", v = "_label_xrgjg_9", x = "_item_xrgjg_17", u = "_actions_xrgjg_36", j = "_highlighted_xrgjg_60", N = "_horizontal_xrgjg_64", w = "_sidebar_xrgjg_74", z = "_tabs_xrgjg_117", C = "_pills_xrgjg_137", t = {
-  nav: f,
-  label: v,
-  item: x,
-  actions: u,
-  highlighted: j,
+import { useState as b } from "react";
+import { i as f } from "../../icons-dUP7sKyt.js";
+import '../../assets/index13.css';const v = "_nav_rztyo_3", z = "_label_rztyo_9", u = "_item_rztyo_17", g = "_actions_rztyo_36", y = "_highlighted_rztyo_60", N = "_horizontal_rztyo_64", w = "_sidebar_rztyo_74", x = "_tabs_rztyo_131", C = "_pills_rztyo_151", t = {
+  nav: v,
+  label: z,
+  item: u,
+  actions: g,
+  highlighted: y,
   horizontal: N,
   sidebar: w,
-  tabs: z,
+  tabs: x,
   pills: C
-}, y = {
+}, j = {
   default: t.default,
   pills: t.pills,
   sidebar: t.sidebar,
@@ -23,30 +23,30 @@ import '../../assets/index13.css';const f = "_nav_xrgjg_3", v = "_label_xrgjg_9"
 }) => /* @__PURE__ */ l("span", { className: r(a, t.label), ...n, "data-component": "navlabel" }), B = ({
   actions: a,
   children: n,
-  className: o,
-  highlighted: e = !1,
-  ...s
-}) => /* @__PURE__ */ h("div", { className: r(t.item, e && t.highlighted, o), "data-nav-item": !0, ...s, "data-component": "navitem", children: [
+  className: i,
+  highlighted: s = !1,
+  ...o
+}) => /* @__PURE__ */ p("div", { className: r(t.item, s && t.highlighted, i), "data-nav-item": !0, ...o, "data-component": "navitem", children: [
   n,
   a && /* @__PURE__ */ l("span", { className: t.actions, children: a })
 ] }), D = ({
   animation: a,
   children: n,
-  className: o,
-  horizontal: e = !1,
-  variant: s = "default",
-  ...g
+  className: i,
+  horizontal: s = !1,
+  variant: o = "default",
+  ...d
 }) => {
-  const [d, c] = p(!1), _ = {
-    "--icon-svg": b("CaretDown")
+  const [_, c] = b(!1), m = {
+    "--icon-svg": f("CaretDown")
   };
-  return /* @__PURE__ */ l("nav", { className: r(o, e && t.horizontal, t.nav, y[s]), "data-animation": a, "data-open": d ? "true" : "false", "data-orientation": e ? "horizontal" : "vertical", onBlurCapture: (i) => {
-    if (s !== "pills" || window.innerWidth > 960) return;
-    const m = i.relatedTarget;
-    i.currentTarget.contains(m) || c(!1);
+  return /* @__PURE__ */ l("nav", { className: r(i, s && t.horizontal, t.nav, j[o]), "data-animation": a, "data-open": _ ? "true" : "false", "data-orientation": s ? "horizontal" : "vertical", onBlurCapture: (e) => {
+    if (o !== "pills" || window.innerWidth > 960) return;
+    const h = e.relatedTarget;
+    e.currentTarget.contains(h) || c(!1);
   }, onClick: () => {
-    s !== "pills" || window.innerWidth > 960 || c((i) => !i);
-  }, style: _, ...g, "data-component": "nav", children: n });
+    o !== "pills" || window.innerWidth > 960 || c((e) => !e);
+  }, style: m, ...d, "data-component": "nav", children: n });
 };
 export {
   D as Nav,

package/dist/components/sortable/index.js

@@ -40,7 +40,7 @@ function ht({
   onChangeOrder: A,
   ...S
 }) {
-  const y = Number.isFinite(i) ? Math.max(1, Math.floor(i)) : 1, _ = $(() => L.Children.toArray(s), [s]), a = u(-1), N = $(() => typeof window < "u" && (navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches), []), p = u(!1), C = u(null), w = u(null), x = u(null), I = u(0), E = u(null), m = u(null), M = u((o) => o.preventDefault()).current, [R, V] = q({
+  const y = Number.isFinite(i) ? Math.max(1, Math.floor(i)) : 1, C = $(() => L.Children.toArray(s), [s]), a = u(-1), N = $(() => typeof window < "u" && (navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches), []), p = u(!1), I = u(null), w = u(null), x = u(null), _ = u(0), E = u(null), m = u(null), M = u((o) => o.preventDefault()).current, [R, V] = q({
     borderRadius: "0px",
     height: 0,
     width: 0,
@@ -51,8 +51,8 @@ function ht({
     "--sortable-placeholder-radius": R.borderRadius,
     "--sortable-placeholder-width": `${R.width}px`
   }, H = (o, t) => {
-    if (t < 0 || t >= _.length || o === t) return;
-    const c = _.slice(), [e] = c.splice(o, 1);
+    if (t < 0 || t >= C.length || o === t) return;
+    const c = C.slice(), [e] = c.splice(o, 1);
     c.splice(t, 0, e), A(c.map((n, r) => ({
       id: String(L.isValidElement(n) ? n.props["data-id"] ?? `idx-${r}` : `idx-${r}`),
       weight: c.length - 1 - r
@@ -72,7 +72,7 @@ function ht({
     }
     return document.scrollingElement instanceof HTMLElement ? document.scrollingElement : null;
   }, P = (o = !1) => {
-    T(), B(), window.removeEventListener("touchmove", M), E.current = null, p.current = !1, C.current = null, x.current = null, I.current = o ? Date.now() + 500 : 0, a.current = -1, D(null);
+    T(), B(), window.removeEventListener("touchmove", M), E.current = null, p.current = !1, I.current = null, x.current = null, _.current = o ? Date.now() + 500 : 0, a.current = -1, D(null);
   }, Y = (o, t) => {
     a.current = o, V(lt(t)), D(o);
   }, G = (o) => o instanceof Element && !!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'), z = (o, t, c) => {
@@ -85,7 +85,7 @@ function ht({
     const c = (n = document.elementFromPoint(o, t)) == null ? void 0 : n.closest("[data-sortable-index]");
     if (!c) return;
     const e = z(c, Number(c.dataset.sortableIndex), t);
-    e !== null && (C.current = e, D(e));
+    e !== null && (I.current = e, D(e));
   }, J = (o) => {
     const t = Z(o);
     if (!t) return;
@@ -122,15 +122,15 @@ function ht({
   };
   return Q(() => () => {
     T(), B(), window.removeEventListener("touchmove", M);
-  }, [M]), /* @__PURE__ */ j(et, { className: W(v, b.sortable, y > 1 && b.columns), columns: i, ordered: !0, style: O, ...S, "data-component": "sortable", children: _.map((o, t) => {
+  }, [M]), /* @__PURE__ */ j(et, { className: W(v, b.sortable, y > 1 && b.columns), columns: i, ordered: !0, style: O, ...S, "data-component": "sortable", children: C.map((o, t) => {
     const c = L.isValidElement(o) ? o.key : null;
     return /* @__PURE__ */ j("li", { "data-sortable-index": t, onClickCapture: (e) => {
-      I.current <= Date.now() || (e.preventDefault(), e.stopPropagation(), I.current = 0);
+      _.current <= Date.now() || (e.preventDefault(), e.stopPropagation(), _.current = 0);
     }, className: W(g !== null && g > t - 10 && g < t + 10 && b.pseudo, g === t && a.current < t && b["target-below"], g === t && a.current > t && b["target-above"], a.current === t && b.dragging), onContextMenu: (e) => {
       (p.current || w.current !== null) && e.preventDefault();
     }, onTouchStart: (e) => {
       if (l || G(e.target)) return;
-      I.current = 0;
+      _.current = 0;
       const n = e.touches[0];
       if (!n) return;
       const r = e.currentTarget;
@@ -138,7 +138,7 @@ function ht({
         x: n.clientX,
         y: n.clientY
       }, T(), w.current = setTimeout(() => {
-        Y(t, r), p.current = !0, C.current = t, E.current = {
+        Y(t, r), p.current = !0, I.current = t, E.current = {
           x: n.clientX,
           y: n.clientY
         }, window.addEventListener("touchmove", M, {
@@ -165,7 +165,7 @@ function ht({
         return;
       }
       e.preventDefault();
-      const n = a.current, r = C.current;
+      const n = a.current, r = I.current;
       n >= 0 && r !== null && n !== r && H(n, r), P(!0);
     }, onTouchCancel: () => P(), draggable: !l && !N, onDragEnd: () => k(), onDragOver: (e) => {
       e.preventDefault(), e.dataTransfer.dropEffect = "move";
@@ -182,7 +182,7 @@ function ht({
       const n = a.current, r = g;
       n < 0 || r === null || n === r || (H(n, r), k());
     }, "data-component": "sortable", children: /* @__PURE__ */ j(U.Provider, { value: {
-      canMoveDown: t < _.length - 1,
+      canMoveDown: t < C.length - 1,
       canMoveUp: t > 0,
       index: t,
       moveDown: () => H(t, t + 1),

package/dist/index.d.ts

@@ -649,11 +649,13 @@ declare type MenuSharedProps = {
     onItemSelect?: (item: MenuItem) => void;
 };
 
-export declare const Message: ({ appearance, attachments, author, authorColor, authorImageUrl, authorLink, authorRole, content, iconName, id, preview, timestamp, timestampText, type, }: MessageOptions) => JSX.Element;
+export declare const Message: ({ actions, appearance, attachments, author, authorColor, authorImageUrl, authorLink, authorRole, content, iconName, id, preview, timestamp, timestampText, type, }: MessageOptions) => JSX.Element;
 
 declare type MessageItem = MessageOptions;
 
 export declare type MessageOptions = {
+    /** Controls shown under the message, e.g. a delete button for the author's own message. */
+    actions?: React.ReactNode;
     appearance?: 'default' | 'document' | 'file';
     attachments?: React.ReactNode;
     author?: string;

package/dist/tokens.json

@@ -363,7 +363,7 @@
     },
     "com.solibo": {
       "packageName": "@solibo/solibo-ui",
-      "packageVersion": "2.0.0"
+      "packageVersion": "2.0.2"
     }
   },
   "$name": "TEST Solibo UI Tokens (Copy)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solibo/solibo-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "scripts": {
     "dev": "pnpm run tokens:build && vite build --watch",
@@ -42,13 +42,13 @@
     "dist"
   ],
   "dependencies": {
-    "@lexical/html": "^0.21.0",
-    "@lexical/link": "^0.21.0",
-    "@lexical/list": "^0.21.0",
-    "@lexical/react": "^0.21.0",
-    "@lexical/utils": "^0.21.0",
+    "@lexical/html": "0.52.0",
+    "@lexical/link": "0.52.0",
+    "@lexical/list": "0.52.0",
+    "@lexical/react": "0.52.0",
+    "@lexical/utils": "0.52.0",
     "classix": "^2.2.8",
-    "lexical": "^0.21.0",
+    "lexical": "0.52.0",
     "sanitize-html": "^2.17.1"
   },
   "devDependencies": {