@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Shell/useSidebarState.js

@@ -0,0 +1,106 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { writeUiPreference, readUiPreference } from "../../helpers/uiPreferences.js";
+import { useMobile } from "../../hooks/useMobile.js";
+const HOVER_OPEN_DELAY_MS = 250;
+const HOVER_CLOSE_DELAY_MS = 250;
+const PIN_STORAGE_KEY = "sidebar_pinned";
+const TOGGLE_SHORTCUT_KEY = "\\";
+const readPinnedPreference = () => readUiPreference(PIN_STORAGE_KEY) ?? false;
+const useSidebarState = () => {
+  const isMobile = useMobile();
+  const [isPinned, setIsPinned] = useState(readPinnedPreference);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const clearTimers = useCallback(() => {
+    clearOpenTimer();
+    clearCloseTimer();
+  }, [clearOpenTimer, clearCloseTimer]);
+  const persistPinned = useCallback((next) => {
+    setIsPinned(next);
+    writeUiPreference(PIN_STORAGE_KEY, next);
+  }, []);
+  const togglePrimary = useCallback(() => {
+    clearTimers();
+    if (isMobile) {
+      setIsMobileOpen((open) => !open);
+      return;
+    }
+    setIsHovering(false);
+    persistPinned(!isPinned);
+  }, [clearTimers, isMobile, isPinned, persistPinned]);
+  const onHoverEnter = useCallback(() => {
+    if (isMobile || isPinned) return;
+    clearCloseTimer();
+    if (isHovering || openTimerRef.current !== null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = null;
+      setIsHovering(true);
+    }, HOVER_OPEN_DELAY_MS);
+  }, [clearCloseTimer, isHovering, isMobile, isPinned]);
+  const onHoverLeave = useCallback(() => {
+    if (isMobile || isPinned) return;
+    clearOpenTimer();
+    if (closeTimerRef.current !== null) return;
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setIsHovering(false);
+    }, HOVER_CLOSE_DELAY_MS);
+  }, [clearOpenTimer, isMobile, isPinned]);
+  const closeMobileDrawer = useCallback(() => {
+    setIsMobileOpen(false);
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === TOGGLE_SHORTCUT_KEY) {
+        event.preventDefault();
+        togglePrimary();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [togglePrimary]);
+  useEffect(() => {
+    clearTimers();
+    setIsHovering(false);
+    setIsMobileOpen(false);
+  }, [isMobile, clearTimers]);
+  useEffect(() => clearTimers, [clearTimers]);
+  const isDocked = !isMobile && isPinned;
+  const isExpanded = isMobile ? isMobileOpen : isPinned || isHovering;
+  const isVisible = isMobile ? isMobileOpen : true;
+  const showRail = !isMobile && !isExpanded;
+  const isOverlayOnMobile = isMobile && isMobileOpen;
+  const willCollapse = isMobile ? isMobileOpen : isPinned;
+  const toggleLabelKey = willCollapse ? "sidebar.collapseSidebar" : "sidebar.openSidebar";
+  return {
+    isMobile,
+    isVisible,
+    isExpanded,
+    isDocked,
+    isOverlayOnMobile,
+    showRail,
+    toggleLabelKey,
+    togglePrimary,
+    onHoverEnter,
+    onHoverLeave,
+    closeMobileDrawer
+  };
+};
+export {
+  useSidebarState
+};
+//# sourceMappingURL=useSidebarState.js.map

