@solibo/solibo-ui 0.5.16 → 1.0.0

package/dist/components/{_menu → menu}/index.js

@@ -1,27 +1,28 @@
 import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { t as b } from "../../classix-DG18itHa.js";
-import { useRef as y, useCallback as D, useEffect as _ } from "react";
-import { Button as x } from "../button/index.js";
+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 { List as k } from "../list/index.js";
-import { Popover as w } from "../popover/index.js";
-import '../../assets/index22.css';const A = "_list_1rny2_1", B = "_item_1rny2_13", C = "_danger_1rny2_41", f = {
-  list: A,
-  item: B,
-  danger: C
+import { List as y } from "../list/index.js";
+import { Popover as D } from "../popover/index.js";
+import '../../assets/index15.css';const k = "_list_z7awx_3", z = "_item_z7awx_15", A = "_active_z7awx_38", B = "_danger_z7awx_47", c = {
+  list: k,
+  item: z,
+  active: A,
+  danger: B
 };
-function E(s) {
-  return s.filter((t) => !!(t && !t.disabled));
+function C(a) {
+  return a.filter((t) => !!(t && !t.disabled));
 }
-const I = ({
-  close: s,
+const E = ({
+  close: a,
   initialFocus: t,
   items: u,
-  menuAccessibleLabel: c,
-  onItemSelect: a
+  menuAccessibleLabel: f,
+  onItemSelect: s
 }) => {
-  const l = y([]), r = D((e) => {
-    const n = E(l.current);
+  const l = _([]), r = b((e) => {
+    const n = C(l.current);
     if (n.length === 0)
       return;
     if (e === "first") {
@@ -35,7 +36,7 @@ const I = ({
     const i = n.indexOf(document.activeElement), g = e === "next" ? (i + 1) % n.length : (i - 1 + n.length) % n.length;
     n[g].focus();
   }, []);
-  _(() => {
+  w(() => {
     r(t ?? "first");
   }, [r, t]);
   const m = (e) => {
@@ -54,25 +55,25 @@ const I = ({
     e.key === "End" && (e.preventDefault(), r("last"));
   }, p = (e) => {
     var n;
-    (n = e.onSelect) == null || n.call(e), a == null || a(e), s();
+    (n = e.onSelect) == null || n.call(e), s == null || s(e), a();
   };
-  return /* @__PURE__ */ o(k, { "aria-label": c, className: f.list, onKeyDown: m, role: "menu", "data-component": "menupanel", children: u.map((e, n) => /* @__PURE__ */ o("li", { role: "none", children: /* @__PURE__ */ h(x, { "aria-label": e.accessibleLabel, className: b(f.item, e.isDanger && f.danger), disabled: e.disabled, onClick: () => p(e), ref: (i) => {
+  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) => {
     l.current[n] = i;
-  }, role: "menuitem", variant: "minimal", children: [
-    e.icon && /* @__PURE__ */ o(d, { fill: !0, gap: "right", name: e.icon, size: "small", variant: e.isDanger ? "danger" : "default" }),
+  }, role: "menuitem", variant: "tertiary", children: [
+    e.icon && /* @__PURE__ */ o(d, { fill: !0, gap: "right", name: e.icon, size: "small" }),
     /* @__PURE__ */ o("span", { children: e.label })
   ] }) }, e.id ?? n)) });
-}, L = ({
-  items: s,
+}, N = ({
+  items: a,
   menuAccessibleLabel: t = "Menu",
   onItemSelect: u,
-  position: c = "left",
-  triggerAccessibleLabel: a = "Open menu"
-}) => /* @__PURE__ */ o(w, { position: c, triggerAccessibleLabel: a, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ o(d, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
+  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(I, { close: l, initialFocus: r, items: s, menuAccessibleLabel: t, onItemSelect: u }) });
+}) => /* @__PURE__ */ o(E, { close: l, initialFocus: r, items: a, menuAccessibleLabel: t, onItemSelect: u }) });
 export {
-  L as Menu
+  N as Menu
 };
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;AAqCA,SAASA,EAAkBC,GAAwC;AACjE,SAAOA,EAAMC,OAAO,CAACC,MAAoCC,GAAQD,KAAQ,CAACA,EAAKE,SAAS;AAC1F;AAEA,MAAMC,IAAYA,CAAC;AAAA,EACjBC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAP,OAAAA;AAAAA,EACAQ,qBAAAA;AAAAA,EACAC,cAAAA;AACc,MAAM;AACpB,QAAMC,IAAWC,EAAwC,EAAE,GAErDC,IAAYC,EAAY,CAACC,MAA4B;AACzD,UAAMC,IAAiBhB,EAAkBW,EAASM,OAAO;AAEzD,QAAID,EAAeE,WAAW;AAC5B;AAGF,QAAIH,MAAW,SAAS;AACtBC,MAAAA,EAAe,CAAC,EAAEG,MAAAA;AAClB;AAAA,IACF;AAEA,QAAIJ,MAAW,QAAQ;AACrBC,MAAAA,EAAeA,EAAeE,SAAS,CAAC,EAAEC,MAAAA;AAC1C;AAAA,IACF;AAEA,UAAMC,IAAeJ,EAAeK,QAAQC,SAASC,aAAkC,GACjFC,IACJT,MAAW,UACNK,IAAe,KAAKJ,EAAeE,UACnCE,IAAe,IAAIJ,EAAeE,UAAUF,EAAeE;AAElEF,IAAAA,EAAeQ,CAAS,EAAEL,MAAAA;AAAAA,EAC5B,GAAG,CAAA,CAAE;AAELM,EAAAA,EAAU,MAAM;AACdZ,IAAAA,EAAUL,KAAgB,OAAO;AAAA,EACnC,GAAG,CAACK,GAAWL,CAAY,CAAC;AAE5B,QAAMkB,IAAgBA,CAACC,MAAiD;AACtE,QAAIA,EAAMC,QAAQ,aAAa;AAC7BD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,MAAM;AAChB;AAAA,IACF;AAEA,QAAIc,EAAMC,QAAQ,WAAW;AAC3BD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,UAAU;AACpB;AAAA,IACF;AAEA,QAAIc,EAAMC,QAAQ,QAAQ;AACxBD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,OAAO;AACjB;AAAA,IACF;AAEA,IAAIc,EAAMC,QAAQ,UAChBD,EAAME,eAAAA,GACNhB,EAAU,MAAM;AAAA,EAEpB,GAEMiB,IAAmBA,CAAC3B,MAAmB;;AAC3CA,KAAAA,IAAAA,EAAK4B,aAAL5B,QAAAA,EAAAA,KAAAA,IACAO,KAAAA,QAAAA,EAAeP,IACfI,EAAAA;AAAAA,EACF;AAEA,SACE,gBAAAyB,EAACC,GAAA,EACC,cAAYxB,GACZ,WAAWyB,EAAOC,MAClB,WAAWT,GACX,MAAK,QAAM,kBAAA,aAEVzB,UAAAA,EAAMmC,IAAI,CAACjC,GAAMkC,MAChB,gBAAAL,EAAC,MAAA,EAEC,MAAK,QAEL,UAAA,gBAAAM,EAACC,GAAA,EACC,gBAAcpC,EAAKqC,WAAW,SAASC,QACvC,cAAYtC,EAAKuC,iBACjB,WAAWC,EACTT,EAAO/B,MACPA,EAAKqC,YAAYN,EAAOU,QACxBzC,EAAK0C,YAAYX,EAAOY,MAC1B,GACA,UAAU3C,EAAKE,UACf,SAAS,MAAMyB,EAAiB3B,CAAI,GACpC,KAAM4C,CAAAA,MAAS;AACbpC,IAAAA,EAASM,QAAQoB,CAAK,IAAIU;AAAAA,EAC5B,GACA,MAAK,YACL,SAAQ,YAEP5C,UAAAA;AAAAA,IAAAA,EAAK6C,QACJ,gBAAAhB,EAACiB,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAM9C,EAAK6C,MACX,MAAK,QAAA,CAAO;AAAA,IAGhB,gBAAAhB,EAAC,QAAA,EAAM7B,UAAAA,EAAK+C,MAAAA,CAAM;AAAA,EAAA,EAAA,CACpB,EAAA,GA5BK/C,EAAKgD,MAAMd,CA6BlB,CACD,EAAA,CACH;AAEJ,GAEae,IAAOA,CAAC;AAAA,EACnBnD,OAAAA;AAAAA,EACAQ,qBAAAA,IAAsB;AAAA,EACtBC,cAAAA;AAAAA,EACA2C,UAAAA,IAAW;AAAA,EACXC,wBAAAA,IAAyB;AAChB,wBAENC,GAAA,EACC,UAAAF,GACA,wBAAAC,GACA,qBAAoB,QACpB,sBACE,gBAAAtB,EAACiB,GAAA,EACC,MAAK,QACL,MAAK,SAAA,IAER,kBAAA,QAEA,UAAA,CAAC;AAAA,EAAE1C,OAAAA;AAAAA,EAAOC,cAAAA;AAAAA,wBACRF,GAAA,EACC,OAAAC,GACA,cAAAC,GACA,OAAAP,GACA,qBAAAQ,GACA,cAAAC,GAA2B,GAGjC;"}

package/dist/components/message/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index41.css');const s=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),c=require("../icon/index.cjs"),l="_message_1xlna_1",m="_preview_1xlna_44",t={message:l,preview:m},g=({content:a,iconName:n="info",id:i,preview:r,type:e="default"})=>s.jsxs("div",{className:o.t(t.message,r&&t.preview),"data-id":i,"data-type":e,"data-component":"message",children:[e=="system"&&s.jsx(c.Icon,{fill:!0,gap:"right",name:n}),a]});exports.Message=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index14.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;
 //# 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 { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  content,\n  iconName = 'info',\n  id,\n  preview,\n  type = 'default',\n}: MessageOptions) => {\n  return (\n    <div\n      className={cx(styles.message, preview && styles.preview)}\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  );\n};\n"],"names":["Message","content","iconName","id","preview","type","jsxs","cx","styles","message","Icon"],"mappings":"+PAeaA,EAAUA,CAAC,CACtBC,QAAAA,EACAC,SAAAA,EAAW,OACXC,GAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,SACO,IAEZC,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,QAASL,GAAWI,EAAOJ,OAAO,EACvD,UAASD,EACT,YAAWE,EAAK,iBAAA,UAEfA,SAAAA,CAAAA,GAAQ,gBACNK,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMR,CAAAA,CAAS,EAGlBD,CAAAA,EACH"}
+{"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"}

package/dist/components/message/index.js

@@ -1,20 +1,39 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { t as n } from "../../classix-DG18itHa.js";
-import { Icon as p } from "../icon/index.js";
-import '../../assets/index41.css';const c = "_message_1xlna_1", g = "_preview_1xlna_44", s = {
-  message: c,
-  preview: g
-}, _ = ({
-  content: a,
-  iconName: t = "info",
-  id: r,
-  preview: m,
-  type: e = "default"
-}) => /* @__PURE__ */ o("div", { className: n(s.message, m && s.preview), "data-id": r, "data-type": e, "data-component": "message", children: [
-  e == "system" && /* @__PURE__ */ i(p, { fill: !0, gap: "right", name: t }),
-  a
-] });
+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/index14.css';const y = "_message_ugbdy_1", h = "_timestamp_ugbdy_78", w = "_attachments_ugbdy_83", N = "_preview_ugbdy_101", e = {
+  "message-group": "_message-group_ugbdy_1",
+  message: y,
+  timestamp: h,
+  attachments: w,
+  preview: N
+}, L = ({
+  appearance: c = "default",
+  attachments: i,
+  author: s,
+  authorColor: n,
+  authorImageUrl: d,
+  authorRole: g,
+  content: l,
+  iconName: p = "info",
+  id: _,
+  preview: u,
+  timestamp: r,
+  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 }),
+      l
+    ] }),
+    i && /* @__PURE__ */ a("div", { className: e.attachments, children: i }),
+    m && /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: m.toLocaleString() })
+  ] });
+};
 export {
-  _ as Message
+  L 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 { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  content,\n  iconName = 'info',\n  id,\n  preview,\n  type = 'default',\n}: MessageOptions) => {\n  return (\n    <div\n      className={cx(styles.message, preview && styles.preview)}\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  );\n};\n"],"names":["Message","content","iconName","id","preview","type","jsxs","cx","styles","message","Icon"],"mappings":";;;;;;GAeaA,IAAUA,CAAC;AAAA,EACtBC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAEZ,gBAAAC,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAOC,SAASL,KAAWI,EAAOJ,OAAO,GACvD,WAASD,GACT,aAAWE,GAAK,kBAAA,WAEfA,UAAAA;AAAAA,EAAAA,KAAQ,8BACNK,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMR,EAAAA,CAAS;AAAA,EAGlBD;AAAAA,GACH;"}
+{"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;"}

package/dist/components/messages/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor } from '@/components/editor';\nimport { List } from '@/components/list';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onSubmit,\n  placeholder,\n  sending,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    messageList.scrollTop = messageList.scrollHeight;\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      <Editor\n        autofocus\n        content={message}\n        disabled={sending || (messageIsEmpty && queuedFiles.length === 0)}\n        files={queuedFiles}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Editor","nextFiles"],"mappings":"iVA0BaA,EAAWA,CAAC,CACvBC,KAAAA,EAAO,GACPC,MAAAA,EACAC,aAAAA,EACAC,cAAAA,EAAgB,EAChBC,QAAAA,EAAU,GACVC,SAAAA,EACAC,cAAAA,EAAgB,EAChBC,SAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAC,QAAAA,CACa,IAAM,OACnB,MAAMC,EAAcC,EAAAA,OAAuB,IAAI,EACzC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAiB,CAAA,CAAE,EACvDC,EAAchB,GAASa,EACvBI,GAAkBb,EAAAA,EAASA,EAASc,OAAS,CAAC,IAA5Bd,YAAAA,EAA+Be,GACjDC,EACJjB,EACGkB,QAAQ,WAAY,EAAE,EACtBA,QAAQ,UAAW,GAAG,EACtBC,KAAAA,IAAW,GAEhBC,OAAAA,EAAAA,gBAAgB,IAAM,OACpB,MAAMC,GAAcb,EAAAA,EAAYc,UAAZd,YAAAA,EAAqBe,cAA2B,uBAChE,CAACF,GAAeP,IAAoBU,SAExCH,EAAYI,UAAYJ,EAAYK,aACtC,EAAG,CAACZ,CAAe,CAAC,EAGlBa,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO5B,SAAUL,GAAQiC,EAAOjC,IAAI,EAClD,iBAAe,WACf,IAAKY,EAEL,SAAA,CAAAsB,EAAAA,IAACC,EAAAA,KAAA,CAAK,oBAAiB,GACpB9B,SAAAA,EAAS+B,IAAKhC,GACb8B,EAAAA,IAACG,EAAAA,QAAA,CAEC,GAAIjC,CAAAA,EADCA,EAAQgB,EACD,CAEf,EACH,EACAc,MAACI,EAAAA,QACC,UAAS,GACT,QAASlC,EACT,SAAUO,GAAYU,GAAkBJ,EAAYE,SAAW,EAC/D,MAAOF,EACP,QAASd,EACT,QAASG,EACT,SAAAC,EACA,cAAgBgC,GAAc,CACxBtC,IAAU2B,QAAWb,EAAiBwB,CAAS,EACnD/B,GAAAA,MAAAA,EAAgB+B,EAClB,EACA,SAAA9B,EACA,SAAUP,EACV,YAAAQ,EACA,YAAY,cAAA,CAAc,CAAA,EAE9B,CAEJ"}

