@solibo/solibo-ui 1.0.4 → 1.0.5

package/dist/components/icon/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const r=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),t=require("../../icons-DYCSlAoX.cjs"),m="_icon_vhz6u_1",u="_small_vhz6u_10",_="_medium_vhz6u_15",g="_large_vhz6u_20",d="_danger_vhz6u_25",e={icon:m,small:u,medium:_,large:g,danger:d,"gap-right":"_gap-right_vhz6u_29","gap-left":"_gap-left_vhz6u_33"},h={large:e.large,medium:e.medium,small:e.small},v={danger:e.danger},z=({fill:o,gap:n="none",name:a,size:c="medium",variant:s})=>{const i={maskImage:t.iconSVG(a,o??!1)};return r.jsx("span",{"aria-hidden":"true",className:l.t(n!=="none"&&e[`gap-${n}`],h[c],e.icon,s&&v[s]),style:i,"data-component":"icon"})},p=()=>Object.keys(t.iconPaths);exports.Icon=z;exports.Icons=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const r=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),t=require("../../icons-BROXUtPz.cjs"),m="_icon_vhz6u_1",u="_small_vhz6u_10",_="_medium_vhz6u_15",g="_large_vhz6u_20",d="_danger_vhz6u_25",e={icon:m,small:u,medium:_,large:g,danger:d,"gap-right":"_gap-right_vhz6u_29","gap-left":"_gap-left_vhz6u_33"},h={large:e.large,medium:e.medium,small:e.small},v={danger:e.danger},z=({fill:o,gap:n="none",name:a,size:c="medium",variant:s})=>{const i={maskImage:t.iconSVG(a,o??!1)};return r.jsx("span",{"aria-hidden":"true",className:l.t(n!=="none"&&e[`gap-${n}`],h[c],e.icon,s&&v[s]),style:i,"data-component":"icon"})},p=()=>Object.keys(t.iconPaths);exports.Icon=z;exports.Icons=p;
 //# sourceMappingURL=index.cjs.map

package/dist/components/icon/index.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { t as c } from "../../classix-DG18itHa.js";
-import { i, a as l } from "../../icons-CKzd_L4D.js";
+import { i, a as l } from "../../icons-CH48JQqt.js";
 import '../../assets/index46.css';const _ = "_icon_vhz6u_1", g = "_small_vhz6u_10", u = "_medium_vhz6u_15", d = "_large_vhz6u_20", h = "_danger_vhz6u_25", n = {
   icon: _,
   small: g,

package/dist/components/input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-DYCSlAoX.cjs");const e=require("../../index-CP5A_BGJ.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Input=e.Input;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-BROXUtPz.cjs");const e=require("../../index-CIugi8vq.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Input=e.Input;
 //# sourceMappingURL=index.cjs.map

package/dist/components/input/index.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "../../classix-DG18itHa.js";
 import "react";
-import "../../icons-CKzd_L4D.js";
-import { I as a } from "../../index-DFXqYJat.js";
+import "../../icons-CH48JQqt.js";
+import { I as a } from "../../index-BrGCs_7h.js";
 import "../../use-touched-DXIJVVzz.js";
 export {
   a as Input

package/dist/components/menu/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const r=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),f=require("react"),b=require("../button/index.cjs"),p=require("../icon/index.cjs"),h=require("../list/index.cjs"),j=require("../popover/index.cjs"),v="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",D="_danger_z7awx_47",l={list:v,item:y,active:w,danger:D};function q(o){return o.filter(s=>!!(s&&!s.disabled))}const k=({close:o,initialFocus:s,items:u,menuAccessibleLabel:d,onItemSelect:c})=>{const a=f.useRef([]),t=f.useCallback(e=>{const n=q(a.current);if(n.length===0)return;if(e==="first"){n[0].focus();return}if(e==="last"){n[n.length-1].focus();return}const i=n.indexOf(document.activeElement),g=e==="next"?(i+1)%n.length:(i-1+n.length)%n.length;n[g].focus()},[]);f.useEffect(()=>{t(s??"first")},[t,s]);const x=e=>{if(e.key==="ArrowDown"){e.preventDefault(),t("next");return}if(e.key==="ArrowUp"){e.preventDefault(),t("previous");return}if(e.key==="Home"){e.preventDefault(),t("first");return}e.key==="End"&&(e.preventDefault(),t("last"))},_=e=>{var n;(n=e.onSelect)==null||n.call(e),c==null||c(e),o()};return r.jsx(h.List,{"aria-label":d,className:l.list,onKeyDown:x,role:"menu","data-component":"menupanel",children:u.map((e,n)=>r.jsx("li",{role:"none",children:r.jsxs(b.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:m.t(l.item,e.isActive&&l.active,e.isDanger&&l.danger),disabled:e.disabled,onClick:()=>_(e),ref:i=>{a.current[n]=i},role:"menuitem",variant:"tertiary",children:[e.icon&&r.jsx(p.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),r.jsx("span",{children:e.label})]})},e.id??n))})},z=({items:o,menuAccessibleLabel:s="Menu",onItemSelect:u,position:d="left",triggerAccessibleLabel:c="Open menu"})=>r.jsx(j.Popover,{position:d,triggerAccessibleLabel:c,triggerAriaHasPopup:"menu",triggerButtonContent:r.jsx(p.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:a,initialFocus:t})=>r.jsx(k,{close:a,initialFocus:t,items:o,menuAccessibleLabel:s,onItemSelect:u})});exports.Menu=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const r=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),p=require("react"),b=require("../button/index.cjs"),x=require("../icon/index.cjs"),h=require("../list/index.cjs"),j=require("../popover/index.cjs"),v="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",D="_danger_z7awx_47",l={list:v,item:y,active:w,danger:D};function q(o){return o.filter(s=>!!(s&&!s.disabled))}const k=({close:o,initialFocus:s,items:u,menuAccessibleLabel:d,onItemSelect:a})=>{const c=p.useRef([]),t=p.useCallback(e=>{const n=q(c.current);if(n.length===0)return;if(e==="first"){n[0].focus();return}if(e==="last"){n[n.length-1].focus();return}const i=n.indexOf(document.activeElement),g=e==="next"?(i+1)%n.length:(i-1+n.length)%n.length;n[g].focus()},[]);p.useEffect(()=>{t(s??"first")},[t,s]);const f=e=>{if(e.key==="ArrowDown"){e.preventDefault(),t("next");return}if(e.key==="ArrowUp"){e.preventDefault(),t("previous");return}if(e.key==="Home"){e.preventDefault(),t("first");return}e.key==="End"&&(e.preventDefault(),t("last"))},_=e=>{var n;(n=e.onSelect)==null||n.call(e),a==null||a(e),o()};return r.jsx(h.List,{"aria-label":d,className:l.list,onKeyDown:f,role:"menu","data-component":"menupanel",children:u.map((e,n)=>r.jsx("li",{role:"none",children:r.jsxs(b.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:m.t(l.item,e.isActive&&l.active,e.isDanger&&l.danger),disabled:e.disabled,onClick:()=>_(e),ref:i=>{c.current[n]=i},role:"menuitem",variant:"tertiary",children:[e.icon&&r.jsx(x.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),r.jsx("span",{children:e.label})]})},e.id??n))})},z=({inline:o=!1,items:s,menuAccessibleLabel:u="Menu",onItemSelect:d,position:a="left",triggerAccessibleLabel:c="Open menu"})=>r.jsx(j.Popover,{inline:o,position:a,triggerAccessibleLabel:c,triggerAriaHasPopup:"menu",triggerButtonContent:r.jsx(x.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:t,initialFocus:f})=>r.jsx(k,{close:t,initialFocus:f,items:s,menuAccessibleLabel:u,onItemSelect:d})});exports.Menu=z;
 //# 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\nexport type MenuProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n  position?: 'left' | 'right';\n  triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\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    <List\n      aria-label={menuAccessibleLabel}\n      className={styles.list}\n      onKeyDown={handleKeyDown}\n      role='menu'\n    >\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          role='none'\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={() => handleItemSelect(item)}\n            ref={(node) => {\n              itemRefs.current[index] = node;\n            }}\n            role='menuitem'\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};\n\nexport const Menu = ({\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  position = 'left',\n  triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n  return (\n    <Popover\n      position={position}\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":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
