@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/BulkActionBar.js

@@ -0,0 +1,127 @@
+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,
+            {
+              "aria-label": selectAll.tooltip,
+              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: "h-6 min-w-6 shrink-0 bg-brand-soft px-1",
+                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,
+            {
+              "aria-label": closeTooltip,
+              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                aria-label={selectAll.tooltip}\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=\"h-6 min-w-6 shrink-0 bg-brand-soft px-1\"\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              aria-label={closeTooltip}\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,190 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+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 { mergeClasses } from "../../../helpers/mergeClasses.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: mergeClasses(
+          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: mergeClasses("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 = mergeClasses(
+    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: mergeClasses(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,
+        "aria-label": t("actions.remove"),
+        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: mergeClasses("inline-flex", wrapperClassName), children: chip }) });
+};
+export {
+  OutlinedChip as default
+};
+//# sourceMappingURL=OutlinedChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinedChip.js","sources":["../../../../src/components/UI/Chips/OutlinedChip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport {\n  ControlledMenuHandler,\n  ControlledMenuItem,\n  ControlledMenuList,\n  ControlledMenuRoot,\n} from '@/components/UI/ControlledMenu';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { IFilterOption } from '../../../interfaces/IFilterOption';\nimport { MaterialSymbol, SymbolCodepoints } from '../../UI/MaterialSymbol';\n\nimport { resolveChipDotClass, resolveChipToneClass, TChipSize, TChipTone, TChipVariant } from './chipTones';\n\nconst CHIP_PADDING_CLASS: Record<TChipSize, string> = {\n  xs: 'px-2.5 py-0.5',\n  sm: 'px-2.5 py-0.5',\n  md: 'px-3 py-1',\n};\n\nconst CHIP_LABEL_SIZE_CLASS: Record<TChipSize, string> = {\n  xs: 'text-xxs',\n  sm: 'text-xs',\n  md: 'text-sm',\n};\n\nexport interface IOutlinedChipDropdownOption extends IFilterOption {\n  /** Cabeçalho de grupo não selecionável, renderizado acima dos filhos recuados. */\n  isGroupHeading?: boolean;\n  /** Recuo de filho sob o cabeçalho do grupo. */\n  isGroupChild?: boolean;\n}\n\ninterface IOutlinedChipProps {\n  label?: string;\n  count?: number;\n  tone?: TChipTone;\n  variant?: TChipVariant;\n  size?: TChipSize;\n  dot?: boolean;\n  dotColor?: string;\n  className?: string;\n  wrapperClassName?: string;\n  labelClassName?: string;\n  // Por padrão a label passa por capitalizeAllLetters. Use true quando o texto for um\n  // identificador literal (nome de tabela, coluna, chave) cujo caixa não pode ser alterado.\n  preserveLabelCase?: boolean;\n  truncate?: boolean;\n  backgroundColor?: string;\n  chipIcon?: SymbolCodepoints;\n  chipIconSize?: number;\n  trailingIcon?: SymbolCodepoints;\n  loading?: boolean;\n  tooltip?: string;\n  dotClassName?: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n  useAsDropdown?: boolean;\n  dropdownOptions?: Array<IOutlinedChipDropdownOption>;\n  dropdownCallback?: (option: IFilterOption) => void;\n  dropdownSelectedValue?: string;\n  dropdownMenuClassName?: string;\n  canClose?: boolean;\n  onClose?: (event: React.MouseEvent) => void;\n}\n\nconst OutlinedChip: React.FC<IOutlinedChipProps> = ({\n  label,\n  count,\n  tone,\n  variant = 'soft',\n  size = 'xs',\n  dot = false,\n  dotColor,\n  className,\n  wrapperClassName,\n  labelClassName,\n  preserveLabelCase = false,\n  truncate = false,\n  backgroundColor,\n  chipIcon,\n  chipIconSize = 16,\n  trailingIcon,\n  loading = false,\n  tooltip,\n  dotClassName,\n  onClick,\n  disabled = false,\n  useAsDropdown = false,\n  dropdownOptions = [],\n  dropdownCallback,\n  dropdownSelectedValue,\n  dropdownMenuClassName,\n  canClose = false,\n  onClose,\n}) => {\n  const { t } = useTranslation('ui');\n  const [open, setOpen] = useState(false);\n\n  const hasCount = count !== undefined && count !== null;\n  if (!label && !hasCount) return null;\n\n  const isCountOnly = hasCount && !label;\n  const displayLabel = isCountOnly ? String(count) : preserveLabelCase ? label : capitalizeAllLetters(label ?? '');\n\n  const toneClass = tone ? resolveChipToneClass(tone, variant) : undefined;\n  const resolvedDotClass = dotClassName ?? (dot && tone ? resolveChipDotClass(tone) : undefined);\n  const inlineStyle = backgroundColor ? { backgroundColor } : undefined;\n\n  const leadingDot =\n    resolvedDotClass || dotColor ? (\n      <span\n        className={classNames('size-1.5 shrink-0 rounded-full', resolvedDotClass)}\n        style={dotColor ? { backgroundColor: dotColor } : undefined}\n      />\n    ) : null;\n\n  const leadingIcon = loading ? (\n    <LoadingSpinner size={4} className=\"shrink-0\" />\n  ) : chipIcon ? (\n    <MaterialSymbol icon={chipIcon} size={chipIconSize} />\n  ) : null;\n\n  if (useAsDropdown && !disabled) {\n    const handler = (\n      <ControlledMenuHandler>\n        <div\n          onClick={(event: React.MouseEvent) => event.stopPropagation()}\n          className={mergeClasses(\n            classNames(\n              'flex cursor-pointer items-center justify-center gap-x-1 truncate rounded-full font-semibold transition-opacity hover:opacity-80',\n              CHIP_PADDING_CLASS[size],\n              CHIP_LABEL_SIZE_CLASS[size],\n              toneClass,\n            ),\n            className,\n          )}\n          style={inlineStyle}\n        >\n          {leadingDot}\n          {leadingIcon}\n          {displayLabel}\n          <MaterialSymbol icon=\"arrow_drop_down\" size={16} />\n        </div>\n      </ControlledMenuHandler>\n    );\n\n    return (\n      <ControlledMenuRoot open={open} handler={setOpen} placement=\"bottom-start\">\n        {tooltip ? <ControlledTooltip content={tooltip}>{handler}</ControlledTooltip> : handler}\n\n        <ControlledMenuList\n          className={mergeClasses('zIndexMax max-h-72 min-w-[12rem] overflow-y-auto', dropdownMenuClassName)}\n          onClick={(event: React.MouseEvent<HTMLDivElement>) => {\n            event.stopPropagation();\n          }}\n        >\n          {(dropdownOptions ?? []).map((option) => {\n            if (option.isGroupHeading) {\n              return (\n                <div\n                  key={option.value}\n                  className=\"select-none px-3 pb-1 pt-2 text-xs font-semibold text-foreground-muted\"\n                >\n                  {preserveLabelCase ? option.label : capitalizeAllLetters(option.label)}\n                </div>\n              );\n            }\n\n            const menuItem = (\n              <ControlledMenuItem\n                disabled={option.disabled}\n                onClick={() => {\n                  dropdownCallback?.(option);\n                  setOpen(false);\n                }}\n                className={classNames('text-sm text-foreground', {\n                  'bg-muted-active font-semibold hover:bg-muted-active focus:bg-muted-active':\n                    dropdownSelectedValue === option.value,\n                  'pl-7': option.isGroupChild,\n                })}\n              >\n                {preserveLabelCase ? option.label : capitalizeAllLetters(option.label)}\n              </ControlledMenuItem>\n            );\n\n            // A tooltip explains WHY an option is disabled; the wrapper div exists because the\n            // menu item does not forward its ref (the tooltip clones its child).\n            return option.tooltip ? (\n              <ControlledTooltip key={option.value} content={option.tooltip} className=\"z-[9999] max-w-64\">\n                <div>{menuItem}</div>\n              </ControlledTooltip>\n            ) : (\n              <React.Fragment key={option.value}>{menuItem}</React.Fragment>\n            );\n          })}\n        </ControlledMenuList>\n      </ControlledMenuRoot>\n    );\n  }\n\n  const containerClass = mergeClasses(\n    classNames(\n      'flex items-center gap-x-1 rounded-full text-center',\n      CHIP_PADDING_CLASS[size],\n      isCountOnly ? 'min-w-5 justify-center' : 'min-w-14',\n      toneClass,\n      {\n        'justify-between': canClose && onClose,\n        'justify-center': !canClose && !onClose && !isCountOnly,\n        'cursor-default opacity-70': disabled,\n        'transition-opacity hover:opacity-80': onClick && !disabled,\n      },\n    ),\n    className,\n  );\n\n  const chipInner = (\n    <>\n      {leadingDot}\n      {leadingIcon}\n      <span\n        className={mergeClasses(classNames('font-semibold', CHIP_LABEL_SIZE_CLASS[size], { truncate }), labelClassName)}\n      >\n        {displayLabel}\n      </span>\n      {trailingIcon && <MaterialSymbol icon={trailingIcon} size={chipIconSize} />}\n      {canClose && onClose && (\n        <ControlledTooltip content={t('actions.remove')}>\n          <MaterialSymbol\n            icon=\"close\"\n            size={16}\n            aria-label={t('actions.remove')}\n            onClick={(event: React.MouseEvent) => {\n              event.stopPropagation();\n              onClose(event);\n            }}\n          />\n        </ControlledTooltip>\n      )}\n    </>\n  );\n\n  const chip = onClick ? (\n    <ControlledButton\n      defaultHtmlButton\n      className={containerClass}\n      style={inlineStyle}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      {chipInner}\n    </ControlledButton>\n  ) : (\n    <div className={containerClass} style={inlineStyle}>\n      {chipInner}\n    </div>\n  );\n\n  if (!tooltip) return chip;\n\n  return (\n    <ControlledTooltip content={tooltip}>\n      <div className={mergeClasses('inline-flex', wrapperClassName)}>{chip}</div>\n    </ControlledTooltip>\n  );\n};\n\nexport default OutlinedChip;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+interface IStatusChipProps {
+    className?: string;
+    useIcon?: boolean;
+    statusId: number;
+    statusName?: string;
+}
+declare const StatusChip: React.FC<IStatusChipProps>;
+export default StatusChip;

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import OutlinedChip from "./OutlinedChip.js";
+const STATUS_CONFIG = {
+  1: { tone: "neutral", icon: "schedule", labelKey: "states.notStarted" },
+  2: { tone: "success", icon: "check", labelKey: "states.onTime" },
+  3: { tone: "danger", icon: "alarm", labelKey: "states.overdue" },
+  4: { tone: "success", icon: "check", labelKey: "states.completed" },
+  5: { tone: "warning", icon: "running_with_errors", labelKey: "states.atRisk" }
+};
+const StatusChip = ({ statusId, className, useIcon = true, statusName = "" }) => {
+  const { t } = useTranslation("ui");
+  const config = STATUS_CONFIG[statusId];
+  const label = config ? t(config.labelKey) : "";
+  if (statusName) {
+    return /* @__PURE__ */ jsx(OutlinedChip, { label, tone: "success", size: "sm", className });
+  }
+  if (!config) return null;
+  return /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label,
+      tone: config.tone,
+      size: "sm",
+      chipIcon: useIcon ? config.icon : void 0,
+      className
+    }
+  );
+};
+export {
+  StatusChip as default
+};
+//# sourceMappingURL=StatusChip.js.map

