@umodeapporg/ui 0.1.0

package/dist/components/Form/ControlledSwitch.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+const ControlledSwitch = ({
+  checked,
+  onChange,
+  label,
+  ariaLabel,
+  color = "purple",
+  disabled = false,
+  className = "",
+  labelClassName = "",
+  size = "md"
+}) => {
+  const [colorClasses, setColorClasses] = useState("");
+  const sizeConfig = {
+    sm: {
+      container: "w-8 h-4",
+      thumb: "h-3 w-3"
+    },
+    md: {
+      container: "w-10 h-6",
+      thumb: "h-5 w-5"
+    },
+    lg: {
+      container: "w-12 h-7",
+      thumb: "h-6 w-6"
+    },
+    xl: {
+      container: "w-14 h-8",
+      thumb: "h-7 w-7"
+    }
+  };
+  useEffect(() => {
+    const colorMap = {
+      blue: "bg-info",
+      red: "bg-danger",
+      green: "bg-success",
+      amber: "bg-warning",
+      purple: "bg-brand",
+      indigo: "bg-brand",
+      pink: "bg-accent",
+      teal: "bg-secondary"
+    };
+    setColorClasses(colorMap[color] || "bg-brand");
+  }, [color]);
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs("label", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange: () => onChange(!checked),
+          disabled,
+          "aria-label": ariaLabel ?? label,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(
+            sizeConfig[size].container,
+            "relative rounded-full transition-colors duration-base ease-standard",
+            checked ? colorClasses : "bg-border-emphasis",
+            disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "absolute top-1/2 inline-block -translate-y-1/2 rounded-full bg-surface shadow-md transition-interactive duration-base",
+                sizeConfig[size].thumb,
+                checked ? "right-0.5" : "left-0.5"
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: classNames("text-sm font-medium text-foreground", labelClassName), children: label })
+  ] });
+};
+export {
+  ControlledSwitch as default
+};
+//# sourceMappingURL=ControlledSwitch.js.map

package/dist/components/Form/ControlledSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledSwitch.js","sources":["../../../src/components/Form/ControlledSwitch.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\ninterface IControlledSwitchProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  label?: string;\n  /** Nome acessível quando o switch não tem `label` visível (ex.: linha com rótulo à esquerda). */\n  ariaLabel?: string;\n  color?: 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';\n  disabled?: boolean;\n  className?: string;\n  labelClassName?: string;\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n}\n\nconst ControlledSwitch = ({\n  checked,\n  onChange,\n  label,\n  ariaLabel,\n  color = 'purple',\n  disabled = false,\n  className = '',\n  labelClassName = '',\n  size = 'md',\n}: IControlledSwitchProps) => {\n  const [colorClasses, setColorClasses] = useState('');\n\n  const sizeConfig = {\n    sm: {\n      container: 'w-8 h-4',\n      thumb: 'h-3 w-3',\n    },\n    md: {\n      container: 'w-10 h-6',\n      thumb: 'h-5 w-5',\n    },\n    lg: {\n      container: 'w-12 h-7',\n      thumb: 'h-6 w-6',\n    },\n    xl: {\n      container: 'w-14 h-8',\n      thumb: 'h-7 w-7',\n    },\n  };\n\n  useEffect(() => {\n    const colorMap = {\n      blue: 'bg-info',\n      red: 'bg-danger',\n      green: 'bg-success',\n      amber: 'bg-warning',\n      purple: 'bg-brand',\n      indigo: 'bg-brand',\n      pink: 'bg-accent',\n      teal: 'bg-secondary',\n    };\n\n    setColorClasses(colorMap[color] || 'bg-brand');\n  }, [color]);\n\n  return (\n    <div className={classNames('flex items-center gap-2', className)}>\n      <label className=\"relative inline-block\">\n        <input\n          type=\"checkbox\"\n          checked={checked}\n          onChange={() => onChange(!checked)}\n          disabled={disabled}\n          aria-label={ariaLabel ?? label}\n          className=\"peer sr-only\"\n        />\n        <div\n          className={classNames(\n            sizeConfig[size].container,\n            'relative rounded-full transition-colors duration-base ease-standard',\n            checked ? colorClasses : 'bg-border-emphasis',\n            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n          )}\n        >\n          <span\n            className={classNames(\n              'absolute top-1/2 inline-block -translate-y-1/2 rounded-full bg-surface shadow-md transition-interactive duration-base',\n              sizeConfig[size].thumb,\n              checked ? 'right-0.5' : 'left-0.5',\n            )}\n          ></span>\n        </div>\n      </label>\n      {label && <span className={classNames('text-sm font-medium text-foreground', labelClassName)}>{label}</span>}\n    </div>\n  );\n};\n\nexport default ControlledSwitch;\n"],"names":[],"mappings":";;;AAgBA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,OAAO;AACT,MAA8B;AAC5B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AAEnD,QAAM,aAAa;AAAA,IACjB,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,IAAI;AAAA,MACF,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,EACT;AAGF,YAAU,MAAM;AACd,UAAM,WAAW;AAAA,MACf,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAGR,oBAAgB,SAAS,KAAK,KAAK,UAAU;AAAA,EAC/C,GAAG,CAAC,KAAK,CAAC;AAEV,8BACG,OAAA,EAAI,WAAW,WAAW,2BAA2B,SAAS,GAC7D,UAAA;AAAA,IAAA,qBAAC,SAAA,EAAM,WAAU,yBACf,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,UAAU,MAAM,SAAS,CAAC,OAAO;AAAA,UACjC;AAAA,UACA,cAAY,aAAa;AAAA,UACzB,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,WAAW,IAAI,EAAE;AAAA,YACjB;AAAA,YACA,UAAU,eAAe;AAAA,YACzB,WAAW,kCAAkC;AAAA,UAAA;AAAA,UAG/C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW,IAAI,EAAE;AAAA,gBACjB,UAAU,cAAc;AAAA,cAAA;AAAA,YAC1B;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACC,6BAAU,QAAA,EAAK,WAAW,WAAW,uCAAuC,cAAc,GAAI,UAAA,MAAA,CAAM;AAAA,EAAA,GACvG;AAEJ;"}