package/dist/components/Shell/useSidebarState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarState.js","sources":["../../../src/components/Shell/useSidebarState.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { readUiPreference, writeUiPreference } from '@/helpers/uiPreferences';\nimport { useMobile } from '@/hooks/useMobile';\n\nconst HOVER_OPEN_DELAY_MS = 250;\nconst HOVER_CLOSE_DELAY_MS = 250;\nconst PIN_STORAGE_KEY = 'sidebar_pinned';\nconst TOGGLE_SHORTCUT_KEY = '\\\\';\n\nconst readPinnedPreference = (): boolean => readUiPreference<boolean>(PIN_STORAGE_KEY) ?? false;\n\nexport interface ISidebarState {\n  isMobile: boolean;\n  isVisible: boolean;\n  isExpanded: boolean;\n  isDocked: boolean;\n  isOverlayOnMobile: boolean;\n  showRail: boolean;\n  toggleLabelKey: string;\n  togglePrimary: () => void;\n  onHoverEnter: () => void;\n  onHoverLeave: () => void;\n  closeMobileDrawer: () => void;\n}\n\nexport const useSidebarState = (): ISidebarState => {\n  const isMobile = useMobile();\n\n  const [isPinned, setIsPinned] = useState<boolean>(readPinnedPreference);\n  const [isHovering, setIsHovering] = useState(false);\n  const [isMobileOpen, setIsMobileOpen] = useState(false);\n\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const clearOpenTimer = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n  }, []);\n\n  const clearCloseTimer = useCallback(() => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  const clearTimers = useCallback(() => {\n    clearOpenTimer();\n    clearCloseTimer();\n  }, [clearOpenTimer, clearCloseTimer]);\n\n  const persistPinned = useCallback((next: boolean) => {\n    setIsPinned(next);\n    writeUiPreference(PIN_STORAGE_KEY, next);\n  }, []);\n\n  const togglePrimary = useCallback(() => {\n    clearTimers();\n    if (isMobile) {\n      setIsMobileOpen((open) => !open);\n      return;\n    }\n    setIsHovering(false);\n    persistPinned(!isPinned);\n  }, [clearTimers, isMobile, isPinned, persistPinned]);\n\n  const onHoverEnter = useCallback(() => {\n    if (isMobile || isPinned) return;\n    clearCloseTimer();\n    if (isHovering || openTimerRef.current !== null) return;\n    openTimerRef.current = window.setTimeout(() => {\n      openTimerRef.current = null;\n      setIsHovering(true);\n    }, HOVER_OPEN_DELAY_MS);\n  }, [clearCloseTimer, isHovering, isMobile, isPinned]);\n\n  const onHoverLeave = useCallback(() => {\n    if (isMobile || isPinned) return;\n    clearOpenTimer();\n    if (closeTimerRef.current !== null) return;\n    closeTimerRef.current = window.setTimeout(() => {\n      closeTimerRef.current = null;\n      setIsHovering(false);\n    }, HOVER_CLOSE_DELAY_MS);\n  }, [clearOpenTimer, isMobile, isPinned]);\n\n  const closeMobileDrawer = useCallback(() => {\n    setIsMobileOpen(false);\n  }, []);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if ((event.ctrlKey || event.metaKey) && event.key === TOGGLE_SHORTCUT_KEY) {\n        event.preventDefault();\n        togglePrimary();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [togglePrimary]);\n\n  useEffect(() => {\n    clearTimers();\n    setIsHovering(false);\n    setIsMobileOpen(false);\n  }, [isMobile, clearTimers]);\n\n  useEffect(() => clearTimers, [clearTimers]);\n\n  const isDocked = !isMobile && isPinned;\n  const isExpanded = isMobile ? isMobileOpen : isPinned || isHovering;\n  const isVisible = isMobile ? isMobileOpen : true;\n  const showRail = !isMobile && !isExpanded;\n  const isOverlayOnMobile = isMobile && isMobileOpen;\n  const willCollapse = isMobile ? isMobileOpen : isPinned;\n  const toggleLabelKey = willCollapse ? 'sidebar.collapseSidebar' : 'sidebar.openSidebar';\n\n  return {\n    isMobile,\n    isVisible,\n    isExpanded,\n    isDocked,\n    isOverlayOnMobile,\n    showRail,\n    toggleLabelKey,\n    togglePrimary,\n    onHoverEnter,\n    onHoverLeave,\n    closeMobileDrawer,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/AccordionIcon.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+interface IIconProps {
+    id: number;
+    open: number;
+    slot?: JSX.Element;
+    size?: number;
+    iconClassName?: string;
+}
+export declare function AccordionIcon({ id, open, slot, size, iconClassName }: IIconProps): JSX.Element;
+export {};

package/dist/components/UI/AccordionIcon.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+function AccordionIcon({ id, open, slot, size = 20, iconClassName }) {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-x-2", children: [
+    slot,
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: open === id ? t("accordion.hide") : t("accordion.expand"), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon: open === id ? "keyboard_arrow_up" : "keyboard_arrow_down",
+        size,
+        className: iconClassName
+      }
+    ) }) })
+  ] });
+}
+export {
+  AccordionIcon
+};
+//# sourceMappingURL=AccordionIcon.js.map

