@umodeapporg/ui 0.1.0

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,25 @@
+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;
+    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,163 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import classNames from "classnames";
+import { Link } from "react-router-dom";
+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",
+  actionHref,
+  className,
+  actionButton,
+  actionButtonLabel,
+  showActionButton = false,
+  onAction,
+  useScroll = false,
+  loading = false,
+  children,
+  onSecondarySlot,
+  infoTooltip
+}) => {
+  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(Link, { to: actionHref, children: /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  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,
+                {
+                  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 { Link } from 'react-router-dom';\n\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  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  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 [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                  <Link to={actionHref}>\n                    <ControlledButton\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                  </Link>\n                )}\n\n                {onAction && (\n                  <ControlledButton\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":"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"}

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;

package/dist/components/UI/BulkActionBar.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledButton from "../Form/ControlledButton.js";
+import OutlinedChip from "./Chips/OutlinedChip.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import HorizontalScrollArea from "./HorizontalScrollArea.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const TONE_CLASSES = {
+  primary: {
+    enabled: "bg-brand text-brand-fg hover:bg-brand-hover",
+    disabled: "cursor-not-allowed bg-muted-hover text-foreground-faint"
+  },
+  neutral: {
+    enabled: "border border-border text-foreground-muted hover:bg-muted-hover",
+    disabled: "cursor-not-allowed border border-border text-foreground-faint"
+  },
+  danger: {
+    enabled: "border border-danger-border text-danger-emphasis hover:bg-danger-soft",
+    disabled: "cursor-not-allowed border border-border text-foreground-faint"
+  }
+};
+const BulkActionBar = ({
+  count,
+  countLabel,
+  hintLabel,
+  selectAll,
+  actions,
+  closeTooltip,
+  onClose,
+  className
+}) => {
+  const renderAction = (action) => {
+    const tone = TONE_CLASSES[action.tone ?? "primary"];
+    const button = /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        disabled: action.disabled,
+        onClick: action.onClick,
+        className: classNames(
+          "flex h-9 shrink-0 items-center gap-x-1.5 rounded-lg px-3 text-sm font-medium transition-colors",
+          action.disabled ? tone.disabled : tone.enabled
+        ),
+        children: [
+          /* @__PURE__ */ jsx(MaterialSymbol, { icon: action.icon, size: 17 }),
+          action.label
+        ]
+      }
+    );
+    if (action.disabled && action.tooltip) {
+      return /* @__PURE__ */ jsx(ControlledTooltip, { content: action.tooltip, className: "w-52 text-center", children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: button }) }, action.key);
+    }
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex", children: button }, action.key);
+  };
+  return (
+    // The bar is capped to the viewport, so on a narrow screen its actions used to
+    // be clipped past the cap with no way to reach them. It now scrolls inside that
+    // cap: every action stays reachable and the bar keeps its single-line shape.
+    /* @__PURE__ */ jsx(
+      HorizontalScrollArea,
+      {
+        containerClassName: classNames(
+          "pointer-events-auto max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-lg",
+          className
+        ),
+        className: "py-1.5 pl-2 pr-1.5",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex w-max items-center gap-2 whitespace-nowrap", children: [
+          selectAll && /* @__PURE__ */ jsx(ControlledTooltip, { content: selectAll.tooltip, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              disabled: selectAll.disabled,
+              onClick: selectAll.onToggle,
+              className: "flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-muted-hover disabled:hover:bg-transparent",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "flex size-5 items-center justify-center rounded-md border-2 transition-colors",
+                    selectAll.allSelected ? "border-brand bg-brand text-brand-fg" : "border-border-emphasis bg-surface text-transparent",
+                    selectAll.disabled && "border-border"
+                  ),
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 14 })
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 items-center gap-2 pr-1 text-sm text-foreground-muted", children: count > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              OutlinedChip,
+              {
+                count,
+                tone: "purple",
+                variant: "soft",
+                size: "sm",
+                className: "size-6 shrink-0 bg-brand-soft px-0",
+                labelClassName: "font-bold text-brand-emphasis"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: countLabel })
+          ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-foreground-subtle", children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { icon: "touch_app", size: 16, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: hintLabel ?? countLabel })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "h-5 w-px shrink-0 bg-muted-active" }),
+          actions.map(renderAction),
+          /* @__PURE__ */ jsx("div", { className: "h-5 w-px shrink-0 bg-muted-active" }),
+          /* @__PURE__ */ jsx(ControlledTooltip, { content: closeTooltip, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              onClick: onClose,
+              className: "flex size-9 items-center justify-center rounded-lg text-foreground-subtle transition-colors hover:bg-muted-hover",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 18 })
+            }
+          ) }) })
+        ] })
+      }
+    )
+  );
+};
+export {
+  BulkActionBar as default
+};
+//# sourceMappingURL=BulkActionBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActionBar.js","sources":["../../../src/components/UI/BulkActionBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport HorizontalScrollArea from '@/components/UI/HorizontalScrollArea';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nexport type TBulkActionTone = 'primary' | 'neutral' | 'danger';\n\nexport interface IBulkAction {\n  key: string;\n  label: string;\n  icon: SymbolCodepoints;\n  onClick: () => void;\n  tone?: TBulkActionTone;\n  disabled?: boolean;\n  /** Explica o bloqueio quando a ação está desabilitada. */\n  tooltip?: string;\n}\n\nexport interface IBulkActionBarSelectAll {\n  allSelected: boolean;\n  tooltip: string;\n  onToggle: () => void;\n  disabled?: boolean;\n}\n\ninterface IBulkActionBarProps {\n  count: number;\n  countLabel: string;\n  /** Texto exibido quando nada está selecionado (a barra continua visível guiando o usuário). */\n  hintLabel?: string;\n  selectAll?: IBulkActionBarSelectAll;\n  actions: Array<IBulkAction>;\n  closeTooltip: string;\n  onClose: () => void;\n  className?: string;\n}\n\nconst TONE_CLASSES: Record<TBulkActionTone, { enabled: string; disabled: string }> = {\n  primary: {\n    enabled: 'bg-brand text-brand-fg hover:bg-brand-hover',\n    disabled: 'cursor-not-allowed bg-muted-hover text-foreground-faint',\n  },\n  neutral: {\n    enabled: 'border border-border text-foreground-muted hover:bg-muted-hover',\n    disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n  },\n  danger: {\n    enabled: 'border border-danger-border text-danger-emphasis hover:bg-danger-soft',\n    disabled: 'cursor-not-allowed border border-border text-foreground-faint',\n  },\n};\n\n/**\n * Barra de ações em lote compartilhada (seleção do canvas do criAI, seleção do mapa de produtos).\n * As ações são declarativas para que cada superfície acrescente as suas sem forkar o visual.\n */\nconst BulkActionBar: React.FC<IBulkActionBarProps> = ({\n  count,\n  countLabel,\n  hintLabel,\n  selectAll,\n  actions,\n  closeTooltip,\n  onClose,\n  className,\n}) => {\n  const renderAction = (action: IBulkAction) => {\n    const tone = TONE_CLASSES[action.tone ?? 'primary'];\n\n    const button = (\n      <ControlledButton\n        defaultHtmlButton\n        disabled={action.disabled}\n        onClick={action.onClick}\n        className={classNames(\n          'flex h-9 shrink-0 items-center gap-x-1.5 rounded-lg px-3 text-sm font-medium transition-colors',\n          action.disabled ? tone.disabled : tone.enabled,\n        )}\n      >\n        <MaterialSymbol icon={action.icon} size={17} />\n        {action.label}\n      </ControlledButton>\n    );\n\n    if (action.disabled && action.tooltip) {\n      return (\n        <ControlledTooltip key={action.key} content={action.tooltip} className=\"w-52 text-center\">\n          <span className=\"inline-flex\">{button}</span>\n        </ControlledTooltip>\n      );\n    }\n\n    return (\n      <span key={action.key} className=\"inline-flex\">\n        {button}\n      </span>\n    );\n  };\n\n  return (\n    // The bar is capped to the viewport, so on a narrow screen its actions used to\n    // be clipped past the cap with no way to reach them. It now scrolls inside that\n    // cap: every action stays reachable and the bar keeps its single-line shape.\n    <HorizontalScrollArea\n      containerClassName={classNames(\n        'pointer-events-auto max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-lg',\n        className,\n      )}\n      className=\"py-1.5 pl-2 pr-1.5\"\n    >\n      <div className=\"flex w-max items-center gap-2 whitespace-nowrap\">\n        {selectAll && (\n          <ControlledTooltip content={selectAll.tooltip}>\n            <span className=\"inline-flex\">\n              <ControlledButton\n                defaultHtmlButton\n                disabled={selectAll.disabled}\n                onClick={selectAll.onToggle}\n                className=\"flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:bg-muted-hover disabled:hover:bg-transparent\"\n              >\n                <span\n                  className={classNames(\n                    'flex size-5 items-center justify-center rounded-md border-2 transition-colors',\n                    selectAll.allSelected\n                      ? 'border-brand bg-brand text-brand-fg'\n                      : 'border-border-emphasis bg-surface text-transparent',\n                    selectAll.disabled && 'border-border',\n                  )}\n                >\n                  <MaterialSymbol icon=\"check\" size={14} />\n                </span>\n              </ControlledButton>\n            </span>\n          </ControlledTooltip>\n        )}\n\n        <span className=\"flex min-w-0 items-center gap-2 pr-1 text-sm text-foreground-muted\">\n          {count > 0 ? (\n            <>\n              <OutlinedChip\n                count={count}\n                tone=\"purple\"\n                variant=\"soft\"\n                size=\"sm\"\n                className=\"size-6 shrink-0 bg-brand-soft px-0\"\n                labelClassName=\"font-bold text-brand-emphasis\"\n              />\n              <span className=\"truncate\">{countLabel}</span>\n            </>\n          ) : (\n            <span className=\"flex min-w-0 items-center gap-1.5 text-foreground-subtle\">\n              <MaterialSymbol icon=\"touch_app\" size={16} className=\"shrink-0\" />\n              <span className=\"truncate\">{hintLabel ?? countLabel}</span>\n            </span>\n          )}\n        </span>\n\n        <div className=\"h-5 w-px shrink-0 bg-muted-active\" />\n\n        {actions.map(renderAction)}\n\n        <div className=\"h-5 w-px shrink-0 bg-muted-active\" />\n\n        <ControlledTooltip content={closeTooltip}>\n          <span className=\"inline-flex\">\n            <ControlledButton\n              defaultHtmlButton\n              onClick={onClose}\n              className=\"flex size-9 items-center justify-center rounded-lg text-foreground-subtle transition-colors hover:bg-muted-hover\"\n            >\n              <MaterialSymbol icon=\"close\" size={18} />\n            </ControlledButton>\n          </span>\n        </ControlledTooltip>\n      </div>\n    </HorizontalScrollArea>\n  );\n};\n\nexport default BulkActionBar;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Chips/OutlinedChip.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+import { IFilterOption } from '../../../interfaces/IFilterOption';
+import { SymbolCodepoints } from '../../UI/MaterialSymbol';
+import { TChipSize, TChipTone, TChipVariant } from './chipTones';
+export interface IOutlinedChipDropdownOption extends IFilterOption {
+    /** Cabeçalho de grupo não selecionável, renderizado acima dos filhos recuados. */
+    isGroupHeading?: boolean;
+    /** Recuo de filho sob o cabeçalho do grupo. */
+    isGroupChild?: boolean;
+}
+interface IOutlinedChipProps {
+    label?: string;
+    count?: number;
+    tone?: TChipTone;
+    variant?: TChipVariant;
+    size?: TChipSize;
+    dot?: boolean;
+    dotColor?: string;
+    className?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    preserveLabelCase?: boolean;
+    truncate?: boolean;
+    backgroundColor?: string;
+    chipIcon?: SymbolCodepoints;
+    chipIconSize?: number;
+    trailingIcon?: SymbolCodepoints;
+    loading?: boolean;
+    tooltip?: string;
+    dotClassName?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    useAsDropdown?: boolean;
+    dropdownOptions?: Array<IOutlinedChipDropdownOption>;
+    dropdownCallback?: (option: IFilterOption) => void;
+    dropdownSelectedValue?: string;
+    dropdownMenuClassName?: string;
+    canClose?: boolean;
+    onClose?: (event: React.MouseEvent) => void;
+}
+declare const OutlinedChip: React.FC<IOutlinedChipProps>;
+export default OutlinedChip;