package/dist/components/Form/ControlledTabs.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { TUiCapability } from '../UI/access/UiAccessContext';
+export interface ITabInfo {
+    label: string;
+    value: string;
+    /** Missing capability removes the tab and never mounts its panel, so no protected request runs. */
+    capability?: TUiCapability | Array<TUiCapability>;
+    count?: number;
+    /** Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). */
+    alertCount?: number;
+    tooltip?: string;
+    status?: number | string;
+    isVisible?: boolean;
+    /** When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). */
+    editable?: boolean;
+}
+export interface IDataTab {
+    key: string;
+    element: ReactNode;
+}
+interface IControlledTabsProps {
+    initialActiveTab: string;
+    activeTab?: string;
+    tabs: Array<ITabInfo>;
+    dataTabs: Array<IDataTab>;
+    loading?: boolean;
+    /** Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. */
+    disabled?: boolean;
+    handleActiveTabChildren?: () => void;
+    useRenderValidation?: boolean;
+    onTabChange?: (tab: string) => void;
+    beforeTabChange?: (from: string, to: string) => boolean;
+    tabsBodyClassName?: string;
+    tabPanelClassName?: string;
+    rootClassName?: string;
+    /** Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). */
+    tabClassName?: string;
+    headerSlot?: ReactNode;
+    /** Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). */
+    actionsSlot?: ReactNode;
+    onRenameTab?: (value: string, newLabel: string) => void;
+    onToggleTabVisibility?: (value: string) => void;
+    /**
+     * Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos
+     * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;
+     * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).
+     */
+    onReorderTab?: (fromValue: string, toValue: string) => void;
+    /**
+     * Renders the tab header as a single horizontally-scrollable line (browser-tab style)
+     * with navigation arrows and a "+N" overflow menu, instead of wrapping onto several lines.
+     */
+    scrollableHeader?: boolean;
+    /**
+     * Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com
+     * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais
+     * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra
+     * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).
+     */
+    stickyHeader?: boolean;
+    /**
+     * Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e
+     * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/
+     * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir
+     * com abas de nível de página que já usam `activeTab`.
+     */
+    syncWithUrl?: boolean;
+}
+declare const ControlledTabs: import('react').ForwardRefExoticComponent<IControlledTabsProps & import('react').RefAttributes<unknown>>;
+export default ControlledTabs;

