@solibo/solibo-ui 2.0.3 → 2.1.0

package/dist/components/list/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index50.css');const i=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),n=require("react");function d(t){return n.isValidElement(t)&&t.type===n.Fragment}function E(t,s=[]){return n.Children.forEach(t,e=>{d(e)?E(e.props.children,s):s.push(e)}),s}function x(t,{wrapper:s="li"}={}){return E(t).filter(l=>l!==null).map((l,r)=>{if(n.isValidElement(l)&&l.type===s)return l;const c=n.isValidElement(l)&&l.key!=null?l.key:r;return n.createElement(s,{key:c},l)})}const z="_controls_1i7ll_1",F="_horizontal_1i7ll_6",V="_list_1i7ll_17",b="_columns_1i7ll_57",k="_compact_1i7ll_74",o={controls:z,horizontal:F,list:V,columns:b,compact:k},j=(t,s)=>{typeof t=="function"?t(s):t&&(t.current=s)};function q({children:t,className:s,columns:e=1,compact:u=!1,controls:l,horizontal:r,ordered:c,ref:m,style:N,...f}){const _=Number.isFinite(e)?Math.max(1,Math.floor(e)):1,y=g.t(s,o.list,_>1&&o.columns,r&&o.horizontal,u&&o.compact),p={...N,"--list-columns":_},h=c?i.jsx("ol",{className:y,ref:a=>j(m,a),style:p,...f,children:x(t)}):i.jsx("ul",{className:y,ref:a=>j(m,a),style:p,...f,children:x(t)});return l==null?h:i.jsxs(i.Fragment,{children:[i.jsx("div",{className:o.controls,children:l}),h]})}exports.List=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index51.css');const a=require("react/jsx-runtime"),q=require("../../classix-5H4IWnMA.cjs"),l=require("react");function H(t){return l.isValidElement(t)&&t.type===l.Fragment}function O(t,s=[]){return l.Children.forEach(t,i=>{H(i)?O(i.props.children,s):s.push(i)}),s}function F(t,{wrapper:s="li"}={}){return O(t).filter(n=>n!==null).map((n,u)=>{if(l.isValidElement(n)&&n.type===s)return n;const f=l.isValidElement(n)&&n.key!=null?n.key:u;return l.createElement(s,{key:f},n)})}const T="_controls_bp7if_3",V="_horizontal_bp7if_8",A="_list_bp7if_19",I="_columns_bp7if_59",D="_masonry_bp7if_69",P="_scrollable_bp7if_79",$="_overflowing_bp7if_86",G="_compact_bp7if_111",r={controls:T,horizontal:V,list:A,columns:I,masonry:D,scrollable:P,overflowing:$,compact:G},M=(t,s)=>{typeof t=="function"?t(s):t&&(t.current=s)};function J({children:t,className:s,columns:i=1,compact:p=!1,controls:n,horizontal:u,layout:f="grid",maxVisibleItems:m,ordered:z,ref:y,style:B,...b}){const _=Number.isFinite(i)?Math.max(1,Math.floor(i)):1,v=l.useRef(null),[c,S]=l.useState(),o=f==="grid"&&_===1&&!u&&m!=null&&Number.isFinite(m)&&m>=1?Math.floor(m):void 0,h=!!o&&c!=null;l.useLayoutEffect(()=>{const e=v.current;if(!e||!o)return;const R=()=>{const g=Array.from(e.children).filter(j=>j instanceof HTMLElement&&getComputedStyle(j).display!=="none"),N=g[o-1],k=g.length>o&&N?N.getBoundingClientRect().bottom-e.getBoundingClientRect().top+e.scrollTop+(parseFloat(getComputedStyle(e).paddingBottom)||0):void 0;S(k)},d=new ResizeObserver(R),C=()=>{d.disconnect(),d.observe(e),Array.from(e.children).forEach(g=>d.observe(g)),R()},L=new MutationObserver(C);return L.observe(e,{childList:!0,subtree:!0,characterData:!0}),C(),()=>{d.disconnect(),L.disconnect()}},[t,o,h]);const x=q.t(s,r.list,f==="masonry"?r.masonry:_>1&&r.columns,!!o&&r.scrollable,h&&r.overflowing,u&&r.horizontal,p&&r.compact),E={...B,"--list-columns":_,"--list-max-height":o&&c!=null?`${c}px`:void 0},w=z?a.jsx("ol",{className:x,ref:e=>{v.current=e,M(y,e)},style:E,...b,tabIndex:b.tabIndex??(o&&c!=null?0:void 0),children:F(t)}):a.jsx("ul",{className:x,ref:e=>{v.current=e,M(y,e)},style:E,...b,tabIndex:b.tabIndex??(o&&c!=null?0:void 0),children:F(t)});return n==null?w:a.jsxs(a.Fragment,{children:[a.jsx("div",{className:r.controls,children:n}),w]})}exports.List=J;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/utils/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 '@/utils/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  compact?: boolean;\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  compact = false,\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    compact && styles.compact\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","compact","controls","horizontal","ordered","style","cols","Number","isFinite","Math","max","floor","classes","cx","styles","list","withVars","jsx","jsxs"],"mappings":"gLAMA,SAASA,EACPC,EAC4D,CAC5D,OAAOC,EAAMC,eAAeF,CAAI,GAAKA,EAAKG,OAASF,EAAMG,QAC3D,CAEA,SAASC,EAAgBC,EAA2BC,EAAyB,GAAI,CAC/EN,OAAAA,EAAMO,SAASC,QAAQH,EAAWI,GAAU,CACtCX,EAAkBW,CAAK,EACzBL,EAAgBK,EAAMC,MAAML,SAAUC,CAAG,EAEzCA,EAAIK,KAAKF,CAAK,CAElB,CAAC,EACMH,CACT,CAEO,SAASM,EACdP,EACA,CAAEQ,QAAAA,EAAU,IAA0B,EAAI,GAC1C,CAKA,OAJaT,EAAgBC,CAAQ,EAEbS,OAAQL,GAAUA,IAAU,IAAI,EAEtCM,IAAI,CAACN,EAAOO,IAAM,CAClC,GAAIhB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMP,OAASW,EAChD,OAAOJ,EAGT,MAAMQ,EAAMjB,EAAMC,eAAeQ,CAAK,GAAKA,EAAMQ,KAAO,KAAOR,EAAMQ,IAAMD,EAE3E,OAAOhB,EAAMkB,cAAcL,EAAS,CAAEI,IAAAA,CAAAA,EAAOR,CAAK,CACpD,CAAC,CACH,2KChCMU,EAAaA,CAACC,EAAyCrB,IAA6B,CACpF,OAAOqB,GAAQ,WAAYA,EAAIrB,CAAI,EAC9BqB,MAASC,QAAUtB,EAC9B,EAWO,SAASuB,EAAK,CACnBjB,SAAAA,EACAkB,UAAAA,EACAC,QAAAA,EAAU,EACVC,QAAAA,EAAU,GACVC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAR,IAAAA,EACAS,MAAAA,EACA,GAAGnB,CACM,EAAG,CACZ,MAAMoB,EAAOC,OAAOC,SAASR,CAAO,EAAIS,KAAKC,IAAI,EAAGD,KAAKE,MAAMX,CAAO,CAAC,EAAI,EAErEY,EAAUC,EAAAA,EACdd,EACAe,EAAOC,KACPT,EAAO,GAAKQ,EAAOd,QACnBG,GAAcW,EAAOX,WACrBF,GAAWa,EAAOb,OACpB,EAMMe,EAAqB,CACzB,GAAGX,EACH,iBAAkBC,CAAAA,EAGdS,EAAOX,EACXa,MAAC,KAAA,CACC,UAAWL,EACX,IAAMrC,GAASoB,EAAWC,EAAKrB,CAAI,EACnC,MAAOyC,EACP,GAAI9B,EAEHE,SAAAA,EAAaP,CAAQ,CAAA,CACxB,QAEC,KAAA,CACC,UAAW+B,EACX,OAAejB,EAAWC,EAAKrB,CAAI,EACnC,MAAOyC,EACP,GAAI9B,EAEHE,SAAAA,EAAaP,CAAQ,EACxB,EAGF,OAA8BqB,GAAa,KAAaa,EAGtDG,EAAAA,KAAAvC,WAAA,CACE,SAAA,CAAAsC,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAOZ,SAAWA,SAAAA,EAAS,EAC1Ca,CAAAA,EACH,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/utils/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';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { wrapChildren } from '@/utils/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  compact?: boolean;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  layout?: 'grid' | 'masonry';\n  maxVisibleItems?: number;\n  ordered?: boolean;\n  ref?: React.Ref<ListElement>;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  compact = false,\n  controls,\n  horizontal,\n  layout = 'grid',\n  maxVisibleItems,\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 listRef = useRef<ListElement | null>(null);\n  const [visibleHeight, setVisibleHeight] = useState<number>();\n  const itemLimit =\n    layout === 'grid' &&\n    cols === 1 &&\n    !horizontal &&\n    maxVisibleItems != null &&\n    Number.isFinite(maxVisibleItems) &&\n    maxVisibleItems >= 1\n      ? Math.floor(maxVisibleItems)\n      : undefined;\n  const isOverflowing = Boolean(itemLimit) && visibleHeight != null;\n\n  useLayoutEffect(() => {\n    const node = listRef.current;\n    if (!node || !itemLimit) return;\n\n    const measure = () => {\n      const items = Array.from(node.children).filter(\n        (item): item is HTMLElement =>\n          item instanceof HTMLElement && getComputedStyle(item).display !== 'none'\n      );\n      const lastVisible = items[itemLimit - 1];\n      const height =\n        items.length > itemLimit && lastVisible\n          ? lastVisible.getBoundingClientRect().bottom -\n            node.getBoundingClientRect().top +\n            node.scrollTop +\n            (parseFloat(getComputedStyle(node).paddingBottom) || 0)\n          : undefined;\n      setVisibleHeight(height);\n    };\n    const resizeObserver = new ResizeObserver(measure);\n    const observeItems = () => {\n      resizeObserver.disconnect();\n      resizeObserver.observe(node);\n      Array.from(node.children).forEach((item) => resizeObserver.observe(item));\n      measure();\n    };\n    const mutationObserver = new MutationObserver(observeItems);\n    mutationObserver.observe(node, { childList: true, subtree: true, characterData: true });\n    observeItems();\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [children, itemLimit, isOverflowing]);\n\n  const classes = cx(\n    className,\n    styles.list,\n    layout === 'masonry' ? styles.masonry : cols > 1 && styles.columns,\n    Boolean(itemLimit) && styles.scrollable,\n    isOverflowing && styles.overflowing,\n    horizontal && styles.horizontal,\n    compact && styles.compact\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n    '--list-max-height'?: string;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n    '--list-max-height': itemLimit && visibleHeight != null ? `${visibleHeight}px` : undefined,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      ref={(node) => {\n        listRef.current = node;\n        setListRef(ref, node);\n      }}\n      style={withVars}\n      {...props}\n      tabIndex={props.tabIndex ?? (itemLimit && visibleHeight != null ? 0 : undefined)}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      ref={(node) => {\n        listRef.current = node;\n        setListRef(ref, node);\n      }}\n      style={withVars}\n      {...props}\n      tabIndex={props.tabIndex ?? (itemLimit && visibleHeight != null ? 0 : undefined)}\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","compact","controls","horizontal","layout","maxVisibleItems","ordered","style","cols","Number","isFinite","Math","max","floor","listRef","useRef","visibleHeight","setVisibleHeight","useState","itemLimit","undefined","isOverflowing","Boolean","useLayoutEffect","measure","items","Array","from","item","HTMLElement","getComputedStyle","display","lastVisible","height","length","getBoundingClientRect","bottom","top","scrollTop","parseFloat","paddingBottom","resizeObserver","ResizeObserver","observeItems","disconnect","observe","mutationObserver","MutationObserver","childList","subtree","characterData","classes","cx","styles","list","masonry","scrollable","overflowing","withVars","jsx","tabIndex","jsxs"],"mappings":"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"}