package/dist/components/messages/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor } from '@/components/editor';\nimport { List } from '@/components/list';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onSubmit,\n  placeholder,\n  sending,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    messageList.scrollTop = messageList.scrollHeight;\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      <Editor\n        autofocus\n        content={message}\n        disabled={sending || (messageIsEmpty && queuedFiles.length === 0)}\n        files={queuedFiles}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Editor","nextFiles"],"mappings":";;;;;;;;;GA0BaA,IAAWA,CAAC;AAAA,EACvBC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AACa,MAAM;;AACnB,QAAMC,IAAcC,EAAuB,IAAI,GACzC,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,CAAA,CAAE,GACvDC,IAAchB,KAASa,GACvBI,KAAkBb,IAAAA,EAASA,EAASc,SAAS,CAAC,MAA5Bd,gBAAAA,EAA+Be,IACjDC,IACJjB,EACGkB,QAAQ,YAAY,EAAE,EACtBA,QAAQ,WAAW,GAAG,EACtBC,KAAAA,MAAW;AAEhBC,SAAAA,EAAgB,MAAM;;AACpB,UAAMC,KAAcb,IAAAA,EAAYc,YAAZd,gBAAAA,EAAqBe,cAA2B;AACpE,IAAI,CAACF,KAAeP,MAAoBU,WAExCH,EAAYI,YAAYJ,EAAYK;AAAAA,EACtC,GAAG,CAACZ,CAAe,CAAC,GAGlB,gBAAAa,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAO5B,UAAUL,KAAQiC,EAAOjC,IAAI,GAClD,kBAAe,YACf,KAAKY,GAEL,UAAA;AAAA,IAAA,gBAAAsB,EAACC,GAAA,EAAK,qBAAiB,IACpB9B,UAAAA,EAAS+B,IAAKhC,CAAAA,MACb,gBAAA8B,EAACG,GAAA,EAEC,GAAIjC,EAAAA,GADCA,EAAQgB,EACD,CAEf,GACH;AAAA,IACA,gBAAAc,EAACI,KACC,WAAS,IACT,SAASlC,GACT,UAAUO,KAAYU,KAAkBJ,EAAYE,WAAW,GAC/D,OAAOF,GACP,SAASd,GACT,SAASG,GACT,UAAAC,GACA,eAAgBgC,CAAAA,MAAc;AAC5B,MAAItC,MAAU2B,UAAWb,EAAiBwB,CAAS,GACnD/B,KAAAA,QAAAA,EAAgB+B;AAAAA,IAClB,GACA,UAAA9B,GACA,UAAUP,GACV,aAAAQ,GACA,aAAY,eAAA,CAAc;AAAA,EAAA,GAE9B;AAEJ;"}

