@salt-ds/lab 1.0.0-alpha.9 → 1.0.0-alpha.91

package/dist-es/mega-menu/useMegaMenuKeyboard.js

@@ -0,0 +1,205 @@
+import { useMemo } from 'react';
+
+const COLUMN_SELECTOR = "[data-mega-menu-column]";
+const ITEM_SELECTOR = "[data-mega-menu-item]";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getColumnItems(column) {
+  const marked = Array.from(
+    column.querySelectorAll(ITEM_SELECTOR)
+  );
+  if (marked.length > 0) return marked;
+  return Array.from(column.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function buildGrid(panel) {
+  const columns = new Set(panel.querySelectorAll(COLUMN_SELECTOR));
+  const grid = [];
+  const processedColumns = /* @__PURE__ */ new Set();
+  const all = panel.querySelectorAll(
+    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`
+  );
+  for (const el of all) {
+    if (columns.has(el) && !processedColumns.has(el)) {
+      processedColumns.add(el);
+      const items = getColumnItems(el);
+      if (items.length > 0) grid.push(items);
+    } else if (el.matches(ITEM_SELECTOR)) {
+      const parentCol = el.closest(COLUMN_SELECTOR);
+      if (!parentCol || !columns.has(parentCol)) {
+        grid.push([el]);
+      }
+    }
+  }
+  return grid;
+}
+function findPosition(grid, el) {
+  for (let col = 0; col < grid.length; col++) {
+    const row = grid[col].indexOf(el);
+    if (row !== -1) return { col, row };
+  }
+  return null;
+}
+function focusTrigger(context) {
+  const reference = context.elements.reference;
+  const focusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  focusable == null ? void 0 : focusable.focus();
+}
+function focusNextAfterPanel(context, panel) {
+  var _a, _b;
+  const reference = context.elements.reference;
+  const refFocusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  const nextSibling = (_b = (_a = refFocusable == null ? void 0 : refFocusable.closest("li")) == null ? void 0 : _a.nextElementSibling) == null ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+  const nextOutside = nextSibling || (() => {
+    const allFocusable = Array.from(
+      panel.ownerDocument.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).filter((el) => !panel.contains(el));
+    const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
+    return idx >= 0 ? allFocusable[idx + 1] : void 0;
+  })();
+  if (nextOutside) {
+    const view = panel.ownerDocument.defaultView;
+    view == null ? void 0 : view.requestAnimationFrame(() => {
+      view == null ? void 0 : view.requestAnimationFrame(() => {
+        nextOutside.focus();
+      });
+    });
+  }
+}
+function useMegaMenuKeyboard(context, props = {}) {
+  const { enabled = true } = props;
+  const { open, onOpenChange } = context;
+  return useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onKeyDown(event) {
+          if (event.key === "ArrowDown" && open) {
+            event.preventDefault();
+            const floating = context.elements.floating;
+            if (floating instanceof HTMLElement) {
+              focusFirstItem(floating);
+            }
+          }
+        }
+      },
+      floating: {
+        onKeyDown(event) {
+          var _a, _b, _c, _d;
+          if (!open) return;
+          const panel = event.currentTarget;
+          const target = event.target;
+          const focusedItem = target.closest(ITEM_SELECTOR) ?? target.closest(FOCUSABLE_SELECTOR);
+          if (!focusedItem) return;
+          const grid = buildGrid(panel);
+          const pos = findPosition(grid, focusedItem);
+          if (!pos) return;
+          const allItems = grid.flat();
+          const linearIndex = allItems.indexOf(focusedItem);
+          switch (event.key) {
+            case "ArrowDown": {
+              event.preventDefault();
+              const next = pos.row + 1;
+              if (next < grid[pos.col].length) {
+                grid[pos.col][next].focus();
+              } else {
+                const nextCol = pos.col + 1;
+                if (nextCol < grid.length) {
+                  grid[nextCol][0].focus();
+                }
+              }
+              break;
+            }
+            case "ArrowUp": {
+              event.preventDefault();
+              if (pos.row > 0) {
+                grid[pos.col][pos.row - 1].focus();
+              } else {
+                const prevCol = pos.col - 1;
+                if (prevCol >= 0) {
+                  grid[prevCol][grid[prevCol].length - 1].focus();
+                } else {
+                  focusTrigger(context);
+                }
+              }
+              break;
+            }
+            case "ArrowRight": {
+              event.preventDefault();
+              const nextCol = pos.col + 1;
+              if (nextCol < grid.length) {
+                grid[nextCol][0].focus();
+              } else {
+                const reference = context.elements.reference;
+                const trigger = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+                const li = trigger == null ? void 0 : trigger.closest("li");
+                const nextSibling = (li == null ? void 0 : li.nextElementSibling) instanceof HTMLElement ? li.nextElementSibling.querySelector(
+                  FOCUSABLE_SELECTOR
+                ) : null;
+                if (nextSibling) {
+                  onOpenChange(false);
+                  nextSibling.focus();
+                }
+              }
+              break;
+            }
+            case "ArrowLeft": {
+              event.preventDefault();
+              const prevCol = pos.col - 1;
+              if (prevCol >= 0) {
+                grid[prevCol][0].focus();
+              } else {
+                focusTrigger(context);
+              }
+              break;
+            }
+            case "Tab": {
+              event.preventDefault();
+              if (event.shiftKey) {
+                if (linearIndex === 0) {
+                  focusTrigger(context);
+                } else {
+                  (_a = allItems[linearIndex - 1]) == null ? void 0 : _a.focus();
+                }
+              } else {
+                if (linearIndex === allItems.length - 1) {
+                  onOpenChange(false);
+                  focusNextAfterPanel(context, panel);
+                } else {
+                  (_b = allItems[linearIndex + 1]) == null ? void 0 : _b.focus();
+                }
+              }
+              break;
+            }
+            case "Home": {
+              event.preventDefault();
+              (_c = grid[pos.col][0]) == null ? void 0 : _c.focus();
+              break;
+            }
+            case "End": {
+              event.preventDefault();
+              (_d = grid[pos.col][grid[pos.col].length - 1]) == null ? void 0 : _d.focus();
+              break;
+            }
+          }
+        }
+      }
+    };
+  }, [enabled, open, context, onOpenChange]);
+}
+function focusFirstItem(panel, attempt = 0) {
+  var _a;
+  const grid = buildGrid(panel);
+  const firstItem = (_a = grid[0]) == null ? void 0 : _a[0];
+  if (firstItem) {
+    firstItem.focus();
+    return;
+  }
+  const view = panel.ownerDocument.defaultView;
+  if (attempt < 3 && view) {
+    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));
+  }
+}
+
+export { FOCUSABLE_SELECTOR, focusFirstItem, useMegaMenuKeyboard };
+//# sourceMappingURL=useMegaMenuKeyboard.js.map

package/dist-es/mega-menu/useMegaMenuKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMegaMenuKeyboard.js","sources":["../src/mega-menu/useMegaMenuKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ITEM_SELECTOR = \"[data-mega-menu-item]\";\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Get navigable items within a column.\n * Prefers explicitly marked items (`data-mega-menu-item`), falling back\n * to all focusable elements when no marked items are found.\n */\nfunction getColumnItems(column: HTMLElement): HTMLElement[] {\n  const marked = Array.from(\n    column.querySelectorAll<HTMLElement>(ITEM_SELECTOR),\n  );\n  if (marked.length > 0) return marked;\n  return Array.from(column.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n/**\n * Build a 2D grid of navigable items from the panel DOM.\n * Each column is a `[data-mega-menu-column]` wrapper; items within each\n * column are discovered via `getColumnItems`.\n * Items not inside any column (orphans) are inserted at their DOM position\n * as single-item columns so keyboard navigation follows visual order.\n */\nfunction buildGrid(panel: HTMLElement): HTMLElement[][] {\n  const columns = new Set(panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR));\n  const grid: HTMLElement[][] = [];\n  const processedColumns = new Set<HTMLElement>();\n\n  // Walk columns and items in DOM order so orphans are interleaved correctly.\n  const all = panel.querySelectorAll<HTMLElement>(\n    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`,\n  );\n\n  for (const el of all) {\n    if (columns.has(el) && !processedColumns.has(el)) {\n      processedColumns.add(el);\n      const items = getColumnItems(el);\n      if (items.length > 0) grid.push(items);\n    } else if (el.matches(ITEM_SELECTOR)) {\n      const parentCol = el.closest(COLUMN_SELECTOR);\n      if (!parentCol || !columns.has(parentCol as HTMLElement)) {\n        grid.push([el]);\n      }\n    }\n  }\n\n  return grid;\n}\n\nfunction findPosition(\n  grid: HTMLElement[][],\n  el: HTMLElement,\n): { col: number; row: number } | null {\n  for (let col = 0; col < grid.length; col++) {\n    const row = grid[col].indexOf(el);\n    if (row !== -1) return { col, row };\n  }\n  return null;\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const focusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n  focusable?.focus();\n}\n\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n\n  const nextSibling = refFocusable\n    ?.closest(\"li\")\n    ?.nextElementSibling?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n\n  const nextOutside =\n    nextSibling ||\n    (() => {\n      const allFocusable = Array.from(\n        panel.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((el) => !panel.contains(el));\n      const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n      return idx >= 0 ? allFocusable[idx + 1] : undefined;\n    })();\n\n  if (nextOutside) {\n    const view = panel.ownerDocument.defaultView;\n    view?.requestAnimationFrame(() => {\n      view?.requestAnimationFrame(() => {\n        nextOutside.focus();\n      });\n    });\n  }\n}\n\nexport interface UseMegaMenuKeyboardProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui custom interaction hook for mega menu grid keyboard navigation.\n *\n * Returns `ElementProps` that get merged via `useInteractions`, handling\n * keyboard events on both the reference (trigger) and floating (panel) elements.\n *\n * - **↑ / ↓** move within the current column.\n * - **← / →** jump to the top of the previous / next column.\n * - **Tab / Shift+Tab** move linearly through every item.\n * - **Home / End** jump to the first / last item in the column.\n * - **↑ from the first item** or **← from the first column** returns\n *   focus to the trigger.\n * - **→ from the last column** closes the panel and moves focus to the\n *   next sibling trigger.\n */\nexport function useMegaMenuKeyboard(\n  context: FloatingRootContext,\n  props: UseMegaMenuKeyboardProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      reference: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (event.key === \"ArrowDown\" && open) {\n            event.preventDefault();\n            const floating = context.elements.floating;\n            if (floating instanceof HTMLElement) {\n              focusFirstItem(floating);\n            }\n          }\n        },\n      },\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n\n          const focusedItem =\n            target.closest<HTMLElement>(ITEM_SELECTOR) ??\n            target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (!focusedItem) return;\n\n          const grid = buildGrid(panel);\n          const pos = findPosition(grid, focusedItem);\n          if (!pos) return;\n\n          const allItems = grid.flat();\n          const linearIndex = allItems.indexOf(focusedItem);\n\n          switch (event.key) {\n            case \"ArrowDown\": {\n              event.preventDefault();\n              const next = pos.row + 1;\n              if (next < grid[pos.col].length) {\n                grid[pos.col][next].focus();\n              } else {\n                const nextCol = pos.col + 1;\n                if (nextCol < grid.length) {\n                  grid[nextCol][0].focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowUp\": {\n              event.preventDefault();\n              if (pos.row > 0) {\n                grid[pos.col][pos.row - 1].focus();\n              } else {\n                const prevCol = pos.col - 1;\n                if (prevCol >= 0) {\n                  grid[prevCol][grid[prevCol].length - 1].focus();\n                } else {\n                  focusTrigger(context);\n                }\n              }\n              break;\n            }\n\n            case \"ArrowRight\": {\n              event.preventDefault();\n              const nextCol = pos.col + 1;\n              if (nextCol < grid.length) {\n                grid[nextCol][0].focus();\n              } else {\n                // On the last column — close panel and move to next trigger\n                const reference = context.elements\n                  .reference as HTMLElement | null;\n                const trigger =\n                  reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??\n                  reference;\n                const li = trigger?.closest(\"li\");\n                const nextSibling =\n                  li?.nextElementSibling instanceof HTMLElement\n                    ? li.nextElementSibling.querySelector<HTMLElement>(\n                        FOCUSABLE_SELECTOR,\n                      )\n                    : null;\n                if (nextSibling) {\n                  onOpenChange(false);\n                  nextSibling.focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowLeft\": {\n              event.preventDefault();\n              const prevCol = pos.col - 1;\n              if (prevCol >= 0) {\n                grid[prevCol][0].focus();\n              } else {\n                focusTrigger(context);\n              }\n              break;\n            }\n\n            case \"Tab\": {\n              event.preventDefault();\n              if (event.shiftKey) {\n                if (linearIndex === 0) {\n                  focusTrigger(context);\n                } else {\n                  allItems[linearIndex - 1]?.focus();\n                }\n              } else {\n                if (linearIndex === allItems.length - 1) {\n                  onOpenChange(false);\n                  focusNextAfterPanel(context, panel);\n                } else {\n                  allItems[linearIndex + 1]?.focus();\n                }\n              }\n              break;\n            }\n\n            case \"Home\": {\n              event.preventDefault();\n              grid[pos.col][0]?.focus();\n              break;\n            }\n\n            case \"End\": {\n              event.preventDefault();\n              grid[pos.col][grid[pos.col].length - 1]?.focus();\n              break;\n            }\n\n            default:\n              break;\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/**\n * Focus the first navigable item inside a mega menu panel.\n * Retries with `requestAnimationFrame` if content has not yet rendered.\n */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const grid = buildGrid(panel);\n  const firstItem = grid[0]?.[0];\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-es/menu-button/MenuButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = "";
+
+export { css_248z as default };
+//# sourceMappingURL=MenuButton.css.js.map

package/dist-es/menu-button/MenuButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/menu-button/MenuButton.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useState, useCallback } from 'react';
+import { CascadingMenu } from '../cascading-menu/CascadingMenu.js';
+import css_248z from './MenuButton.css.js';
+import { MenuButtonTrigger } from './MenuButtonTrigger.js';
+
+const MenuButton = forwardRef(
+  function MenuButton2({ variant = "secondary", CascadingMenuProps = {}, children, ...restProps }, ref) {
+    const {
+      initialSource = { menuItems: [] },
+      onOpen,
+      onClose,
+      ...restMenuProps
+    } = CascadingMenuProps;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-menu-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const handleOpen = useCallback(() => {
+      setMenuOpen(true);
+      onOpen == null ? void 0 : onOpen();
+    }, [onOpen]);
+    const handleClose = useCallback(() => {
+      setMenuOpen(false);
+      onClose == null ? void 0 : onClose();
+    }, [onClose]);
+    return /* @__PURE__ */ jsx(
+      CascadingMenu,
+      {
+        initialSource,
+        onClose: handleClose,
+        onOpen: handleOpen,
+        ...restMenuProps,
+        children: /* @__PURE__ */ jsx(
+          MenuButtonTrigger,
+          {
+            "aria-expanded": isMenuOpen,
+            "aria-haspopup": true,
+            isMenuOpen,
+            ref,
+            variant,
+            ...restProps,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+
+export { MenuButton };
+//# sourceMappingURL=MenuButton.js.map

package/dist-es/menu-button/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef, type ReactNode, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport menuButtonCss from \"./MenuButton.css\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["MenuButton","menuButtonCss"],"mappings":";;;;;;;;AAeO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAA,EAAa,kBAAA,GAAqB,EAAC,EAAG,QAAA,EAAU,GAAG,SAAA,EAAU,EACzE,GAAA,EACA;AACA,IAAA,MAAM;AAAA,MACJ,aAAA,GAAgB,EAAE,SAAA,EAAW,EAAC,EAAE;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,kBAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,IAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,IACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,MAAA,EAAQ,UAAA;AAAA,QACP,GAAG,aAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAa,IAAA;AAAA,YACb,UAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/menu-button/MenuButtonTrigger.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-size-unit);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MenuButtonTrigger.css.js.map

package/dist-es/menu-button/MenuButtonTrigger.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/menu-button/MenuButtonTrigger.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './MenuButtonTrigger.css.js';
+
+const withBaseName = makePrefixer("saltMenuButtonTrigger");
+const MenuButtonTrigger = forwardRef(function MenuButtonTrigger2({ className, hideCaret, isMenuOpen, children, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-menu-button-trigger",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { ExpandIcon } = useIcon();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      className: clsx(withBaseName(), className, {
+        [withBaseName("buttonOpen")]: isMenuOpen
+      }),
+      "data-testid": "menu-button-trigger",
+      ...rest,
+      children: [
+        children,
+        !hideCaret && /* @__PURE__ */ jsx(
+          ExpandIcon,
+          {
+            className: withBaseName("caretIcon"),
+            "data-testid": "menu-button-trigger-caret"
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { MenuButtonTrigger };
+//# sourceMappingURL=MenuButtonTrigger.js.map

package/dist-es/menu-button/MenuButtonTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AASlD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CACT,EAAE,SAAA,EAAW,SAAA,EAAW,UAAA,EAAY,QAAA,EAAU,GAAG,IAAA,EAAK,EACtD,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,OAAA,EAAQ;AAE/B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAA,EAAW;AAAA,QACzC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,OAC/B,CAAA;AAAA,MACD,aAAA,EAAY,qBAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,SAAA,oBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-es/metric/Metric.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-content-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Metric.css.js.map

package/dist-es/metric/Metric.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/metric/Metric.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { MetricContextProvider } from './internal/MetricContext.js';
+import css_248z from './Metric.css.js';
+
+const withBaseName = makePrefixer("saltMetric");
+const Metric = forwardRef(function Metric2({
+  className,
+  children,
+  direction,
+  showIndicator,
+  align = "left",
+  orientation = "vertical",
+  indicatorPosition = "end",
+  headingAriaLevel = 2,
+  id: idProp,
+  size = "medium",
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-metric",
+    css: css_248z,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const titleId = `metric-title-${id}`;
+  const subtitleId = `metric-subtitle-${id}`;
+  const valueId = `metric-value-${id}`;
+  const value = useMemo(
+    () => ({
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    }),
+    [
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    ]
+  );
+  return /* @__PURE__ */ jsx(MetricContextProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`size-${size}`),
+        {
+          [withBaseName(`direction-${direction}`)]: direction,
+          [withBaseName(`orientation-${orientation}`)]: orientation,
+          [withBaseName(`align-${align}`)]: align
+        },
+        className
+      ),
+      id,
+      ref,
+      children
+    }
+  ) });
+});
+
+export { Metric };
+//# sourceMappingURL=Metric.js.map

package/dist-es/metric/Metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAmBvC,MAAM,MAAA,GAAS,UAAA,CAAwC,SAASA,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,WAAA,GAAc,UAAA;AAAA,EACd,iBAAA,GAAoB,KAAA;AAAA,EACpB,gBAAA,GAAmB,CAAA;AAAA,EACnB,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAClC,EAAA,MAAM,UAAA,GAAa,mBAAmB,EAAE,CAAA,CAAA;AACxC,EAAA,MAAM,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAElC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,yBAAsB,KAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC,GAAG,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAC,GAAG,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG;AAAA,SACpC;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/metric/MetricContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-positive-foreground-decorative);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-positive-foreground-informative);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-negative-foreground-decorative);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-negative-foreground-informative);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricContent.css.js.map

package/dist-es/metric/MetricContent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/metric/MetricContent.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Display1, Display2, Display3, Text } from '@salt-ds/core';
+import { ArrowUpIcon, ArrowDownIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useMetricContext } from './internal/MetricContext.js';
+import css_248z from './MetricContent.css.js';
+
+const iconComponentMap = {
+  down: ArrowDownIcon,
+  up: ArrowUpIcon
+};
+const withBaseName = makePrefixer("saltMetricContent");
+const MetricContent = forwardRef(
+  function MetricContent2({
+    IndicatorIconProps,
+    IndicatorIconComponent,
+    className,
+    value,
+    subvalue,
+    ...restProps
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-metric-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      direction,
+      showIndicator,
+      indicatorPosition,
+      size = "medium",
+      valueId,
+      titleId,
+      subtitleId
+    } = useMetricContext();
+    const iconSize = size === "large" ? 2 : 1;
+    const valueComponentMap = {
+      small: Display3,
+      medium: Display2,
+      large: Display1
+    };
+    const ValueComponent = valueComponentMap[size];
+    const iconProps = {
+      "aria-label": direction,
+      className: withBaseName("indicator"),
+      name: direction ? `movement-${direction}` : "",
+      size: iconSize,
+      ...IndicatorIconProps
+    };
+    const IconComponent = IndicatorIconComponent ?? (direction ? iconComponentMap[direction] : void 0);
+    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, { ...iconProps }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...restProps,
+        className: clsx(withBaseName(), className),
+        role: "presentation",
+        "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("value-container"), children: [
+            indicatorPosition === "start" && icon,
+            /* @__PURE__ */ jsx(
+              ValueComponent,
+              {
+                "data-testid": "metric-value",
+                id: valueId,
+                className: withBaseName("value"),
+                children: value
+              }
+            ),
+            indicatorPosition === "end" && icon
+          ] }),
+          subvalue && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: withBaseName("subvalue"),
+              "data-testid": "metric-subvalue",
+              children: subvalue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { MetricContent };
+//# sourceMappingURL=MetricContent.js.map

package/dist-es/metric/MetricContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  makePrefixer,\n  Text,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, forwardRef, type HTMLAttributes } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport metricContentCss from \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-content\",\n      css: metricContentCss,\n      window: targetWindow,\n    });\n\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        role=\"presentation\"\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MetricContent","metricContentCss"],"mappings":";;;;;;;;;;AAuCA,MAAM,gBAAA,GAAmB;AAAA,EACvB,IAAA,EAAM,aAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA,GAAO,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,QACE,gBAAA,EAAiB;AAErB,IAAA,MAAM,QAAA,GAAW,IAAA,KAAS,OAAA,GAAU,CAAA,GAAI,CAAA;AAExC,IAAA,MAAM,iBAAA,GAAoB;AAAA,MACxB,KAAA,EAAO,QAAA;AAAA,MACP,MAAA,EAAQ,QAAA;AAAA,MACR,KAAA,EAAO;AAAA,KACT;AACA,IAAA,MAAM,cAAA,GAAiB,kBAAkB,IAAI,CAAA;AAE7C,IAAA,MAAM,SAAA,GAAY;AAAA,MAChB,YAAA,EAAc,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAA,EAAM,SAAA,GAAY,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,GAAK,EAAA;AAAA,MAC5C,IAAA,EAAM,QAAA;AAAA,MACN,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,aAAA,GACJ,sBAAA,KACC,SAAA,GAAY,gBAAA,CAAiB,SAAS,CAAA,GAAI,MAAA,CAAA;AAE7C,IAAA,MAAM,OACJ,aAAA,IAAiB,aAAA,uBAAiB,aAAA,EAAA,EAAe,GAAG,WAAW,CAAA,GAAK,IAAA;AAEtE,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAK,cAAA;AAAA,QACL,mBAAiB,CAAA,EAAG,OAAA,IAAW,EAAE,CAAA,CAAA,EAAI,cAAc,EAAE,CAAA,CAAA;AAAA,QACrD,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,iBAAiB,CAAA,EAC3C,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAA,IAAW,IAAA;AAAA,4BAClC,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,cAAA;AAAA,gBACZ,EAAA,EAAI,OAAA;AAAA,gBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,gBAE9B,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,sBAAsB,KAAA,IAAS;AAAA,WAAA,EAClC,CAAA;AAAA,UACC,QAAA,oBACC,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,aAAA,EAAY,iBAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist-es/metric/MetricHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricHeader.css.js.map

package/dist-es/metric/MetricHeader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}