package/dist/components/Form/ControlledTabs.js

@@ -0,0 +1,470 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState, useImperativeHandle, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useLocation, useSearchParams } from "react-router-dom";
+import { useUiAccess } from "../UI/access/UiAccessContext.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { formatNumber } from "../../helpers/formatHelpers.js";
+import { claimUrlParam, releaseUrlParam, TABS_URL_PARAM, queueUrlParamUpdate, URL_PARAM_PRIORITY } from "../../helpers/urlParamSync.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledButton from "./ControlledButton.js";
+import { Tab, TabsRoot, TabsHeader, TabsBody, TabPanel } from "./ControlledTabsPrimitives.js";
+const EditableTabLabel = ({
+  label,
+  count,
+  loading,
+  isVisible = true,
+  canToggleVisibility = true,
+  onRename,
+  onToggleVisibility
+}) => {
+  const { t } = useTranslation("ui");
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(label);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [editing]);
+  const handleEditClick = (e) => {
+    e.stopPropagation();
+    setDraft(label);
+    setEditing(true);
+  };
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== label) onRename(trimmed);
+    setEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Escape") {
+      setEditing(false);
+      setDraft(label);
+    }
+    e.stopPropagation();
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: commit,
+        onKeyDown: handleKeyDown,
+        style: { width: `${Math.max(draft.length + 2, 6)}ch` },
+        className: "border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "group/tab flex items-center gap-x-1.5 align-bottom", children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    count !== void 0 && (loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 }) : /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle", children: formatNumber(count) })),
+    /* @__PURE__ */ jsx(ControlledTooltip, { content: t("controlledTabs.renameTab"), children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: handleEditClick,
+        className: "ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis",
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "edit", size: 14 })
+      }
+    ) }),
+    onToggleVisibility && /* @__PURE__ */ jsx(
+      ControlledTooltip,
+      {
+        content: !canToggleVisibility ? t("controlledTabs.mustKeepOneEnabled") : isVisible ? t("controlledTabs.disableTab") : t("controlledTabs.enableTabShort"),
+        children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (canToggleVisibility) onToggleVisibility();
+            },
+            className: classNames("ml-0.5 flex items-center transition-colors", {
+              ["text-foreground-faint hover:text-warning-emphasis"]: isVisible && canToggleVisibility,
+              ["text-warning-emphasis hover:text-success-emphasis"]: !isVisible,
+              ["cursor-not-allowed text-foreground-faint"]: isVisible && !canToggleVisibility
+            }),
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: isVisible ? "visibility" : "visibility_off", size: 14 })
+          }
+        )
+      }
+    )
+  ] });
+};
+const ControlledTabs = forwardRef(
+  ({
+    initialActiveTab,
+    activeTab: controlledActiveTab,
+    tabs: tabsProp,
+    dataTabs: dataTabsProp,
+    loading = false,
+    disabled = false,
+    handleActiveTabChildren,
+    useRenderValidation = false,
+    onTabChange,
+    beforeTabChange,
+    tabsBodyClassName,
+    tabPanelClassName,
+    rootClassName,
+    tabClassName,
+    headerSlot,
+    actionsSlot,
+    onRenameTab,
+    onToggleTabVisibility,
+    onReorderTab,
+    scrollableHeader = false,
+    stickyHeader = false,
+    syncWithUrl = true
+  }, ref) => {
+    const { t } = useTranslation("ui");
+    const { check } = useUiAccess();
+    const deniedTabValues = useMemo(
+      () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),
+      [tabsProp, check]
+    );
+    const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);
+    const dataTabs = useMemo(
+      () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),
+      [dataTabsProp, deniedTabValues]
+    );
+    const location = useLocation();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const urlParamOwnerIdRef = useRef({});
+    const scrollRef = useRef(null);
+    const stickySentinelRef = useRef(null);
+    const stickyBarRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const [clippedTabValues, setClippedTabValues] = useState([]);
+    const [isStuck, setIsStuck] = useState(false);
+    const dragTabValueRef = useRef(null);
+    const [draggingTabValue, setDraggingTabValue] = useState(null);
+    const [dragOverTabValue, setDragOverTabValue] = useState(null);
+    const resolveInitialActiveTab = () => {
+      const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab) ? initialActiveTab : tabs[0]?.value ?? initialActiveTab;
+      if (!syncWithUrl) return fallbackTab;
+      if (location.state?.ignoreActiveTab === true) return fallbackTab;
+      const urlActiveTab = searchParams.get(TABS_URL_PARAM);
+      const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);
+      return isValidUrlTab ? urlActiveTab : fallbackTab;
+    };
+    const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);
+    const isControlled = controlledActiveTab !== void 0;
+    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+    const handleActiveTab = (tab) => {
+      if (disabled) return;
+      if (beforeTabChange && !beforeTabChange(activeTab, tab)) {
+        if (!isControlled) {
+          setInternalActiveTab(activeTab);
+        }
+        return;
+      }
+      if (handleActiveTabChildren) {
+        handleActiveTabChildren();
+      }
+      if (!isControlled) {
+        setInternalActiveTab(tab);
+      }
+      if (onTabChange) {
+        onTabChange(tab);
+      }
+      if (syncWithUrl) {
+        queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);
+      }
+    };
+    useImperativeHandle(ref, () => ({
+      activeTab,
+      setActiveTab: handleActiveTab
+    }));
+    const handleToggleTabVisibility = (value) => {
+      const visibleCount = tabs.filter((t2) => t2.isVisible !== false).length;
+      const isCurrentlyVisible = tabs.find((t2) => t2.value === value)?.isVisible !== false;
+      if (isCurrentlyVisible && visibleCount <= 1) return;
+      onToggleTabVisibility?.(value);
+    };
+    useEffect(() => {
+      if (!syncWithUrl) return;
+      const ownerId = urlParamOwnerIdRef.current;
+      claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);
+      return () => releaseUrlParam(TABS_URL_PARAM, ownerId);
+    }, [syncWithUrl]);
+    useEffect(() => {
+      if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {
+        queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);
+      }
+      const tabButton = document.querySelector(`li[data-value=${activeTab}]`);
+      if (tabButton) {
+        tabButton.click();
+      }
+    }, [activeTab]);
+    const updateOverflow = useCallback(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      setCanScrollLeft(container.scrollLeft > 4);
+      setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);
+      const EDGE_TOLERANCE = 1;
+      const containerRect = container.getBoundingClientRect();
+      const clipped = [];
+      container.querySelectorAll("[data-value]").forEach((node) => {
+        const element = node;
+        const value = element.getAttribute("data-value");
+        if (!value || value === activeTab) return;
+        const rect = element.getBoundingClientRect();
+        const crossesLeftEdge = rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;
+        const crossesRightEdge = rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;
+        if (crossesLeftEdge || crossesRightEdge) clipped.push(value);
+      });
+      setClippedTabValues(
+        (prev) => prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped
+      );
+    }, [activeTab]);
+    useEffect(() => {
+      if (!stickyHeader) return;
+      const sentinel = stickySentinelRef.current;
+      if (!sentinel || typeof IntersectionObserver === "undefined") return;
+      let scrollParent = sentinel.parentElement;
+      while (scrollParent) {
+        const overflowY = getComputedStyle(scrollParent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") break;
+        scrollParent = scrollParent.parentElement;
+      }
+      const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {
+        root: scrollParent ?? null,
+        threshold: 0
+      });
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [stickyHeader]);
+    useEffect(() => {
+      if (!stickyHeader) return;
+      const bar = stickyBarRef.current;
+      if (!bar) return;
+      let scrollParent = bar.parentElement;
+      while (scrollParent) {
+        const overflowY = getComputedStyle(scrollParent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") break;
+        scrollParent = scrollParent.parentElement;
+      }
+      if (!scrollParent) return;
+      const target = scrollParent;
+      let rafId = 0;
+      let lastHeight = -1;
+      const publishHeight = () => {
+        const height = bar.offsetHeight;
+        if (height === lastHeight) return;
+        lastHeight = height;
+        target.style.setProperty("--sticky-tabs-height", `${height}px`);
+      };
+      publishHeight();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(publishHeight);
+      });
+      observer.observe(bar);
+      return () => {
+        cancelAnimationFrame(rafId);
+        observer.disconnect();
+        target.style.removeProperty("--sticky-tabs-height");
+      };
+    }, [stickyHeader]);
+    useEffect(() => {
+      if (!scrollableHeader) return;
+      updateOverflow();
+      const onResize = () => updateOverflow();
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, [scrollableHeader, tabs, updateOverflow]);
+    const scrollByStep = (direction) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const EDGE_TOLERANCE = 1;
+      const containerRect = container.getBoundingClientRect();
+      const nodes = Array.from(container.querySelectorAll("[data-value]"));
+      if (direction > 0) {
+        const nextHidden = nodes.find(
+          (node) => node.getBoundingClientRect().right > containerRect.right + EDGE_TOLERANCE
+        );
+        if (!nextHidden) return;
+        container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: "smooth" });
+        return;
+      }
+      const previousHidden = [...nodes].reverse().find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);
+      if (!previousHidden) return;
+      container.scrollBy({
+        left: previousHidden.getBoundingClientRect().right - containerRect.right,
+        behavior: "smooth"
+      });
+    };
+    const tabLabel = (label, count, alertCount) => {
+      const showCount = count !== void 0;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1.5 align-bottom", children: [
+        label,
+        loading && showCount ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 }) : showCount ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle", children: formatNumber(count) }) : null,
+        Boolean(alertCount) && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1.5 py-px text-[11px] font-semibold leading-none text-warning-emphasis", children: formatNumber(alertCount) })
+      ] });
+    };
+    const handleTabDragEnd = () => {
+      const from = dragTabValueRef.current;
+      const to = dragOverTabValue;
+      if (from && to && from !== to) {
+        onReorderTab?.(from, to);
+      }
+      dragTabValueRef.current = null;
+      setDraggingTabValue(null);
+      setDragOverTabValue(null);
+    };
+    const tabElements = tabs.map((tab, index) => {
+      const isActive = activeTab === tab.value && tab.isVisible !== false;
+      const isInactive = activeTab !== tab.value && tab.isVisible !== false;
+      const isTabDropTarget = Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;
+      const tabDragProps = onReorderTab ? {
+        draggable: true,
+        onDragStart: (event) => {
+          if (event.target.closest("input")) {
+            event.preventDefault();
+            return;
+          }
+          event.dataTransfer.effectAllowed = "move";
+          dragTabValueRef.current = tab.value;
+          setDraggingTabValue(tab.value);
+        },
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (dragTabValueRef.current) setDragOverTabValue(tab.value);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragEnd: handleTabDragEnd
+      } : {};
+      return /* @__PURE__ */ jsx(
+        Tab,
+        {
+          value: tab.value,
+          style: { zIndex: 2 },
+          disabled: loading,
+          onClick: () => handleActiveTab(tab.value),
+          ...tabDragProps,
+          className: classNames(
+            "max-w-fit px-4",
+            tabClassName,
+            // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas
+            // inativas e peso de fonte mais leve ao trocar de aba.
+            stickyHeader && "rounded-md transition-interactive duration-fast",
+            {
+              [stickyHeader ? "font-medium text-brand-emphasis" : "text-brand-emphasis"]: isActive,
+              [stickyHeader ? "font-normal opacity-70 hover:bg-muted-hover hover:opacity-100" : "opacity-70"]: isInactive,
+              ["!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint"]: tab.isVisible === false,
+              ["cursor-grab active:cursor-grabbing"]: Boolean(onReorderTab),
+              ["rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border"]: isTabDropTarget,
+              ["opacity-40"]: draggingTabValue === tab.value,
+              ["invisible"]: clippedTabValues.includes(tab.value)
+            }
+          ),
+          children: onRenameTab && tab.editable !== false ? /* @__PURE__ */ jsx(
+            EditableTabLabel,
+            {
+              label: tab.label,
+              count: tab.count,
+              loading,
+              isVisible: tab.isVisible !== false,
+              canToggleVisibility: tab.isVisible === false || tabs.filter((t2) => t2.isVisible !== false).length > 1,
+              onRename: (newLabel) => onRenameTab(tab.value, newLabel),
+              onToggleVisibility: onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : void 0
+            }
+          ) : tab.tooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: tab.tooltip, className: "max-w-60", children: tabLabel(tab.label, tab.count, tab.alertCount) }) : tabLabel(tab.label, tab.count, tab.alertCount)
+        },
+        `controlled-tab-${index}-${tab.value}`
+      );
+    });
+    const scrollArrowClass = "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis";
+    return /* @__PURE__ */ jsxs(TabsRoot, { value: activeTab, className: classNames("!overflow-visible", rootClassName), children: [
+      stickyHeader && /* @__PURE__ */ jsx("div", { ref: stickySentinelRef, className: "h-px", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stickyBarRef,
+          className: classNames(
+            "flex shrink-0 items-center",
+            // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll
+            // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca
+            // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.
+            scrollableHeader ? "flex-nowrap gap-x-3" : actionsSlot ? "flex-wrap gap-x-3 gap-y-2" : "gap-1",
+            // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que
+            // rola por baixo e sombra sutil só depois que a barra encosta no topo.
+            stickyHeader && "sticky top-0 z-20 bg-surface transition-shadow duration-fast",
+            stickyHeader && isStuck && "shadow-elevation1",
+            disabled && "pointer-events-none select-none opacity-50"
+          ),
+          children: [
+            headerSlot && /* @__PURE__ */ jsx(Fragment, { children: headerSlot }),
+            scrollableHeader ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle", children: [
+              /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  defaultHtmlButton: true,
+                  onClick: () => scrollByStep(-1),
+                  disabled: !canScrollLeft,
+                  className: classNames(scrollArrowClass, { ["pointer-events-none opacity-0"]: !canScrollLeft }),
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_left", size: 20 })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: updateOverflow, className: "scrollbar-hide min-w-0 flex-1 overflow-x-auto", children: /* @__PURE__ */ jsx(TabsHeader, { className: "flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0", children: tabElements }) }),
+              /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  defaultHtmlButton: true,
+                  onClick: () => scrollByStep(1),
+                  disabled: !canScrollRight,
+                  className: classNames(scrollArrowClass, { ["pointer-events-none opacity-0"]: !canScrollRight }),
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 20 })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(TabsHeader, { className: "flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0", children: tabElements }),
+            actionsSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: actionsSlot })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TabsBody, { className: tabsBodyClassName, children: dataTabs.map((tabPanel) => {
+        const isTabVisible = tabs.find((t2) => t2.value === tabPanel.key)?.isVisible !== false;
+        return /* @__PURE__ */ jsx(TabPanel, { value: tabPanel.key, className: classNames("size-full", tabPanelClassName), children: /* @__PURE__ */ jsxs("div", { className: classNames("relative size-full", { ["pointer-events-none"]: !isTabVisible }), children: [
+          useRenderValidation ? activeTab === tabPanel.key && /* @__PURE__ */ jsx("div", { className: "size-full animate-fade-in transition-interactive duration-slow ease-standard", children: tabPanel.element }) : tabPanel.element,
+          !isTabVisible && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil", children: [
+            /* @__PURE__ */ jsx(MaterialSymbol, { icon: "visibility_off", size: 32, className: "text-foreground-faint" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground-subtle", children: t("controlledTabs.tabDisabled") }),
+            onToggleTabVisibility && /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                size: "sm",
+                variant: "outlined",
+                className: "pointer-events-auto mt-1 flex items-center gap-x-1",
+                onClick: () => onToggleTabVisibility(tabPanel.key),
+                children: [
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "visibility", size: 16 }),
+                  t("controlledTabs.enableTab")
+                ]
+              }
+            )
+          ] })
+        ] }) }, tabPanel.key);
+      }) })
+    ] });
+  }
+);
+export {
+  ControlledTabs as default
+};
+//# sourceMappingURL=ControlledTabs.js.map