package/dist/components/UI/Chips/StatusChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip.js","sources":["../../../../src/components/UI/Chips/StatusChip.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport { SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { TChipTone } from './chipTones';\nimport OutlinedChip from './OutlinedChip';\n\ninterface IStatusChipProps {\n  className?: string;\n  useIcon?: boolean;\n  statusId: number;\n  statusName?: string;\n}\n\ninterface IStatusConfig {\n  tone: TChipTone;\n  icon: SymbolCodepoints;\n  labelKey: string;\n}\n\nconst STATUS_CONFIG: Record<number, IStatusConfig> = {\n  1: { tone: 'neutral', icon: 'schedule', labelKey: 'states.notStarted' },\n  2: { tone: 'success', icon: 'check', labelKey: 'states.onTime' },\n  3: { tone: 'danger', icon: 'alarm', labelKey: 'states.overdue' },\n  4: { tone: 'success', icon: 'check', labelKey: 'states.completed' },\n  5: { tone: 'warning', icon: 'running_with_errors', labelKey: 'states.atRisk' },\n};\n\nconst StatusChip: React.FC<IStatusChipProps> = ({ statusId, className, useIcon = true, statusName = '' }) => {\n  const { t } = useTranslation('ui');\n  const config = STATUS_CONFIG[statusId];\n  const label = config ? t(config.labelKey) : '';\n\n  if (statusName) {\n    return <OutlinedChip label={label} tone=\"success\" size=\"sm\" className={className} />;\n  }\n\n  if (!config) return null;\n\n  return (\n    <OutlinedChip\n      label={label}\n      tone={config.tone}\n      size=\"sm\"\n      chipIcon={useIcon ? config.icon : undefined}\n      className={className}\n    />\n  );\n};\n\nexport default StatusChip;\n"],"names":[],"mappings":";;;AAoBA,MAAM,gBAA+C;AAAA,EACnD,GAAG,EAAE,MAAM,WAAW,MAAM,YAAY,UAAU,oBAAA;AAAA,EAClD,GAAG,EAAE,MAAM,WAAW,MAAM,SAAS,UAAU,gBAAA;AAAA,EAC/C,GAAG,EAAE,MAAM,UAAU,MAAM,SAAS,UAAU,iBAAA;AAAA,EAC9C,GAAG,EAAE,MAAM,WAAW,MAAM,SAAS,UAAU,mBAAA;AAAA,EAC/C,GAAG,EAAE,MAAM,WAAW,MAAM,uBAAuB,UAAU,gBAAA;AAC/D;AAEA,MAAM,aAAyC,CAAC,EAAE,UAAU,WAAW,UAAU,MAAM,aAAa,SAAS;AAC3G,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,QAAQ,SAAS,EAAE,OAAO,QAAQ,IAAI;AAE5C,MAAI,YAAY;AACd,+BAAQ,cAAA,EAAa,OAAc,MAAK,WAAU,MAAK,MAAK,WAAsB;AAAA,EACpF;AAEA,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,UAAU,UAAU,OAAO,OAAO;AAAA,MAClC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,6 @@
+export type TChipTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo';
+export type TChipVariant = 'soft' | 'outlined' | 'solid';
+export type TChipSize = 'xs' | 'sm' | 'md';
+export declare const CHIP_TONE_VALUES: Array<TChipTone>;
+export declare const resolveChipToneClass: (tone: TChipTone, variant?: TChipVariant) => string;
+export declare const resolveChipDotClass: (tone: TChipTone) => string;

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

@@ -0,0 +1,53 @@
+const CHIP_TONES = {
+  neutral: {
+    soft: "bg-muted-hover text-foreground-muted",
+    outlined: "border border-border-emphasis bg-muted text-foreground-muted",
+    solid: "bg-foreground-subtle text-surface",
+    dot: "bg-foreground-faint"
+  },
+  success: {
+    soft: "bg-success-soft text-success-emphasis",
+    outlined: "border border-success-border bg-success-soft text-success-emphasis",
+    solid: "bg-success text-success-fg",
+    dot: "bg-success"
+  },
+  warning: {
+    soft: "bg-warning-soft text-warning-emphasis",
+    outlined: "border border-warning-border bg-warning-soft text-warning-emphasis",
+    solid: "bg-warning text-warning-fg",
+    dot: "bg-warning"
+  },
+  danger: {
+    soft: "bg-danger-soft text-danger-emphasis",
+    outlined: "border border-danger-border bg-danger-soft text-danger-emphasis",
+    solid: "bg-danger text-danger-fg",
+    dot: "bg-danger"
+  },
+  info: {
+    soft: "bg-info-soft text-info-emphasis",
+    outlined: "border border-info-border bg-info-soft text-info-emphasis",
+    solid: "bg-info text-info-fg",
+    dot: "bg-info"
+  },
+  purple: {
+    soft: "bg-brand-soft text-brand-emphasis",
+    outlined: "border border-brand-border bg-brand-soft text-brand-emphasis",
+    solid: "bg-brand text-brand-fg",
+    dot: "bg-brand"
+  },
+  indigo: {
+    soft: "bg-brand-soft text-brand-emphasis",
+    outlined: "border border-brand-border bg-brand-soft text-brand-emphasis",
+    solid: "bg-brand text-brand-fg",
+    dot: "bg-brand"
+  }
+};
+const CHIP_TONE_VALUES = Object.keys(CHIP_TONES);
+const resolveChipToneClass = (tone, variant = "soft") => CHIP_TONES[tone][variant];
+const resolveChipDotClass = (tone) => CHIP_TONES[tone].dot;
+export {
+  CHIP_TONE_VALUES,
+  resolveChipDotClass,
+  resolveChipToneClass
+};
+//# sourceMappingURL=chipTones.js.map

package/dist/components/UI/Chips/chipTones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipTones.js","sources":["../../../../src/components/UI/Chips/chipTones.ts"],"sourcesContent":["export type TChipTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo';\nexport type TChipVariant = 'soft' | 'outlined' | 'solid';\nexport type TChipSize = 'xs' | 'sm' | 'md';\n\ninterface IChipToneClasses {\n  soft: string;\n  outlined: string;\n  solid: string;\n  dot: string;\n}\n\nconst CHIP_TONES: Record<TChipTone, IChipToneClasses> = {\n  neutral: {\n    soft: 'bg-muted-hover text-foreground-muted',\n    outlined: 'border border-border-emphasis bg-muted text-foreground-muted',\n    solid: 'bg-foreground-subtle text-surface',\n    dot: 'bg-foreground-faint',\n  },\n  success: {\n    soft: 'bg-success-soft text-success-emphasis',\n    outlined: 'border border-success-border bg-success-soft text-success-emphasis',\n    solid: 'bg-success text-success-fg',\n    dot: 'bg-success',\n  },\n  warning: {\n    soft: 'bg-warning-soft text-warning-emphasis',\n    outlined: 'border border-warning-border bg-warning-soft text-warning-emphasis',\n    solid: 'bg-warning text-warning-fg',\n    dot: 'bg-warning',\n  },\n  danger: {\n    soft: 'bg-danger-soft text-danger-emphasis',\n    outlined: 'border border-danger-border bg-danger-soft text-danger-emphasis',\n    solid: 'bg-danger text-danger-fg',\n    dot: 'bg-danger',\n  },\n  info: {\n    soft: 'bg-info-soft text-info-emphasis',\n    outlined: 'border border-info-border bg-info-soft text-info-emphasis',\n    solid: 'bg-info text-info-fg',\n    dot: 'bg-info',\n  },\n  purple: {\n    soft: 'bg-brand-soft text-brand-emphasis',\n    outlined: 'border border-brand-border bg-brand-soft text-brand-emphasis',\n    solid: 'bg-brand text-brand-fg',\n    dot: 'bg-brand',\n  },\n  indigo: {\n    soft: 'bg-brand-soft text-brand-emphasis',\n    outlined: 'border border-brand-border bg-brand-soft text-brand-emphasis',\n    solid: 'bg-brand text-brand-fg',\n    dot: 'bg-brand',\n  },\n};\n\nexport const CHIP_TONE_VALUES = Object.keys(CHIP_TONES) as Array<TChipTone>;\n\nexport const resolveChipToneClass = (tone: TChipTone, variant: TChipVariant = 'soft'): string =>\n  CHIP_TONES[tone][variant];\n\nexport const resolveChipDotClass = (tone: TChipTone): string => CHIP_TONES[tone].dot;\n"],"names":[],"mappings":"AAWA,MAAM,aAAkD;AAAA,EACtD,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAEO,MAAM,mBAAmB,OAAO,KAAK,UAAU;AAE/C,MAAM,uBAAuB,CAAC,MAAiB,UAAwB,WAC5E,WAAW,IAAI,EAAE,OAAO;AAEnB,MAAM,sBAAsB,CAAC,SAA4B,WAAW,IAAI,EAAE;"}

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

@@ -0,0 +1,30 @@
+export type TColorSwatchSize = 'xs' | 'sm' | 'md' | 'lg';
+interface IColorSwatchProps {
+    /** Cor CSS já resolvida. Ausente é estado válido: a biblioteca aceita cor sem hex e sem RGB. */
+    cssColor?: string | null;
+    name?: string | null;
+    size?: TColorSwatchSize;
+    /** Substitui o tamanho do preset quando a medida é calculada (zoom do canvas, por exemplo). */
+    sizePx?: number;
+    /** Mostra o nome ao lado da bolinha, além do tooltip. */
+    showName?: boolean;
+    /** Área de hover invisível sobre uma bolinha já desenhada em outra camada. */
+    hitAreaOnly?: boolean;
+    /**
+     * Cada tooltip monta um floating-ui próprio. Numa lista longa (satélites do board, fileiras de
+     * cores), desligue e deixe UM tooltip no container: o custo cai de N instâncias para uma.
+     * Já vem desligado com `showName`, onde o nome está visível e o tooltip só repetiria.
+     */
+    tooltip?: boolean;
+    className?: string;
+    nameClassName?: string;
+}
+/**
+ * A ÚNICA bolinha de cor da plataforma.
+ *
+ * Cor sem código cadastrado não some nem vira um buraco na interface: vira cinza opaco e o nome
+ * carrega a identidade. Foi a divergência entre "esconde" e "pinta de cinza" que fez uma cor sem hex
+ * parecer bug de renderização.
+ */
+declare const ColorSwatch: React.FC<IColorSwatchProps>;
+export default ColorSwatch;

package/dist/components/UI/ColorSwatch.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const SIZE_CLASS = {
+  xs: "size-2",
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+const ColorSwatch = ({
+  cssColor,
+  name,
+  size = "sm",
+  sizePx,
+  showName = false,
+  hitAreaOnly = false,
+  tooltip,
+  className,
+  nameClassName
+}) => {
+  const { t } = useTranslation("ui");
+  const resolvedName = name?.trim();
+  const tooltipContent = [resolvedName, cssColor ? void 0 : t("colorSwatch.noCode")].filter(Boolean).join(" · ");
+  const dot = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: mergeClasses(
+        classNames(
+          "inline-block shrink-0 rounded-full border border-border",
+          sizePx === void 0 && SIZE_CLASS[size],
+          hitAreaOnly && "cursor-help border-transparent bg-transparent"
+        ),
+        className
+      ),
+      style: {
+        ...sizePx === void 0 ? void 0 : { width: sizePx, height: sizePx },
+        ...hitAreaOnly ? void 0 : { backgroundColor: cssColor ?? "rgb(var(--color-muted-active))" }
+      }
+    }
+  );
+  const content = showName ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+    dot,
+    /* @__PURE__ */ jsx("span", { className: classNames("truncate", nameClassName), children: resolvedName })
+  ] }) : dot;
+  if (!tooltipContent || !(tooltip ?? !showName)) return content;
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipContent, children: content });
+};
+export {
+  ColorSwatch as default
+};
+//# sourceMappingURL=ColorSwatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","sources":["../../../src/components/UI/ColorSwatch.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TColorSwatchSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst SIZE_CLASS: Record<TColorSwatchSize, string> = {\n  xs: 'size-2',\n  sm: 'size-3',\n  md: 'size-4',\n  lg: 'size-5',\n};\n\ninterface IColorSwatchProps {\n  /** Cor CSS já resolvida. Ausente é estado válido: a biblioteca aceita cor sem hex e sem RGB. */\n  cssColor?: string | null;\n  name?: string | null;\n  size?: TColorSwatchSize;\n  /** Substitui o tamanho do preset quando a medida é calculada (zoom do canvas, por exemplo). */\n  sizePx?: number;\n  /** Mostra o nome ao lado da bolinha, além do tooltip. */\n  showName?: boolean;\n  /** Área de hover invisível sobre uma bolinha já desenhada em outra camada. */\n  hitAreaOnly?: boolean;\n  /**\n   * Cada tooltip monta um floating-ui próprio. Numa lista longa (satélites do board, fileiras de\n   * cores), desligue e deixe UM tooltip no container: o custo cai de N instâncias para uma.\n   * Já vem desligado com `showName`, onde o nome está visível e o tooltip só repetiria.\n   */\n  tooltip?: boolean;\n  className?: string;\n  nameClassName?: string;\n}\n\n/**\n * A ÚNICA bolinha de cor da plataforma.\n *\n * Cor sem código cadastrado não some nem vira um buraco na interface: vira cinza opaco e o nome\n * carrega a identidade. Foi a divergência entre \"esconde\" e \"pinta de cinza\" que fez uma cor sem hex\n * parecer bug de renderização.\n */\nconst ColorSwatch: React.FC<IColorSwatchProps> = ({\n  cssColor,\n  name,\n  size = 'sm',\n  sizePx,\n  showName = false,\n  hitAreaOnly = false,\n  tooltip,\n  className,\n  nameClassName,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const resolvedName = name?.trim();\n  const tooltipContent = [resolvedName, cssColor ? undefined : t('colorSwatch.noCode')].filter(Boolean).join(' · ');\n\n  const dot = (\n    <span\n      className={mergeClasses(\n        classNames(\n          'inline-block shrink-0 rounded-full border border-border',\n          sizePx === undefined && SIZE_CLASS[size],\n          hitAreaOnly && 'cursor-help border-transparent bg-transparent',\n        ),\n        className,\n      )}\n      style={{\n        ...(sizePx === undefined ? undefined : { width: sizePx, height: sizePx }),\n        ...(hitAreaOnly ? undefined : { backgroundColor: cssColor ?? 'rgb(var(--color-muted-active))' }),\n      }}\n    />\n  );\n\n  const content = showName ? (\n    <span className=\"flex min-w-0 items-center gap-1\">\n      {dot}\n      <span className={classNames('truncate', nameClassName)}>{resolvedName}</span>\n    </span>\n  ) : (\n    dot\n  );\n\n  if (!tooltipContent || !(tooltip ?? !showName)) return content;\n\n  return <ControlledTooltip content={tooltipContent}>{content}</ControlledTooltip>;\n};\n\nexport default ColorSwatch;\n"],"names":[],"mappings":";;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BA,MAAM,cAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,MAAM,KAAA;AAC3B,QAAM,iBAAiB,CAAC,cAAc,WAAW,SAAY,EAAE,oBAAoB,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK;AAEhH,QAAM,MACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,UACE;AAAA,UACA,WAAW,UAAa,WAAW,IAAI;AAAA,UACvC,eAAe;AAAA,QAAA;AAAA,QAEjB;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAI,WAAW,SAAY,SAAY,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,QAChE,GAAI,cAAc,SAAY,EAAE,iBAAiB,YAAY,iCAAA;AAAA,MAAiC;AAAA,IAChG;AAAA,EAAA;AAIJ,QAAM,UAAU,WACd,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,IAAA;AAAA,wBACA,QAAA,EAAK,WAAW,WAAW,YAAY,aAAa,GAAI,UAAA,aAAA,CAAa;AAAA,EAAA,EAAA,CACxE,IAEA;AAGF,MAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,UAAW,QAAO;AAEvD,SAAO,oBAAC,mBAAA,EAAkB,SAAS,gBAAiB,UAAA,SAAQ;AAC9D;"}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IColorsProps {
+    colors: Array<string> | undefined;
+    isSquare?: boolean;
+    className?: string;
+    label?: string;
+}
+/** Amostra de uma cor da biblioteca, com bandas quando a cor tem mais de um valor. */
+declare const Colors: React.FC<IColorsProps>;
+export default Colors;