package/dist/components/list/index.js

@@ -1,57 +1,85 @@
-import { jsx as a, jsxs as F, Fragment as V } from "react/jsx-runtime";
-import { t as g } from "../../classix-DG18itHa.js";
-import e from "react";
-import '../../assets/index50.css';function k(t) {
-  return e.isValidElement(t) && t.type === e.Fragment;
+import { jsx as g, jsxs as V, Fragment as j } from "react/jsx-runtime";
+import { t as A } from "../../classix-DG18itHa.js";
+import i, { useRef as I, useState as T, useLayoutEffect as D } from "react";
+import '../../assets/index51.css';function $(t) {
+  return i.isValidElement(t) && t.type === i.Fragment;
 }
-function x(t, n = []) {
-  return e.Children.forEach(t, (s) => {
-    k(s) ? x(s.props.children, n) : n.push(s);
-  }), n;
+function M(t, o = []) {
+  return i.Children.forEach(t, (r) => {
+    $(r) ? M(r.props.children, o) : o.push(r);
+  }), o;
 }
-function E(t, {
-  wrapper: n = "li"
+function z(t, {
+  wrapper: o = "li"
 } = {}) {
-  return x(t).filter((l) => l !== null).map((l, i) => {
-    if (e.isValidElement(l) && l.type === n)
-      return l;
-    const r = e.isValidElement(l) && l.key != null ? l.key : i;
-    return e.createElement(n, {
-      key: r
-    }, l);
+  return M(t).filter((n) => n !== null).map((n, a) => {
+    if (i.isValidElement(n) && n.type === o)
+      return n;
+    const u = i.isValidElement(n) && n.key != null ? n.key : a;
+    return i.createElement(o, {
+      key: u
+    }, n);
   });
 }
-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
-}, N = (t, n) => {
-  typeof t == "function" ? t(n) : t && (t.current = n);
+const q = "_controls_bp7if_3", G = "_horizontal_bp7if_8", J = "_list_bp7if_19", K = "_columns_bp7if_59", P = "_masonry_bp7if_69", Q = "_scrollable_bp7if_79", U = "_overflowing_bp7if_86", W = "_compact_bp7if_111", l = {
+  controls: q,
+  horizontal: G,
+  list: J,
+  columns: K,
+  masonry: P,
+  scrollable: Q,
+  overflowing: U,
+  compact: W
+}, B = (t, o) => {
+  typeof t == "function" ? t(o) : t && (t.current = o);
 };
-function w({
+function tt({
   children: t,
-  className: n,
-  columns: s = 1,
-  compact: m = !1,
-  controls: l,
-  horizontal: i,
-  ordered: r,
-  ref: u,
-  style: z,
-  ...f
+  className: o,
+  columns: r = 1,
+  compact: v = !1,
+  controls: n,
+  horizontal: a,
+  layout: u = "grid",
+  maxVisibleItems: f,
+  ordered: O,
+  ref: h,
+  style: k,
+  ...m
 }) {
-  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) });
-  return l == null ? h : /* @__PURE__ */ F(V, { children: [
-    /* @__PURE__ */ a("div", { className: o.controls, children: l }),
-    h
+  const p = Number.isFinite(r) ? Math.max(1, Math.floor(r)) : 1, _ = I(null), [c, H] = T(), s = u === "grid" && p === 1 && !a && f != null && Number.isFinite(f) && f >= 1 ? Math.floor(f) : void 0, y = !!s && c != null;
+  D(() => {
+    const e = _.current;
+    if (!e || !s) return;
+    const C = () => {
+      const d = Array.from(e.children).filter((L) => L instanceof HTMLElement && getComputedStyle(L).display !== "none"), F = d[s - 1], S = d.length > s && F ? F.getBoundingClientRect().bottom - e.getBoundingClientRect().top + e.scrollTop + (parseFloat(getComputedStyle(e).paddingBottom) || 0) : void 0;
+      H(S);
+    }, b = new ResizeObserver(C), N = () => {
+      b.disconnect(), b.observe(e), Array.from(e.children).forEach((d) => b.observe(d)), C();
+    }, R = new MutationObserver(N);
+    return R.observe(e, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), N(), () => {
+      b.disconnect(), R.disconnect();
+    };
+  }, [t, s, y]);
+  const E = A(o, l.list, u === "masonry" ? l.masonry : p > 1 && l.columns, !!s && l.scrollable, y && l.overflowing, a && l.horizontal, v && l.compact), w = {
+    ...k,
+    "--list-columns": p,
+    "--list-max-height": s && c != null ? `${c}px` : void 0
+  }, x = O ? /* @__PURE__ */ g("ol", { className: E, ref: (e) => {
+    _.current = e, B(h, e);
+  }, style: w, ...m, tabIndex: m.tabIndex ?? (s && c != null ? 0 : void 0), children: z(t) }) : /* @__PURE__ */ g("ul", { className: E, ref: (e) => {
+    _.current = e, B(h, e);
+  }, style: w, ...m, tabIndex: m.tabIndex ?? (s && c != null ? 0 : void 0), children: z(t) });
+  return n == null ? x : /* @__PURE__ */ V(j, { children: [
+    /* @__PURE__ */ g("div", { className: l.controls, children: n }),
+    x
   ] });
 }
 export {
-  w as List
+  tt as List
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/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 '@/utils/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  compact?: boolean;\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  compact = false,\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    compact && styles.compact\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","compact","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;AAWO,SAASuB,EAAK;AAAA,EACnBjB,UAAAA;AAAAA,EACAkB,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAR,KAAAA;AAAAA,EACAS,OAAAA;AAAAA,EACA,GAAGnB;AACM,GAAG;AACZ,QAAMoB,IAAOC,OAAOC,SAASR,CAAO,IAAIS,KAAKC,IAAI,GAAGD,KAAKE,MAAMX,CAAO,CAAC,IAAI,GAErEY,IAAUC,EACdd,GACAe,EAAOC,MACPT,IAAO,KAAKQ,EAAOd,SACnBG,KAAcW,EAAOX,YACrBF,KAAWa,EAAOb,OACpB,GAMMe,IAAqB;AAAA,IACzB,GAAGX;AAAAA,IACH,kBAAkBC;AAAAA,EAAAA,GAGdS,IAAOX,IACX,gBAAAa,EAAC,MAAA,EACC,WAAWL,GACX,KAAMrC,CAAAA,MAASoB,EAAWC,GAAKrB,CAAI,GACnC,OAAOyC,GACP,GAAI9B,GAEHE,UAAAA,EAAaP,CAAQ,EAAA,CACxB,sBAEC,MAAA,EACC,WAAW+B,GACX,KAAMrC,OAASoB,EAAWC,GAAKrB,CAAI,GACnC,OAAOyC,GACP,GAAI9B,GAEHE,UAAAA,EAAaP,CAAQ,GACxB;AAGF,SAA8BqB,KAAa,OAAaa,IAGtD,gBAAAG,EAAAvC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAWH,EAAOZ,UAAWA,UAAAA,GAAS;AAAA,IAC1Ca;AAAAA,EAAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/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';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { wrapChildren } from '@/utils/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  compact?: boolean;\n  controls?: React.ReactNode;\n  horizontal?: boolean;\n  layout?: 'grid' | 'masonry';\n  maxVisibleItems?: number;\n  ordered?: boolean;\n  ref?: React.Ref<ListElement>;\n};\n\nexport function List({\n  children,\n  className,\n  columns = 1,\n  compact = false,\n  controls,\n  horizontal,\n  layout = 'grid',\n  maxVisibleItems,\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 listRef = useRef<ListElement | null>(null);\n  const [visibleHeight, setVisibleHeight] = useState<number>();\n  const itemLimit =\n    layout === 'grid' &&\n    cols === 1 &&\n    !horizontal &&\n    maxVisibleItems != null &&\n    Number.isFinite(maxVisibleItems) &&\n    maxVisibleItems >= 1\n      ? Math.floor(maxVisibleItems)\n      : undefined;\n  const isOverflowing = Boolean(itemLimit) && visibleHeight != null;\n\n  useLayoutEffect(() => {\n    const node = listRef.current;\n    if (!node || !itemLimit) return;\n\n    const measure = () => {\n      const items = Array.from(node.children).filter(\n        (item): item is HTMLElement =>\n          item instanceof HTMLElement && getComputedStyle(item).display !== 'none'\n      );\n      const lastVisible = items[itemLimit - 1];\n      const height =\n        items.length > itemLimit && lastVisible\n          ? lastVisible.getBoundingClientRect().bottom -\n            node.getBoundingClientRect().top +\n            node.scrollTop +\n            (parseFloat(getComputedStyle(node).paddingBottom) || 0)\n          : undefined;\n      setVisibleHeight(height);\n    };\n    const resizeObserver = new ResizeObserver(measure);\n    const observeItems = () => {\n      resizeObserver.disconnect();\n      resizeObserver.observe(node);\n      Array.from(node.children).forEach((item) => resizeObserver.observe(item));\n      measure();\n    };\n    const mutationObserver = new MutationObserver(observeItems);\n    mutationObserver.observe(node, { childList: true, subtree: true, characterData: true });\n    observeItems();\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [children, itemLimit, isOverflowing]);\n\n  const classes = cx(\n    className,\n    styles.list,\n    layout === 'masonry' ? styles.masonry : cols > 1 && styles.columns,\n    Boolean(itemLimit) && styles.scrollable,\n    isOverflowing && styles.overflowing,\n    horizontal && styles.horizontal,\n    compact && styles.compact\n  );\n\n  type withVars = React.CSSProperties & {\n    '--list-columns'?: number;\n    '--list-max-height'?: string;\n  };\n\n  const withVars: withVars = {\n    ...style,\n    '--list-columns': cols,\n    '--list-max-height': itemLimit && visibleHeight != null ? `${visibleHeight}px` : undefined,\n  };\n\n  const list = ordered ? (\n    <ol\n      className={classes}\n      ref={(node) => {\n        listRef.current = node;\n        setListRef(ref, node);\n      }}\n      style={withVars}\n      {...props}\n      tabIndex={props.tabIndex ?? (itemLimit && visibleHeight != null ? 0 : undefined)}\n    >\n      {wrapChildren(children)}\n    </ol>\n  ) : (\n    <ul\n      className={classes}\n      ref={(node) => {\n        listRef.current = node;\n        setListRef(ref, node);\n      }}\n      style={withVars}\n      {...props}\n      tabIndex={props.tabIndex ?? (itemLimit && visibleHeight != null ? 0 : undefined)}\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","compact","controls","horizontal","layout","maxVisibleItems","ordered","style","cols","Number","isFinite","Math","max","floor","listRef","useRef","visibleHeight","setVisibleHeight","useState","itemLimit","undefined","isOverflowing","Boolean","useLayoutEffect","measure","items","Array","from","item","HTMLElement","getComputedStyle","display","lastVisible","height","length","getBoundingClientRect","bottom","top","scrollTop","parseFloat","paddingBottom","resizeObserver","ResizeObserver","observeItems","disconnect","observe","mutationObserver","MutationObserver","childList","subtree","characterData","classes","cx","styles","list","masonry","scrollable","overflowing","withVars","jsx","tabIndex","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;;;;;;;;;;GC/BMU,IAAaA,CAACC,GAAyCrB,MAA6B;AACxF,EAAI,OAAOqB,KAAQ,aAAYA,EAAIrB,CAAI,IAC9BqB,QAASC,UAAUtB;AAC9B;AAaO,SAASuB,GAAK;AAAA,EACnBjB,UAAAA;AAAAA,EACAkB,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,QAAAA,IAAS;AAAA,EACTC,iBAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAV,KAAAA;AAAAA,EACAW,OAAAA;AAAAA,EACA,GAAGrB;AACM,GAAG;AACZ,QAAMsB,IAAOC,OAAOC,SAASV,CAAO,IAAIW,KAAKC,IAAI,GAAGD,KAAKE,MAAMb,CAAO,CAAC,IAAI,GAErEc,IAAUC,EAA2B,IAAI,GACzC,CAACC,GAAeC,CAAgB,IAAIC,EAAAA,GACpCC,IACJf,MAAW,UACXI,MAAS,KACT,CAACL,KACDE,KAAmB,QACnBI,OAAOC,SAASL,CAAe,KAC/BA,KAAmB,IACfM,KAAKE,MAAMR,CAAe,IAC1Be,QACAC,IAAgBC,EAAQH,KAAcH,KAAiB;AAE7DO,EAAAA,EAAgB,MAAM;AACpB,UAAMhD,IAAOuC,EAAQjB;AACrB,QAAI,CAACtB,KAAQ,CAAC4C,EAAW;AAEzB,UAAMK,IAAUA,MAAM;AACpB,YAAMC,IAAQC,MAAMC,KAAKpD,EAAKM,QAAQ,EAAES,OACtC,CAACsC,MACCA,aAAgBC,eAAeC,iBAAiBF,CAAI,EAAEG,YAAY,MACtE,GACMC,IAAcP,EAAMN,IAAY,CAAC,GACjCc,IACJR,EAAMS,SAASf,KAAaa,IACxBA,EAAYG,sBAAAA,EAAwBC,SACpC7D,EAAK4D,wBAAwBE,MAC7B9D,EAAK+D,aACJC,WAAWT,iBAAiBvD,CAAI,EAAEiE,aAAa,KAAK,KACrDpB;AACNH,MAAAA,EAAiBgB,CAAM;AAAA,IACzB,GACMQ,IAAiB,IAAIC,eAAelB,CAAO,GAC3CmB,IAAeA,MAAM;AACzBF,MAAAA,EAAeG,WAAAA,GACfH,EAAeI,QAAQtE,CAAI,GAC3BmD,MAAMC,KAAKpD,EAAKM,QAAQ,EAAEG,QAAS4C,CAAAA,MAASa,EAAeI,QAAQjB,CAAI,CAAC,GACxEJ,EAAAA;AAAAA,IACF,GACMsB,IAAmB,IAAIC,iBAAiBJ,CAAY;AAC1DG,WAAAA,EAAiBD,QAAQtE,GAAM;AAAA,MAAEyE,WAAW;AAAA,MAAMC,SAAS;AAAA,MAAMC,eAAe;AAAA,IAAA,CAAM,GACtFP,EAAAA,GACO,MAAM;AACXF,MAAAA,EAAeG,WAAAA,GACfE,EAAiBF,WAAAA;AAAAA,IACnB;AAAA,EACF,GAAG,CAAC/D,GAAUsC,GAAWE,CAAa,CAAC;AAEvC,QAAM8B,IAAUC,EACdrD,GACAsD,EAAOC,MACPlD,MAAW,YAAYiD,EAAOE,UAAU/C,IAAO,KAAK6C,EAAOrD,SAC3DsB,EAAQH,KAAckC,EAAOG,YAC7BnC,KAAiBgC,EAAOI,aACxBtD,KAAckD,EAAOlD,YACrBF,KAAWoD,EAAOpD,OACpB,GAOMyD,IAAqB;AAAA,IACzB,GAAGnD;AAAAA,IACH,kBAAkBC;AAAAA,IAClB,qBAAqBW,KAAaH,KAAiB,OAAO,GAAGA,CAAa,OAAOI;AAAAA,EAAAA,GAG7EkC,IAAOhD,IACX,gBAAAqD,EAAC,QACC,WAAWR,GACX,KAAM5E,CAAAA,MAAS;AACbuC,IAAAA,EAAQjB,UAAUtB,GAClBoB,EAAWC,GAAKrB,CAAI;AAAA,EACtB,GACA,OAAOmF,GACP,GAAIxE,GACJ,UAAUA,EAAM0E,aAAazC,KAAaH,KAAiB,OAAO,IAAII,SAErEhC,UAAAA,EAAaP,CAAQ,EAAA,CACxB,sBAEC,MAAA,EACC,WAAWsE,GACX,KAAM5E,CAAAA,MAAS;AACbuC,IAAAA,EAAQjB,UAAUtB,GAClBoB,EAAWC,GAAKrB,CAAI;AAAA,EACtB,GACA,OAAOmF,GACP,GAAIxE,GACJ,UAAUA,EAAM0E,aAAazC,KAAaH,KAAiB,OAAO,IAAII,SAErEhC,UAAAA,EAAaP,CAAQ,GACxB;AAGF,SAA8BqB,KAAa,OAAaoD,IAGtD,gBAAAO,EAAAlF,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAgF,EAAC,OAAA,EAAI,WAAWN,EAAOnD,UAAWA,UAAAA,GAAS;AAAA,IAC1CoD;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/index51.css');const l=require("react/jsx-runtime"),n=require("../../classix-5H4IWnMA.cjs"),o="_loading_107mr_23",m="_spin_107mr_1",r="_small_107mr_40",c="_large_107mr_46",_="_ping_107mr_52",d="_sticky_107mr_78",s={loading:o,default:"_default_107mr_29",spin:m,small:r,large:c,ping:_,sticky:d},g={large:s.large,medium:s.medium,small:s.small},u=({variant:a="default",size:e="medium",sticky:i=!1,...t})=>l.jsx("div",{className:n.t(s.loading,i&&s.sticky),"data-component":"loading",children:l.jsx("span",{className:n.t(s.loading,s[a],g[e]),...t})});exports.Loading=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index52.css');const l=require("react/jsx-runtime"),n=require("../../classix-5H4IWnMA.cjs"),o="_loading_107mr_23",m="_spin_107mr_1",r="_small_107mr_40",c="_large_107mr_46",_="_ping_107mr_52",d="_sticky_107mr_78",s={loading:o,default:"_default_107mr_29",spin:m,small:r,large:c,ping:_,sticky:d},g={large:s.large,medium:s.medium,small:s.small},u=({variant:a="default",size:e="medium",sticky:i=!1,...t})=>l.jsx("div",{className:n.t(s.loading,i&&s.sticky),"data-component":"loading",children:l.jsx("span",{className:n.t(s.loading,s[a],g[e]),...t})});exports.Loading=u;
 //# sourceMappingURL=index.cjs.map

package/dist/components/loading/index.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { t as a } from "../../classix-DG18itHa.js";
-import '../../assets/index51.css';const o = "_loading_107mr_23", _ = "_spin_107mr_1", e = "_small_107mr_40", r = "_large_107mr_46", c = "_ping_107mr_52", d = "_sticky_107mr_78", s = {
+import '../../assets/index52.css';const o = "_loading_107mr_23", _ = "_spin_107mr_1", e = "_small_107mr_40", r = "_large_107mr_46", c = "_ping_107mr_52", d = "_sticky_107mr_78", s = {
   loading: o,
   default: "_default_107mr_29",
   spin: _,

package/dist/components/menu/index.cjs

@@ -1,2 +1,2 @@
-"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"),i=require("../../menu-popover-CM3v5s-5.cjs");function M(e){return[...e].sort((n,a)=>+!!n.isDanger-+!!a.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,{gap:"right",name:n.icon,size:"small"}),r.jsx("span",{children:n.label})]}),id:n.id,isActive:n.isActive,isDanger:n.isDanger,value:n})),D=({inline:e=!1,items:n,menuAccessibleLabel:a="Menu",onItemSelect:s,triggerAccessibleLabel:l="Open menu",triggerIcon:p="DotsThreeVertical",triggerLabel:b,variant:g="popover"})=>{const t=v(n);return g==="simple"?r.jsx(i.MenuActionList,{actions:t,menuAccessibleLabel:a,onSelect:o=>{var u;(u=o.onSelect)==null||u.call(o),s==null||s(o)},"data-component":"menu"}):r.jsx(i.MenuPopover,{inline:e,triggerAccessibleLabel:l,triggerIcon:p,triggerLabel:b,"data-component":"menu",children:({close:o,initialFocus:u})=>r.jsx(i.MenuActionList,{actions:t,initialFocus:u,menuAccessibleLabel:a,onSelect:c=>{var d;(d=c.onSelect)==null||d.call(c),s==null||s(c),o()},usesMenuSemantics:!0})})};exports.Menu=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("../button/index.cjs"),M=require("../icon/index.cjs"),i=require("../../menu-popover-CdhAgSQb.cjs");function v(e){return[...e].sort((n,a)=>+!!n.isDanger-+!!a.isDanger)}const D=e=>v(e).map(n=>({button:r.jsxs(j.Button,{"aria-label":n.accessibleLabel,disabled:n.disabled,children:[n.icon&&r.jsx(M.Icon,{gap:"right",name:n.icon,size:"small"}),r.jsx("span",{children:n.label})]}),id:n.id,isActive:n.isActive,isDanger:n.isDanger,value:n})),h=({inline:e=!1,items:n,menuAccessibleLabel:a="Menu",onItemSelect:s,triggerAccessibleLabel:l="Open menu",triggerIcon:p="DotsThreeVertical",triggerLabel:b,variant:g="popover"})=>{const d=D(n);return g==="simple"?r.jsx(i.MenuActionList,{actions:d,menuAccessibleLabel:a,onSelect:o=>{var u;(u=o.onSelect)==null||u.call(o),s==null||s(o)},"data-component":"menu"}):r.jsx(i.MenuPopover,{inline:e,triggerAccessibleLabel:l,triggerIcon:p,triggerLabel:b,"data-component":"menu",children:({close:o,initialFocus:u,isPositioned:x})=>r.jsx(i.MenuActionList,{actions:d,initialFocus:u,readyToFocus:x,menuAccessibleLabel:a,onSelect:c=>{var t;(t=c.onSelect)==null||t.call(c),s==null||s(c),o()},usesMenuSemantics:!0})})};exports.Menu=h;
 //# 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 { Button } from '@/components/button';\nimport { Icon, type IconName } from '@/components/icon';\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            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 = 'DotsThreeVertical',\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","Icon","jsx","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus"],"mappings":"kOAyCA,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,YACHC,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMN,EAAKK,KACX,KAAK,OAAA,CAAO,EAGhBE,EAAAA,IAAC,OAAA,CAAMP,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,oBACdC,aAAAA,EACAC,QAAAA,EAAU,SACD,IAAM,CACf,MAAMC,EAAUtB,EAAWP,CAAK,EAEhC,OAAI4B,IAAY,SAEZZ,EAAAA,IAACc,EAAAA,eAAA,CACC,QAAAD,EACA,oBAAAN,EACA,SAAWd,GAAS,QAClBA,EAAAA,EAAKsB,WAALtB,MAAAA,EAAAA,KAAAA,GACAe,GAAAA,MAAAA,EAAef,EACjB,EAAE,iBAAA,OAAA,EAMNO,MAACgB,EAAAA,aACC,OAAAV,EACA,uBAAAG,EACA,YAAAC,EACA,aAAAC,EAA2B,iBAAA,OAE1B,SAAA,CAAC,CAAEM,MAAAA,EAAOC,aAAAA,CAAAA,IACTlB,EAAAA,IAACc,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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Icon, type IconName } from '@/components/icon';\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            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 = 'DotsThreeVertical',\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, isPositioned }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          readyToFocus={isPositioned}\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","Icon","jsx","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus","isPositioned"],"mappings":"kOAyCA,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,YACHC,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMN,EAAKK,KACX,KAAK,OAAA,CAAO,EAGhBE,EAAAA,IAAC,OAAA,CAAMP,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,oBACdC,aAAAA,EACAC,QAAAA,EAAU,SACD,IAAM,CACf,MAAMC,EAAUtB,EAAWP,CAAK,EAEhC,OAAI4B,IAAY,SAEZZ,EAAAA,IAACc,EAAAA,eAAA,CACC,QAAAD,EACA,oBAAAN,EACA,SAAWd,GAAS,QAClBA,EAAAA,EAAKsB,WAALtB,MAAAA,EAAAA,KAAAA,GACAe,GAAAA,MAAAA,EAAef,EACjB,EAAE,iBAAA,OAAA,EAMNO,MAACgB,EAAAA,aACC,OAAAV,EACA,uBAAAG,EACA,YAAAC,EACA,aAAAC,EAA2B,iBAAA,OAE1B,SAAA,CAAC,CAAEM,MAAAA,EAAOC,aAAAA,EAAcC,aAAAA,CAAAA,UACtBL,EAAAA,eAAA,CACC,QAAAD,EACA,aAAAK,EACA,aAAcC,EACd,oBAAAZ,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,21 +1,21 @@
-import { jsx as o, jsxs as D } from "react/jsx-runtime";
-import { Button as M } from "../button/index.js";
-import { Icon as h } from "../icon/index.js";
-import { M as d, a as v } from "../../menu-popover-DOkciab5.js";
-function t(s) {
-  return [...s].sort((n, u) => +!!n.isDanger - +!!u.isDanger);
+import { jsx as s, jsxs as M } from "react/jsx-runtime";
+import { Button as h } from "../button/index.js";
+import { Icon as v } from "../icon/index.js";
+import { M as l, a as t } from "../../menu-popover-D-Ax5zzy.js";
+function x(o) {
+  return [...o].sort((n, u) => +!!n.isDanger - +!!u.isDanger);
 }
-const x = (s) => t(s).map((n) => ({
-  button: /* @__PURE__ */ D(M, { "aria-label": n.accessibleLabel, disabled: n.disabled, children: [
-    n.icon && /* @__PURE__ */ o(h, { gap: "right", name: n.icon, size: "small" }),
-    /* @__PURE__ */ o("span", { children: n.label })
+const A = (o) => x(o).map((n) => ({
+  button: /* @__PURE__ */ M(h, { "aria-label": n.accessibleLabel, disabled: n.disabled, children: [
+    n.icon && /* @__PURE__ */ s(v, { gap: "right", name: n.icon, size: "small" }),
+    /* @__PURE__ */ s("span", { children: n.label })
   ] }),
   id: n.id,
   isActive: n.isActive,
   isDanger: n.isDanger,
   value: n
-})), N = ({
-  inline: s = !1,
+})), T = ({
+  inline: o = !1,
   items: n,
   menuAccessibleLabel: u = "Menu",
   onItemSelect: r,
@@ -24,19 +24,20 @@ const x = (s) => t(s).map((n) => ({
   triggerLabel: b,
   variant: f = "popover"
 }) => {
-  const c = x(n);
-  return f === "simple" ? /* @__PURE__ */ o(d, { actions: c, menuAccessibleLabel: u, onSelect: (a) => {
-    var i;
-    (i = a.onSelect) == null || i.call(a), r == null || r(a);
-  }, "data-component": "menu" }) : /* @__PURE__ */ o(v, { inline: s, triggerAccessibleLabel: e, triggerIcon: g, triggerLabel: b, "data-component": "menu", children: ({
+  const p = A(n);
+  return f === "simple" ? /* @__PURE__ */ s(l, { actions: p, menuAccessibleLabel: u, onSelect: (a) => {
+    var c;
+    (c = a.onSelect) == null || c.call(a), r == null || r(a);
+  }, "data-component": "menu" }) : /* @__PURE__ */ s(t, { inline: o, triggerAccessibleLabel: e, triggerIcon: g, triggerLabel: b, "data-component": "menu", children: ({
     close: a,
-    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), a();
+    initialFocus: c,
+    isPositioned: D
+  }) => /* @__PURE__ */ s(l, { actions: p, initialFocus: c, readyToFocus: D, menuAccessibleLabel: u, onSelect: (i) => {
+    var d;
+    (d = i.onSelect) == null || d.call(i), r == null || r(i), a();
   }, usesMenuSemantics: !0 }) });
 };
 export {
-  N as Menu
+  T 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 { Button } from '@/components/button';\nimport { Icon, type IconName } from '@/components/icon';\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            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 = 'DotsThreeVertical',\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","Icon","jsx","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus"],"mappings":";;;;AAyCA,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,0BACHC,GAAA,EACC,KAAI,SACJ,MAAMN,EAAKK,MACX,MAAK,QAAA,CAAO;AAAA,IAGhB,gBAAAE,EAAC,QAAA,EAAMP,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,gBAAAZ,EAACc,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,gBAAAO,EAACgB,KACC,QAAAV,GACA,wBAAAG,GACA,aAAAC,GACA,cAAAC,GAA2B,kBAAA,QAE1B,UAAA,CAAC;AAAA,IAAEM,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,EAAAA,MACT,gBAAAlB,EAACc,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;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import { Button } from '@/components/button';\nimport { Icon, type IconName } from '@/components/icon';\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            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 = 'DotsThreeVertical',\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, isPositioned }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          readyToFocus={isPositioned}\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","Icon","jsx","label","id","isActive","value","Menu","inline","menuAccessibleLabel","onItemSelect","triggerAccessibleLabel","triggerIcon","triggerLabel","variant","actions","MenuActionList","onSelect","MenuPopover","close","initialFocus","isPositioned"],"mappings":";;;;AAyCA,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,0BACHC,GAAA,EACC,KAAI,SACJ,MAAMN,EAAKK,MACX,MAAK,QAAA,CAAO;AAAA,IAGhB,gBAAAE,EAAC,QAAA,EAAMP,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,gBAAAZ,EAACc,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,gBAAAO,EAACgB,KACC,QAAAV,GACA,wBAAAG,GACA,aAAAC,GACA,cAAAC,GAA2B,kBAAA,QAE1B,UAAA,CAAC;AAAA,IAAEM,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,cAAAA;AAAAA,EAAAA,wBACtBL,GAAA,EACC,SAAAD,GACA,cAAAK,GACA,cAAcC,GACd,qBAAAZ,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/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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),h=require("../avatar/index.cjs"),N=require("../icon/index.cjs"),w="_attachments_1crfp_1",y="_footer_1crfp_27",S="_message_1crfp_11",b="_timestamp_1crfp_147",q="_actions_1crfp_152",I="_preview_1crfp_164",s={attachments:w,"message-group":"_message-group_1crfp_11",footer:y,message:S,timestamp:b,actions:q,preview:I},M=({actions:i,appearance:m="default",attachments:o,author:a,authorColor:l,authorImageUrl:d,authorLink:_,authorRole:p,content:g,iconName:f="Info",id:u,preview:v,timestamp:r,timestampText:x,type:t="default"})=>{const c=r?new Date(r):void 0,n=c?e.jsx("time",{className:s.timestamp,dateTime:c.toISOString(),children:x??c.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:l,imageUrl:d,link:_,name:a,role:p}),t==="system"&&n,e.jsxs("div",{className:j.t(s.message,v&&s.preview),"data-appearance":m,"data-id":u,"data-type":t,children:[t=="system"&&e.jsx(N.Icon,{gap:"right",name:f,size:"tiny"}),g]}),o&&e.jsx("div",{className:s.attachments,children:o}),t!=="system"&&(i?e.jsxs("div",{className:s.footer,children:[n,e.jsx("div",{className:s.actions,"data-message-actions":!0,children:i})]}):n)]})};exports.Message=M;
 //# 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  /** 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"}
+{"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  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            size='tiny'\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":"udA0BaA,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,gBACNa,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMlB,EACN,KAAK,MAAA,CAAM,EAGdD,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,48 +1,48 @@
-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 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 = {
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { t as w } from "../../classix-DG18itHa.js";
+import { Avatar as x } from "../avatar/index.js";
+import { Icon as y } from "../icon/index.js";
+import '../../assets/index16.css';const I = "_attachments_1crfp_1", S = "_footer_1crfp_27", b = "_message_1crfp_11", j = "_timestamp_1crfp_147", L = "_actions_1crfp_152", k = "_preview_1crfp_164", e = {
   attachments: I,
-  "message-group": "_message-group_77ukg_11",
+  "message-group": "_message-group_1crfp_11",
   footer: S,
   message: b,
   timestamp: j,
-  actions: y,
-  preview: L
-}, O = ({
-  actions: n,
-  appearance: g = "default",
-  attachments: c,
+  actions: L,
+  preview: k
+}, M = ({
+  actions: r,
+  appearance: l = "default",
+  attachments: i,
   author: t,
-  authorColor: l,
+  authorColor: p,
   authorImageUrl: d,
   authorLink: _,
-  authorRole: p,
-  content: u,
-  iconName: f = "Info",
-  id: v,
-  preview: h,
-  timestamp: r,
-  timestampText: k,
+  authorRole: g,
+  content: f,
+  iconName: v = "Info",
+  id: h,
+  preview: u,
+  timestamp: n,
+  timestampText: N,
   type: s = "default"
 }) => {
-  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
+  const m = n ? new Date(n) : void 0, c = m ? /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: N ?? m.toLocaleString() }) : null;
+  return /* @__PURE__ */ o("div", { className: e["message-group"], "data-message-type": s, "data-component": "message", children: [
+    t && /* @__PURE__ */ a(x, { accessibleLabel: t, color: p, imageUrl: d, link: _, name: t, role: g }),
+    s === "system" && c,
+    /* @__PURE__ */ o("div", { className: w(e.message, u && e.preview), "data-appearance": l, "data-id": h, "data-type": s, children: [
+      s == "system" && /* @__PURE__ */ a(y, { gap: "right", name: v, size: "tiny" }),
+      f
     ] }),
-    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)
+    i && /* @__PURE__ */ a("div", { className: e.attachments, children: i }),
+    s !== "system" && (r ? /* @__PURE__ */ o("div", { className: e.footer, children: [
+      c,
+      /* @__PURE__ */ a("div", { className: e.actions, "data-message-actions": !0, children: r })
+    ] }) : c)
   ] });
 };
 export {
-  O as Message
+  M 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  /** 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;"}
+{"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  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            size='tiny'\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":";;;;;;;;;;;;GA0BaA,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,8BACNa,GAAA,EACC,KAAI,SACJ,MAAMlB,GACN,MAAK,OAAA,CAAM;AAAA,MAGdD;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"),c=require("../../classix-5H4IWnMA.cjs"),b=require("react"),m=require("../../icons-Dv_p0bUF.cjs"),v="_nav_1cda7_3",p="_label_1cda7_9",g="_item_1cda7_17",f="_actions_1cda7_36",N="_highlighted_1cda7_60",x="_horizontal_1cda7_64",j="_sidebar_1cda7_74",w="_tabs_1cda7_131",q="_pills_1cda7_151",a={nav:v,label:p,item:g,actions:f,highlighted:N,horizontal:x,sidebar:j,tabs:w,pills:q},y={default:a.default,pills:a.pills,sidebar:a.sidebar,tabs:a.tabs},z=({className:t,...e})=>l.jsx("span",{className:c.t(t,a.label),...e,"data-component":"navlabel"}),S=({actions:t,children:e,className:o,highlighted:n=!1,...s})=>l.jsxs("div",{className:c.t(a.item,n&&a.highlighted,o),"data-nav-item":!0,...s,"data-component":"navitem",children:[e,t&&l.jsx("span",{className:a.actions,children:t})]}),C=({animation:t,children:e,className:o,horizontal:n=!1,variant:s="default",...d})=>{const[_,r]=b.useState(!1),h={"--icon-svg":m.iconSVG("CaretDown")};return l.jsx("nav",{className:c.t(o,n&&a.horizontal,a.nav,y[s]),"data-animation":t,"data-open":_?"true":"false","data-orientation":n?"horizontal":"vertical",onBlurCapture:i=>{if(s!=="pills"||window.innerWidth>960)return;const u=i.relatedTarget;i.currentTarget.contains(u)||r(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||r(i=>!i)},style:h,...d,"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"),c=require("../../classix-5H4IWnMA.cjs"),u=require("react"),b=require("../../icons-BTif0nDb.cjs"),m="_nav_1lfxs_3",v="_label_1lfxs_9",p="_item_1lfxs_17",x="_actions_1lfxs_36",g="_highlighted_1lfxs_60",N="_horizontal_1lfxs_64",j="_sidebar_1lfxs_74",w="_tabs_1lfxs_130",q="_pills_1lfxs_150",t={nav:m,label:v,item:p,actions:x,highlighted:g,horizontal:N,sidebar:j,tabs:w,pills:q},y={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},z=({className:a,...s})=>i.jsx("span",{className:c.t(a,t.label),...s,"data-component":"navlabel"}),S=({actions:a,children:s,className:o,highlighted:n=!1,...e})=>i.jsxs("div",{className:c.t(t.item,n&&t.highlighted,o),"data-nav-item":!0,...e,"data-component":"navitem",children:[s,a&&i.jsx("span",{className:t.actions,children:a})]}),C=({animation:a,children:s,className:o,horizontal:n=!1,variant:e="default",...d})=>{const[_,r]=u.useState(!1),f={"--icon-svg":b.iconSVG("CaretDown")};return i.jsx("nav",{className:c.t(o,n&&t.horizontal,t.nav,y[e]),"data-animation":a,"data-open":_?"true":"false","data-orientation":n?"horizontal":"vertical",onBlurCapture:l=>{if(e!=="pills"||window.innerWidth>960)return;const h=l.relatedTarget;l.currentTarget.contains(h)||r(!1)},onClick:()=>{e!=="pills"||window.innerWidth>960||r(l=>!l)},style:f,...d,"data-component":"nav",children:s})};exports.Nav=C;exports.NavItem=S;exports.NavLabel=z;
 //# sourceMappingURL=index.cjs.map