package/dist/components/nav/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index42.css');const p=require("react/jsx-runtime"),_=require("../../classix-5H4IWnMA.cjs"),f=require("react"),v=require("../../icons-s-lGsxio.cjs"),h="_nav_15tsi_1",b="_horizontal_15tsi_7",g="_tabs_15tsi_17",m="_pills_15tsi_38",t={nav:h,horizontal:b,tabs:g,pills:m},w={default:t.default,pills:t.pills,tabs:t.tabs},q=({animation:i,children:o,className:l,horizontal:e=!1,variant:s="default",...r})=>{const[c,a]=f.useState(!1),u={"--icon-svg":v.iconSVG("chevron")};return p.jsx("nav",{className:_.t(l,e&&t.horizontal,t.nav,w[s]),"data-animation":i,"data-open":c?"true":"false","data-orientation":e?"horizontal":"vertical",onBlurCapture:n=>{if(s!=="pills"||window.innerWidth>960)return;const d=n.relatedTarget;n.currentTarget.contains(d)||a(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||a(n=>!n)},style:u,...r,"data-component":"nav",children:o})};exports.Nav=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const _=require("react/jsx-runtime"),p=require("../../classix-5H4IWnMA.cjs"),b=require("react"),f=require("../../icons-DYCSlAoX.cjs"),v="_nav_1u1d4_3",h="_horizontal_1u1d4_9",g="_sidebar_1u1d4_19",m="_tabs_1u1d4_60",w="_pills_1u1d4_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;
 //# 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  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","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":"4UAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,KAAMF,EAAOE,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,GAAcP,EAAOO,WAAYP,EAAOiB,IAAKnB,EAASU,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 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"}