package/dist/components/UI/AccordionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIcon.js","sources":["../../../src/components/UI/AccordionIcon.tsx"],"sourcesContent":["import { JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IIconProps {\n  id: number;\n  open: number;\n  slot?: JSX.Element;\n  size?: number;\n  iconClassName?: string;\n}\n\nexport function AccordionIcon({ id, open, slot, size = 20, iconClassName }: IIconProps) {\n  const { t } = useTranslation('ui');\n\n  return (\n    <div className=\"flex flex-row gap-x-2\">\n      {slot}\n\n      <ControlledTooltip content={open === id ? t('accordion.hide') : t('accordion.expand')}>\n        <div>\n          <MaterialSymbol\n            icon={open === id ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            size={size}\n            className={iconClassName}\n          />\n        </div>\n      </ControlledTooltip>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAc,EAAE,IAAI,MAAM,MAAM,OAAO,IAAI,iBAA6B;AACtF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAA;AAAA,IAED,oBAAC,mBAAA,EAAkB,SAAS,SAAS,KAAK,EAAE,gBAAgB,IAAI,EAAE,kBAAkB,GAClF,UAAA,oBAAC,OAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS,KAAK,sBAAsB;AAAA,QAC1C;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IAAA,GAEf,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/UI/AlertInfo/dismissedAlertsStore.d.ts

@@ -0,0 +1,2 @@
+export declare const isAlertDismissed: (dismissKey: string) => boolean;
+export declare const markAlertDismissed: (dismissKey: string) => void;

package/dist/components/UI/AlertInfo/dismissedAlertsStore.js

@@ -0,0 +1,22 @@
+import { readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from "../../../helpers/uiPreferences.js";
+const DISMISSED_ALERTS_KEY = "dismissed_alerts";
+const scopedKey = (dismissKey) => {
+  const scopeId = resolveUiPreferenceScopeId();
+  return scopeId ? `${scopeId}:${dismissKey}` : null;
+};
+const readStore = () => readUiPreference(DISMISSED_ALERTS_KEY) ?? {};
+const isAlertDismissed = (dismissKey) => {
+  const key = scopedKey(dismissKey);
+  return key ? readStore()[key] === true : false;
+};
+const markAlertDismissed = (dismissKey) => {
+  const key = scopedKey(dismissKey);
+  if (!key) return;
+  const store = readStore();
+  writeUiPreference(DISMISSED_ALERTS_KEY, { ...store, [key]: true });
+};
+export {
+  isAlertDismissed,
+  markAlertDismissed
+};
+//# sourceMappingURL=dismissedAlertsStore.js.map

package/dist/components/UI/AlertInfo/dismissedAlertsStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissedAlertsStore.js","sources":["../../../../src/components/UI/AlertInfo/dismissedAlertsStore.ts"],"sourcesContent":["import { readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from '@/helpers/uiPreferences';\n\n// Single consolidated entry for every dismissible alert, mirroring the DataTable\n// columns store. Each dismissal is keyed by `${scopeId}:${dismissKey}` so the\n// preference is scoped per user and per alert on a shared browser profile.\nconst DISMISSED_ALERTS_KEY = 'dismissed_alerts';\n\ntype TDismissedAlertsStore = Record<string, boolean>;\n\n// Returns null when there is no scope (no authenticated user), so the preference is\n// never written to (or read from) a shared bucket that would collide across accounts.\nconst scopedKey = (dismissKey: string): string | null => {\n  const scopeId = resolveUiPreferenceScopeId();\n  return scopeId ? `${scopeId}:${dismissKey}` : null;\n};\n\nconst readStore = (): TDismissedAlertsStore => readUiPreference<TDismissedAlertsStore>(DISMISSED_ALERTS_KEY) ?? {};\n\nexport const isAlertDismissed = (dismissKey: string): boolean => {\n  const key = scopedKey(dismissKey);\n  return key ? readStore()[key] === true : false;\n};\n\nexport const markAlertDismissed = (dismissKey: string): void => {\n  const key = scopedKey(dismissKey);\n  if (!key) return;\n\n  const store = readStore();\n  writeUiPreference(DISMISSED_ALERTS_KEY, { ...store, [key]: true });\n};\n"],"names":[],"mappings":";AAKA,MAAM,uBAAuB;AAM7B,MAAM,YAAY,CAAC,eAAsC;AACvD,QAAM,UAAU,2BAAA;AAChB,SAAO,UAAU,GAAG,OAAO,IAAI,UAAU,KAAK;AAChD;AAEA,MAAM,YAAY,MAA6B,iBAAwC,oBAAoB,KAAK,CAAA;AAEzG,MAAM,mBAAmB,CAAC,eAAgC;AAC/D,QAAM,MAAM,UAAU,UAAU;AAChC,SAAO,MAAM,UAAA,EAAY,GAAG,MAAM,OAAO;AAC3C;AAEO,MAAM,qBAAqB,CAAC,eAA6B;AAC9D,QAAM,MAAM,UAAU,UAAU;AAChC,MAAI,CAAC,IAAK;AAEV,QAAM,QAAQ,UAAA;AACd,oBAAkB,sBAAsB,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,MAAM;AACnE;"}

package/dist/components/UI/AlertInfo/index.d.ts

@@ -0,0 +1,30 @@
+import { TChipTone } from '../Chips/chipTones';
+import { SymbolCodepoints } from '../MaterialSymbol';
+/** A chip is either a plain label (soft purple) or carries its own tone and icon. */
+export type TAlertInfoField = string | {
+    label: string;
+    tone?: TChipTone;
+    icon?: SymbolCodepoints;
+};
+interface IAlertInfoProps {
+    title: string;
+    description?: string;
+    /** System/native labels rendered as chips. Strings default to the purple tone. */
+    fields?: Array<TAlertInfoField>;
+    /** Default leading icon for every chip that does not set its own (e.g. a lock for immutable values). */
+    fieldsIcon?: SymbolCodepoints;
+    /** Caption rendered inline right after the chips. The consumer composes it from `t()`. */
+    fieldsNote?: React.ReactNode;
+    /** Closing line rendered below the chips. The consumer composes it from `t()`. */
+    footnote?: React.ReactNode;
+    /**
+     * When set, the alert renders a dismiss button and persists the dismissal per
+     * user under this key, so dismissing one alert never affects the others.
+     */
+    dismissKey?: string;
+    /** Accessible name for the dismiss button, always from `t()`. */
+    dismissLabel?: string;
+    className?: string;
+}
+declare const AlertInfo: React.FC<IAlertInfoProps>;
+export default AlertInfo;

package/dist/components/UI/AlertInfo/index.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { isAlertDismissed, markAlertDismissed } from "./dismissedAlertsStore.js";
+const AlertInfo = ({
+  title,
+  description,
+  fields,
+  fieldsIcon,
+  fieldsNote,
+  footnote,
+  dismissKey,
+  dismissLabel,
+  className
+}) => {
+  const [visible, setVisible] = useState(() => !(dismissKey && isAlertDismissed(dismissKey)));
+  const handleDismiss = useCallback(() => {
+    if (dismissKey) markAlertDismissed(dismissKey);
+    setVisible(false);
+  }, [dismissKey]);
+  if (!visible) return null;
+  const safeFields = (fields ?? []).map(
+    (field) => typeof field === "string" ? { label: field, tone: "purple", icon: fieldsIcon } : field
+  );
+  const dismissButton = dismissKey && dismissLabel ? /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      onClick: handleDismiss,
+      "aria-label": dismissLabel,
+      className: "interactive flex size-7 shrink-0 items-center justify-center rounded-lg text-brand-emphasis hover:bg-brand-soft",
+      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18 })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: classNames(
+        "flex items-start gap-3 rounded-xl border border-l-[3px] border-brand-border border-l-brand bg-brand-soft/50 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand text-brand-fg", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "info", size: 20 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-muted", children: description }),
+          safeFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1.5", children: [
+            safeFields.map((field) => /* @__PURE__ */ jsx(
+              OutlinedChip,
+              {
+                label: field.label,
+                tone: field.tone ?? "purple",
+                variant: "outlined",
+                size: "sm",
+                preserveLabelCase: true,
+                chipIcon: field.icon ?? fieldsIcon
+              },
+              field.label
+            )),
+            fieldsNote && /* @__PURE__ */ jsx("span", { className: "text-xs italic text-foreground-subtle", children: fieldsNote })
+          ] }),
+          footnote && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-muted", children: footnote })
+        ] }),
+        dismissButton && dismissLabel && /* @__PURE__ */ jsx(ControlledTooltip, { content: dismissLabel, children: dismissButton })
+      ]
+    }
+  );
+};
+export {
+  AlertInfo as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/AlertInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/UI/AlertInfo/index.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { TChipTone } from '@/components/UI/Chips/chipTones';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { isAlertDismissed, markAlertDismissed } from './dismissedAlertsStore';\n\n/** A chip is either a plain label (soft purple) or carries its own tone and icon. */\nexport type TAlertInfoField = string | { label: string; tone?: TChipTone; icon?: SymbolCodepoints };\n\ninterface IAlertInfoProps {\n  title: string;\n  description?: string;\n  /** System/native labels rendered as chips. Strings default to the purple tone. */\n  fields?: Array<TAlertInfoField>;\n  /** Default leading icon for every chip that does not set its own (e.g. a lock for immutable values). */\n  fieldsIcon?: SymbolCodepoints;\n  /** Caption rendered inline right after the chips. The consumer composes it from `t()`. */\n  fieldsNote?: React.ReactNode;\n  /** Closing line rendered below the chips. The consumer composes it from `t()`. */\n  footnote?: React.ReactNode;\n  /**\n   * When set, the alert renders a dismiss button and persists the dismissal per\n   * user under this key, so dismissing one alert never affects the others.\n   */\n  dismissKey?: string;\n  /** Accessible name for the dismiss button, always from `t()`. */\n  dismissLabel?: string;\n  className?: string;\n}\n\nconst AlertInfo: React.FC<IAlertInfoProps> = ({\n  title,\n  description,\n  fields,\n  fieldsIcon,\n  fieldsNote,\n  footnote,\n  dismissKey,\n  dismissLabel,\n  className,\n}) => {\n  const [visible, setVisible] = useState(() => !(dismissKey && isAlertDismissed(dismissKey)));\n\n  const handleDismiss = useCallback(() => {\n    if (dismissKey) markAlertDismissed(dismissKey);\n    setVisible(false);\n  }, [dismissKey]);\n\n  if (!visible) return null;\n\n  const safeFields = (fields ?? []).map((field) =>\n    typeof field === 'string' ? { label: field, tone: 'purple' as TChipTone, icon: fieldsIcon } : field,\n  );\n\n  const dismissButton =\n    dismissKey && dismissLabel ? (\n      <ControlledButton\n        defaultHtmlButton\n        onClick={handleDismiss}\n        aria-label={dismissLabel}\n        className=\"interactive flex size-7 shrink-0 items-center justify-center rounded-lg text-brand-emphasis hover:bg-brand-soft\"\n      >\n        <MaterialSymbol icon=\"close\" size={18} />\n      </ControlledButton>\n    ) : null;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={classNames(\n        'flex items-start gap-3 rounded-xl border border-l-[3px] border-brand-border border-l-brand bg-brand-soft/50 p-4',\n        className,\n      )}\n    >\n      <span aria-hidden className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand text-brand-fg\">\n        <MaterialSymbol icon=\"info\" size={20} />\n      </span>\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-y-2\">\n        <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n        {description && <p className=\"text-xs text-foreground-muted\">{description}</p>}\n\n        {safeFields.length > 0 && (\n          <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1.5\">\n            {safeFields.map((field) => (\n              <OutlinedChip\n                key={field.label}\n                label={field.label}\n                tone={field.tone ?? 'purple'}\n                variant=\"outlined\"\n                size=\"sm\"\n                preserveLabelCase\n                chipIcon={field.icon ?? fieldsIcon}\n              />\n            ))}\n            {fieldsNote && <span className=\"text-xs italic text-foreground-subtle\">{fieldsNote}</span>}\n          </div>\n        )}\n\n        {footnote && <p className=\"text-xs text-foreground-muted\">{footnote}</p>}\n      </div>\n\n      {dismissButton && dismissLabel && <ControlledTooltip content={dismissLabel}>{dismissButton}</ControlledTooltip>}\n    </div>\n  );\n};\n\nexport default AlertInfo;\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,YAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,EAAE,cAAc,iBAAiB,UAAU,EAAE;AAE1F,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,+BAA+B,UAAU;AAC7C,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,cAAc,UAAU,CAAA,GAAI;AAAA,IAAI,CAAC,UACrC,OAAO,UAAU,WAAW,EAAE,OAAO,OAAO,MAAM,UAAuB,MAAM,WAAA,IAAe;AAAA,EAAA;AAGhG,QAAM,gBACJ,cAAc,eACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA,IAEvC;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,sFAC1B,UAAA,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,GAAA,CAAI,GACxC;AAAA,QAEA,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,yCAAyC,UAAA,OAAM;AAAA,UAC3D,eAAe,oBAAC,KAAA,EAAE,WAAU,iCAAiC,UAAA,aAAY;AAAA,UAEzE,WAAW,SAAS,KACnB,qBAAC,OAAA,EAAI,WAAU,iDACZ,UAAA;AAAA,YAAA,WAAW,IAAI,CAAC,UACf;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,MAAM;AAAA,gBACb,MAAM,MAAM,QAAQ;AAAA,gBACpB,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,mBAAiB;AAAA,gBACjB,UAAU,MAAM,QAAQ;AAAA,cAAA;AAAA,cANnB,MAAM;AAAA,YAAA,CAQd;AAAA,YACA,cAAc,oBAAC,QAAA,EAAK,WAAU,yCAAyC,UAAA,WAAA,CAAW;AAAA,UAAA,GACrF;AAAA,UAGD,YAAY,oBAAC,KAAA,EAAE,WAAU,iCAAiC,UAAA,SAAA,CAAS;AAAA,QAAA,GACtE;AAAA,QAEC,iBAAiB,gBAAgB,oBAAC,mBAAA,EAAkB,SAAS,cAAe,UAAA,cAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjG;"}

package/dist/components/UI/BaseDataCard.d.ts

@@ -0,0 +1,27 @@
+import { SymbolCodepoints } from './MaterialSymbol';
+import * as React from 'react';
+interface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    smallTitle?: boolean;
+    titleIcon?: SymbolCodepoints | null;
+    titleClass?: string;
+    cardIcon?: SymbolCodepoints;
+    iconTooltip?: string;
+    iconColor?: string;
+    iconSize?: number;
+    itsClickable?: boolean;
+    actionIcon?: SymbolCodepoints;
+    /** Accessible name of the icon-only action; defaults to edit or view details by the icon. */
+    actionLabel?: string;
+    actionHref?: string;
+    actionButton?: () => void;
+    onAction?: () => void;
+    actionButtonLabel?: string;
+    showActionButton?: boolean;
+    useScroll?: boolean;
+    loading?: boolean;
+    onSecondarySlot?: React.ReactNode;
+    infoTooltip?: string;
+}
+declare const BaseDataCard: React.FC<IBaseDataCardProps>;
+export default BaseDataCard;

package/dist/components/UI/BaseDataCard.js

@@ -0,0 +1,170 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { uiLogger } from "../../helpers/uiLogger.js";
+import ControlledButton from "../Form/ControlledButton.js";
+import SkeletonLoading from "./SkeletonLoading.js";
+import CustomCard from "./CustomCard.js";
+const BaseDataCard = ({
+  title,
+  smallTitle,
+  titleIcon,
+  titleClass,
+  cardIcon,
+  iconTooltip,
+  itsClickable = false,
+  actionIcon = "edit",
+  actionLabel,
+  actionHref,
+  className,
+  actionButton,
+  actionButtonLabel,
+  showActionButton = false,
+  onAction,
+  useScroll = false,
+  loading = false,
+  children,
+  onSecondarySlot,
+  infoTooltip
+}) => {
+  const { t } = useTranslation("ui");
+  const { Link: NavigationLink } = useUiNavigation();
+  const resolvedActionLabel = actionLabel ?? t(actionIcon === "edit" ? "actions.edit" : "actions.viewDetails");
+  const [isArrowUpward, setIsArrowUpward] = useState(false);
+  const cardRef = useRef(null);
+  const handleActionClick = () => {
+    const newArrowUpwardState = !isArrowUpward;
+    setIsArrowUpward(newArrowUpwardState);
+    if (actionButton) {
+      actionButton();
+    }
+    if (!newArrowUpwardState && cardRef.current && useScroll) {
+      setTimeout(() => {
+        uiLogger.debug("Scrolling into view");
+        cardRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      }, 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    CustomCard,
+    {
+      className: classNames("overflow-y-hidden p-5 transition-colors", {
+        [`${className}`]: !!className,
+        "h-[30rem]": useScroll,
+        ["hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow"]: itsClickable
+      }),
+      customRef: cardRef,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-4" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5", children: [
+              titleIcon && (iconTooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: iconTooltip, className: "max-w-80", children: /* @__PURE__ */ jsx(
+                MaterialSymbol,
+                {
+                  icon: titleIcon,
+                  size: smallTitle ? 18 : 20,
+                  color: "rgb(var(--color-foreground-subtle))",
+                  className: "!hidden desktop:!block"
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                MaterialSymbol,
+                {
+                  icon: titleIcon,
+                  size: smallTitle ? 18 : 20,
+                  color: "rgb(var(--color-foreground-subtle))",
+                  className: "!hidden desktop:!block"
+                }
+              )),
+              title && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "font-semibold text-foreground",
+                    {
+                      "text-xs": smallTitle,
+                      "text-lg": !smallTitle
+                    },
+                    titleClass
+                  ),
+                  children: title
+                }
+              ),
+              infoTooltip && /* @__PURE__ */ jsx(ControlledTooltip, { content: infoTooltip, className: "max-w-80", children: /* @__PURE__ */ jsx(
+                MaterialSymbol,
+                {
+                  icon: "info",
+                  size: smallTitle ? 16 : 18,
+                  color: "rgb(var(--color-foreground-subtle))",
+                  className: "ml-1 cursor-help"
+                }
+              ) })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { type: "circle", className: "ml-3" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              actionHref && /* @__PURE__ */ jsx(NavigationLink, { to: actionHref, children: /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  "aria-label": resolvedActionLabel,
+                  defaultHtmlButton: true,
+                  onClick: onAction,
+                  className: "flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted",
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { color: "rgb(var(--color-primary))", icon: actionIcon })
+                }
+              ) }),
+              onAction && /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  "aria-label": resolvedActionLabel,
+                  defaultHtmlButton: true,
+                  onClick: onAction,
+                  className: "flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted",
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { color: "rgb(var(--color-primary))", icon: actionIcon })
+                }
+              ),
+              onSecondarySlot && /* @__PURE__ */ jsx(Fragment, { children: onSecondarySlot }),
+              cardIcon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: cardIcon, size: 25, color: "rgb(var(--color-primary))" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames("m-auto", {
+                "w-[90%]": useScroll,
+                "w-full": !useScroll
+              }),
+              children
+            }
+          )
+        ] }),
+        showActionButton && actionButtonLabel && /* @__PURE__ */ jsx("div", { className: "flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent", children: /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            className: "flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60",
+            onClick: handleActionClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                MaterialSymbol,
+                {
+                  icon: "arrow_downward",
+                  size: 20,
+                  color: "white",
+                  className: classNames("transition-transform duration-slow", {
+                    "rotate-180": isArrowUpward
+                  })
+                }
+              ),
+              actionButtonLabel
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  BaseDataCard as default
+};
+//# sourceMappingURL=BaseDataCard.js.map

