@solibo/solibo-ui 1.0.13 → 1.0.15

package/dist/components/menu/index.cjs

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

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

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

package/dist/components/menu/index.js

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

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

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

package/dist/components/message/index.cjs

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

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

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

package/dist/components/message/index.js

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

package/dist/components/nav/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),f=require("react"),p=require("../../icons-ovA21Oao.cjs"),h="_nav_ebhif_3",v="_label_ebhif_9",m="_horizontal_ebhif_17",N="_sidebar_ebhif_27",g="_tabs_ebhif_73",w="_pills_ebhif_94",e={nav:h,label:v,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...n})=>o.jsx("span",{className:r.t(a,e.label),...n,"data-component":"navlabel"}),q=({animation:a,children:n,className:c,horizontal:i=!1,variant:s="default",...b})=>{const[d,l]=f.useState(!1),u={"--icon-svg":p.iconSVG("chevron")};return o.jsx("nav",{className:r.t(c,i&&e.horizontal,e.nav,x[s]),"data-animation":a,"data-open":d?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:t=>{if(s!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(t=>!t)},style:u,...b,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),f=require("react"),p=require("../../icons-DaZGJzI0.cjs"),h="_nav_1fy2h_3",v="_label_1fy2h_9",y="_horizontal_1fy2h_17",m="_sidebar_1fy2h_27",N="_tabs_1fy2h_68",g="_pills_1fy2h_88",t={nav:h,label:v,horizontal:y,sidebar:m,tabs:N,pills:g},w={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},x=({className:e,...n})=>i.jsx("span",{className:r.t(e,t.label),...n,"data-component":"navlabel"}),j=({animation:e,children:n,className:c,horizontal:l=!1,variant:s="default",...d})=>{const[b,o]=f.useState(!1),u={"--icon-svg":p.iconSVG("chevron")};return i.jsx("nav",{className:r.t(c,l&&t.horizontal,t.nav,w[s]),"data-animation":e,"data-open":b?"true":"false","data-orientation":l?"horizontal":"vertical",onBlurCapture:a=>{if(s!=="pills"||window.innerWidth>960)return;const _=a.relatedTarget;a.currentTarget.contains(_)||o(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||o(a=>!a)},style:u,...d,"data-component":"nav",children:n})};exports.Nav=j;exports.NavLabel=x;
 //# sourceMappingURL=index.cjs.map

package/dist/components/nav/index.js

@@ -1,40 +1,40 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { t as r } from "../../classix-DG18itHa.js";
-import { useState as _ } from "react";
-import { i as h } from "../../icons-Bq3diTRm.js";
-import '../../assets/index12.css';const m = "_nav_ebhif_3", u = "_label_ebhif_9", v = "_horizontal_ebhif_17", w = "_sidebar_ebhif_27", z = "_tabs_ebhif_73", N = "_pills_ebhif_94", a = {
+import { useState as b } from "react";
+import { i as h } from "../../icons-Dj0vEOCB.js";
+import '../../assets/index12.css';const m = "_nav_1fy2h_3", u = "_label_1fy2h_9", v = "_horizontal_1fy2h_17", y = "_sidebar_1fy2h_27", w = "_tabs_1fy2h_68", z = "_pills_1fy2h_88", a = {
   nav: m,
   label: u,
   horizontal: v,
-  sidebar: w,
-  tabs: z,
-  pills: N
-}, g = {
+  sidebar: y,
+  tabs: w,
+  pills: z
+}, N = {
   default: a.default,
   pills: a.pills,
   sidebar: a.sidebar,
   tabs: a.tabs
 }, T = ({
   className: n,
-  ...e
-}) => /* @__PURE__ */ l("span", { className: r(n, a.label), ...e, "data-component": "navlabel" }), V = ({
+  ...s
+}) => /* @__PURE__ */ i("span", { className: r(n, a.label), ...s, "data-component": "navlabel" }), V = ({
   animation: n,
-  children: e,
+  children: s,
   className: c,
-  horizontal: o = !1,
-  variant: s = "default",
-  ...b
+  horizontal: e = !1,
+  variant: o = "default",
+  ...f
 }) => {
-  const [f, i] = _(!1), p = {
+  const [p, l] = b(!1), d = {
     "--icon-svg": h("chevron")
   };
-  return /* @__PURE__ */ l("nav", { className: r(c, o && a.horizontal, a.nav, g[s]), "data-animation": n, "data-open": f ? "true" : "false", "data-orientation": o ? "horizontal" : "vertical", onBlurCapture: (t) => {
-    if (s !== "pills" || window.innerWidth > 960) return;
-    const d = t.relatedTarget;
-    t.currentTarget.contains(d) || i(!1);
+  return /* @__PURE__ */ i("nav", { className: r(c, e && a.horizontal, a.nav, N[o]), "data-animation": n, "data-open": p ? "true" : "false", "data-orientation": e ? "horizontal" : "vertical", onBlurCapture: (t) => {
+    if (o !== "pills" || window.innerWidth > 960) return;
+    const _ = t.relatedTarget;
+    t.currentTarget.contains(_) || l(!1);
   }, onClick: () => {
-    s !== "pills" || window.innerWidth > 960 || i((t) => !t);
-  }, style: p, ...b, "data-component": "nav", children: e });
+    o !== "pills" || window.innerWidth > 960 || l((t) => !t);
+  }, style: d, ...f, "data-component": "nav", children: s });
 };
 export {
   V as Nav,

package/dist/components/popover/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const _=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),o=require("react"),S=require("react-dom"),I=require("../button/index.cjs"),K="_popover_1e3fx_1",O="_inline_1e3fx_6",N="_below_1e3fx_42",H="_above_1e3fx_47",W="_left_1e3fx_57",M="_right_1e3fx_62",U="_trigger_1e3fx_67",s={popover:K,inline:O,"popover-panel":"_popover-panel_1e3fx_21",below:N,above:H,"inline-panel":"_inline-panel_1e3fx_52",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_1e3fx_77"},X=({children:w,inline:n=!1,triggerAccessibleLabel:z,triggerAriaHasPopup:C,triggerButtonContent:b})=>{var B;const x=o.useRef(null),y=o.useRef(void 0),m=o.useRef(null),P=o.useId(),l=o.useRef(null),[t,R]=o.useState(!1),[p,D]=o.useState(!1),[d,k]=o.useState("right"),g=({initialFocus:e}={})=>{y.current=e,D(!1),k("right"),R(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var i;R(!1),e&&((i=l.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&c()},F=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),g();return}if(e.key==="ArrowDown"){e.preventDefault(),g({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),g({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var r,v;const f=i.target;(r=x.current)!=null&&r.contains(f)||(v=m.current)!=null&&v.contains(f)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const a=o.useCallback(()=>{const e=m.current,i=l.current;if(!e||!i)return;const f=e.getBoundingClientRect(),r=i.getBoundingClientRect(),v=r.top,T=window.innerHeight-r.bottom;D(f.height>T&&v>T),k(f.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":"right")},[]);o.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const q=e=>{e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):g()},E={"aria-controls":t?P:void 0,"aria-expanded":t,"aria-haspopup":C,"aria-label":z,className:n?s["inline-trigger"]:s.trigger,onClick:q,onKeyDown:F},u=n?(B=l.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",p?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),h=t?_.jsx("div",{className:j.t(s["popover-panel"],s[p?"above":"below"],n&&s["inline-panel"],!n&&s[d]),"data-horizontal-placement":d,"data-placement":p?"above":"below",id:P,ref:m,style:u?{left:d==="left"?u.right:u.left,position:"fixed",top:p?u.top:u.bottom,transform:A||void 0}:void 0,children:typeof w=="function"?w({close:c,initialFocus:y.current,isOpen:t}):w}):null;return _.jsxs("div",{className:j.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:L,onClick:e=>{e.preventDefault(),e.stopPropagation()},ref:x,"data-component":"popover",children:[n?_.jsx("span",{...E,ref:l,role:"button",tabIndex:0,children:b}):_.jsx(I.Button,{...E,ref:l,variant:"simple",children:b}),n&&h&&typeof document<"u"?S.createPortal(h,document.body):h]})};exports.Popover=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index49.css');const h=require("react/jsx-runtime"),k=require("../../classix-5H4IWnMA.cjs"),n=require("react"),S=require("react-dom"),K=require("../button/index.cjs"),O="_popover_1e3fx_1",I="_inline_1e3fx_6",N="_below_1e3fx_42",H="_above_1e3fx_47",W="_left_1e3fx_57",M="_right_1e3fx_62",U="_trigger_1e3fx_67",r={popover:O,inline:I,"popover-panel":"_popover-panel_1e3fx_21",below:N,above:H,"inline-panel":"_inline-panel_1e3fx_52",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_1e3fx_77"},X=({children:v,inline:s=!1,triggerAccessibleLabel:C,triggerAriaHasPopup:T,triggerButtonContent:z})=>{var B;const b=n.useRef(null),x=n.useRef(void 0),_=n.useRef(null),y=n.useId(),f=n.useRef(null),[t,P]=n.useState(!1),[p,R]=n.useState(!1),[d,D]=n.useState("right"),w=({initialFocus:e}={})=>{x.current=e,R(!1),D("right"),P(!0)},l=n.useCallback(({restoreFocus:e=!0}={})=>{var i;P(!1),e&&((i=f.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&l()},j=e=>{if(!t){if(e.key==="ArrowDown"){e.preventDefault(),w({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),w({initialFocus:"last"}))}};n.useEffect(()=>{if(!t)return;const e=i=>{var o,g;const u=i.target;(o=b.current)!=null&&o.contains(u)||(g=_.current)!=null&&g.contains(u)||l({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[l,t]);const a=n.useCallback(()=>{const e=_.current,i=f.current;if(!e||!i)return;const u=e.getBoundingClientRect(),o=i.getBoundingClientRect(),g=o.top,E=window.innerHeight-o.bottom;R(u.height>E&&g>E),D(u.width>window.innerWidth-o.left&&o.right>window.innerWidth-o.left?"left":"right")},[]);n.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const F=e=>{e.preventDefault(),e.stopPropagation(),t?l({restoreFocus:!1}):w()},q={"aria-controls":t?y:void 0,"aria-expanded":t,"aria-haspopup":T,"aria-label":C,className:s?r["inline-trigger"]:r.trigger,onClick:F,onKeyDown:j},c=s?(B=f.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",p?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),m=t?h.jsx("div",{className:k.t(r["popover-panel"],r[p?"above":"below"],s&&r["inline-panel"],!s&&r[d]),"data-horizontal-placement":d,"data-placement":p?"above":"below",id:y,ref:_,style:c?{left:d==="left"?c.right:c.left,position:"fixed",top:p?c.top:c.bottom,transform:A||void 0}:void 0,children:typeof v=="function"?v({close:l,initialFocus:x.current,isOpen:t}):v}):null;return h.jsxs("div",{className:k.t(r.popover,s&&r.inline),"data-open":t,onKeyDown:L,onClick:e=>{e.preventDefault(),e.stopPropagation()},ref:b,"data-component":"popover",children:[h.jsx(K.Button,{...q,ref:f,variant:"simple",children:z}),s&&m&&typeof document<"u"?S.createPortal(m,document.body):m]})};exports.Popover=X;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (inline && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      openPopover();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      {inline ? (\n        <span\n          {...triggerProps}\n          ref={triggerRef}\n          role='button'\n          tabIndex={0}\n        >\n          {triggerButtonContent}\n        </span>\n      ) : (\n        <Button\n          {...triggerProps}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          variant='simple'\n        >\n          {triggerButtonContent}\n        </Button>\n      )}\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      <Button\n        {...triggerProps}\n        ref={triggerRef}\n        variant='simple'\n      >\n        {triggerButtonContent}\n      </Button>\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}