package/dist/components/UI/Chips/OutlinedChip.js

@@ -0,0 +1,183 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import ControlledButton from "../../Form/ControlledButton.js";
+import { ControlledMenuHandler, ControlledMenuRoot, ControlledMenuList, ControlledMenuItem } from "../ControlledMenu.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { capitalizeAllLetters } from "../../../helpers/stringHelpers.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { resolveChipToneClass, resolveChipDotClass } from "./chipTones.js";
+const CHIP_PADDING_CLASS = {
+  xs: "px-2.5 py-0.5",
+  sm: "px-2.5 py-0.5",
+  md: "px-3 py-1"
+};
+const CHIP_LABEL_SIZE_CLASS = {
+  xs: "text-xxs",
+  sm: "text-xs",
+  md: "text-sm"
+};
+const OutlinedChip = ({
+  label,
+  count,
+  tone,
+  variant = "soft",
+  size = "xs",
+  dot = false,
+  dotColor,
+  className,
+  wrapperClassName,
+  labelClassName,
+  preserveLabelCase = false,
+  truncate = false,
+  backgroundColor,
+  chipIcon,
+  chipIconSize = 16,
+  trailingIcon,
+  loading = false,
+  tooltip,
+  dotClassName,
+  onClick,
+  disabled = false,
+  useAsDropdown = false,
+  dropdownOptions = [],
+  dropdownCallback,
+  dropdownSelectedValue,
+  dropdownMenuClassName,
+  canClose = false,
+  onClose
+}) => {
+  const { t } = useTranslation("ui");
+  const [open, setOpen] = useState(false);
+  const hasCount = count !== void 0 && count !== null;
+  if (!label && !hasCount) return null;
+  const isCountOnly = hasCount && !label;
+  const displayLabel = isCountOnly ? String(count) : preserveLabelCase ? label : capitalizeAllLetters(label ?? "");
+  const toneClass = tone ? resolveChipToneClass(tone, variant) : void 0;
+  const resolvedDotClass = dotClassName ?? (dot && tone ? resolveChipDotClass(tone) : void 0);
+  const inlineStyle = backgroundColor ? { backgroundColor } : void 0;
+  const leadingDot = resolvedDotClass || dotColor ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames("size-1.5 shrink-0 rounded-full", resolvedDotClass),
+      style: dotColor ? { backgroundColor: dotColor } : void 0
+    }
+  ) : null;
+  const leadingIcon = loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, className: "shrink-0" }) : chipIcon ? /* @__PURE__ */ jsx(MaterialSymbol, { icon: chipIcon, size: chipIconSize }) : null;
+  if (useAsDropdown && !disabled) {
+    const handler = /* @__PURE__ */ jsx(ControlledMenuHandler, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: (event) => event.stopPropagation(),
+        className: twMerge(
+          classNames(
+            "flex cursor-pointer items-center justify-center gap-x-1 truncate rounded-full font-semibold transition-opacity hover:opacity-80",
+            CHIP_PADDING_CLASS[size],
+            CHIP_LABEL_SIZE_CLASS[size],
+            toneClass
+          ),
+          className
+        ),
+        style: inlineStyle,
+        children: [
+          leadingDot,
+          leadingIcon,
+          displayLabel,
+          /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_drop_down", size: 16 })
+        ]
+      }
+    ) });
+    return /* @__PURE__ */ jsxs(ControlledMenuRoot, { open, handler: setOpen, placement: "bottom-start", children: [
+      tooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltip, children: handler }) : handler,
+      /* @__PURE__ */ jsx(
+        ControlledMenuList,
+        {
+          className: twMerge("zIndexMax max-h-72 min-w-[12rem] overflow-y-auto", dropdownMenuClassName),
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          children: (dropdownOptions ?? []).map((option) => {
+            if (option.isGroupHeading) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "select-none px-3 pb-1 pt-2 text-xs font-semibold text-foreground-muted",
+                  children: preserveLabelCase ? option.label : capitalizeAllLetters(option.label)
+                },
+                option.value
+              );
+            }
+            const menuItem = /* @__PURE__ */ jsx(
+              ControlledMenuItem,
+              {
+                disabled: option.disabled,
+                onClick: () => {
+                  dropdownCallback?.(option);
+                  setOpen(false);
+                },
+                className: classNames("text-sm text-foreground", {
+                  "bg-muted-active font-semibold hover:bg-muted-active focus:bg-muted-active": dropdownSelectedValue === option.value,
+                  "pl-7": option.isGroupChild
+                }),
+                children: preserveLabelCase ? option.label : capitalizeAllLetters(option.label)
+              }
+            );
+            return option.tooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: option.tooltip, className: "z-[9999] max-w-64", children: /* @__PURE__ */ jsx("div", { children: menuItem }) }, option.value) : /* @__PURE__ */ jsx(React.Fragment, { children: menuItem }, option.value);
+          })
+        }
+      )
+    ] });
+  }
+  const containerClass = twMerge(
+    classNames(
+      "flex items-center gap-x-1 rounded-full text-center",
+      CHIP_PADDING_CLASS[size],
+      isCountOnly ? "min-w-5 justify-center" : "min-w-14",
+      toneClass,
+      {
+        "justify-between": canClose && onClose,
+        "justify-center": !canClose && !onClose && !isCountOnly,
+        "cursor-default opacity-70": disabled,
+        "transition-opacity hover:opacity-80": onClick && !disabled
+      }
+    ),
+    className
+  );
+  const chipInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingDot,
+    leadingIcon,
+    /* @__PURE__ */ jsx("span", { className: twMerge(classNames("font-semibold", CHIP_LABEL_SIZE_CLASS[size], { truncate }), labelClassName), children: displayLabel }),
+    trailingIcon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: trailingIcon, size: chipIconSize }),
+    canClose && onClose && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.remove"), children: /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon: "close",
+        size: 16,
+        onClick: (event) => {
+          event.stopPropagation();
+          onClose(event);
+        }
+      }
+    ) })
+  ] });
+  const chip = onClick ? /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      defaultHtmlButton: true,
+      className: containerClass,
+      style: inlineStyle,
+      onClick,
+      disabled,
+      children: chipInner
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: containerClass, style: inlineStyle, children: chipInner });
+  if (!tooltip) return chip;
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltip, children: /* @__PURE__ */ jsx("div", { className: twMerge("inline-flex", wrapperClassName), children: chip }) });
+};
+export {
+  OutlinedChip as default
+};
+//# sourceMappingURL=OutlinedChip.js.map