package/dist/components/UI/BaseDataCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDataCard.js","sources":["../../../src/components/UI/BaseDataCard.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport SkeletonLoading from '../UI/SkeletonLoading';\n\nimport CustomCard from './CustomCard';\ninterface IBaseDataCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  smallTitle?: boolean;\n  titleIcon?: SymbolCodepoints | null;\n  titleClass?: string;\n  cardIcon?: SymbolCodepoints;\n  iconTooltip?: string;\n  iconColor?: string;\n  iconSize?: number;\n  itsClickable?: boolean;\n  actionIcon?: SymbolCodepoints;\n  /** Accessible name of the icon-only action; defaults to edit or view details by the icon. */\n  actionLabel?: string;\n  actionHref?: string;\n  actionButton?: () => void;\n  onAction?: () => void;\n  actionButtonLabel?: string;\n  showActionButton?: boolean;\n  useScroll?: boolean;\n  loading?: boolean;\n  onSecondarySlot?: React.ReactNode;\n  infoTooltip?: string;\n}\n\nconst BaseDataCard: React.FC<IBaseDataCardProps> = ({\n  title,\n  smallTitle,\n  titleIcon,\n  titleClass,\n  cardIcon,\n  iconTooltip,\n  itsClickable = false,\n  actionIcon = 'edit',\n  actionLabel,\n  actionHref,\n  className,\n  actionButton,\n  actionButtonLabel,\n  showActionButton = false,\n  onAction,\n  useScroll = false,\n  loading = false,\n  children,\n  onSecondarySlot,\n  infoTooltip,\n}) => {\n  const { t } = useTranslation('ui');\n  const { Link: NavigationLink } = useUiNavigation();\n  const resolvedActionLabel = actionLabel ?? t(actionIcon === 'edit' ? 'actions.edit' : 'actions.viewDetails');\n  const [isArrowUpward, setIsArrowUpward] = useState(false);\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const handleActionClick = () => {\n    const newArrowUpwardState = !isArrowUpward;\n    setIsArrowUpward(newArrowUpwardState);\n    if (actionButton) {\n      actionButton();\n    }\n    if (!newArrowUpwardState && cardRef.current && useScroll) {\n      setTimeout(() => {\n        uiLogger.debug('Scrolling into view');\n        cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }, 1);\n    }\n  };\n\n  return (\n    <CustomCard\n      className={classNames('overflow-y-hidden p-5 transition-colors', {\n        [`${className}`]: !!className,\n        'h-[30rem]': useScroll,\n        ['hover:transition-custom hover:ease-custom cursor-pointer hover:bg-success-soft hover:duration-slow']:\n          itsClickable,\n      })}\n      customRef={cardRef}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <div className=\"flex w-full items-center justify-between\">\n            {loading ? (\n              <SkeletonLoading className=\"!h-4\" />\n            ) : (\n              <div className=\"flex items-center gap-x-1.5\">\n                {titleIcon &&\n                  (iconTooltip ? (\n                    <ControlledTooltip content={iconTooltip} className=\"max-w-80\">\n                      <MaterialSymbol\n                        icon={titleIcon}\n                        size={smallTitle ? 18 : 20}\n                        color=\"rgb(var(--color-foreground-subtle))\"\n                        className=\"!hidden desktop:!block\"\n                      />\n                    </ControlledTooltip>\n                  ) : (\n                    <MaterialSymbol\n                      icon={titleIcon}\n                      size={smallTitle ? 18 : 20}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"!hidden desktop:!block\"\n                    />\n                  ))}\n\n                {title && (\n                  <span\n                    className={classNames(\n                      'font-semibold text-foreground',\n                      {\n                        'text-xs': smallTitle,\n                        'text-lg': !smallTitle,\n                      },\n                      titleClass,\n                    )}\n                  >\n                    {title}\n                  </span>\n                )}\n\n                {infoTooltip && (\n                  <ControlledTooltip content={infoTooltip} className=\"max-w-80\">\n                    <MaterialSymbol\n                      icon=\"info\"\n                      size={smallTitle ? 16 : 18}\n                      color=\"rgb(var(--color-foreground-subtle))\"\n                      className=\"ml-1 cursor-help\"\n                    />\n                  </ControlledTooltip>\n                )}\n              </div>\n            )}\n          </div>\n\n          <div>\n            {loading ? (\n              <SkeletonLoading type=\"circle\" className=\"ml-3\" />\n            ) : (\n              <div className=\"flex items-center space-x-2\">\n                {actionHref && (\n                  <NavigationLink to={actionHref}>\n                    <ControlledButton\n                      aria-label={resolvedActionLabel}\n                      defaultHtmlButton\n                      onClick={onAction}\n                      className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                    >\n                      <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                    </ControlledButton>\n                  </NavigationLink>\n                )}\n\n                {onAction && (\n                  <ControlledButton\n                    aria-label={resolvedActionLabel}\n                    defaultHtmlButton\n                    onClick={onAction}\n                    className=\"flex size-9 items-center justify-center rounded-full transition-colors hover:bg-muted\"\n                  >\n                    <MaterialSymbol color=\"rgb(var(--color-primary))\" icon={actionIcon} />\n                  </ControlledButton>\n                )}\n\n                {onSecondarySlot && <>{onSecondarySlot}</>}\n\n                {cardIcon && <MaterialSymbol icon={cardIcon} size={25} color=\"rgb(var(--color-primary))\" />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div\n          className={classNames('m-auto', {\n            'w-[90%]': useScroll,\n            'w-full': !useScroll,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n\n      {showActionButton && actionButtonLabel && (\n        <div className=\"flex h-20 w-full items-center justify-center rounded-md bg-gradient-to-t from-surface to-transparent\">\n          <ControlledButton\n            className=\"flex w-full max-w-full items-center justify-center gap-x-3 rounded-full px-4 py-2 text-sm font-semibold capitalize text-white tablet:w-60\"\n            onClick={handleActionClick}\n          >\n            <MaterialSymbol\n              icon=\"arrow_downward\"\n              size={20}\n              color=\"white\"\n              className={classNames('transition-transform duration-slow', {\n                'rotate-180': isArrowUpward,\n              })}\n            />\n\n            {actionButtonLabel}\n          </ControlledButton>\n        </div>\n      )}\n    </CustomCard>\n  );\n};\n\nexport default BaseDataCard;\n"],"names":[],"mappings":";;;;;;;;;;;AAsCA,MAAM,eAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,MAAM,eAAA,IAAmB,gBAAA;AACjC,QAAM,sBAAsB,eAAe,EAAE,eAAe,SAAS,iBAAiB,qBAAqB;AAC3G,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,oBAAoB,MAAM;AAC9B,UAAM,sBAAsB,CAAC;AAC7B,qBAAiB,mBAAmB;AACpC,QAAI,cAAc;AAChB,mBAAA;AAAA,IACF;AACA,QAAI,CAAC,uBAAuB,QAAQ,WAAW,WAAW;AACxD,iBAAW,MAAM;AACf,iBAAS,MAAM,qBAAqB;AACpC,gBAAQ,SAAS,eAAe,EAAE,UAAU,UAAU,OAAO,SAAS;AAAA,MACxE,GAAG,CAAC;AAAA,IACN;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,2CAA2C;AAAA,QAC/D,CAAC,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC;AAAA,QACpB,aAAa;AAAA,QACb,CAAC,oGAAoG,GACnG;AAAA,MAAA,CACH;AAAA,MACD,WAAW;AAAA,MAEX,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,UACC,oBAAC,iBAAA,EAAgB,WAAU,OAAA,CAAO,IAElC,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,cAAA,cACE,cACC,oBAAC,mBAAA,EAAkB,SAAS,aAAa,WAAU,YACjD,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,MAAM,aAAa,KAAK;AAAA,kBACxB,OAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA,GAEd,IAEA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,MAAM,aAAa,KAAK;AAAA,kBACxB,OAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIf,SACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,sBACE,WAAW;AAAA,sBACX,WAAW,CAAC;AAAA,oBAAA;AAAA,oBAEd;AAAA,kBAAA;AAAA,kBAGD,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIJ,eACC,oBAAC,mBAAA,EAAkB,SAAS,aAAa,WAAU,YACjD,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAM,aAAa,KAAK;AAAA,kBACxB,OAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA,EACZ,CACF;AAAA,YAAA,EAAA,CAEJ,EAAA,CAEJ;AAAA,YAEA,oBAAC,OAAA,EACE,UAAA,UACC,oBAAC,iBAAA,EAAgB,MAAK,UAAS,WAAU,OAAA,CAAO,IAEhD,qBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,cAAA,cACC,oBAAC,gBAAA,EAAe,IAAI,YAClB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,mBAAiB;AAAA,kBACjB,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,UAAA,oBAAC,gBAAA,EAAe,OAAM,6BAA4B,MAAM,WAAA,CAAY;AAAA,gBAAA;AAAA,cAAA,GAExE;AAAA,cAGD,YACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,mBAAiB;AAAA,kBACjB,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,UAAA,oBAAC,gBAAA,EAAe,OAAM,6BAA4B,MAAM,WAAA,CAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIvE,mDAAsB,UAAA,gBAAA,CAAgB;AAAA,cAEtC,gCAAa,gBAAA,EAAe,MAAM,UAAU,MAAM,IAAI,OAAM,4BAAA,CAA4B;AAAA,YAAA,EAAA,CAC3F,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,WAAW,UAAU;AAAA,gBAC9B,WAAW;AAAA,gBACX,UAAU,CAAC;AAAA,cAAA,CACZ;AAAA,cAEA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QAEC,oBAAoB,qBACnB,oBAAC,OAAA,EAAI,WAAU,wGACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YAET,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAM;AAAA,kBACN,WAAW,WAAW,sCAAsC;AAAA,oBAC1D,cAAc;AAAA,kBAAA,CACf;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/UI/BulkActionBar.d.ts

@@ -0,0 +1,35 @@
+import { SymbolCodepoints } from './MaterialSymbol';
+export type TBulkActionTone = 'primary' | 'neutral' | 'danger';
+export interface IBulkAction {
+    key: string;
+    label: string;
+    icon: SymbolCodepoints;
+    onClick: () => void;
+    tone?: TBulkActionTone;
+    disabled?: boolean;
+    /** Explica o bloqueio quando a ação está desabilitada. */
+    tooltip?: string;
+}
+export interface IBulkActionBarSelectAll {
+    allSelected: boolean;
+    tooltip: string;
+    onToggle: () => void;
+    disabled?: boolean;
+}
+interface IBulkActionBarProps {
+    count: number;
+    countLabel: string;
+    /** Texto exibido quando nada está selecionado (a barra continua visível guiando o usuário). */
+    hintLabel?: string;
+    selectAll?: IBulkActionBarSelectAll;
+    actions: Array<IBulkAction>;
+    closeTooltip: string;
+    onClose: () => void;
+    className?: string;
+}
+/**
+ * Barra de ações em lote compartilhada (seleção do canvas do criAI, seleção do mapa de produtos).
+ * As ações são declarativas para que cada superfície acrescente as suas sem forkar o visual.
+ */
+declare const BulkActionBar: React.FC<IBulkActionBarProps>;
+export default BulkActionBar;