@stackone/malachite 2.38.0 → 2.40.0

package/dist/components/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../src/components/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './PageLayout/types';\nimport Text, { type TextColor } from './Typography/Text';\nimport { hasBackButton } from './breadcrumbsNav';\nimport { FOCUS_RING } from './focusRing';\nimport { isSafeHref, safeHref } from './safeHref';\n\nexport interface BreadcrumbsProps {\n    links: BreadcrumbLink[];\n    actions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CRUMB_LINK_CLASSES = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground)] ${FOCUS_RING}`;\n\nconst BACK_BUTTON_CLASSES = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background)] text-[var(--malachite-text-primary)] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background)] ${FOCUS_RING}`;\n\ntype LinkProps = Parameters<RenderBreadcrumbLink>[0];\n\nconst renderCrumbLink = (props: LinkProps, renderLink?: RenderBreadcrumbLink): React.ReactNode => {\n    // An unsafe url degrades to plain text rather than a link that could run a script.\n    if (!isSafeHref(props.href)) {\n        return props.children;\n    }\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n\nconst renderCrumbName = (name: React.ReactNode, color: TextColor): React.ReactNode =>\n    typeof name === 'string' ? (\n        <Text size=\"medium\" fontWeight=\"semi-bold\" color={color}>\n            {name}\n        </Text>\n    ) : (\n        name\n    );\n\nconst renderAction = (\n    {\n        label,\n        onClick,\n        disabled,\n        variant,\n        icon,\n        href,\n        target,\n        tooltip,\n        tooltipPlacement,\n    }: PageAction,\n    index: number,\n) => {\n    const safe = safeHref(href);\n    return (\n        <Button\n            key={`${index}-${label}`}\n            size=\"small\"\n            variant={variant ?? 'outline'}\n            disabled={disabled}\n            icon={icon}\n            tooltip={tooltip}\n            tooltipPlacement={tooltipPlacement}\n            href={safe}\n            target={safe ? (target ?? '_blank') : undefined}\n            onClick={safe ? undefined : onClick}\n        >\n            {label}\n        </Button>\n    );\n};\n\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = ({\n    links,\n    actions,\n    renderLink,\n    className = '',\n    style,\n}) => {\n    // PageLayout mounts this unconditionally, so returning markup would leave an empty\n    // navigation landmark on every page without crumbs.\n    if (links.length === 0 && !actions?.length) {\n        return null;\n    }\n\n    const isTitle = links.length === 1 && Boolean(links[0].isRoot);\n    const parentCrumb = hasBackButton(links) ? links[links.length - 2] : undefined;\n    const parentName = parentCrumb?.name;\n    const hasActions = Boolean(actions?.length);\n\n    return (\n        <div\n            className={`flex items-center ${hasActions ? 'justify-between' : ''} ${className}`}\n            style={style}\n        >\n            {isTitle ? (\n                renderCrumbName(links[0].name, 'primary')\n            ) : (\n                <div className=\"flex items-center gap-4\">\n                    {parentCrumb?.url &&\n                        renderCrumbLink(\n                            {\n                                href: parentCrumb.url,\n                                'aria-label':\n                                    typeof parentName === 'string'\n                                        ? `Back to ${parentName}`\n                                        : 'Go back',\n                                className: BACK_BUTTON_CLASSES,\n                                children: <ArrowLeftIcon size={12} />,\n                            },\n                            renderLink,\n                        )}\n                    {links.length > 0 && (\n                        <nav aria-label=\"Breadcrumb\">\n                            <ol className=\"flex flex-wrap items-center gap-2 m-0 p-0 list-none\">\n                                {links.map((link, index) => {\n                                    const isLast = index === links.length - 1;\n                                    const color: TextColor = isLast ? 'primary' : 'muted';\n\n                                    return (\n                                        <li\n                                            key={`${link.url ?? ''}-${index}`}\n                                            className=\"flex items-center gap-2\"\n                                            aria-current={isLast && !link.url ? 'page' : undefined}\n                                        >\n                                            {link.url\n                                                ? renderCrumbLink(\n                                                      {\n                                                          href: link.url,\n                                                          'aria-current': isLast\n                                                              ? 'page'\n                                                              : undefined,\n                                                          className: `${CRUMB_LINK_CLASSES} ${\n                                                              isLast\n                                                                  ? 'text-[var(--malachite-text-primary)]'\n                                                                  : 'text-[var(--malachite-text-muted)]'\n                                                          }`,\n                                                          children: renderCrumbName(\n                                                              link.name,\n                                                              'inherit',\n                                                          ),\n                                                      },\n                                                      renderLink,\n                                                  )\n                                                : renderCrumbName(link.name, color)}\n                                            {!isLast && (\n                                                <span\n                                                    aria-hidden=\"true\"\n                                                    className=\"flex items-center text-[var(--malachite-text-dimmed)]\"\n                                                >\n                                                    <CaretRightIcon size={13} />\n                                                </span>\n                                            )}\n                                        </li>\n                                    );\n                                })}\n                            </ol>\n                        </nav>\n                    )}\n                </div>\n            )}\n            {hasActions && (\n                <div className=\"flex items-center gap-2\">{actions?.map(renderAction)}</div>\n            )}\n        </div>\n    );\n};\n\nexport { Breadcrumbs };\nexport default Breadcrumbs;\n"],"names":["CRUMB_LINK_CLASSES","FOCUS_RING","BACK_BUTTON_CLASSES","renderCrumbLink","props","renderLink","isSafeHref","jsx","renderCrumbName","name","color","Text","renderAction","label","onClick","disabled","variant","icon","href","target","tooltip","tooltipPlacement","index","safe","safeHref","Button","Breadcrumbs","links","actions","className","style","isTitle","parentCrumb","hasBackButton","parentName","hasActions","jsxs","ArrowLeftIcon","link","isLast","CaretRightIcon"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../src/components/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './PageLayout/types';\nimport Text, { type TextColor } from './Typography/Text';\nimport { hasBackButton } from './breadcrumbsNav';\nimport { FOCUS_RING } from './focusRing';\nimport { isSafeHref, safeHref } from './safeHref';\n\nexport interface BreadcrumbsProps {\n    links: BreadcrumbLink[];\n    actions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CRUMB_LINK_CLASSES = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))] ${FOCUS_RING}`;\n\nconst BACK_BUTTON_CLASSES = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background,rgba(0,0,0,0.08))] text-[var(--malachite-text-primary,rgb(10,10,10))] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background,rgba(0,0,0,0.15))] ${FOCUS_RING}`;\n\ntype LinkProps = Parameters<RenderBreadcrumbLink>[0];\n\nconst renderCrumbLink = (props: LinkProps, renderLink?: RenderBreadcrumbLink): React.ReactNode => {\n    // An unsafe url degrades to plain text rather than a link that could run a script.\n    if (!isSafeHref(props.href)) {\n        return props.children;\n    }\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n\nconst renderCrumbName = (name: React.ReactNode, color: TextColor): React.ReactNode =>\n    typeof name === 'string' ? (\n        <Text size=\"medium\" fontWeight=\"semi-bold\" color={color}>\n            {name}\n        </Text>\n    ) : (\n        name\n    );\n\nconst renderAction = (\n    {\n        label,\n        onClick,\n        disabled,\n        variant,\n        icon,\n        href,\n        target,\n        tooltip,\n        tooltipPlacement,\n    }: PageAction,\n    index: number,\n) => {\n    const safe = safeHref(href);\n    return (\n        <Button\n            key={`${index}-${label}`}\n            size=\"small\"\n            variant={variant ?? 'outline'}\n            disabled={disabled}\n            icon={icon}\n            tooltip={tooltip}\n            tooltipPlacement={tooltipPlacement}\n            href={safe}\n            target={safe ? (target ?? '_blank') : undefined}\n            onClick={safe ? undefined : onClick}\n        >\n            {label}\n        </Button>\n    );\n};\n\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = ({\n    links,\n    actions,\n    renderLink,\n    className = '',\n    style,\n}) => {\n    // PageLayout mounts this unconditionally, so returning markup would leave an empty\n    // navigation landmark on every page without crumbs.\n    if (links.length === 0 && !actions?.length) {\n        return null;\n    }\n\n    const isTitle = links.length === 1 && Boolean(links[0].isRoot);\n    const parentCrumb = hasBackButton(links) ? links[links.length - 2] : undefined;\n    const parentName = parentCrumb?.name;\n    const hasActions = Boolean(actions?.length);\n\n    return (\n        <div\n            className={`flex items-center ${hasActions ? 'justify-between' : ''} ${className}`}\n            style={style}\n        >\n            {isTitle ? (\n                renderCrumbName(links[0].name, 'primary')\n            ) : (\n                <div className=\"flex items-center gap-4\">\n                    {parentCrumb?.url &&\n                        renderCrumbLink(\n                            {\n                                href: parentCrumb.url,\n                                'aria-label':\n                                    typeof parentName === 'string'\n                                        ? `Back to ${parentName}`\n                                        : 'Go back',\n                                className: BACK_BUTTON_CLASSES,\n                                children: <ArrowLeftIcon size={12} />,\n                            },\n                            renderLink,\n                        )}\n                    {links.length > 0 && (\n                        <nav aria-label=\"Breadcrumb\">\n                            <ol className=\"flex flex-wrap items-center gap-2 m-0 p-0 list-none\">\n                                {links.map((link, index) => {\n                                    const isLast = index === links.length - 1;\n                                    const color: TextColor = isLast ? 'primary' : 'muted';\n\n                                    return (\n                                        <li\n                                            key={`${link.url ?? ''}-${index}`}\n                                            className=\"flex items-center gap-2\"\n                                            aria-current={isLast && !link.url ? 'page' : undefined}\n                                        >\n                                            {link.url\n                                                ? renderCrumbLink(\n                                                      {\n                                                          href: link.url,\n                                                          'aria-current': isLast\n                                                              ? 'page'\n                                                              : undefined,\n                                                          className: `${CRUMB_LINK_CLASSES} ${\n                                                              isLast\n                                                                  ? 'text-[var(--malachite-text-primary,rgb(10,10,10))]'\n                                                                  : 'text-[var(--malachite-text-muted,rgb(76,75,75))]'\n                                                          }`,\n                                                          children: renderCrumbName(\n                                                              link.name,\n                                                              'inherit',\n                                                          ),\n                                                      },\n                                                      renderLink,\n                                                  )\n                                                : renderCrumbName(link.name, color)}\n                                            {!isLast && (\n                                                <span\n                                                    aria-hidden=\"true\"\n                                                    className=\"flex items-center text-[var(--malachite-text-dimmed,rgb(161,161,161))]\"\n                                                >\n                                                    <CaretRightIcon size={13} />\n                                                </span>\n                                            )}\n                                        </li>\n                                    );\n                                })}\n                            </ol>\n                        </nav>\n                    )}\n                </div>\n            )}\n            {hasActions && (\n                <div className=\"flex items-center gap-2\">{actions?.map(renderAction)}</div>\n            )}\n        </div>\n    );\n};\n\nexport { Breadcrumbs };\nexport default Breadcrumbs;\n"],"names":["CRUMB_LINK_CLASSES","FOCUS_RING","BACK_BUTTON_CLASSES","renderCrumbLink","props","renderLink","isSafeHref","jsx","renderCrumbName","name","color","Text","renderAction","label","onClick","disabled","variant","icon","href","target","tooltip","tooltipPlacement","index","safe","safeHref","Button","Breadcrumbs","links","actions","className","style","isTitle","parentCrumb","hasBackButton","parentName","hasActions","jsxs","ArrowLeftIcon","link","isLast","CaretRightIcon"],"mappings":"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"}

package/dist/components/Sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { useMemo as N, forwardRef as u } from "react";
 import w from "./CustomIcons/CaretLeftIcon.js";
 import _ from "./CustomIcons/CaretRightIcon.js";
@@ -6,32 +6,32 @@ import h from "./CustomIcons/ChevronsUpDownIcon.js";
 import f from "./Tooltip.js";
 import { UsageCard as S } from "./UsageCard.js";
 import { isExpanded as $ } from "./ariaState.js";
-import { BORDER as d, NO_SCROLLBAR as R } from "./chromeStyles.js";
-import { FOCUS_RING as m } from "./focusRing.js";
+import { BORDER as m, NO_SCROLLBAR as R } from "./chromeStyles.js";
+import { FOCUS_RING as x } from "./focusRing.js";
 import { SIDEBAR_WIDTH_PX as b, SidebarContext as k, SIDEBAR_POPOVER_WIDTH_PX as j, useSidebarCollapsed as E } from "./sidebarContext.js";
 const i = () => ({ collapsed: E() }), I = 1, O = 24, g = { width: 8, height: 14 }, z = "fixed top-[25px] z-[101] invisible opacity-0 [will-change:opacity] transition-[left,opacity,visibility] duration-200 ease-in-out group-hover/sidebar:visible group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:visible group-has-[:focus-visible]/sidebar:opacity-100", C = ({
   collapsed: e = !1,
   onToggleCollapse: t,
-  expandLabel: o = "Expand menu",
-  collapseLabel: n = "Collapse menu",
-  "aria-label": s = "Main",
-  children: c
+  expandLabel: a = "Expand menu",
+  collapseLabel: c = "Collapse menu",
+  "aria-label": d = "Main",
+  children: l
 }) => {
-  const a = e ? o : n, p = N(() => ({ collapsed: e }), [e]), x = e ? b.collapsed : b.expanded;
-  return /* @__PURE__ */ r(k.Provider, { value: p, children: /* @__PURE__ */ l(
+  const o = e ? a : c, s = N(() => ({ collapsed: e }), [e]), p = e ? b.collapsed : b.expanded;
+  return /* @__PURE__ */ r(k.Provider, { value: s, children: /* @__PURE__ */ n(
     "aside",
     {
       className: "group/sidebar fixed top-0 bottom-0 left-0 z-[100] box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out",
-      style: { width: x },
+      style: { width: p },
       children: [
-        /* @__PURE__ */ r("nav", { "aria-label": s, className: "flex h-full flex-col", children: c }),
-        t && /* @__PURE__ */ r("div", { className: z, style: { left: x - O / 2 }, children: /* @__PURE__ */ r(f, { text: a, placement: "right", describesTrigger: !1, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ r("nav", { "aria-label": d, className: "flex h-full flex-col", children: l }),
+        t && /* @__PURE__ */ r("div", { className: z, style: { left: p - O / 2 }, children: /* @__PURE__ */ r(f, { text: o, placement: "right", describesTrigger: !1, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            "aria-label": a,
+            "aria-label": o,
             onClick: t,
-            className: `m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${d} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${m}`,
+            className: `m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${m} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${x}`,
             children: e ? /* @__PURE__ */ r(_, { size: 12 }) : /* @__PURE__ */ r(w, { size: 12 })
           }
         ) }) })
@@ -43,7 +43,7 @@ const i = () => ({ collapsed: E() }), I = 1, O = 24, g = { width: 8, height: 14
   return /* @__PURE__ */ r(
     "div",
     {
-      className: `box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${d} py-[6px] ${t ? "px-1" : "px-2"}`,
+      className: `box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${m} py-[6px] ${t ? "px-1" : "px-2"}`,
       children: e
     }
   );
@@ -63,33 +63,33 @@ const i = () => ({ collapsed: E() }), I = 1, O = 24, g = { width: 8, height: 14
   children: e,
   "aria-label": t
 }) => {
-  const { collapsed: o } = i();
-  return o ? null : /* @__PURE__ */ r("div", { role: "status", "aria-label": t, className: "flex flex-col gap-2 px-3 pt-4", children: e });
+  const { collapsed: a } = i();
+  return a ? null : /* @__PURE__ */ r("div", { role: "status", "aria-label": t, className: "flex flex-col gap-2 px-3 pt-4", children: e });
 }, H = () => {
   const { collapsed: e } = i();
-  return e ? null : /* @__PURE__ */ r("hr", { className: `m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${d}` });
+  return e ? null : /* @__PURE__ */ r("hr", { className: `m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${m}` });
 }, U = ({ children: e }) => {
   const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
     {
-      className: `mt-1 flex shrink-0 border-0 border-t border-solid ${d} py-3 ${t ? "justify-center px-2" : "px-4"}`,
+      className: `mt-1 flex shrink-0 border-0 border-t border-solid ${m} py-3 ${t ? "justify-center px-2" : "px-4"}`,
       children: e
     }
   );
 }, v = u(
-  ({ logo: e, title: t, subtitle: o, className: n = "", ...s }, c) => {
-    const { collapsed: a } = i();
-    return /* @__PURE__ */ l(
+  ({ logo: e, title: t, subtitle: a, className: c = "", ...d }, l) => {
+    const { collapsed: o } = i();
+    return /* @__PURE__ */ n(
       "button",
       {
-        ref: c,
+        ref: l,
         type: "button",
-        "aria-label": a ? t : void 0,
-        ...s,
-        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${a ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${m} ${n}`.trim(),
+        "aria-label": o ? t : void 0,
+        ...d,
+        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${o ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${x} ${c}`.trim(),
         children: [
-          /* @__PURE__ */ l("span", { className: "flex min-w-0 items-center gap-4", children: [
+          /* @__PURE__ */ n("span", { className: "flex min-w-0 items-center gap-4", children: [
             /* @__PURE__ */ r(
               "span",
               {
@@ -98,44 +98,44 @@ const i = () => ({ collapsed: E() }), I = 1, O = 24, g = { width: 8, height: 14
                 children: e
               }
             ),
-            !a && /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-col gap-1", children: [
+            !o && /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-col gap-1", children: [
               /* @__PURE__ */ r("span", { className: "block truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]", children: t }),
-              o && /* @__PURE__ */ r("span", { className: "block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: o })
+              a && /* @__PURE__ */ r("span", { className: "block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: a })
             ] })
           ] }),
-          !a && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(h, { style: g }) })
+          !o && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(h, { style: g }) })
         ]
       }
     );
   }
 );
 v.displayName = "Sidebar.Switcher";
-const X = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${d} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, y = u(
-  ({ avatar: e, initials: t, name: o, className: n = "", ...s }, c) => {
-    const { collapsed: a } = i(), p = /* @__PURE__ */ l(
+const X = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${m} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, y = u(
+  ({ avatar: e, initials: t, name: a, tooltip: c, className: d = "", ...l }, o) => {
+    const { collapsed: s } = i(), p = /* @__PURE__ */ n(
       "button",
       {
-        ref: c,
+        ref: o,
         type: "button",
-        "aria-label": a ? o : void 0,
-        ...s,
-        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${a ? "justify-center p-0" : "justify-between px-2"} ${m} ${n}`.trim(),
+        "aria-label": s ? a : void 0,
+        ...l,
+        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${s ? "justify-center p-0" : "justify-between px-2"} ${x} ${d}`.trim(),
         children: [
-          /* @__PURE__ */ l("span", { className: "flex min-w-0 items-center gap-3", children: [
-            /* @__PURE__ */ r("span", { "aria-hidden": a ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: X, children: t }) : null) }),
-            !a && /* @__PURE__ */ r("span", { className: "truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]", children: o })
+          /* @__PURE__ */ n("span", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ r("span", { "aria-hidden": s ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: X, children: t }) : null) }),
+            !s && /* @__PURE__ */ r("span", { className: "truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]", children: a })
           ] }),
-          !a && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(h, { style: g }) })
+          !s && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(h, { style: g }) })
         ]
       }
     );
-    return a ? /* @__PURE__ */ r(
+    return s ? /* @__PURE__ */ r(
       f,
       {
-        text: o,
+        text: a ? c ?? a : void 0,
         placement: "right",
         describesTrigger: !1,
-        suppressed: $(s["aria-expanded"]),
+        suppressed: $(l["aria-expanded"]),
         children: p
       }
     ) : p;

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_WIDTH_PX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\nconst TOGGLE_LAYER =\n    'fixed top-[25px] z-[101] invisible opacity-0 [will-change:opacity] transition-[left,opacity,visibility] duration-200 ease-in-out group-hover/sidebar:visible group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:visible group-has-[:focus-visible]/sidebar:opacity-100';\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 z-[100] box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div className={TOGGLE_LAYER} style={{ left: width - TOGGLE_SIZE_PX / 2 }}>\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <span className=\"block truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                                {title}\n                            </span>\n                            {subtitle && (\n                                <span className=\"block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n                                    {subtitle}\n                                </span>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                            {name}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name}\n                placement=\"right\"\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","className","rest","ref","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","button","isExpanded","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_WIDTH_PX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\nconst TOGGLE_LAYER =\n    'fixed top-[25px] z-[101] invisible opacity-0 [will-change:opacity] transition-[left,opacity,visibility] duration-200 ease-in-out group-hover/sidebar:visible group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:visible group-has-[:focus-visible]/sidebar:opacity-100';\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 z-[100] box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div className={TOGGLE_LAYER} style={{ left: width - TOGGLE_SIZE_PX / 2 }}>\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <span className=\"block truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                                {title}\n                            </span>\n                            {subtitle && (\n                                <span className=\"block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n                                    {subtitle}\n                                </span>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, a node so `name` can be wrapped (it renders outside the button);\n     *  should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                            {name}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","className","rest","ref","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","isExpanded","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}

package/dist/components/actionMenuStyles.js

@@ -1,36 +1,37 @@
 import { MENU_SPECS as t } from "./floatingMenuGeometry.js";
 import { injectStyleSheet as l } from "./injectStyleSheet.js";
-import { ensureOverlayStyles as d } from "./portalOverlay.js";
-const h = {
+import { ensureOverlayStyles as n } from "./portalOverlay.js";
+import { SELECTED_ROW_BACKGROUND as o, SELECTED_ROW_FOREGROUND as d } from "./selectedRow.js";
+const b = {
   small: { icon: 16, iconBox: "text-[16px] [&_svg]:size-[16px]!" },
   xsmall: { icon: 11, iconBox: "text-[11px] [&_svg]:size-[11px]!" }
-}, g = {
+}, p = {
   minWidth: 0,
   overflow: "hidden",
   textOverflow: "ellipsis"
-}, n = {
+}, c = {
   padding: "6px 10px",
   fontSize: "var(--malachite-font-size-small, 13px)",
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))",
   userSelect: "none"
-}, o = {
-  ...n,
+}, i = {
+  ...c,
   color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
-}, u = {
+}, v = {
   display: "inline-flex",
   flexShrink: 0,
   color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
-}, r = "malachite-actionmenu-item", i = [
-  `.${r} { background: transparent; }`,
-  `.${r}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,
-  `.${r}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`
-], f = () => (d(), l("malachite-actionmenu-item-styles", i)), c = {
+}, a = "malachite-actionmenu-item", s = "data-malachite-actionmenu-tag", E = { display: "inline-flex", flexShrink: 0 }, T = { [s]: "" }, m = [
+  `.${a} { background: transparent; }`,
+  `.${a}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,
+  `.${a}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`
+], _ = () => (n(), l("malachite-actionmenu-item-styles", m)), x = {
   default: "var(--malachite-text-primary, rgb(10, 10, 10))",
   muted: "var(--malachite-text-secondary, rgb(123, 123, 123))"
-}, b = (e, a = "default") => e.type === "text" ? o : e.type === "divider" ? {
+}, u = (e, r) => e.danger ? "var(--malachite-text-destructive, rgb(237, 53, 54))" : e.current ? d : x[r], y = (e, r = "default") => e.type === "text" ? i : e.type === "divider" ? {
   height: 1,
   background: "var(--malachite-card-border, rgb(232, 232, 232))",
   margin: "4px 0"
@@ -42,7 +43,8 @@ const h = {
   borderRadius: 8,
   fontSize: "var(--malachite-font-size-small, 13px)",
   fontWeight: 400,
-  color: e.danger ? "var(--malachite-text-destructive, rgb(237, 53, 54))" : c[a],
+  color: u(e, r),
+  background: e.current ? o : void 0,
   cursor: e.disabled ? "not-allowed" : "pointer",
   opacity: e.disabled ? 0.5 : 1,
   userSelect: "none",
@@ -51,7 +53,7 @@ const h = {
   border: "none",
   textAlign: "left",
   width: "100%"
-}, p = (e) => ({
+}, w = (e) => ({
   position: "fixed",
   top: (e == null ? void 0 : e.top) ?? 0,
   left: (e == null ? void 0 : e.left) ?? 0,
@@ -70,14 +72,17 @@ const h = {
   opacity: e ? 1 : 0
 });
 export {
-  n as EMPTY_ITEM_STYLE,
-  r as ITEM_CLASS,
-  u as ITEM_ICON_STYLE,
-  g as LABEL_STYLE,
-  o as TEXT_ITEM_STYLE,
-  h as TRIGGER_SIZES,
-  f as ensureActionMenuStyles,
-  b as itemStyle,
-  p as menuStyle
+  c as EMPTY_ITEM_STYLE,
+  a as ITEM_CLASS,
+  v as ITEM_ICON_STYLE,
+  p as LABEL_STYLE,
+  s as TAG_HOST_ATTR,
+  T as TAG_HOST_PROPS,
+  E as TAG_HOST_STYLE,
+  i as TEXT_ITEM_STYLE,
+  b as TRIGGER_SIZES,
+  _ as ensureActionMenuStyles,
+  y as itemStyle,
+  w as menuStyle
 };
 //# sourceMappingURL=actionMenuStyles.js.map

package/dist/components/actionMenuStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: item.danger ? 'var(--malachite-text-destructive, rgb(237, 53, 54))' : ITEM_TEXT[tone],\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_STYLE","ITEM_CLASS","ITEM_RULES","ensureActionMenuStyles","ensureOverlayStyles","injectStyleSheet","ITEM_TEXT","itemStyle","item","tone","menuStyle","position","MENU_SPECS"],"mappings":";;;AAMO,MAAMA,IAA+E;AAAA,EACxF,OAAO,EAAE,MAAM,IAAI,SAAS,mCAAA;AAAA,EAC5B,QAAQ,EAAE,MAAM,IAAI,SAAS,mCAAA;AACjC,GAEaC,IAAmC;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAClB,GAEaC,IAAwC;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAChB,GAEaC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAChB,GAEaE,IAAuC;AAAA,EAChD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACX,GAEaC,IAAa,6BAEpBC,IAAa;AAAA,EACf,IAAID,CAAU;AAAA,EACd,IAAIA,CAAU;AAAA,EACd,IAAIA,CAAU;AAClB,GAEaE,IAAyB,OAClCC,EAAA,GACOC,EAAiB,oCAAoCH,CAAU,IAKpEI,IAA4C;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AACX,GAEaC,IAAY,CACrBC,GACAC,IAAuB,cAEnBD,EAAK,SAAS,SACPT,IAEPS,EAAK,SAAS,YACP;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AAAA,IAGT;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAOA,EAAK,SAAS,wDAAwDF,EAAUG,CAAI;AAAA,EAC3F,QAAQD,EAAK,WAAW,gBAAgB;AAAA,EACxC,SAASA,EAAK,WAAW,MAAM;AAAA,EAC/B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,GAIFE,IAAY,CAACC,OAAwD;AAAA,EAC9E,UAAU;AAAA,EACV,MAAKA,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EACjB,WAAWA,KAAA,gBAAAA,EAAU;AAAA,EACrB,WAAW;AAAA,EACX,YAAYC,EAAW,QAAQ;AAAA,EAC/B,QAAQA,EAAW,QAAQ;AAAA,EAC3B,cAAcA,EAAW,QAAQ;AAAA,EACjC,WAAWA,EAAW,QAAQ;AAAA,EAC9B,SAASA,EAAW,QAAQ;AAAA,EAC5B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B;"}
+{"version":3,"file":"actionMenuStyles.js","sources":["../../src/components/actionMenuStyles.ts"],"sourcesContent":["import type React from 'react';\nimport type { ActionMenuItem } from './actionMenuTypes';\nimport { MENU_SPECS, type MenuGeometry } from './floatingMenuGeometry';\nimport { injectStyleSheet } from './injectStyleSheet';\nimport { ensureOverlayStyles } from './portalOverlay';\nimport { SELECTED_ROW_BACKGROUND, SELECTED_ROW_FOREGROUND } from './selectedRow';\n\nexport const TRIGGER_SIZES: Record<'small' | 'xsmall', { icon: number; iconBox: string }> = {\n    small: { icon: 16, iconBox: 'text-[16px] [&_svg]:size-[16px]!' },\n    xsmall: { icon: 11, iconBox: 'text-[11px] [&_svg]:size-[11px]!' },\n};\n\nexport const LABEL_STYLE: React.CSSProperties = {\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n};\n\nexport const EMPTY_ITEM_STYLE: React.CSSProperties = {\n    padding: '6px 10px',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n    userSelect: 'none',\n};\n\nexport const TEXT_ITEM_STYLE: React.CSSProperties = {\n    ...EMPTY_ITEM_STYLE,\n    color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n};\n\nexport const ITEM_ICON_STYLE: React.CSSProperties = {\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nexport const ITEM_CLASS = 'malachite-actionmenu-item';\n\nexport const TAG_HOST_ATTR = 'data-malachite-actionmenu-tag' as const;\n\nexport const TAG_HOST_STYLE: React.CSSProperties = { display: 'inline-flex', flexShrink: 0 };\n\nexport const TAG_HOST_PROPS = { [TAG_HOST_ATTR]: '' };\n\nconst ITEM_RULES = [\n    `.${ITEM_CLASS} { background: transparent; }`,\n    `.${ITEM_CLASS}:not(:disabled):hover { background: var(--malachite-card-dimmed-background, rgb(247, 247, 247)); }`,\n    `.${ITEM_CLASS}:focus-visible { outline: 2px solid var(--malachite-text-primary, rgb(10, 10, 10)); outline-offset: -2px; }`,\n];\n\nexport const ensureActionMenuStyles = (): CSSStyleSheet | null => {\n    ensureOverlayStyles();\n    return injectStyleSheet('malachite-actionmenu-item-styles', ITEM_RULES);\n};\n\nexport type ActionMenuTone = 'default' | 'muted';\n\nconst ITEM_TEXT: Record<ActionMenuTone, string> = {\n    default: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n    muted: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n};\n\ntype ActionItem = Exclude<ActionMenuItem, { type: 'text' } | { type: 'divider' }>;\n\nconst actionItemColor = (item: ActionItem, tone: ActionMenuTone): string => {\n    if (item.danger) {\n        return 'var(--malachite-text-destructive, rgb(237, 53, 54))';\n    }\n    if (item.current) {\n        return SELECTED_ROW_FOREGROUND;\n    }\n    return ITEM_TEXT[tone];\n};\n\nexport const itemStyle = (\n    item: ActionMenuItem,\n    tone: ActionMenuTone = 'default',\n): React.CSSProperties => {\n    if (item.type === 'text') {\n        return TEXT_ITEM_STYLE;\n    }\n    if (item.type === 'divider') {\n        return {\n            height: 1,\n            background: 'var(--malachite-card-border, rgb(232, 232, 232))',\n            margin: '4px 0',\n        };\n    }\n    return {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        padding: '6px 10px',\n        borderRadius: 8,\n        fontSize: 'var(--malachite-font-size-small, 13px)',\n        fontWeight: 400,\n        color: actionItemColor(item, tone),\n        background: item.current ? SELECTED_ROW_BACKGROUND : undefined,\n        cursor: item.disabled ? 'not-allowed' : 'pointer',\n        opacity: item.disabled ? 0.5 : 1,\n        userSelect: 'none',\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        border: 'none',\n        textAlign: 'left',\n        width: '100%',\n    };\n};\n\nexport const menuStyle = (position: MenuGeometry | null): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    width: position?.width,\n    maxHeight: position?.maxHeight,\n    overflowY: 'auto',\n    background: MENU_SPECS.options.background,\n    border: MENU_SPECS.options.border,\n    borderRadius: MENU_SPECS.options.radius,\n    boxShadow: MENU_SPECS.options.shadow,\n    padding: MENU_SPECS.options.padding,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n"],"names":["TRIGGER_SIZES","LABEL_STYLE","EMPTY_ITEM_STYLE","TEXT_ITEM_STYLE","ITEM_ICON_STYLE","ITEM_CLASS","TAG_HOST_ATTR","TAG_HOST_STYLE","TAG_HOST_PROPS","ITEM_RULES","ensureActionMenuStyles","ensureOverlayStyles","injectStyleSheet","ITEM_TEXT","actionItemColor","item","tone","SELECTED_ROW_FOREGROUND","itemStyle","SELECTED_ROW_BACKGROUND","menuStyle","position","MENU_SPECS"],"mappings":";;;;AAOO,MAAMA,IAA+E;AAAA,EACxF,OAAO,EAAE,MAAM,IAAI,SAAS,mCAAA;AAAA,EAC5B,QAAQ,EAAE,MAAM,IAAI,SAAS,mCAAA;AACjC,GAEaC,IAAmC;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAClB,GAEaC,IAAwC;AAAA,EACjD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAChB,GAEaC,IAAuC;AAAA,EAChD,GAAGD;AAAA,EACH,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAChB,GAEaE,IAAuC;AAAA,EAChD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACX,GAEaC,IAAa,6BAEbC,IAAgB,iCAEhBC,IAAsC,EAAE,SAAS,eAAe,YAAY,EAAA,GAE5EC,IAAiB,EAAE,CAACF,CAAa,GAAG,GAAA,GAE3CG,IAAa;AAAA,EACf,IAAIJ,CAAU;AAAA,EACd,IAAIA,CAAU;AAAA,EACd,IAAIA,CAAU;AAClB,GAEaK,IAAyB,OAClCC,EAAA,GACOC,EAAiB,oCAAoCH,CAAU,IAKpEI,IAA4C;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AACX,GAIMC,IAAkB,CAACC,GAAkBC,MACnCD,EAAK,SACE,wDAEPA,EAAK,UACEE,IAEJJ,EAAUG,CAAI,GAGZE,IAAY,CACrBH,GACAC,IAAuB,cAEnBD,EAAK,SAAS,SACPZ,IAEPY,EAAK,SAAS,YACP;AAAA,EACH,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AAAA,IAGT;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAOD,EAAgBC,GAAMC,CAAI;AAAA,EACjC,YAAYD,EAAK,UAAUI,IAA0B;AAAA,EACrD,QAAQJ,EAAK,WAAW,gBAAgB;AAAA,EACxC,SAASA,EAAK,WAAW,MAAM;AAAA,EAC/B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,GAIFK,IAAY,CAACC,OAAwD;AAAA,EAC9E,UAAU;AAAA,EACV,MAAKA,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,OAAOA,KAAA,gBAAAA,EAAU;AAAA,EACjB,WAAWA,KAAA,gBAAAA,EAAU;AAAA,EACrB,WAAW;AAAA,EACX,YAAYC,EAAW,QAAQ;AAAA,EAC/B,QAAQA,EAAW,QAAQ;AAAA,EAC3B,cAAcA,EAAW,QAAQ;AAAA,EACjC,WAAWA,EAAW,QAAQ;AAAA,EAC9B,SAASA,EAAW,QAAQ;AAAA,EAC5B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B;"}

package/dist/components/useActionMenuPosition.js

@@ -1,73 +1,80 @@
-import { useState as L, useRef as y, useInsertionEffect as A, useCallback as F, useLayoutEffect as b } from "react";
-import { ensureActionMenuStyles as O } from "./actionMenuStyles.js";
-import { measureContentWidth as z, measureMenuGeometry as C, computeFloatingGeometry as P, fullPanelHeight as T, MENU_MAX_HEIGHT_PX as H, rectSignature as E, FLOATING_OFFSET_PX as W } from "./floatingMenuGeometry.js";
-import { useTopLayer as _ } from "./topLayer.js";
-const I = (c, i, l, { minWidth: g, placement: m, offset: h }) => {
-  const [M, p] = L(null), w = y(void 0), d = y(!0);
-  _(l, c), A(() => {
-    c && O();
-  }, [c]);
-  const r = F(() => {
-    const o = i.current;
-    if (!o)
+import { useState as L, useRef as T, useInsertionEffect as S, useCallback as F, useLayoutEffect as O } from "react";
+import { ensureActionMenuStyles as _, TAG_HOST_ATTR as z } from "./actionMenuStyles.js";
+import { measureContentWidth as C, measureMenuGeometry as G, computeFloatingGeometry as P, fullPanelHeight as W, MENU_MAX_HEIGHT_PX as E, rectSignature as A, FLOATING_OFFSET_PX as q } from "./floatingMenuGeometry.js";
+import { useTopLayer as x } from "./topLayer.js";
+const B = (s, t, r) => {
+  const w = new Set(s ? s.querySelectorAll(`[${z}]`) : []);
+  r.forEach((i) => {
+    w.has(i) || (r.delete(i), t == null || t.unobserve(i));
+  }), w.forEach((i) => {
+    r.has(i) || (r.add(i), t == null || t.observe(i));
+  });
+}, U = (s, t, r, { minWidth: w, placement: i, offset: p }) => {
+  const [v, y] = L(null), g = T(void 0), c = T(!0);
+  x(r, s), S(() => {
+    s && _();
+  }, [s]);
+  const u = F(() => {
+    const l = t.current;
+    if (!l)
       return;
-    const t = l.current;
-    if (t && d.current) {
-      const n = t.style.width;
-      t.style.width = "", w.current = z(t) ?? w.current, t.style.width = n, d.current = !1;
+    const e = r.current;
+    if (e && c.current) {
+      const o = e.style.width;
+      e.style.width = "", g.current = C(e) ?? g.current, e.style.width = o, c.current = !1;
     }
-    const a = o.getBoundingClientRect(), s = C(t, {
-      triggerRect: a,
+    const m = l.getBoundingClientRect(), a = G(e, {
+      triggerRect: m,
       preset: "options",
-      minWidth: g,
-      contentWidth: w.current,
+      minWidth: w,
+      contentWidth: g.current,
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    if (m === "bottom-end" && h === void 0 || !t) {
-      p(s);
+    if (i === "bottom-end" && p === void 0 || !e) {
+      y(a);
       return;
     }
-    const e = P({
-      triggerRect: a,
-      placement: m,
-      panelWidth: s.width,
-      panelHeight: Math.min(T(t), H),
-      gap: W[h ?? "small"],
+    const n = P({
+      triggerRect: m,
+      placement: i,
+      panelWidth: a.width,
+      panelHeight: Math.min(W(e), E),
+      gap: q[p ?? "small"],
       viewportWidth: window.innerWidth,
       viewportHeight: window.innerHeight
     });
-    p({
-      ...s,
-      top: e.top,
-      left: e.left,
-      maxHeight: Math.min(H, e.maxHeight),
-      openUp: e.side === "top"
+    y({
+      ...a,
+      top: n.top,
+      left: n.left,
+      maxHeight: Math.min(E, n.maxHeight),
+      openUp: n.side === "top"
     });
-  }, [i, l, g, m, h]);
-  return b(() => {
-    if (!c) {
-      p(null), w.current = void 0, d.current = !0;
+  }, [t, r, w, i, p]);
+  return O(() => {
+    if (!s) {
+      y(null), g.current = void 0, c.current = !0;
       return;
     }
-    d.current = !0, r();
-    let o = 0, t = !1, a = i.current ? E(i.current.getBoundingClientRect()) : "";
-    const s = () => {
-      const f = i.current, v = f ? E(f.getBoundingClientRect()) : "";
-      (v !== a || t) && (a = v, t = !1, r()), o = requestAnimationFrame(s);
+    c.current = !0, u();
+    let l = 0, e = !1, m = t.current ? A(t.current.getBoundingClientRect()) : "";
+    const a = () => {
+      const f = t.current, h = f ? A(f.getBoundingClientRect()) : "";
+      (h !== m || e) && (m = h, e = !1, u()), l = requestAnimationFrame(a);
     };
-    o = requestAnimationFrame(s), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r);
-    const e = l.current, n = e && typeof ResizeObserver < "u" ? new ResizeObserver(() => {
-      t = !0;
-    }) : null, u = e && typeof MutationObserver < "u" ? new MutationObserver(() => {
-      d.current = !0, t = !0;
+    l = requestAnimationFrame(a), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u);
+    const n = r.current, o = n && typeof ResizeObserver < "u" ? new ResizeObserver((f) => {
+      f.some((h) => h.target !== n) && (c.current = !0), e = !0;
+    }) : null, M = /* @__PURE__ */ new Set(), H = () => B(n, o, M), d = n && typeof MutationObserver < "u" ? new MutationObserver(() => {
+      c.current = !0, e = !0, H();
     }) : null;
-    return e && (n == null || n.observe(e), u == null || u.observe(e, { childList: !0, subtree: !0, characterData: !0 })), () => {
-      cancelAnimationFrame(o), n == null || n.disconnect(), u == null || u.disconnect(), window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
+    return n && (o == null || o.observe(n), H(), d == null || d.observe(n, { childList: !0, subtree: !0, characterData: !0 })), () => {
+      cancelAnimationFrame(l), o == null || o.disconnect(), d == null || d.disconnect(), window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
     };
-  }, [c, r, i, l]), M;
+  }, [s, u, t, r]), v;
 };
 export {
-  I as useActionMenuPosition
+  U as useActionMenuPosition
 };
 //# sourceMappingURL=useActionMenuPosition.js.map