+{"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\nexport type MenuProps = {\n  inline?: boolean;\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\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    <List\n      aria-label={menuAccessibleLabel}\n      className={styles.list}\n      onKeyDown={handleKeyDown}\n      role='menu'\n    >\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          role='none'\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={() => handleItemSelect(item)}\n            ref={(node) => {\n              itemRefs.current[index] = node;\n            }}\n            role='menuitem'\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};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  position = 'left',\n  triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n  return (\n    <Popover\n      inline={inline}\n      position={position}\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":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","inline","position","triggerAccessibleLabel","Popover"],"mappings":"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"}

package/dist/components/menu/index.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as h } from "react/jsx-runtime";
 import { t as x } from "../../classix-DG18itHa.js";
 import { useRef as _, useCallback as b, useEffect as w } from "react";
 import { Button as v } from "../button/index.js";
-import { Icon as d } from "../icon/index.js";
+import { Icon as m } from "../icon/index.js";
 import { List as y } from "../list/index.js";
 import { Popover as D } from "../popover/index.js";
 import '../../assets/index16.css';const k = "_list_z7awx_3", z = "_item_z7awx_15", A = "_active_z7awx_38", B = "_danger_z7awx_47", c = {
@@ -39,7 +39,7 @@ const E = ({
   w(() => {
     r(t ?? "first");
   }, [r, t]);
-  const m = (e) => {
+  const d = (e) => {
     if (e.key === "ArrowDown") {
       e.preventDefault(), r("next");
       return;
@@ -57,22 +57,23 @@ const E = ({
     var n;
     (n = e.onSelect) == null || n.call(e), s == null || s(e), a();
   };
-  return /* @__PURE__ */ o(y, { "aria-label": f, className: c.list, onKeyDown: m, role: "menu", "data-component": "menupanel", children: u.map((e, n) => /* @__PURE__ */ o("li", { role: "none", children: /* @__PURE__ */ h(v, { "aria-current": e.isActive ? "true" : void 0, "aria-label": e.accessibleLabel, className: x(c.item, e.isActive && c.active, e.isDanger && c.danger), disabled: e.disabled, onClick: () => p(e), ref: (i) => {
+  return /* @__PURE__ */ o(y, { "aria-label": f, className: c.list, onKeyDown: d, role: "menu", "data-component": "menupanel", children: u.map((e, n) => /* @__PURE__ */ o("li", { role: "none", children: /* @__PURE__ */ h(v, { "aria-current": e.isActive ? "true" : void 0, "aria-label": e.accessibleLabel, className: x(c.item, e.isActive && c.active, e.isDanger && c.danger), disabled: e.disabled, onClick: () => p(e), ref: (i) => {
     l.current[n] = i;
   }, role: "menuitem", variant: "tertiary", children: [
-    e.icon && /* @__PURE__ */ o(d, { fill: !0, gap: "right", name: e.icon, size: "small" }),
+    e.icon && /* @__PURE__ */ o(m, { fill: !0, gap: "right", name: e.icon, size: "small" }),
     /* @__PURE__ */ o("span", { children: e.label })
   ] }) }, e.id ?? n)) });
 }, N = ({
-  items: a,
-  menuAccessibleLabel: t = "Menu",
-  onItemSelect: u,
-  position: f = "left",
-  triggerAccessibleLabel: s = "Open menu"
-}) => /* @__PURE__ */ o(D, { position: f, triggerAccessibleLabel: s, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ o(d, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
-  close: l,
-  initialFocus: r
-}) => /* @__PURE__ */ o(E, { close: l, initialFocus: r, items: a, menuAccessibleLabel: t, onItemSelect: u }) });
+  inline: a = !1,
+  items: t,
+  menuAccessibleLabel: u = "Menu",
+  onItemSelect: f,
+  position: s = "left",
+  triggerAccessibleLabel: l = "Open menu"
+}) => /* @__PURE__ */ o(D, { inline: a, position: s, triggerAccessibleLabel: l, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ o(m, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
+  close: r,
+  initialFocus: d
+}) => /* @__PURE__ */ o(E, { close: r, initialFocus: d, items: t, menuAccessibleLabel: u, onItemSelect: f }) });
 export {
   N as Menu
 };

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\nexport type MenuProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n  position?: 'left' | 'right';\n  triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\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    <List\n      aria-label={menuAccessibleLabel}\n      className={styles.list}\n      onKeyDown={handleKeyDown}\n      role='menu'\n    >\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          role='none'\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={() => handleItemSelect(item)}\n            ref={(node) => {\n              itemRefs.current[index] = node;\n            }}\n            role='menuitem'\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};\n\nexport const Menu = ({\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  position = 'left',\n  triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n  return (\n    <Popover\n      position={position}\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":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
+{"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\nexport type MenuProps = {\n  inline?: boolean;\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\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    <List\n      aria-label={menuAccessibleLabel}\n      className={styles.list}\n      onKeyDown={handleKeyDown}\n      role='menu'\n    >\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          role='none'\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={() => handleItemSelect(item)}\n            ref={(node) => {\n              itemRefs.current[index] = node;\n            }}\n            role='menuitem'\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};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  position = 'left',\n  triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n  return (\n    <Popover\n      inline={inline}\n      position={position}\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":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","inline","position","triggerAccessibleLabel","Popover"],"mappings":"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"}

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"),p=require("../../classix-5H4IWnMA.cjs"),v=require("../avatar/index.cjs"),x=require("../icon/index.cjs"),b="_message_ugbdy_1",y="_timestamp_ugbdy_78",j="_attachments_ugbdy_83",h="_preview_ugbdy_101",s={"message-group":"_message-group_ugbdy_1",message:b,timestamp:y,attachments:j,preview:h},f=({appearance:m="default",attachments:i,author:a,authorColor:r,authorImageUrl:o,authorRole:d,content:g,iconName:l="info",id:_,preview:u,timestamp:c,type:t="default"})=>{const n=c?new Date(c):void 0;return e.jsxs("div",{className:s["message-group"],"data-message-type":t,"data-component":"message",children:[a&&e.jsx(v.Avatar,{accessibleLabel:a,color:r,imageUrl:o,name:a,role:d}),e.jsxs("div",{className:p.t(s.message,u&&s.preview),"data-appearance":m,"data-id":_,"data-type":t,children:[t=="system"&&e.jsx(x.Icon,{fill:!0,gap:"right",name:l}),g]}),i&&e.jsx("div",{className:s.attachments,children:i}),n&&e.jsx("time",{className:s.timestamp,dateTime:n.toISOString(),children:n.toLocaleString()})]})};exports.Message=f;
+"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"),b=require("../icon/index.cjs"),y="_message_ugbdy_1",j="_timestamp_ugbdy_78",h="_attachments_ugbdy_83",f="_preview_ugbdy_101",s={"message-group":"_message-group_ugbdy_1",message:y,timestamp:j,attachments:h,preview:f},w=({appearance:m="default",attachments:i,author:a,authorColor:r,authorImageUrl:o,authorRole:d,content:g,iconName:l="info",id:_,preview:u,timestamp:c,timestampText:p,type:t="default"})=>{const n=c?new Date(c):void 0;return e.jsxs("div",{className:s["message-group"],"data-message-type":t,"data-component":"message",children:[a&&e.jsx(x.Avatar,{accessibleLabel:a,color:r,imageUrl:o,name:a,role:d}),e.jsxs("div",{className:v.t(s.message,u&&s.preview),"data-appearance":m,"data-id":_,"data-type":t,children:[t=="system"&&e.jsx(b.Icon,{fill:!0,gap:"right",name:l}),g]}),i&&e.jsx("div",{className:s.attachments,children:i}),n&&e.jsx("time",{className:s.timestamp,dateTime:n.toISOString(),children:p??n.toLocaleString()})]})};exports.Message=w;
 //# 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  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  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\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      <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      {date && (\n        <time\n          className={styles.timestamp}\n          dateTime={date.toISOString()}\n        >\n          {date.toLocaleString()}\n        </time>\n      )}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"mappings":"sZAuBaA,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,KAAAA,EAAO,SACO,IAAM,CACpB,MAAMC,EAAOF,EAAY,IAAIG,KAAKH,CAAS,EAAII,OAE/C,OACEC,OAAC,OACC,UAAWC,EAAO,eAAe,EACjC,oBAAmBL,EAAK,iBAAA,UAEvBT,SAAAA,CAAAA,GACCe,EAAAA,IAACC,EAAAA,OAAA,CACC,gBAAiBhB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGrBU,EAAAA,KAAC,MAAA,CACC,UAAWI,EAAAA,EAAGH,EAAOI,QAASX,GAAWO,EAAOP,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWG,EAEVA,SAAAA,CAAAA,GAAQ,gBACNU,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMd,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAegB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAOf,YAAcA,SAAAA,EAAY,EAChEW,GACCK,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAON,UAClB,SAAUE,EAAKU,YAAAA,EAEdV,SAAAA,EAAKW,eAAAA,CAAe,CACvB,CAAA,EAEJ,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\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      <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      {date && (\n        <time\n          className={styles.timestamp}\n          dateTime={date.toISOString()}\n        >\n          {timestampText ?? date.toLocaleString()}\n        </time>\n      )}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"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,OAE/C,OACEC,OAAC,OACC,UAAWC,EAAO,eAAe,EACjC,oBAAmBL,EAAK,iBAAA,UAEvBV,SAAAA,CAAAA,GACCgB,EAAAA,IAACC,EAAAA,OAAA,CACC,gBAAiBjB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGrBW,EAAAA,KAAC,MAAA,CACC,UAAWI,EAAAA,EAAGH,EAAOI,QAASZ,GAAWQ,EAAOR,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,gBACNU,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMf,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAeiB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAOhB,YAAcA,SAAAA,EAAY,EAChEY,GACCK,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAOP,UAClB,SAAUG,EAAKU,YAAAA,EAEdZ,SAAAA,GAAiBE,EAAKW,gBAAe,CACxC,CAAA,EAEJ,CAEJ"}

package/dist/components/message/index.js

@@ -1,14 +1,14 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { t as v } from "../../classix-DG18itHa.js";
-import { Avatar as f } from "../avatar/index.js";
-import { Icon as b } from "../icon/index.js";
-import '../../assets/index15.css';const y = "_message_ugbdy_1", h = "_timestamp_ugbdy_78", w = "_attachments_ugbdy_83", N = "_preview_ugbdy_101", e = {
+import { t as f } from "../../classix-DG18itHa.js";
+import { Avatar as b } from "../avatar/index.js";
+import { Icon as y } from "../icon/index.js";
+import '../../assets/index15.css';const h = "_message_ugbdy_1", w = "_timestamp_ugbdy_78", N = "_attachments_ugbdy_83", x = "_preview_ugbdy_101", e = {
   "message-group": "_message-group_ugbdy_1",
-  message: y,
-  timestamp: h,
-  attachments: w,
-  preview: N
-}, L = ({
+  message: h,
+  timestamp: w,
+  attachments: N,
+  preview: x
+}, A = ({
   appearance: c = "default",
   attachments: i,
   author: s,
@@ -20,20 +20,21 @@ import '../../assets/index15.css';const y = "_message_ugbdy_1", h = "_timestamp_
   id: _,
   preview: u,
   timestamp: r,
+  timestampText: v,
   type: t = "default"
 }) => {
   const m = r ? new Date(r) : void 0;
   return /* @__PURE__ */ o("div", { className: e["message-group"], "data-message-type": t, "data-component": "message", children: [
-    s && /* @__PURE__ */ a(f, { accessibleLabel: s, color: n, imageUrl: d, name: s, role: g }),
-    /* @__PURE__ */ o("div", { className: v(e.message, u && e.preview), "data-appearance": c, "data-id": _, "data-type": t, children: [
-      t == "system" && /* @__PURE__ */ a(b, { fill: !0, gap: "right", name: p }),
+    s && /* @__PURE__ */ a(b, { accessibleLabel: s, color: n, imageUrl: d, name: s, role: g }),
+    /* @__PURE__ */ o("div", { className: f(e.message, u && e.preview), "data-appearance": c, "data-id": _, "data-type": t, children: [
+      t == "system" && /* @__PURE__ */ a(y, { fill: !0, gap: "right", name: p }),
       l
     ] }),
     i && /* @__PURE__ */ a("div", { className: e.attachments, children: i }),
-    m && /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: m.toLocaleString() })
+    m && /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: v ?? m.toLocaleString() })
   ] });
 };
 export {
-  L as Message
+  A 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 { 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  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  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\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      <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      {date && (\n        <time\n          className={styles.timestamp}\n          dateTime={date.toISOString()}\n        >\n          {date.toLocaleString()}\n        </time>\n      )}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"mappings":";;;;;;;;;;GAuBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOF,IAAY,IAAIG,KAAKH,CAAS,IAAII;AAE/C,SACE,gBAAAC,EAAC,SACC,WAAWC,EAAO,eAAe,GACjC,qBAAmBL,GAAK,kBAAA,WAEvBT,UAAAA;AAAAA,IAAAA,KACC,gBAAAe,EAACC,GAAA,EACC,iBAAiBhB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGrB,gBAAAU,EAAC,OAAA,EACC,WAAWI,EAAGH,EAAOI,SAASX,KAAWO,EAAOP,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWG,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,8BACNU,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMd,EAAAA,CAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAOf,aAAcA,UAAAA,GAAY;AAAA,IAChEW,KACC,gBAAAK,EAAC,QAAA,EACC,WAAWD,EAAON,WAClB,UAAUE,EAAKU,YAAAA,GAEdV,UAAAA,EAAKW,eAAAA,EAAe,CACvB;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"index.js","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\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      <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      {date && (\n        <time\n          className={styles.timestamp}\n          dateTime={date.toISOString()}\n        >\n          {timestampText ?? date.toLocaleString()}\n        </time>\n      )}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"mappings":";;;;;;;;;;GAwBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;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;AAE/C,SACE,gBAAAC,EAAC,SACC,WAAWC,EAAO,eAAe,GACjC,qBAAmBL,GAAK,kBAAA,WAEvBV,UAAAA;AAAAA,IAAAA,KACC,gBAAAgB,EAACC,GAAA,EACC,iBAAiBjB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGrB,gBAAAW,EAAC,OAAA,EACC,WAAWI,EAAGH,EAAOI,SAASZ,KAAWQ,EAAOR,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,8BACNU,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMf,EAAAA,CAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAiB,EAAC,OAAA,EAAI,WAAWD,EAAOhB,aAAcA,UAAAA,GAAY;AAAA,IAChEY,KACC,gBAAAK,EAAC,QAAA,EACC,WAAWD,EAAOP,WAClB,UAAUG,EAAKU,YAAAA,GAEdZ,UAAAA,KAAiBE,EAAKW,iBAAe,CACxC;AAAA,EAAA,GAEJ;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 _=require("react/jsx-runtime"),p=require("../../classix-5H4IWnMA.cjs"),b=require("react"),f=require("../../icons-DYCSlAoX.cjs"),v="_nav_1s9ne_3",h="_horizontal_1s9ne_9",g="_sidebar_1s9ne_19",m="_tabs_1s9ne_60",w="_pills_1s9ne_80",t={nav:v,horizontal:h,sidebar:g,tabs:m,pills:w},q={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},x=({animation:i,children:o,className:r,horizontal:s=!1,variant:e="default",...l})=>{const[c,a]=b.useState(!1),d={"--icon-svg":f.iconSVG("chevron")};return _.jsx("nav",{className:p.t(r,s&&t.horizontal,t.nav,q[e]),"data-animation":i,"data-open":c?"true":"false","data-orientation":s?"horizontal":"vertical",onBlurCapture:n=>{if(e!=="pills"||window.innerWidth>960)return;const u=n.relatedTarget;n.currentTarget.contains(u)||a(!1)},onClick:()=>{e!=="pills"||window.innerWidth>960||a(n=>!n)},style:d,...l,"data-component":"nav",children:o})};exports.Nav=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),v=require("../../icons-BROXUtPz.cjs"),f="_nav_1ecsd_3",h="_label_1ecsd_9",m="_horizontal_1ecsd_17",N="_sidebar_1ecsd_27",g="_tabs_1ecsd_73",w="_pills_1ecsd_93",e={nav:f,label:h,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...s})=>i.jsx("span",{className:r.t(a,e.label),...s,"data-component":"navlabel"}),q=({animation:a,children:s,className:c,horizontal:l=!1,variant:n="default",...d})=>{const[b,o]=p.useState(!1),u={"--icon-svg":v.iconSVG("chevron")};return i.jsx("nav",{className:r.t(c,l&&e.horizontal,e.nav,x[n]),"data-animation":a,"data-open":b?"true":"false","data-orientation":l?"horizontal":"vertical",onBlurCapture:t=>{if(n!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||o(!1)},onClick:()=>{n!=="pills"||window.innerWidth>960||o(t=>!t)},style:u,...d,"data-component":"nav",children:s})};exports.Nav=q;exports.NavLabel=j;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","Nav","animation","children","className","horizontal","variant","props","open","setOpen","useState","withVars","iconSVG","jsx","cx","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":"4WAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,QAASF,EAAOE,QAChBC,KAAMH,EAAOG,IACf,EAUaC,EAAMA,CAAC,CAClBC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,GACbC,QAAAA,EAAU,UACV,GAAGC,CACK,IAAM,CACd,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAKhCC,EAAqB,CACzB,aAAcC,EAAAA,QAAQ,SAAS,CAAA,EAGjC,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,EAAGV,EAAWC,GAAcR,EAAOQ,WAAYR,EAAOkB,IAAKpB,EAASW,CAAO,CAAC,EACvF,iBAAgBJ,EAChB,YAAWM,EAAO,OAAS,QAC3B,mBAAkBH,EAAa,aAAe,WAC9C,cAAgBW,GAAM,CACpB,GAAIV,IAAY,SAAWW,OAAOC,WAAa,IAAK,OAEpD,MAAMC,EAAOH,EAAEI,cACVJ,EAAEK,cAAcC,SAASH,CAAI,GAChCV,EAAQ,EAAK,CAEjB,EACA,QAAS,IAAM,CACTH,IAAY,SAAWW,OAAOC,WAAa,KAE/CT,EAASc,GAAM,CAACA,CAAC,CACnB,EACA,MAAOZ,EACP,GAAIJ,EAAM,iBAAA,MAETJ,SAAAA,EACH,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":"wYAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,QAASF,EAAOE,QAChBC,KAAMH,EAAOG,IACf,EAYaC,EAAWA,CAAC,CAAEC,UAAAA,EAAW,GAAGC,CAAqB,IAC5DC,MAAC,OAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWL,EAAOS,KAAK,EACrC,GAAIH,EAAM,iBAAA,UAAA,CAAA,EAIDI,EAAMA,CAAC,CAClBC,UAAAA,EACAC,SAAAA,EACAP,UAAAA,EACAQ,WAAAA,EAAa,GACbC,QAAAA,EAAU,UACV,GAAGR,CACK,IAAM,CACd,KAAM,CAACS,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAKhCC,EAAqB,CACzB,aAAcC,EAAAA,QAAQ,SAAS,CAAA,EAGjC,OACEZ,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWQ,GAAcb,EAAOa,WAAYb,EAAOoB,IAAKtB,EAASgB,CAAO,CAAC,EACvF,iBAAgBH,EAChB,YAAWI,EAAO,OAAS,QAC3B,mBAAkBF,EAAa,aAAe,WAC9C,cAAgBQ,GAAM,CACpB,GAAIP,IAAY,SAAWQ,OAAOC,WAAa,IAAK,OAEpD,MAAMC,EAAOH,EAAEI,cACVJ,EAAEK,cAAcC,SAASH,CAAI,GAChCR,EAAQ,EAAK,CAEjB,EACA,QAAS,IAAM,CACTF,IAAY,SAAWQ,OAAOC,WAAa,KAE/CP,EAASY,GAAM,CAACA,CAAC,CACnB,EACA,MAAOV,EACP,GAAIZ,EAAM,iBAAA,MAETM,SAAAA,EACH,CAEJ"}

package/dist/components/nav/index.js

@@ -1,38 +1,43 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { t as f } from "../../classix-DG18itHa.js";
-import { useState as m } from "react";
-import { i as u } from "../../icons-CKzd_L4D.js";
-import '../../assets/index13.css';const b = "_nav_1s9ne_3", v = "_horizontal_1s9ne_9", h = "_sidebar_1s9ne_19", w = "_tabs_1s9ne_60", z = "_pills_1s9ne_80", t = {
-  nav: b,
-  horizontal: v,
-  sidebar: h,
-  tabs: w,
-  pills: z
+import { jsx as i } from "react/jsx-runtime";
+import { t as r } from "../../classix-DG18itHa.js";
+import { useState as f } from "react";
+import { i as m } from "../../icons-CH48JQqt.js";
+import '../../assets/index13.css';const u = "_nav_1ecsd_3", v = "_label_1ecsd_9", h = "_horizontal_1ecsd_17", w = "_sidebar_1ecsd_27", z = "_tabs_1ecsd_73", N = "_pills_1ecsd_93", a = {
+  nav: u,
+  label: v,
+  horizontal: h,
+  sidebar: w,
+  tabs: z,
+  pills: N
 }, g = {
-  default: t.default,
-  pills: t.pills,
-  sidebar: t.sidebar,
-  tabs: t.tabs
-}, S = ({
-  animation: o,
-  children: i,
-  className: r,
-  horizontal: a = !1,
-  variant: s = "default",
-  ...l
+  default: a.default,
+  pills: a.pills,
+  sidebar: a.sidebar,
+  tabs: a.tabs
+}, T = ({
+  className: s,
+  ...n
+}) => /* @__PURE__ */ i("span", { className: r(s, a.label), ...n, "data-component": "navlabel" }), V = ({
+  animation: s,
+  children: n,
+  className: c,
+  horizontal: o = !1,
+  variant: e = "default",
+  ...d
 }) => {
-  const [c, e] = m(!1), d = {
-    "--icon-svg": u("chevron")
+  const [p, l] = f(!1), _ = {
+    "--icon-svg": m("chevron")
   };
-  return /* @__PURE__ */ _("nav", { className: f(r, a && t.horizontal, t.nav, g[s]), "data-animation": o, "data-open": c ? "true" : "false", "data-orientation": a ? "horizontal" : "vertical", onBlurCapture: (n) => {
-    if (s !== "pills" || window.innerWidth > 960) return;
-    const p = n.relatedTarget;
-    n.currentTarget.contains(p) || e(!1);
+  return /* @__PURE__ */ i("nav", { className: r(c, o && a.horizontal, a.nav, g[e]), "data-animation": s, "data-open": p ? "true" : "false", "data-orientation": o ? "horizontal" : "vertical", onBlurCapture: (t) => {
+    if (e !== "pills" || window.innerWidth > 960) return;
+    const b = t.relatedTarget;
+    t.currentTarget.contains(b) || l(!1);
   }, onClick: () => {
-    s !== "pills" || window.innerWidth > 960 || e((n) => !n);
-  }, style: d, ...l, "data-component": "nav", children: i });
+    e !== "pills" || window.innerWidth > 960 || l((t) => !t);
+  }, style: _, ...d, "data-component": "nav", children: n });
 };
 export {
-  S as Nav
+  V as Nav,
+  T as NavLabel
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","Nav","animation","children","className","horizontal","variant","props","open","setOpen","useState","withVars","iconSVG","jsx","cx","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":";;;;;;;;;;GAOMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,SAASF,EAAOE;AAAAA,EAChBC,MAAMH,EAAOG;AACf,GAUaC,IAAMA,CAAC;AAAA,EAClBC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACV,GAAGC;AACK,MAAM;AACd,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAKhCC,IAAqB;AAAA,IACzB,cAAcC,EAAQ,SAAS;AAAA,EAAA;AAGjC,SACE,gBAAAC,EAAC,OAAA,EACC,WAAWC,EAAGV,GAAWC,KAAcR,EAAOQ,YAAYR,EAAOkB,KAAKpB,EAASW,CAAO,CAAC,GACvF,kBAAgBJ,GAChB,aAAWM,IAAO,SAAS,SAC3B,oBAAkBH,IAAa,eAAe,YAC9C,eAAgBW,CAAAA,MAAM;AACpB,QAAIV,MAAY,WAAWW,OAAOC,aAAa,IAAK;AAEpD,UAAMC,IAAOH,EAAEI;AACf,IAAKJ,EAAEK,cAAcC,SAASH,CAAI,KAChCV,EAAQ,EAAK;AAAA,EAEjB,GACA,SAAS,MAAM;AACb,IAAIH,MAAY,WAAWW,OAAOC,aAAa,OAE/CT,EAASc,CAAAA,MAAM,CAACA,CAAC;AAAA,EACnB,GACA,OAAOZ,GACP,GAAIJ,GAAM,kBAAA,OAETJ,UAAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":";;;;;;;;;;;GAOMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,SAASF,EAAOE;AAAAA,EAChBC,MAAMH,EAAOG;AACf,GAYaC,IAAWA,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAW,GAAGC;AAAqB,MAC5D,gBAAAC,EAAC,QAAA,EACC,WAAWC,EAAGH,GAAWL,EAAOS,KAAK,GACrC,GAAIH,GAAM,kBAAA,WAAA,CAAA,GAIDI,IAAMA,CAAC;AAAA,EAClBC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAP,WAAAA;AAAAA,EACAQ,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACV,GAAGR;AACK,MAAM;AACd,QAAM,CAACS,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAKhCC,IAAqB;AAAA,IACzB,cAAcC,EAAQ,SAAS;AAAA,EAAA;AAGjC,SACE,gBAAAZ,EAAC,OAAA,EACC,WAAWC,EAAGH,GAAWQ,KAAcb,EAAOa,YAAYb,EAAOoB,KAAKtB,EAASgB,CAAO,CAAC,GACvF,kBAAgBH,GAChB,aAAWI,IAAO,SAAS,SAC3B,oBAAkBF,IAAa,eAAe,YAC9C,eAAgBQ,CAAAA,MAAM;AACpB,QAAIP,MAAY,WAAWQ,OAAOC,aAAa,IAAK;AAEpD,UAAMC,IAAOH,EAAEI;AACf,IAAKJ,EAAEK,cAAcC,SAASH,CAAI,KAChCR,EAAQ,EAAK;AAAA,EAEjB,GACA,SAAS,MAAM;AACb,IAAIF,MAAY,WAAWQ,OAAOC,aAAa,OAE/CP,EAASY,CAAAA,MAAM,CAACA,CAAC;AAAA,EACnB,GACA,OAAOV,GACP,GAAIZ,GAAM,kBAAA,OAETM,UAAAA,GACH;AAEJ;"}

package/dist/components/popover/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const a=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),o=require("react"),R=require("../button/index.cjs"),x="_popover_ttn4t_1",P="_left_ttn4t_23",k="_right_ttn4t_28",F="_trigger_ttn4t_33",s={popover:x,"popover-panel":"_popover-panel_ttn4t_6",left:P,right:k,trigger:F},b=({children:i,position:_="left",triggerAccessibleLabel:m,triggerAriaHasPopup:y,triggerButtonContent:w})=>{const u=o.useRef(null),l=o.useRef(void 0),p=o.useId(),f=o.useRef(null),[t,d]=o.useState(!1),c=({initialFocus:e}={})=>{l.current=e,d(!0)},n=o.useCallback(({restoreFocus:e=!0}={})=>{var r;d(!1),e&&((r=f.current)==null||r.focus())},[]),h=e=>{t&&e.key==="Escape"&&n()},D=e=>{if(!t){if(e.key==="ArrowDown"){e.preventDefault(),c({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),c({initialFocus:"last"}))}};return o.useEffect(()=>{if(!t)return;const e=r=>{var v;(v=u.current)!=null&&v.contains(r.target)||n({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[n,t]),a.jsxs("div",{className:s.popover,onKeyDown:h,onClick:e=>e.stopPropagation(),ref:u,"data-component":"popover",children:[a.jsx(R.Button,{"aria-controls":t?p:void 0,"aria-expanded":t,"aria-haspopup":y,"aria-label":m,className:g.t(s.trigger),onKeyDown:D,onClick:()=>t?n({restoreFocus:!1}):c(),ref:f,variant:"secondary",children:w}),t&&a.jsx("div",{className:g.t(s["popover-panel"],s[_]),id:p,children:typeof i=="function"?i({close:n,initialFocus:l.current,isOpen:t}):i})]})};exports.Popover=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const w=require("react/jsx-runtime"),C=require("../../classix-5H4IWnMA.cjs"),o=require("react"),K=require("react-dom"),O=require("../button/index.cjs"),H="_popover_1szho_1",N="_inline_1szho_6",W="_below_1szho_38",M="_above_1szho_43",U="_left_1szho_53",X="_right_1szho_58",Y="_trigger_1szho_63",s={popover:H,inline:N,"popover-panel":"_popover-panel_1szho_21",below:W,above:M,"inline-panel":"_inline-panel_1szho_48",left:U,right:X,trigger:Y,"inline-trigger":"_inline-trigger_1szho_77"},G=({children:m,inline:n=!1,position:p="left",triggerAccessibleLabel:L,triggerAriaHasPopup:F,triggerButtonContent:z})=>{var T;const P=o.useRef(null),R=o.useRef(void 0),b=o.useRef(null),D=o.useId(),l=o.useRef(null),[t,x]=o.useState(!1),[d,k]=o.useState(!1),g=p==="auto"?"right":p,[v,E]=o.useState(g),h=({initialFocus:e}={})=>{R.current=e,k(!1),E(g),x(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var a;x(!1),e&&((a=l.current)==null||a.focus())},[]),q=e=>{t&&e.key==="Escape"&&c()},A=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),h();return}if(e.key==="ArrowDown"){e.preventDefault(),h({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),h({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=a=>{var r,_;const f=a.target;(r=P.current)!=null&&r.contains(f)||(_=b.current)!=null&&_.contains(f)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const i=o.useCallback(()=>{const e=b.current,a=l.current;if(!e||!a)return;const f=e.getBoundingClientRect(),r=a.getBoundingClientRect(),_=r.top,j=window.innerHeight-r.bottom;k(f.height>j&&_>j),E(p==="auto"&&f.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":g)},[p,g]);o.useLayoutEffect(()=>{if(t)return i(),window.addEventListener("resize",i),window.addEventListener("scroll",i,!0),()=>{window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0)}},[t,i]);const S=e=>{n&&e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):h()},B={"aria-controls":t?D:void 0,"aria-expanded":t,"aria-haspopup":F,"aria-label":L,className:n?s["inline-trigger"]:s.trigger,onClick:S,onKeyDown:A},u=n?(T=l.current)==null?void 0:T.getBoundingClientRect():void 0,I=[v==="left"?"translateX(-100%)":"",d?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),y=t?w.jsx("div",{className:C.t(s["popover-panel"],s[d?"above":"below"],n&&s["inline-panel"],!n&&s[v]),"data-horizontal-placement":v,"data-placement":d?"above":"below",id:D,ref:b,style:u?{left:v==="left"?u.right:u.left,position:"fixed",top:d?u.top:u.bottom,transform:I||void 0}:void 0,children:typeof m=="function"?m({close:c,initialFocus:R.current,isOpen:t}):m}):null;return w.jsxs("div",{className:C.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:q,onClick:e=>{n&&e.preventDefault(),e.stopPropagation()},ref:P,"data-component":"popover",children:[n?w.jsx("span",{...B,ref:l,role:"button",tabIndex:0,children:z}):w.jsx(O.Button,{...B,ref:l,variant:"secondary",children:z}),n&&y&&typeof document<"u"?K.createPortal(y,document.body):y]})};exports.Popover=G;
 //# 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  useRef,\n  useState,\n} from 'react';\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  position?: 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  position = 'left',\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\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<HTMLButtonElement>) => {\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      if (!containerRef.current?.contains(event.target as Node)) {\n        closePopover({ restoreFocus: false });\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  return (\n    <div\n      className={styles.popover}\n      onKeyDown={handleKeyDown}\n      onClick={(e) => e.stopPropagation()}\n      ref={containerRef}\n    >\n      <Button\n        aria-controls={isOpen ? panelId : undefined}\n        aria-expanded={isOpen}\n        aria-haspopup={triggerAriaHasPopup}\n        aria-label={triggerAccessibleLabel}\n        className={cx(styles.trigger)}\n        onKeyDown={handleTriggerKeyDown}\n        onClick={() => (isOpen ? closePopover({ restoreFocus: false }) : openPopover())}\n        ref={triggerRef}\n        variant='secondary'\n      >\n        {triggerButtonContent}\n      </Button>\n      {isOpen && (\n        <div\n          className={cx(styles['popover-panel'], styles[position])}\n          id={panelId}\n        >\n          {typeof children === 'function'\n            ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n            : children}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Popover","children","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelId","useId","triggerRef","isOpen","setIsOpen","useState","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","contains","target","document","addEventListener","removeEventListener","jsxs","styles","popover","e","stopPropagation","jsx","Button","cx","trigger","close"],"mappings":"mXAuCaA,EAAUA,CAAC,CACtBC,SAAAA,EACAC,SAAAA,EAAW,OACXC,uBAAAA,EACAC,oBAAAA,EACAC,qBAAAA,CACY,IAAM,CAClB,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAkBD,EAAAA,OAAwCE,MAAS,EACnEC,EAAUC,EAAAA,MAAAA,EACVC,EAAaL,EAAAA,OAA0B,IAAI,EAC3C,CAACM,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAEpCC,EAAcA,CAAC,CAAEC,aAAAA,CAAAA,EAAqC,KAAO,CACjET,EAAgBU,QAAUD,EAC1BH,EAAU,EAAI,CAChB,EAEMK,EAAeC,EAAAA,YAAY,CAAC,CAAEC,aAAAA,EAAe,EAAA,EAA8B,KAAO,OACtFP,EAAU,EAAK,EAEXO,KACFT,EAAAA,EAAWM,UAAXN,MAAAA,EAAoBU,QAExB,EAAG,CAAA,CAAE,EAECC,EAAiBC,GAA+C,CAChEX,GAAUW,EAAMC,MAAQ,UAC1BN,EAAAA,CAEJ,EAEMO,EAAwBF,GAAkD,CAC9E,GAAIX,CAAAA,EAIJ,IAAIW,EAAMC,MAAQ,YAAa,CAC7BD,EAAMG,eAAAA,EACNX,EAAY,CAAEC,aAAc,OAAA,CAAS,EACrC,MACF,CAEIO,EAAMC,MAAQ,YAChBD,EAAMG,eAAAA,EACNX,EAAY,CAAEC,aAAc,MAAA,CAAQ,GAExC,EAEAW,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACf,EACH,OAGF,MAAMgB,EAAqBL,GAAsB,QAC1ClB,EAAAA,EAAaY,UAAbZ,MAAAA,EAAsBwB,SAASN,EAAMO,SACxCZ,EAAa,CAAEE,aAAc,EAAA,CAAO,CAExC,EAEAW,gBAASC,iBAAiB,YAAaJ,CAAiB,EAEjD,IAAM,CACXG,SAASE,oBAAoB,YAAaL,CAAiB,CAC7D,CACF,EAAG,CAACV,EAAcN,CAAM,CAAC,EAGvBsB,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAOC,QAClB,UAAWd,EACX,QAAUe,GAAMA,EAAEC,kBAClB,IAAKjC,EAAa,iBAAA,UAElB,SAAA,CAAAkC,EAAAA,IAACC,EAAAA,OAAA,CACC,gBAAe5B,EAASH,EAAUD,OAClC,gBAAeI,EACf,gBAAeT,EACf,aAAYD,EACZ,UAAWuC,EAAAA,EAAGN,EAAOO,OAAO,EAC5B,UAAWjB,EACX,QAAS,IAAOb,EAASM,EAAa,CAAEE,aAAc,EAAA,CAAO,EAAIL,EAAAA,EACjE,IAAKJ,EACL,QAAQ,YAEPP,SAAAA,EACH,EACCQ,GACC2B,EAAAA,IAAC,MAAA,CACC,UAAWE,IAAGN,EAAO,eAAe,EAAGA,EAAOlC,CAAQ,CAAC,EACvD,GAAIQ,EAEH,SAAA,OAAOT,GAAa,WACjBA,EAAS,CAAE2C,MAAOzB,EAAcF,aAAcT,EAAgBU,QAASL,OAAAA,CAAAA,CAAQ,EAC/EZ,CAAAA,CACN,CAAA,EAEJ,CAEJ"}
+{"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  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  position = 'left',\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 preferredHorizontalPlacement = position === 'auto' ? 'right' : position;\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>(\n    preferredHorizontalPlacement\n  );\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement(preferredHorizontalPlacement);\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      position === 'auto' &&\n        panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : preferredHorizontalPlacement\n    );\n  }, [position, preferredHorizontalPlacement]);\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    if (inline) 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        if (inline) 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='secondary'\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","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","preferredHorizontalPlacement","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","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}