package/dist/components/nav/index.js

@@ -1,36 +1,38 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as u } from "react/jsx-runtime";
 import { t as _ } from "../../classix-DG18itHa.js";
-import { useState as m } from "react";
-import { i as u } from "../../icons-D6XjzxSX.js";
-import '../../assets/index42.css';const v = "_nav_15tsi_1", h = "_horizontal_15tsi_7", b = "_tabs_15tsi_17", w = "_pills_15tsi_38", t = {
-  nav: v,
-  horizontal: h,
-  tabs: b,
-  pills: w
-}, z = {
+import { useState as f } from "react";
+import { i as m } from "../../icons-CKzd_L4D.js";
+import '../../assets/index12.css';const b = "_nav_1u1d4_3", v = "_horizontal_1u1d4_9", h = "_sidebar_1u1d4_19", w = "_tabs_1u1d4_60", z = "_pills_1u1d4_80", t = {
+  nav: b,
+  horizontal: v,
+  sidebar: h,
+  tabs: w,
+  pills: z
+}, g = {
   default: t.default,
   pills: t.pills,
+  sidebar: t.sidebar,
   tabs: t.tabs
-}, N = ({
+}, S = ({
   animation: i,
   children: e,
-  className: l,
+  className: r,
   horizontal: s = !1,
-  variant: a = "default",
-  ...r
+  variant: n = "default",
+  ...l
 }) => {
-  const [c, o] = m(!1), p = {
-    "--icon-svg": u("chevron")
+  const [d, o] = f(!1), c = {
+    "--icon-svg": m("chevron")
   };
-  return /* @__PURE__ */ d("nav", { className: _(l, s && t.horizontal, t.nav, z[a]), "data-animation": i, "data-open": c ? "true" : "false", "data-orientation": s ? "horizontal" : "vertical", onBlurCapture: (n) => {
-    if (a !== "pills" || window.innerWidth > 960) return;
-    const f = n.relatedTarget;
-    n.currentTarget.contains(f) || o(!1);
+  return /* @__PURE__ */ u("nav", { className: _(r, s && t.horizontal, t.nav, g[n]), "data-animation": i, "data-open": d ? "true" : "false", "data-orientation": s ? "horizontal" : "vertical", onBlurCapture: (a) => {
+    if (n !== "pills" || window.innerWidth > 960) return;
+    const p = a.relatedTarget;
+    a.currentTarget.contains(p) || o(!1);
   }, onClick: () => {
-    a !== "pills" || window.innerWidth > 960 || o((n) => !n);
-  }, style: p, ...r, "data-component": "nav", children: e });
+    n !== "pills" || window.innerWidth > 960 || o((a) => !a);
+  }, style: c, ...l, "data-component": "nav", children: e });
 };
 export {
-  N as Nav
+  S as Nav
 };
 //# 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  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","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,MAAMF,EAAOE;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,KAAcP,EAAOO,YAAYP,EAAOiB,KAAKnB,EAASU,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 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;"}

package/dist/components/object/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index4.css');const e=require("react/jsx-runtime"),n="_object_1esdj_1",s={object:n},a=({accessibleLabel:c,url:t,...o})=>e.jsx("object",{"aria-label":c,className:s.object,data:t,type:"application/pdf",...o,"data-component":"objectcomponent",children:t&&e.jsxs(e.Fragment,{children:["We cannot show this file. You can try accessing it directly:",e.jsx("br",{}),e.jsx("a",{href:t,children:t})]})});exports.Object=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index11.css');const e=require("react/jsx-runtime"),n="_object_xxgm1_1",s={object:n},a=({accessibleLabel:c,url:t,...o})=>e.jsx("object",{"aria-label":c,className:s.object,data:t,type:"application/pdf",...o,"data-component":"objectcomponent",children:t&&e.jsxs(e.Fragment,{children:["We cannot show this file. You can try accessing it directly:",e.jsx("br",{}),e.jsx("a",{href:t,children:t})]})});exports.Object=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/object/index.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as n, Fragment as a } from "react/jsx-runtime";
-import '../../assets/index4.css';const s = "_object_1esdj_1", i = {
+import '../../assets/index11.css';const s = "_object_xxgm1_1", i = {
   object: s
-}, r = ({
+}, b = ({
   accessibleLabel: c,
   url: t,
   ...o
@@ -11,6 +11,6 @@ import '../../assets/index4.css';const s = "_object_1esdj_1", i = {
   /* @__PURE__ */ e("a", { href: t, children: t })
 ] }) });
 export {
-  r as Object
+  b as Object
 };
 //# sourceMappingURL=index.js.map

package/dist/components/popover/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index43.css');const c=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 l=o.useRef(null),u=o.useRef(void 0),p=o.useId(),f=o.useRef(null),[t,d]=o.useState(!1),a=({initialFocus:e}={})=>{u.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(),a({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),a({initialFocus:"last"}))}};return o.useEffect(()=>{if(!t)return;const e=r=>{var v;(v=l.current)!=null&&v.contains(r.target)||n({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[n,t]),c.jsxs("div",{className:s.popover,onKeyDown:h,onClick:e=>e.stopPropagation(),ref:l,"data-component":"popover",children:[c.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}):a(),ref:f,variant:"minimal",children:w}),t&&c.jsx("div",{className:g.t(s["popover-panel"],s[_]),id:p,children:typeof i=="function"?i({close:n,initialFocus:u.current,isOpen:t}):i})]})};exports.Popover=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.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;
 //# 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='minimal'\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,UAEPP,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  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"}

package/dist/components/popover/index.js

@@ -1,8 +1,8 @@
-import { jsxs as k, jsx as m } from "react/jsx-runtime";
-import { t as v } from "../../classix-DG18itHa.js";
+import { jsxs as k, jsx as v } from "react/jsx-runtime";
+import { t as g } from "../../classix-DG18itHa.js";
 import { useRef as a, useId as F, useState as P, useCallback as x, useEffect as E } from "react";
 import { Button as K } from "../button/index.js";
-import '../../assets/index43.css';const R = "_popover_ttn4t_1", C = "_left_ttn4t_23", I = "_right_ttn4t_28", N = "_trigger_ttn4t_33", n = {
+import '../../assets/index16.css';const R = "_popover_ttn4t_1", C = "_left_ttn4t_23", I = "_right_ttn4t_28", N = "_trigger_ttn4t_33", n = {
   popover: R,
   "popover-panel": "_popover-panel_ttn4t_6",
   left: C,
@@ -10,24 +10,24 @@ import '../../assets/index43.css';const R = "_popover_ttn4t_1", C = "_left_ttn4t
   trigger: N
 }, O = ({
   children: s,
-  position: g = "left",
+  position: m = "left",
   triggerAccessibleLabel: _,
   triggerAriaHasPopup: w,
   triggerButtonContent: y
 }) => {
-  const c = a(null), p = a(void 0), l = F(), u = a(null), [t, f] = P(!1), i = ({
+  const c = a(null), p = a(void 0), l = F(), u = a(null), [o, f] = P(!1), i = ({
     initialFocus: e
   } = {}) => {
     p.current = e, f(!0);
-  }, o = x(({
+  }, t = x(({
     restoreFocus: e = !0
   } = {}) => {
     var r;
     f(!1), e && ((r = u.current) == null || r.focus());
   }, []), h = (e) => {
-    t && e.key === "Escape" && o();
+    o && e.key === "Escape" && t();
   }, D = (e) => {
-    if (!t) {
+    if (!o) {
       if (e.key === "ArrowDown") {
         e.preventDefault(), i({
           initialFocus: "first"
@@ -40,25 +40,25 @@ import '../../assets/index43.css';const R = "_popover_ttn4t_1", C = "_left_ttn4t
     }
   };
   return E(() => {
-    if (!t)
+    if (!o)
       return;
     const e = (r) => {
       var d;
-      (d = c.current) != null && d.contains(r.target) || o({
+      (d = c.current) != null && d.contains(r.target) || t({
         restoreFocus: !1
       });
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [o, t]), /* @__PURE__ */ k("div", { className: n.popover, onKeyDown: h, onClick: (e) => e.stopPropagation(), ref: c, "data-component": "popover", children: [
-    /* @__PURE__ */ m(K, { "aria-controls": t ? l : void 0, "aria-expanded": t, "aria-haspopup": w, "aria-label": _, className: v(n.trigger), onKeyDown: D, onClick: () => t ? o({
+  }, [t, o]), /* @__PURE__ */ k("div", { className: n.popover, onKeyDown: h, onClick: (e) => e.stopPropagation(), ref: c, "data-component": "popover", children: [
+    /* @__PURE__ */ v(K, { "aria-controls": o ? l : void 0, "aria-expanded": o, "aria-haspopup": w, "aria-label": _, className: g(n.trigger), onKeyDown: D, onClick: () => o ? t({
       restoreFocus: !1
-    }) : i(), ref: u, variant: "minimal", children: y }),
-    t && /* @__PURE__ */ m("div", { className: v(n["popover-panel"], n[g]), id: l, children: typeof s == "function" ? s({
-      close: o,
+    }) : i(), ref: u, variant: "secondary", children: y }),
+    o && /* @__PURE__ */ v("div", { className: g(n["popover-panel"], n[m]), id: l, children: typeof s == "function" ? s({
+      close: t,
       initialFocus: p.current,
-      isOpen: t
+      isOpen: o
     }) : s })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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='minimal'\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":";;;;;;;;;;GAuCaA,IAAUA,CAAC;AAAA,EACtBC,UAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,wBAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,sBAAAA;AACY,MAAM;AAClB,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAkBD,EAAwCE,MAAS,GACnEC,IAAUC,EAAAA,GACVC,IAAaL,EAA0B,IAAI,GAC3C,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAcA,CAAC;AAAA,IAAEC,cAAAA;AAAAA,EAAAA,IAAqC,OAAO;AACjET,IAAAA,EAAgBU,UAAUD,GAC1BH,EAAU,EAAI;AAAA,EAChB,GAEMK,IAAeC,EAAY,CAAC;AAAA,IAAEC,cAAAA,IAAe;AAAA,EAAA,IAA8B,OAAO;;AACtFP,IAAAA,EAAU,EAAK,GAEXO,OACFT,IAAAA,EAAWM,YAAXN,QAAAA,EAAoBU;AAAAA,EAExB,GAAG,CAAA,CAAE,GAECC,IAAgBA,CAACC,MAA+C;AACpE,IAAIX,KAAUW,EAAMC,QAAQ,YAC1BN,EAAAA;AAAAA,EAEJ,GAEMO,IAAuBA,CAACF,MAAkD;AAC9E,QAAIX,CAAAA,GAIJ;AAAA,UAAIW,EAAMC,QAAQ,aAAa;AAC7BD,QAAAA,EAAMG,eAAAA,GACNX,EAAY;AAAA,UAAEC,cAAc;AAAA,QAAA,CAAS;AACrC;AAAA,MACF;AAEA,MAAIO,EAAMC,QAAQ,cAChBD,EAAMG,eAAAA,GACNX,EAAY;AAAA,QAAEC,cAAc;AAAA,MAAA,CAAQ;AAAA;AAAA,EAExC;AAEAW,SAAAA,EAAU,MAAM;AACd,QAAI,CAACf;AACH;AAGF,UAAMgB,IAAoBA,CAACL,MAAsB;;AAC/C,OAAKlB,IAAAA,EAAaY,YAAbZ,QAAAA,EAAsBwB,SAASN,EAAMO,WACxCZ,EAAa;AAAA,QAAEE,cAAc;AAAA,MAAA,CAAO;AAAA,IAExC;AAEAW,oBAASC,iBAAiB,aAAaJ,CAAiB,GAEjD,MAAM;AACXG,eAASE,oBAAoB,aAAaL,CAAiB;AAAA,IAC7D;AAAA,EACF,GAAG,CAACV,GAAcN,CAAM,CAAC,GAGvB,gBAAAsB,EAAC,OAAA,EACC,WAAWC,EAAOC,SAClB,WAAWd,GACX,SAAUe,CAAAA,MAAMA,EAAEC,mBAClB,KAAKjC,GAAa,kBAAA,WAElB,UAAA;AAAA,IAAA,gBAAAkC,EAACC,GAAA,EACC,iBAAe5B,IAASH,IAAUD,QAClC,iBAAeI,GACf,iBAAeT,GACf,cAAYD,GACZ,WAAWuC,EAAGN,EAAOO,OAAO,GAC5B,WAAWjB,GACX,SAAS,MAAOb,IAASM,EAAa;AAAA,MAAEE,cAAc;AAAA,IAAA,CAAO,IAAIL,EAAAA,GACjE,KAAKJ,GACL,SAAQ,WAEPP,UAAAA,GACH;AAAA,IACCQ,KACC,gBAAA2B,EAAC,OAAA,EACC,WAAWE,EAAGN,EAAO,eAAe,GAAGA,EAAOlC,CAAQ,CAAC,GACvD,IAAIQ,GAEH,UAAA,OAAOT,KAAa,aACjBA,EAAS;AAAA,MAAE2C,OAAOzB;AAAAA,MAAcF,cAAcT,EAAgBU;AAAAA,MAASL,QAAAA;AAAAA,IAAAA,CAAQ,IAC/EZ,EAAAA,CACN;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"index.js","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":";;;;;;;;;;GAuCaA,IAAUA,CAAC;AAAA,EACtBC,UAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,wBAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,sBAAAA;AACY,MAAM;AAClB,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAkBD,EAAwCE,MAAS,GACnEC,IAAUC,EAAAA,GACVC,IAAaL,EAA0B,IAAI,GAC3C,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAcA,CAAC;AAAA,IAAEC,cAAAA;AAAAA,EAAAA,IAAqC,OAAO;AACjET,IAAAA,EAAgBU,UAAUD,GAC1BH,EAAU,EAAI;AAAA,EAChB,GAEMK,IAAeC,EAAY,CAAC;AAAA,IAAEC,cAAAA,IAAe;AAAA,EAAA,IAA8B,OAAO;;AACtFP,IAAAA,EAAU,EAAK,GAEXO,OACFT,IAAAA,EAAWM,YAAXN,QAAAA,EAAoBU;AAAAA,EAExB,GAAG,CAAA,CAAE,GAECC,IAAgBA,CAACC,MAA+C;AACpE,IAAIX,KAAUW,EAAMC,QAAQ,YAC1BN,EAAAA;AAAAA,EAEJ,GAEMO,IAAuBA,CAACF,MAAkD;AAC9E,QAAIX,CAAAA,GAIJ;AAAA,UAAIW,EAAMC,QAAQ,aAAa;AAC7BD,QAAAA,EAAMG,eAAAA,GACNX,EAAY;AAAA,UAAEC,cAAc;AAAA,QAAA,CAAS;AACrC;AAAA,MACF;AAEA,MAAIO,EAAMC,QAAQ,cAChBD,EAAMG,eAAAA,GACNX,EAAY;AAAA,QAAEC,cAAc;AAAA,MAAA,CAAQ;AAAA;AAAA,EAExC;AAEAW,SAAAA,EAAU,MAAM;AACd,QAAI,CAACf;AACH;AAGF,UAAMgB,IAAoBA,CAACL,MAAsB;;AAC/C,OAAKlB,IAAAA,EAAaY,YAAbZ,QAAAA,EAAsBwB,SAASN,EAAMO,WACxCZ,EAAa;AAAA,QAAEE,cAAc;AAAA,MAAA,CAAO;AAAA,IAExC;AAEAW,oBAASC,iBAAiB,aAAaJ,CAAiB,GAEjD,MAAM;AACXG,eAASE,oBAAoB,aAAaL,CAAiB;AAAA,IAC7D;AAAA,EACF,GAAG,CAACV,GAAcN,CAAM,CAAC,GAGvB,gBAAAsB,EAAC,OAAA,EACC,WAAWC,EAAOC,SAClB,WAAWd,GACX,SAAUe,CAAAA,MAAMA,EAAEC,mBAClB,KAAKjC,GAAa,kBAAA,WAElB,UAAA;AAAA,IAAA,gBAAAkC,EAACC,GAAA,EACC,iBAAe5B,IAASH,IAAUD,QAClC,iBAAeI,GACf,iBAAeT,GACf,cAAYD,GACZ,WAAWuC,EAAGN,EAAOO,OAAO,GAC5B,WAAWjB,GACX,SAAS,MAAOb,IAASM,EAAa;AAAA,MAAEE,cAAc;AAAA,IAAA,CAAO,IAAIL,EAAAA,GACjE,KAAKJ,GACL,SAAQ,aAEPP,UAAAA,GACH;AAAA,IACCQ,KACC,gBAAA2B,EAAC,OAAA,EACC,WAAWE,EAAGN,EAAO,eAAe,GAAGA,EAAOlC,CAAQ,CAAC,GACvD,IAAIQ,GAEH,UAAA,OAAOT,KAAa,aACjBA,EAAS;AAAA,MAAE2C,OAAOzB;AAAAA,MAAcF,cAAcT,EAAgBU;AAAAA,MAASL,QAAAA;AAAAA,IAAAA,CAAQ,IAC/EZ,EAAAA,CACN;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/portal/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index10.css');const e=require("react/jsx-runtime"),s=require("../../classix-5H4IWnMA.cjs"),i=require("../button/index.cjs"),a=require("../icon/index.cjs"),l=require("../aside/index.cjs"),_=require("../branding/index.cjs"),d=require("../figure/index.cjs"),u=require("../nav/index.cjs"),g="_portal_rcvlc_39",p="_content_rcvlc_266",x="_toggle_rcvlc_273",m="_open_rcvlc_337",n={portal:g,content:p,toggle:x,open:m},v=({children:t,portals:o,open:c,setOpen:r})=>e.jsxs(l.Aside,{className:s.t(n.portal,c&&n.open),sticky:!0,"data-component":"portal",children:[e.jsx(i.Button,{className:n.toggle,onClick:()=>r(!c),variant:"tertiary",children:e.jsx(a.Icon,{name:"sidebar"})}),e.jsx(d.Figure,{children:e.jsx(_.Branding,{name:"logo",size:48,variant:"white"})}),e.jsxs("div",{className:n.content,children:[o&&e.jsx(u.Nav,{horizontal:!0,children:o}),t&&t]})]});exports.Portal=v;
+//# sourceMappingURL=index.cjs.map