npm - @umodeapporg/ui - Versions diffs - 0.28.0 → 0.29.0 - Mend

@umodeapporg/ui 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/dist/components/Form/ControlledTabs.js CHANGED Viewed

@@ -71,6 +71,7 @@ const EditableTabLabel = ({
     /* @__PURE__ */ jsx(ControlledTooltip, { content: t("controlledTabs.renameTab"), children: /* @__PURE__ */ jsx(
       ControlledButton,
       {
+        "aria-label": t("controlledTabs.renameTab"),
         defaultHtmlButton: true,
         onClick: handleEditClick,
         className: "ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis",
@@ -85,6 +86,7 @@ const EditableTabLabel = ({
         children: /* @__PURE__ */ jsx(
           ControlledButton,
           {
+            "aria-label": isVisible ? t("controlledTabs.disableTab") : t("controlledTabs.enableTabShort"),
             defaultHtmlButton: true,
             onClick: (e) => {
               e.stopPropagation();
@@ -285,7 +287,16 @@ const ControlledTabs = forwardRef(
       updateOverflow();
       const onResize = () => updateOverflow();
       window.addEventListener("resize", onResize);
-      return () => window.removeEventListener("resize", onResize);
+      const scroller = scrollRef.current;
+      const observer = scroller && typeof ResizeObserver !== "undefined" ? new ResizeObserver(onResize) : null;
+      if (scroller && observer) {
+        observer.observe(scroller);
+        if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);
+      }
+      return () => {
+        window.removeEventListener("resize", onResize);
+        observer?.disconnect();
+      };
     }, [scrollableHeader, tabs, updateOverflow]);
     const scrollByStep = (direction) => {
       const container = scrollRef.current;
@@ -402,6 +413,7 @@ const ControlledTabs = forwardRef(
         `controlled-tab-${index}-${tab.value}`
       );
     });
+    const showScrollArrows = canScrollLeft || canScrollRight;
     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 }),
@@ -424,9 +436,10 @@ const ControlledTabs = forwardRef(
           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(
+              showScrollArrows && /* @__PURE__ */ jsx(
                 ControlledButton,
                 {
+                  "aria-label": t("controlledTabs.scrollLeft"),
                   defaultHtmlButton: true,
                   onClick: () => scrollByStep(-1),
                   disabled: !canScrollLeft,
@@ -436,9 +449,10 @@ const ControlledTabs = forwardRef(
                 }
               ),
               /* @__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(
+              showScrollArrows && /* @__PURE__ */ jsx(
                 ControlledButton,
                 {
+                  "aria-label": t("controlledTabs.scrollRight"),
                   defaultHtmlButton: true,
                   onClick: () => scrollByStep(1),
                   disabled: !canScrollRight,

package/dist/components/Form/ControlledTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledTabs.js","sources":["../../../src/components/Form/ControlledTabs.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { TUiCapability, useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport {\n claimUrlParam,\n queueUrlParamUpdate,\n releaseUrlParam,\n TABS_URL_PARAM,\n URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport { Tab, TabPanel, TabsBody, TabsHeader, TabsRoot } from './ControlledTabsPrimitives';\n\ninterface IEditableTabLabelProps {\n label: string;\n count?: number;\n loading?: boolean;\n isVisible?: boolean;\n canToggleVisibility?: boolean;\n onRename: (newLabel: string) => void;\n onToggleVisibility?: () => void;\n}\n\nconst EditableTabLabel = ({\n label,\n count,\n loading,\n isVisible = true,\n canToggleVisibility = true,\n onRename,\n onToggleVisibility,\n}: IEditableTabLabelProps) => {\n const { t } = useTranslation('ui');\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(label);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (editing) {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n }, [editing]);\n\n const handleEditClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n setDraft(label);\n setEditing(true);\n };\n\n const commit = () => {\n const trimmed = draft.trim();\n if (trimmed && trimmed !== label) onRename(trimmed);\n setEditing(false);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n commit();\n }\n if (e.key === 'Escape') {\n setEditing(false);\n setDraft(label);\n }\n e.stopPropagation();\n };\n\n if (editing) {\n return (\n <div className=\"flex items-center\" onClick={(e) => e.stopPropagation()}>\n <input\n ref={inputRef}\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commit}\n onKeyDown={handleKeyDown}\n style={{ width: `${Math.max(draft.length + 2, 6)}ch` }}\n className=\"border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none\"\n />\n </div>\n );\n }\n\n return (\n <div className=\"group/tab flex items-center gap-x-1.5 align-bottom\">\n <span>{label}</span>\n {count !== undefined &&\n (loading ? (\n <LoadingSpinner size={3} />\n ) : (\n <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\">\n {formatNumber(count)}\n </span>\n ))}\n <ControlledTooltip content={t('controlledTabs.renameTab')}>\n <ControlledButton\n defaultHtmlButton\n onClick={handleEditClick}\n className=\"ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis\"\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"edit\" size={14} />\n </ControlledButton>\n </ControlledTooltip>\n {onToggleVisibility && (\n <ControlledTooltip\n content={\n !canToggleVisibility\n ? t('controlledTabs.mustKeepOneEnabled')\n : isVisible\n ? t('controlledTabs.disableTab')\n : t('controlledTabs.enableTabShort')\n }\n >\n <ControlledButton\n defaultHtmlButton\n onClick={(e) => {\n e.stopPropagation();\n if (canToggleVisibility) onToggleVisibility();\n }}\n className={classNames('ml-0.5 flex items-center transition-colors', {\n ['text-foreground-faint hover:text-warning-emphasis']: isVisible && canToggleVisibility,\n ['text-warning-emphasis hover:text-success-emphasis']: !isVisible,\n ['cursor-not-allowed text-foreground-faint']: isVisible && !canToggleVisibility,\n })}\n tabIndex={-1}\n >\n <MaterialSymbol icon={isVisible ? 'visibility' : 'visibility_off'} size={14} />\n </ControlledButton>\n </ControlledTooltip>\n )}\n </div>\n );\n};\n\nexport interface ITabInfo {\n label: string;\n value: string;\n /** Missing capability removes the tab and never mounts its panel, so no protected request runs. /\n capability?: TUiCapability \| Array<TUiCapability>;\n count?: number;\n /* Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). /\n alertCount?: number;\n tooltip?: string;\n status?: number \| string;\n isVisible?: boolean;\n /* When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). /\n editable?: boolean;\n /\n Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses\n * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.\n /\n trailingSlot?: ReactNode;\n}\n\nexport interface IDataTab {\n key: string;\n element: ReactNode;\n}\n\ninterface IControlledTabsProps {\n initialActiveTab: string;\n activeTab?: string;\n tabs: Array<ITabInfo>;\n dataTabs: Array<IDataTab>;\n loading?: boolean;\n /* Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. /\n disabled?: boolean;\n handleActiveTabChildren?: () => void;\n useRenderValidation?: boolean;\n onTabChange?: (tab: string) => void;\n beforeTabChange?: (from: string, to: string) => boolean;\n tabsBodyClassName?: string;\n tabPanelClassName?: string;\n\n rootClassName?: string;\n /* Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). /\n tabClassName?: string;\n headerSlot?: ReactNode;\n /* Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). /\n actionsSlot?: ReactNode;\n onRenameTab?: (value: string, newLabel: string) => void;\n onToggleTabVisibility?: (value: string) => void;\n /\n Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos\n * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;\n * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).\n /\n onReorderTab?: (fromValue: string, toValue: string) => void;\n /\n Renders the tab header as a single horizontally-scrollable line (browser-tab style)\n * with navigation arrows and a \"+N\" overflow menu, instead of wrapping onto several lines.\n /\n scrollableHeader?: boolean;\n /\n Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com\n * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais\n * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra\n * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).\n /\n stickyHeader?: boolean;\n /\n Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e\n * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/\n * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir\n * com abas de nível de página que já usam `activeTab`.\n /\n syncWithUrl?: boolean;\n}\n\nconst ControlledTabs = forwardRef<unknown, IControlledTabsProps>(\n (\n {\n initialActiveTab,\n activeTab: controlledActiveTab,\n tabs: tabsProp,\n dataTabs: dataTabsProp,\n loading = false,\n disabled = false,\n handleActiveTabChildren,\n useRenderValidation = false,\n onTabChange,\n beforeTabChange,\n tabsBodyClassName,\n tabPanelClassName,\n rootClassName,\n tabClassName,\n headerSlot,\n actionsSlot,\n onRenameTab,\n onToggleTabVisibility,\n onReorderTab,\n scrollableHeader = false,\n stickyHeader = false,\n syncWithUrl = true,\n },\n ref,\n ) => {\n const { t } = useTranslation('ui');\n const { check } = useUiAccess();\n\n const deniedTabValues = useMemo(\n () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),\n [tabsProp, check],\n );\n\n const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);\n\n const dataTabs = useMemo(\n () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),\n [dataTabsProp, deniedTabValues],\n );\n\n const { location, searchParams, setSearchParams } = useUiNavigation();\n const urlParamOwnerIdRef = useRef<object>({});\n const scrollRef = useRef<HTMLDivElement>(null);\n const stickySentinelRef = useRef<HTMLDivElement>(null);\n const stickyBarRef = useRef<HTMLDivElement>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n // Abas que cruzam uma borda da área rolável (visíveis só pela metade). Ficam invisíveis para\n // que na borda só apareça aba inteira ou espaço vazio, nunca um pedaço de texto cortado.\n const [clippedTabValues, setClippedTabValues] = useState<Array<string>>([]);\n // Barra sticky: detecta quando a barra \"grudou\" (usuário já rolou) para só então mostrar a sombra.\n const [isStuck, setIsStuck] = useState(false);\n // Drag nativo das abas (opt-in via onReorderTab), mesmo molde dos campos do construtor.\n const dragTabValueRef = useRef<string \| null>(null);\n const [draggingTabValue, setDraggingTabValue] = useState<string \| null>(null);\n const [dragOverTabValue, setDragOverTabValue] = useState<string \| null>(null);\n\n const resolveInitialActiveTab = () => {\n const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab)\n ? initialActiveTab\n : (tabs[0]?.value ?? initialActiveTab);\n\n if (!syncWithUrl) return fallbackTab;\n if ((location.state as { ignoreActiveTab?: boolean } \| null \| undefined)?.ignoreActiveTab === true)\n return fallbackTab;\n const urlActiveTab = searchParams.get(TABS_URL_PARAM);\n const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);\n return isValidUrlTab ? urlActiveTab : fallbackTab;\n };\n\n const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);\n const isControlled = controlledActiveTab !== undefined;\n const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n const handleActiveTab = (tab: string) => {\n if (disabled) return;\n if (beforeTabChange && !beforeTabChange(activeTab, tab)) {\n if (!isControlled) {\n setInternalActiveTab(activeTab);\n }\n return;\n }\n if (handleActiveTabChildren) {\n handleActiveTabChildren();\n }\n if (!isControlled) {\n setInternalActiveTab(tab);\n }\n if (onTabChange) {\n onTabChange(tab);\n }\n\n if (syncWithUrl) {\n queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);\n }\n };\n\n useImperativeHandle(ref, () => ({\n activeTab,\n setActiveTab: handleActiveTab,\n }));\n\n const handleToggleTabVisibility = (value: string) => {\n const visibleCount = tabs.filter((t) => t.isVisible !== false).length;\n const isCurrentlyVisible = tabs.find((t) => t.value === value)?.isVisible !== false;\n if (isCurrentlyVisible && visibleCount <= 1) return;\n onToggleTabVisibility?.(value);\n };\n\n // As abas são o topo da hierarquia de parâmetros: assumem `activeTab` mesmo montando depois de\n // um controle que já o tivesse reivindicado, e o liberam ao desmontar.\n useEffect(() => {\n if (!syncWithUrl) return;\n\n const ownerId = urlParamOwnerIdRef.current;\n claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);\n\n return () => releaseUrlParam(TABS_URL_PARAM, ownerId);\n }, [syncWithUrl]);\n\n useEffect(() => {\n if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {\n queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);\n }\n const tabButton = document.querySelector(`li[data-value=${activeTab}]`) as HTMLElement \| null;\n if (tabButton) {\n tabButton.click();\n }\n }, [activeTab]);\n\n const updateOverflow = useCallback(() => {\n const container = scrollRef.current;\n if (!container) return;\n\n setCanScrollLeft(container.scrollLeft > 4);\n setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);\n\n const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const clipped: Array<string> = [];\n container.querySelectorAll('[data-value]').forEach((node) => {\n const element = node as HTMLElement;\n const value = element.getAttribute('data-value');\n if (!value \|\| value === activeTab) return;\n const rect = element.getBoundingClientRect();\n const crossesLeftEdge =\n rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;\n const crossesRightEdge =\n rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;\n if (crossesLeftEdge \|\| crossesRightEdge) clipped.push(value);\n });\n setClippedTabValues((prev) =>\n prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped,\n );\n }, [activeTab]);\n\n useEffect(() => {\n if (!stickyHeader) return;\n const sentinel = stickySentinelRef.current;\n if (!sentinel \|\| typeof IntersectionObserver === 'undefined') return;\n // Descobre o ancestral rolável para observar o sentinela em relação a ele. Quando o sentinela\n // (logo acima da barra) sai do topo do container, a barra grudou e ligamos a sombra.\n let scrollParent = sentinel.parentElement;\n while (scrollParent) {\n const overflowY = getComputedStyle(scrollParent).overflowY;\n if (overflowY === 'auto' \|\| overflowY === 'scroll') break;\n scrollParent = scrollParent.parentElement;\n }\n const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {\n root: scrollParent ?? null,\n threshold: 0,\n });\n observer.observe(sentinel);\n return () => observer.disconnect();\n }, [stickyHeader]);\n\n // Publica a altura da barra fixa como `--sticky-tabs-height` no container rolável, para\n // que conteúdo sticky mais abaixo (ex.: cabeçalho de material da ficha) possa grudar logo\n // abaixo da barra em vez de ficar escondido atrás dela.\n useEffect(() => {\n if (!stickyHeader) return;\n const bar = stickyBarRef.current;\n if (!bar) return;\n let scrollParent = bar.parentElement;\n while (scrollParent) {\n const overflowY = getComputedStyle(scrollParent).overflowY;\n if (overflowY === 'auto' \|\| overflowY === 'scroll') break;\n scrollParent = scrollParent.parentElement;\n }\n if (!scrollParent) return;\n const target = scrollParent;\n let rafId = 0;\n let lastHeight = -1;\n // Escreve a variável só quando a altura muda de fato, e fora do ciclo de entrega do\n // ResizeObserver (via rAF): escrever um valor que afeta layout dentro do callback dispara\n // \"ResizeObserver loop completed with undelivered notifications\".\n const publishHeight = () => {\n const height = bar.offsetHeight;\n if (height === lastHeight) return;\n lastHeight = height;\n target.style.setProperty('--sticky-tabs-height', `${height}px`);\n };\n publishHeight();\n if (typeof ResizeObserver === 'undefined') return;\n const observer = new ResizeObserver(() => {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(publishHeight);\n });\n observer.observe(bar);\n return () => {\n cancelAnimationFrame(rafId);\n observer.disconnect();\n target.style.removeProperty('--sticky-tabs-height');\n };\n }, [stickyHeader]);\n\n useEffect(() => {\n if (!scrollableHeader) return;\n updateOverflow();\n const onResize = () => updateOverflow();\n window.addEventListener('resize', onResize);\n return () => window.removeEventListener('resize', onResize);\n }, [scrollableHeader, tabs, updateOverflow]);\n\n const scrollByStep = (direction: number) => {\n const container = scrollRef.current;\n if (!container) return;\n const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const nodes = Array.from(container.querySelectorAll('[data-value]')) as Array<HTMLElement>;\n\n if (direction > 0) {\n const nextHidden = nodes.find(\n (node) => node.getBoundingClientRect().right > containerRect.right + EDGE_TOLERANCE,\n );\n if (!nextHidden) return;\n container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: 'smooth' });\n return;\n }\n\n const previousHidden = [...nodes]\n .reverse()\n .find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);\n if (!previousHidden) return;\n container.scrollBy({\n left: previousHidden.getBoundingClientRect().right - containerRect.right,\n behavior: 'smooth',\n });\n };\n\n const tabLabel = (label: string, count?: number, alertCount?: number) => {\n const showCount = count !== undefined;\n return (\n <div className=\"flex items-center gap-x-1.5 align-bottom\">\n {label}\n {loading && showCount ? (\n <LoadingSpinner size={3} />\n ) : showCount ? (\n <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\">\n {formatNumber(count)}\n </span>\n ) : null}\n {Boolean(alertCount) && (\n <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\">\n {formatNumber(alertCount as number)}\n </span>\n )}\n </div>\n );\n };\n\n const handleTabDragEnd = () => {\n const from = dragTabValueRef.current;\n const to = dragOverTabValue;\n\n if (from && to && from !== to) {\n onReorderTab?.(from, to);\n }\n\n dragTabValueRef.current = null;\n setDraggingTabValue(null);\n setDragOverTabValue(null);\n };\n\n const tabElements = tabs.map((tab, index) => {\n const isActive = activeTab === tab.value && tab.isVisible !== false;\n const isInactive = activeTab !== tab.value && tab.isVisible !== false;\n const isTabDropTarget =\n Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;\n const tabDragProps = onReorderTab\n ? {\n draggable: true,\n onDragStart: (event: React.DragEvent) => {\n // Arrastar a partir do input de renomear deve selecionar texto, não mover a aba; e a\n // partir do slot de ações (menu da aba) não deve mover nada.\n if ((event.target as HTMLElement).closest('input, [data-tab-trailing-slot]')) {\n event.preventDefault();\n return;\n }\n event.dataTransfer.effectAllowed = 'move';\n dragTabValueRef.current = tab.value;\n setDraggingTabValue(tab.value);\n },\n onDragEnter: (event: React.DragEvent) => {\n event.preventDefault();\n if (dragTabValueRef.current) setDragOverTabValue(tab.value);\n },\n onDragOver: (event: React.DragEvent) => event.preventDefault(),\n onDragEnd: handleTabDragEnd,\n }\n : {};\n return (\n <Tab\n key={`controlled-tab-${index}-${tab.value}`}\n value={tab.value}\n style={{ zIndex: 2 }}\n disabled={loading}\n onClick={() => handleActiveTab(tab.value)}\n {...tabDragProps}\n className={classNames(\n 'max-w-fit px-4',\n tabClassName,\n // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas\n // inativas e peso de fonte mais leve ao trocar de aba.\n stickyHeader && 'rounded-md transition-interactive duration-fast',\n {\n [stickyHeader ? 'font-medium text-brand-emphasis' : 'text-brand-emphasis']: isActive,\n [stickyHeader ? 'font-normal opacity-70 hover:bg-muted-hover hover:opacity-100' : 'opacity-70']:\n isInactive,\n ['!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint']: tab.isVisible === false,\n ['cursor-grab active:cursor-grabbing']: Boolean(onReorderTab),\n ['rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border']: isTabDropTarget,\n ['opacity-40']: draggingTabValue === tab.value,\n ['invisible']: clippedTabValues.includes(tab.value),\n },\n )}\n >\n {onRenameTab && tab.editable !== false ? (\n <EditableTabLabel\n label={tab.label}\n count={tab.count}\n loading={loading}\n isVisible={tab.isVisible !== false}\n canToggleVisibility={tab.isVisible === false \|\| tabs.filter((t) => t.isVisible !== false).length > 1}\n onRename={(newLabel) => onRenameTab(tab.value, newLabel)}\n onToggleVisibility={onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : undefined}\n />\n ) : tab.tooltip ? (\n <ControlledTooltip content={tab.tooltip} className=\"max-w-60\">\n {tabLabel(tab.label, tab.count, tab.alertCount)}\n </ControlledTooltip>\n ) : (\n tabLabel(tab.label, tab.count, tab.alertCount)\n )}\n {tab.trailingSlot && (\n <span\n data-tab-trailing-slot\n className=\"ml-1 flex items-center\"\n onClick={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n onPointerDown={(event) => event.stopPropagation()}\n onKeyDown={(event) => event.stopPropagation()}\n >\n {tab.trailingSlot}\n </span>\n )}\n </Tab>\n );\n });\n\n // Sublinhado fino (2px). Na barra sticky mantemos a animação de deslize nativa (transform) com\n // transição suave de ~120ms; nas demais telas o indicador segue estático como antes.\n\n const scrollArrowClass =\n 'flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis';\n\n return (\n <TabsRoot value={activeTab} className={classNames('!overflow-visible', rootClassName)}>\n {/ Sentinela de 1px: quando sai do topo do container rolável a barra já grudou e acende a sombra. */}\n {stickyHeader && <div ref={stickySentinelRef} className=\"h-px\" aria-hidden />}\n <div\n ref={stickyBarRef}\n className={classNames(\n 'flex shrink-0 items-center',\n // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll\n // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca\n // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.\n scrollableHeader ? 'flex-nowrap gap-x-3' : actionsSlot ? 'flex-wrap gap-x-3 gap-y-2' : 'gap-1',\n // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que\n // rola por baixo e sombra sutil só depois que a barra encosta no topo.\n stickyHeader && 'sticky top-0 z-20 bg-surface transition-shadow duration-fast',\n stickyHeader && isStuck && 'shadow-elevation1',\n disabled && 'pointer-events-none select-none opacity-50',\n )}\n >\n {headerSlot && <>{headerSlot}</>}\n {scrollableHeader ? (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle\">\n <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(-1)}\n disabled={!canScrollLeft}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollLeft })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_left\" size={20} />\n </ControlledButton>\n\n <div ref={scrollRef} onScroll={updateOverflow} className=\"scrollbar-hide min-w-0 flex-1 overflow-x-auto\">\n <TabsHeader className=\"flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n {tabElements}\n </TabsHeader>\n </div>\n\n <ControlledButton\n defaultHtmlButton\n onClick={() => scrollByStep(1)}\n disabled={!canScrollRight}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollRight })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_right\" size={20} />\n </ControlledButton>\n </div>\n ) : (\n <TabsHeader className=\"flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n {tabElements}\n </TabsHeader>\n )}\n {actionsSlot && <div className=\"ml-auto flex shrink-0 items-center\">{actionsSlot}</div>}\n </div>\n\n <TabsBody className={tabsBodyClassName}>\n {dataTabs.map((tabPanel) => {\n const isTabVisible = tabs.find((t) => t.value === tabPanel.key)?.isVisible !== false;\n return (\n <TabPanel key={tabPanel.key} value={tabPanel.key} className={classNames('size-full', tabPanelClassName)}>\n <div className={classNames('relative size-full', { ['pointer-events-none']: !isTabVisible })}>\n {useRenderValidation\n ? activeTab === tabPanel.key && (\n <div className=\"size-full animate-fade-in transition-interactive duration-slow ease-standard\">\n {tabPanel.element}\n </div>\n )\n : tabPanel.element}\n {!isTabVisible && (\n <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil\">\n <MaterialSymbol icon=\"visibility_off\" size={32} className=\"text-foreground-faint\" />\n <span className=\"text-sm font-medium text-foreground-subtle\">\n {t('controlledTabs.tabDisabled')}\n </span>\n {onToggleTabVisibility && (\n <ControlledButton\n size=\"sm\"\n variant=\"outlined\"\n className=\"pointer-events-auto mt-1 flex items-center gap-x-1\"\n onClick={() => onToggleTabVisibility(tabPanel.key)}\n >\n <MaterialSymbol icon=\"visibility\" size={16} />\n {t('controlledTabs.enableTab')}\n </ControlledButton>\n )}\n </div>\n )}\n </div>\n </TabPanel>\n );\n })}\n </TabsBody>\n </TabsRoot>\n );\n },\n);\n\nexport default ControlledTabs;\n"],"names":["t"],"mappings":"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"}
1	+ {"version":3,"file":"ControlledTabs.js","sources":["../../../src/components/Form/ControlledTabs.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { TUiCapability, useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport {\n claimUrlParam,\n queueUrlParamUpdate,\n releaseUrlParam,\n TABS_URL_PARAM,\n URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport { Tab, TabPanel, TabsBody, TabsHeader, TabsRoot } from './ControlledTabsPrimitives';\n\ninterface IEditableTabLabelProps {\n label: string;\n count?: number;\n loading?: boolean;\n isVisible?: boolean;\n canToggleVisibility?: boolean;\n onRename: (newLabel: string) => void;\n onToggleVisibility?: () => void;\n}\n\nconst EditableTabLabel = ({\n label,\n count,\n loading,\n isVisible = true,\n canToggleVisibility = true,\n onRename,\n onToggleVisibility,\n}: IEditableTabLabelProps) => {\n const { t } = useTranslation('ui');\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(label);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (editing) {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n }, [editing]);\n\n const handleEditClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n setDraft(label);\n setEditing(true);\n };\n\n const commit = () => {\n const trimmed = draft.trim();\n if (trimmed && trimmed !== label) onRename(trimmed);\n setEditing(false);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n commit();\n }\n if (e.key === 'Escape') {\n setEditing(false);\n setDraft(label);\n }\n e.stopPropagation();\n };\n\n if (editing) {\n return (\n <div className=\"flex items-center\" onClick={(e) => e.stopPropagation()}>\n <input\n ref={inputRef}\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commit}\n onKeyDown={handleKeyDown}\n style={{ width: `${Math.max(draft.length + 2, 6)}ch` }}\n className=\"border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none\"\n />\n </div>\n );\n }\n\n return (\n <div className=\"group/tab flex items-center gap-x-1.5 align-bottom\">\n <span>{label}</span>\n {count !== undefined &&\n (loading ? (\n <LoadingSpinner size={3} />\n ) : (\n <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\">\n {formatNumber(count)}\n </span>\n ))}\n <ControlledTooltip content={t('controlledTabs.renameTab')}>\n <ControlledButton\n aria-label={t('controlledTabs.renameTab')}\n defaultHtmlButton\n onClick={handleEditClick}\n className=\"ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis\"\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"edit\" size={14} />\n </ControlledButton>\n </ControlledTooltip>\n {onToggleVisibility && (\n <ControlledTooltip\n content={\n !canToggleVisibility\n ? t('controlledTabs.mustKeepOneEnabled')\n : isVisible\n ? t('controlledTabs.disableTab')\n : t('controlledTabs.enableTabShort')\n }\n >\n <ControlledButton\n aria-label={isVisible ? t('controlledTabs.disableTab') : t('controlledTabs.enableTabShort')}\n defaultHtmlButton\n onClick={(e) => {\n e.stopPropagation();\n if (canToggleVisibility) onToggleVisibility();\n }}\n className={classNames('ml-0.5 flex items-center transition-colors', {\n ['text-foreground-faint hover:text-warning-emphasis']: isVisible && canToggleVisibility,\n ['text-warning-emphasis hover:text-success-emphasis']: !isVisible,\n ['cursor-not-allowed text-foreground-faint']: isVisible && !canToggleVisibility,\n })}\n tabIndex={-1}\n >\n <MaterialSymbol icon={isVisible ? 'visibility' : 'visibility_off'} size={14} />\n </ControlledButton>\n </ControlledTooltip>\n )}\n </div>\n );\n};\n\nexport interface ITabInfo {\n label: string;\n value: string;\n /** Missing capability removes the tab and never mounts its panel, so no protected request runs. /\n capability?: TUiCapability \| Array<TUiCapability>;\n count?: number;\n /* Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). /\n alertCount?: number;\n tooltip?: string;\n status?: number \| string;\n isVisible?: boolean;\n /* When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). /\n editable?: boolean;\n /\n Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses\n * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.\n /\n trailingSlot?: ReactNode;\n}\n\nexport interface IDataTab {\n key: string;\n element: ReactNode;\n}\n\ninterface IControlledTabsProps {\n initialActiveTab: string;\n activeTab?: string;\n tabs: Array<ITabInfo>;\n dataTabs: Array<IDataTab>;\n loading?: boolean;\n /* Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. /\n disabled?: boolean;\n handleActiveTabChildren?: () => void;\n useRenderValidation?: boolean;\n onTabChange?: (tab: string) => void;\n beforeTabChange?: (from: string, to: string) => boolean;\n tabsBodyClassName?: string;\n tabPanelClassName?: string;\n\n rootClassName?: string;\n /* Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). /\n tabClassName?: string;\n headerSlot?: ReactNode;\n /* Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). /\n actionsSlot?: ReactNode;\n onRenameTab?: (value: string, newLabel: string) => void;\n onToggleTabVisibility?: (value: string) => void;\n /\n Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos\n * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;\n * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).\n /\n onReorderTab?: (fromValue: string, toValue: string) => void;\n /\n Renders the tab header as a single horizontally-scrollable line (browser-tab style)\n * with navigation arrows and a \"+N\" overflow menu, instead of wrapping onto several lines.\n /\n scrollableHeader?: boolean;\n /\n Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com\n * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais\n * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra\n * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).\n /\n stickyHeader?: boolean;\n /\n Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e\n * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/\n * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir\n * com abas de nível de página que já usam `activeTab`.\n /\n syncWithUrl?: boolean;\n}\n\nconst ControlledTabs = forwardRef<unknown, IControlledTabsProps>(\n (\n {\n initialActiveTab,\n activeTab: controlledActiveTab,\n tabs: tabsProp,\n dataTabs: dataTabsProp,\n loading = false,\n disabled = false,\n handleActiveTabChildren,\n useRenderValidation = false,\n onTabChange,\n beforeTabChange,\n tabsBodyClassName,\n tabPanelClassName,\n rootClassName,\n tabClassName,\n headerSlot,\n actionsSlot,\n onRenameTab,\n onToggleTabVisibility,\n onReorderTab,\n scrollableHeader = false,\n stickyHeader = false,\n syncWithUrl = true,\n },\n ref,\n ) => {\n const { t } = useTranslation('ui');\n const { check } = useUiAccess();\n\n const deniedTabValues = useMemo(\n () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),\n [tabsProp, check],\n );\n\n const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);\n\n const dataTabs = useMemo(\n () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),\n [dataTabsProp, deniedTabValues],\n );\n\n const { location, searchParams, setSearchParams } = useUiNavigation();\n const urlParamOwnerIdRef = useRef<object>({});\n const scrollRef = useRef<HTMLDivElement>(null);\n const stickySentinelRef = useRef<HTMLDivElement>(null);\n const stickyBarRef = useRef<HTMLDivElement>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n // Abas que cruzam uma borda da área rolável (visíveis só pela metade). Ficam invisíveis para\n // que na borda só apareça aba inteira ou espaço vazio, nunca um pedaço de texto cortado.\n const [clippedTabValues, setClippedTabValues] = useState<Array<string>>([]);\n // Barra sticky: detecta quando a barra \"grudou\" (usuário já rolou) para só então mostrar a sombra.\n const [isStuck, setIsStuck] = useState(false);\n // Drag nativo das abas (opt-in via onReorderTab), mesmo molde dos campos do construtor.\n const dragTabValueRef = useRef<string \| null>(null);\n const [draggingTabValue, setDraggingTabValue] = useState<string \| null>(null);\n const [dragOverTabValue, setDragOverTabValue] = useState<string \| null>(null);\n\n const resolveInitialActiveTab = () => {\n const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab)\n ? initialActiveTab\n : (tabs[0]?.value ?? initialActiveTab);\n\n if (!syncWithUrl) return fallbackTab;\n if ((location.state as { ignoreActiveTab?: boolean } \| null \| undefined)?.ignoreActiveTab === true)\n return fallbackTab;\n const urlActiveTab = searchParams.get(TABS_URL_PARAM);\n const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);\n return isValidUrlTab ? urlActiveTab : fallbackTab;\n };\n\n const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);\n const isControlled = controlledActiveTab !== undefined;\n const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n const handleActiveTab = (tab: string) => {\n if (disabled) return;\n if (beforeTabChange && !beforeTabChange(activeTab, tab)) {\n if (!isControlled) {\n setInternalActiveTab(activeTab);\n }\n return;\n }\n if (handleActiveTabChildren) {\n handleActiveTabChildren();\n }\n if (!isControlled) {\n setInternalActiveTab(tab);\n }\n if (onTabChange) {\n onTabChange(tab);\n }\n\n if (syncWithUrl) {\n queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);\n }\n };\n\n useImperativeHandle(ref, () => ({\n activeTab,\n setActiveTab: handleActiveTab,\n }));\n\n const handleToggleTabVisibility = (value: string) => {\n const visibleCount = tabs.filter((t) => t.isVisible !== false).length;\n const isCurrentlyVisible = tabs.find((t) => t.value === value)?.isVisible !== false;\n if (isCurrentlyVisible && visibleCount <= 1) return;\n onToggleTabVisibility?.(value);\n };\n\n // As abas são o topo da hierarquia de parâmetros: assumem `activeTab` mesmo montando depois de\n // um controle que já o tivesse reivindicado, e o liberam ao desmontar.\n useEffect(() => {\n if (!syncWithUrl) return;\n\n const ownerId = urlParamOwnerIdRef.current;\n claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);\n\n return () => releaseUrlParam(TABS_URL_PARAM, ownerId);\n }, [syncWithUrl]);\n\n useEffect(() => {\n if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {\n queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);\n }\n const tabButton = document.querySelector(`li[data-value=${activeTab}]`) as HTMLElement \| null;\n if (tabButton) {\n tabButton.click();\n }\n }, [activeTab]);\n\n const updateOverflow = useCallback(() => {\n const container = scrollRef.current;\n if (!container) return;\n\n setCanScrollLeft(container.scrollLeft > 4);\n setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);\n\n const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const clipped: Array<string> = [];\n container.querySelectorAll('[data-value]').forEach((node) => {\n const element = node as HTMLElement;\n const value = element.getAttribute('data-value');\n if (!value \|\| value === activeTab) return;\n const rect = element.getBoundingClientRect();\n const crossesLeftEdge =\n rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;\n const crossesRightEdge =\n rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;\n if (crossesLeftEdge \|\| crossesRightEdge) clipped.push(value);\n });\n setClippedTabValues((prev) =>\n prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped,\n );\n }, [activeTab]);\n\n useEffect(() => {\n if (!stickyHeader) return;\n const sentinel = stickySentinelRef.current;\n if (!sentinel \|\| typeof IntersectionObserver === 'undefined') return;\n // Descobre o ancestral rolável para observar o sentinela em relação a ele. Quando o sentinela\n // (logo acima da barra) sai do topo do container, a barra grudou e ligamos a sombra.\n let scrollParent = sentinel.parentElement;\n while (scrollParent) {\n const overflowY = getComputedStyle(scrollParent).overflowY;\n if (overflowY === 'auto' \|\| overflowY === 'scroll') break;\n scrollParent = scrollParent.parentElement;\n }\n const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {\n root: scrollParent ?? null,\n threshold: 0,\n });\n observer.observe(sentinel);\n return () => observer.disconnect();\n }, [stickyHeader]);\n\n // Publica a altura da barra fixa como `--sticky-tabs-height` no container rolável, para\n // que conteúdo sticky mais abaixo (ex.: cabeçalho de material da ficha) possa grudar logo\n // abaixo da barra em vez de ficar escondido atrás dela.\n useEffect(() => {\n if (!stickyHeader) return;\n const bar = stickyBarRef.current;\n if (!bar) return;\n let scrollParent = bar.parentElement;\n while (scrollParent) {\n const overflowY = getComputedStyle(scrollParent).overflowY;\n if (overflowY === 'auto' \|\| overflowY === 'scroll') break;\n scrollParent = scrollParent.parentElement;\n }\n if (!scrollParent) return;\n const target = scrollParent;\n let rafId = 0;\n let lastHeight = -1;\n // Escreve a variável só quando a altura muda de fato, e fora do ciclo de entrega do\n // ResizeObserver (via rAF): escrever um valor que afeta layout dentro do callback dispara\n // \"ResizeObserver loop completed with undelivered notifications\".\n const publishHeight = () => {\n const height = bar.offsetHeight;\n if (height === lastHeight) return;\n lastHeight = height;\n target.style.setProperty('--sticky-tabs-height', `${height}px`);\n };\n publishHeight();\n if (typeof ResizeObserver === 'undefined') return;\n const observer = new ResizeObserver(() => {\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(publishHeight);\n });\n observer.observe(bar);\n return () => {\n cancelAnimationFrame(rafId);\n observer.disconnect();\n target.style.removeProperty('--sticky-tabs-height');\n };\n }, [stickyHeader]);\n\n useEffect(() => {\n if (!scrollableHeader) return;\n updateOverflow();\n const onResize = () => updateOverflow();\n window.addEventListener('resize', onResize);\n\n // The strip also changes size with no window resize: a side panel opening, the web font\n // arriving, the arrows themselves appearing.\n const scroller = scrollRef.current;\n const observer = scroller && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n if (scroller && observer) {\n observer.observe(scroller);\n if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);\n }\n\n return () => {\n window.removeEventListener('resize', onResize);\n observer?.disconnect();\n };\n }, [scrollableHeader, tabs, updateOverflow]);\n\n const scrollByStep = (direction: number) => {\n const container = scrollRef.current;\n if (!container) return;\n const EDGE_TOLERANCE = 1;\n const containerRect = container.getBoundingClientRect();\n const nodes = Array.from(container.querySelectorAll('[data-value]')) as Array<HTMLElement>;\n\n if (direction > 0) {\n const nextHidden = nodes.find(\n (node) => node.getBoundingClientRect().right > containerRect.right + EDGE_TOLERANCE,\n );\n if (!nextHidden) return;\n container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: 'smooth' });\n return;\n }\n\n const previousHidden = [...nodes]\n .reverse()\n .find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);\n if (!previousHidden) return;\n container.scrollBy({\n left: previousHidden.getBoundingClientRect().right - containerRect.right,\n behavior: 'smooth',\n });\n };\n\n const tabLabel = (label: string, count?: number, alertCount?: number) => {\n const showCount = count !== undefined;\n return (\n <div className=\"flex items-center gap-x-1.5 align-bottom\">\n {label}\n {loading && showCount ? (\n <LoadingSpinner size={3} />\n ) : showCount ? (\n <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\">\n {formatNumber(count)}\n </span>\n ) : null}\n {Boolean(alertCount) && (\n <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\">\n {formatNumber(alertCount as number)}\n </span>\n )}\n </div>\n );\n };\n\n const handleTabDragEnd = () => {\n const from = dragTabValueRef.current;\n const to = dragOverTabValue;\n\n if (from && to && from !== to) {\n onReorderTab?.(from, to);\n }\n\n dragTabValueRef.current = null;\n setDraggingTabValue(null);\n setDragOverTabValue(null);\n };\n\n const tabElements = tabs.map((tab, index) => {\n const isActive = activeTab === tab.value && tab.isVisible !== false;\n const isInactive = activeTab !== tab.value && tab.isVisible !== false;\n const isTabDropTarget =\n Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;\n const tabDragProps = onReorderTab\n ? {\n draggable: true,\n onDragStart: (event: React.DragEvent) => {\n // Arrastar a partir do input de renomear deve selecionar texto, não mover a aba; e a\n // partir do slot de ações (menu da aba) não deve mover nada.\n if ((event.target as HTMLElement).closest('input, [data-tab-trailing-slot]')) {\n event.preventDefault();\n return;\n }\n event.dataTransfer.effectAllowed = 'move';\n dragTabValueRef.current = tab.value;\n setDraggingTabValue(tab.value);\n },\n onDragEnter: (event: React.DragEvent) => {\n event.preventDefault();\n if (dragTabValueRef.current) setDragOverTabValue(tab.value);\n },\n onDragOver: (event: React.DragEvent) => event.preventDefault(),\n onDragEnd: handleTabDragEnd,\n }\n : {};\n return (\n <Tab\n key={`controlled-tab-${index}-${tab.value}`}\n value={tab.value}\n style={{ zIndex: 2 }}\n disabled={loading}\n onClick={() => handleActiveTab(tab.value)}\n {...tabDragProps}\n className={classNames(\n 'max-w-fit px-4',\n tabClassName,\n // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas\n // inativas e peso de fonte mais leve ao trocar de aba.\n stickyHeader && 'rounded-md transition-interactive duration-fast',\n {\n [stickyHeader ? 'font-medium text-brand-emphasis' : 'text-brand-emphasis']: isActive,\n [stickyHeader ? 'font-normal opacity-70 hover:bg-muted-hover hover:opacity-100' : 'opacity-70']:\n isInactive,\n ['!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint']: tab.isVisible === false,\n ['cursor-grab active:cursor-grabbing']: Boolean(onReorderTab),\n ['rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border']: isTabDropTarget,\n ['opacity-40']: draggingTabValue === tab.value,\n ['invisible']: clippedTabValues.includes(tab.value),\n },\n )}\n >\n {onRenameTab && tab.editable !== false ? (\n <EditableTabLabel\n label={tab.label}\n count={tab.count}\n loading={loading}\n isVisible={tab.isVisible !== false}\n canToggleVisibility={tab.isVisible === false \|\| tabs.filter((t) => t.isVisible !== false).length > 1}\n onRename={(newLabel) => onRenameTab(tab.value, newLabel)}\n onToggleVisibility={onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : undefined}\n />\n ) : tab.tooltip ? (\n <ControlledTooltip content={tab.tooltip} className=\"max-w-60\">\n {tabLabel(tab.label, tab.count, tab.alertCount)}\n </ControlledTooltip>\n ) : (\n tabLabel(tab.label, tab.count, tab.alertCount)\n )}\n {tab.trailingSlot && (\n <span\n data-tab-trailing-slot\n className=\"ml-1 flex items-center\"\n onClick={(event) => event.stopPropagation()}\n onMouseDown={(event) => event.stopPropagation()}\n onPointerDown={(event) => event.stopPropagation()}\n onKeyDown={(event) => event.stopPropagation()}\n >\n {tab.trailingSlot}\n </span>\n )}\n </Tab>\n );\n });\n\n // Sublinhado fino (2px). Na barra sticky mantemos a animação de deslize nativa (transform) com\n // transição suave de ~120ms; nas demais telas o indicador segue estático como antes.\n\n // Both arrows or none: out of the row when everything fits, or the first tab starts indented\n // against the content; kept once one direction runs out, or the tabs jump under the pointer.\n const showScrollArrows = canScrollLeft \|\| canScrollRight;\n const scrollArrowClass =\n 'flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis';\n\n return (\n <TabsRoot value={activeTab} className={classNames('!overflow-visible', rootClassName)}>\n {/ Sentinela de 1px: quando sai do topo do container rolável a barra já grudou e acende a sombra. */}\n {stickyHeader && <div ref={stickySentinelRef} className=\"h-px\" aria-hidden />}\n <div\n ref={stickyBarRef}\n className={classNames(\n 'flex shrink-0 items-center',\n // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll\n // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca\n // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.\n scrollableHeader ? 'flex-nowrap gap-x-3' : actionsSlot ? 'flex-wrap gap-x-3 gap-y-2' : 'gap-1',\n // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que\n // rola por baixo e sombra sutil só depois que a barra encosta no topo.\n stickyHeader && 'sticky top-0 z-20 bg-surface transition-shadow duration-fast',\n stickyHeader && isStuck && 'shadow-elevation1',\n disabled && 'pointer-events-none select-none opacity-50',\n )}\n >\n {headerSlot && <>{headerSlot}</>}\n {scrollableHeader ? (\n <div className=\"flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle\">\n {showScrollArrows && (\n <ControlledButton\n aria-label={t('controlledTabs.scrollLeft')}\n defaultHtmlButton\n onClick={() => scrollByStep(-1)}\n disabled={!canScrollLeft}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollLeft })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_left\" size={20} />\n </ControlledButton>\n )}\n\n <div ref={scrollRef} onScroll={updateOverflow} className=\"scrollbar-hide min-w-0 flex-1 overflow-x-auto\">\n <TabsHeader className=\"flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n {tabElements}\n </TabsHeader>\n </div>\n\n {showScrollArrows && (\n <ControlledButton\n aria-label={t('controlledTabs.scrollRight')}\n defaultHtmlButton\n onClick={() => scrollByStep(1)}\n disabled={!canScrollRight}\n className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollRight })}\n tabIndex={-1}\n >\n <MaterialSymbol icon=\"chevron_right\" size={20} />\n </ControlledButton>\n )}\n </div>\n ) : (\n <TabsHeader className=\"flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n {tabElements}\n </TabsHeader>\n )}\n {actionsSlot && <div className=\"ml-auto flex shrink-0 items-center\">{actionsSlot}</div>}\n </div>\n\n <TabsBody className={tabsBodyClassName}>\n {dataTabs.map((tabPanel) => {\n const isTabVisible = tabs.find((t) => t.value === tabPanel.key)?.isVisible !== false;\n return (\n <TabPanel key={tabPanel.key} value={tabPanel.key} className={classNames('size-full', tabPanelClassName)}>\n <div className={classNames('relative size-full', { ['pointer-events-none']: !isTabVisible })}>\n {useRenderValidation\n ? activeTab === tabPanel.key && (\n <div className=\"size-full animate-fade-in transition-interactive duration-slow ease-standard\">\n {tabPanel.element}\n </div>\n )\n : tabPanel.element}\n {!isTabVisible && (\n <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil\">\n <MaterialSymbol icon=\"visibility_off\" size={32} className=\"text-foreground-faint\" />\n <span className=\"text-sm font-medium text-foreground-subtle\">\n {t('controlledTabs.tabDisabled')}\n </span>\n {onToggleTabVisibility && (\n <ControlledButton\n size=\"sm\"\n variant=\"outlined\"\n className=\"pointer-events-auto mt-1 flex items-center gap-x-1\"\n onClick={() => onToggleTabVisibility(tabPanel.key)}\n >\n <MaterialSymbol icon=\"visibility\" size={16} />\n {t('controlledTabs.enableTab')}\n </ControlledButton>\n )}\n </div>\n )}\n </div>\n </TabPanel>\n );\n })}\n </TabsBody>\n </TabsRoot>\n );\n },\n);\n\nexport default ControlledTabs;\n"],"names":["t"],"mappings":"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"}

package/dist/components/Form/ControlledTabsPrimitives.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
 import classNames from "classnames";
-import { twMerge } from "tailwind-merge";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
 const TabsContext = createContext({ active: "" });
-const TabsRoot = ({ value, children, className }) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active: value }, children: /* @__PURE__ */ jsx("div", { className: twMerge("block", className), children }) });
-const TabsHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { role: "tablist", className: twMerge("relative flex", className), children });
+const TabsRoot = ({ value, children, className }) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active: value }, children: /* @__PURE__ */ jsx("div", { className: mergeClasses("block", className), children }) });
+const TabsHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { role: "tablist", className: mergeClasses("relative flex", className), children });
 const Tab = forwardRef(
   ({ value, disabled = false, className, children, ...rest }, ref) => {
     const { active } = useContext(TabsContext);
@@ -17,7 +17,7 @@ const Tab = forwardRef(
         "data-value": value,
         "aria-selected": isActive,
         tabIndex: disabled ? -1 : 0,
-        className: twMerge(
+        className: mergeClasses(
           classNames(
             "relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive",
             isActive ? "border-brand" : "border-transparent",
@@ -32,11 +32,11 @@ const Tab = forwardRef(
   }
 );
 Tab.displayName = "Tab";
-const TabsBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("block w-full", className), children });
+const TabsBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("block w-full", className), children });
 const TabPanel = ({ value, children, className }) => {
   const { active } = useContext(TabsContext);
   const isActive = active === value;
-  return /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: !isActive, className: twMerge(className, classNames({ "!hidden": !isActive })), children });
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: !isActive, className: mergeClasses(className, classNames({ "!hidden": !isActive })), children });
 };
 export {
   Tab,

package/dist/components/Form/ControlledTabsPrimitives.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ~~twMerge~~ } from '~~tailwind-merge~~';\n\ninterface ITabsContext {\n active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n <TabsContext.Provider value={{ active: value }}>\n <div className={~~twMerge~~('block', className)}>{children}</div>\n </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n <div role=\"tablist\" className={~~twMerge~~('relative flex', className)}>\n {children}\n </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n value: string;\n disabled?: boolean;\n className?: string;\n children: React.ReactNode;\n}\n\n/*\n Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n \n The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n /\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n ({ value, disabled = false, className, children, ...rest }, ref) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n return (\n <div\n ref={ref}\n role=\"tab\"\n // ControlledTabs locates tabs by this attribute to scroll the header and hide clipped ones.\n data-value={value}\n aria-selected={isActive}\n tabIndex={disabled ? -1 : 0}\n className={~~twMerge~~(\n classNames(\n 'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n isActive ? 'border-brand' : 'border-transparent',\n { 'pointer-events-none opacity-50': disabled },\n ),\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n <div className={~~twMerge~~('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\n/\n Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n // `flex flex-col` is a display utility too, so merged the other way round it would win over\n // `hidden` and every inactive panel would render stacked under the active one.\n return (\n <div role=\"tabpanel\" hidden={!isActive} className={~~twMerge~~(className, classNames({ '!hidden': !isActive }))}>\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;~~AAQA~~,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,~~QAAQ~~,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,~~CACzD~~;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,~~QAAQ~~,iBAAiB,SAAS,~~GAC9D~~,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,~~QAAQ~~,gBAAgB,SAAS,GAAI,SAAA,CAAS;~~AAazD~~,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,~~QAAQ~~,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,~~GACvG~~,UACH;AAEJ;"}
1	+ {"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface ITabsContext {\n active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n <TabsContext.Provider value={{ active: value }}>\n <div className={mergeClasses('block', className)}>{children}</div>\n </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n <div role=\"tablist\" className={mergeClasses('relative flex', className)}>\n {children}\n </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n value: string;\n disabled?: boolean;\n className?: string;\n children: React.ReactNode;\n}\n\n/*\n Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n \n The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n /\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n ({ value, disabled = false, className, children, ...rest }, ref) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n return (\n <div\n ref={ref}\n role=\"tab\"\n // ControlledTabs locates tabs by this attribute to scroll the header and hide clipped ones.\n data-value={value}\n aria-selected={isActive}\n tabIndex={disabled ? -1 : 0}\n className={mergeClasses(\n classNames(\n 'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n isActive ? 'border-brand' : 'border-transparent',\n { 'pointer-events-none opacity-50': disabled },\n ),\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n <div className={mergeClasses('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\n/\n Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n const { active } = useContext(TabsContext);\n const isActive = active === value;\n\n // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n // `flex flex-col` is a display utility too, so merged the other way round it would win over\n // `hidden` and every inactive panel would render stacked under the active one.\n return (\n <div role=\"tabpanel\" hidden={!isActive} className={mergeClasses(className, classNames({ '!hidden': !isActive }))}>\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,aAAa,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CAC9D;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,aAAa,iBAAiB,SAAS,GACnE,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,aAAa,gBAAgB,SAAS,GAAI,SAAA,CAAS;AAa9D,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,aAAa,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,GAC5G,UACH;AAEJ;"}

package/dist/components/Form/ControlledTextarea.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import { twMerge } from "tailwind-merge";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
 const RESIZE_CLASS = {
   none: "resize-none",
   vertical: "resize-y"
@@ -26,7 +26,7 @@ const ControlledTextarea = ({
       placeholder: placeholder ?? label,
       "aria-label": ariaLabel ?? label,
       "aria-invalid": error || void 0,
-      className: twMerge(
+      className: mergeClasses(
         classNames(
           "w-full rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors",
           "placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted",

package/dist/components/Form/ControlledTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledTextarea.js","sources":["../../../src/components/Form/ControlledTextarea.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { ~~twMerge~~ } from '~~tailwind-merge~~';\n\nexport type TTextareaResize = 'none' \| 'vertical';\n\ninterface IControlledTextareaProps extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'className' \| 'style'\n> {\n label?: string;\n error?: boolean;\n errorMessage?: string;\n resize?: TTextareaResize;\n className?: string;\n containerClassName?: string;\n /** Reaches the native textarea, for hosts that must focus or measure it imperatively. /\n textareaRef?: React.Ref<HTMLTextAreaElement>;\n}\n\nconst RESIZE_CLASS: Record<TTextareaResize, string> = {\n none: 'resize-none',\n vertical: 'resize-y',\n};\n\n/\n The label is rendered as the placeholder and as the accessible name, mirroring\n * ControlledInput: a floating label animates onto the border and relies on pseudo-element\n * border segments to cut a notch, which breaks wherever the border is overridden.\n \n Background, border and focus ring come from the form base layer in index.css, so this\n * component names no colour for them.\n */\nconst ControlledTextarea: React.FC<IControlledTextareaProps> = ({\n label,\n error = false,\n errorMessage,\n resize = 'vertical',\n className,\n containerClassName,\n textareaRef,\n rows = 4,\n placeholder,\n 'aria-label': ariaLabel,\n ...rest\n}) => (\n <div className={classNames('w-full', containerClassName)}>\n <textarea\n ref={textareaRef}\n rows={rows}\n placeholder={placeholder ?? label}\n aria-label={ariaLabel ?? label}\n aria-invalid={error \|\| undefined}\n className={~~twMerge~~(\n classNames(\n 'w-full rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors',\n 'placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted',\n RESIZE_CLASS[resize],\n { 'border-danger focus:border-danger': error },\n ),\n className,\n )}\n {...rest}\n />\n\n {error && errorMessage && <div className=\"mt-1 text-xs text-danger-emphasis\">{errorMessage}</div>}\n </div>\n);\n\nexport default ControlledTextarea;\n"],"names":[],"mappings":";;;~~AAoBA~~,MAAM,eAAgD;AAAA,EACpD,MAAM;AAAA,EACN,UAAU;AACZ;AAUA,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,2BACG,OAAA,EAAI,WAAW,WAAW,UAAU,kBAAkB,GACrD,UAAA;AAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B,cAAY,aAAa;AAAA,MACzB,gBAAc,SAAS;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,UACE;AAAA,UACA;AAAA,UACA,aAAa,MAAM;AAAA,UACnB,EAAE,qCAAqC,MAAA;AAAA,QAAM;AAAA,QAE/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA,EAGL,SAAS,gBAAgB,oBAAC,OAAA,EAAI,WAAU,qCAAqC,UAAA,aAAA,CAAa;AAAA,EAAA,CAC7F;"}
1	+ {"version":3,"file":"ControlledTextarea.js","sources":["../../../src/components/Form/ControlledTextarea.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TTextareaResize = 'none' \| 'vertical';\n\ninterface IControlledTextareaProps extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'className' \| 'style'\n> {\n label?: string;\n error?: boolean;\n errorMessage?: string;\n resize?: TTextareaResize;\n className?: string;\n containerClassName?: string;\n /** Reaches the native textarea, for hosts that must focus or measure it imperatively. /\n textareaRef?: React.Ref<HTMLTextAreaElement>;\n}\n\nconst RESIZE_CLASS: Record<TTextareaResize, string> = {\n none: 'resize-none',\n vertical: 'resize-y',\n};\n\n/\n The label is rendered as the placeholder and as the accessible name, mirroring\n * ControlledInput: a floating label animates onto the border and relies on pseudo-element\n * border segments to cut a notch, which breaks wherever the border is overridden.\n \n Background, border and focus ring come from the form base layer in index.css, so this\n * component names no colour for them.\n */\nconst ControlledTextarea: React.FC<IControlledTextareaProps> = ({\n label,\n error = false,\n errorMessage,\n resize = 'vertical',\n className,\n containerClassName,\n textareaRef,\n rows = 4,\n placeholder,\n 'aria-label': ariaLabel,\n ...rest\n}) => (\n <div className={classNames('w-full', containerClassName)}>\n <textarea\n ref={textareaRef}\n rows={rows}\n placeholder={placeholder ?? label}\n aria-label={ariaLabel ?? label}\n aria-invalid={error \|\| undefined}\n className={mergeClasses(\n classNames(\n 'w-full rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors',\n 'placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted',\n RESIZE_CLASS[resize],\n { 'border-danger focus:border-danger': error },\n ),\n className,\n )}\n {...rest}\n />\n\n {error && errorMessage && <div className=\"mt-1 text-xs text-danger-emphasis\">{errorMessage}</div>}\n </div>\n);\n\nexport default ControlledTextarea;\n"],"names":[],"mappings":";;;AAqBA,MAAM,eAAgD;AAAA,EACpD,MAAM;AAAA,EACN,UAAU;AACZ;AAUA,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,2BACG,OAAA,EAAI,WAAW,WAAW,UAAU,kBAAkB,GACrD,UAAA;AAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa,eAAe;AAAA,MAC5B,cAAY,aAAa;AAAA,MACzB,gBAAc,SAAS;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,UACE;AAAA,UACA;AAAA,UACA,aAAa,MAAM;AAAA,UACnB,EAAE,qCAAqC,MAAA;AAAA,QAAM;AAAA,QAE/C;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA,EAGL,SAAS,gBAAgB,oBAAC,OAAA,EAAI,WAAU,qCAAqC,UAAA,aAAA,CAAa;AAAA,EAAA,CAC7F;"}

package/dist/components/Form/ControlledTimeline.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { twMerge } from "tailwind-merge";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
 const DEFAULT_RAIL_WIDTH = "1.75rem";
-const ControlledTimelineRoot = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex w-full flex-col", className), children });
+const ControlledTimelineRoot = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("flex w-full flex-col", className), children });
 const ControlledTimelineItem = ({
   children,
   className,
@@ -10,7 +10,7 @@ const ControlledTimelineItem = ({
   "div",
   {
     style: { "--timeline-rail": railWidth },
-    className: twMerge("relative flex flex-col gap-2", className),
+    className: mergeClasses("relative flex flex-col gap-2", className),
     children
   }
 );
@@ -18,29 +18,32 @@ const ControlledTimelineConnector = ({ children, className }) => /* @__PURE__ */
   "div",
   {
     "aria-hidden": true,
-    className: twMerge("absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center", className),
+    className: mergeClasses(
+      "absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center",
+      className
+    ),
     children: [
       /* @__PURE__ */ jsx("span", { className: "h-full w-0.5 bg-border" }),
       children
     ]
   }
 );
-const ControlledTimelineHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("relative flex items-center gap-4", className), children });
+const ControlledTimelineHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("relative flex items-center gap-4", className), children });
 const ControlledTimelineIcon = ({ children, className }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: twMerge(
+    className: mergeClasses(
       "relative z-[2] flex w-[var(--timeline-rail,1.75rem)] shrink-0 items-center justify-center rounded-full",
       className
     ),
     children
   }
 );
-const ControlledTimelineBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex gap-4 pl-[var(--timeline-rail,1.75rem)]", className), children });
+const ControlledTimelineBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: mergeClasses("flex gap-4 pl-[var(--timeline-rail,1.75rem)]", className), children });
 const ControlledTimeline = ({ title, description, iconColor = "bg-scrim" }) => /* @__PURE__ */ jsx(ControlledTimelineRoot, { children: /* @__PURE__ */ jsxs(ControlledTimelineItem, { railWidth: "0.75rem", children: [
   /* @__PURE__ */ jsx(ControlledTimelineConnector, {}),
   /* @__PURE__ */ jsxs(ControlledTimelineHeader, { className: "h-3", children: [
-    /* @__PURE__ */ jsx(ControlledTimelineIcon, { className: twMerge("aspect-square", iconColor) }),
+    /* @__PURE__ */ jsx(ControlledTimelineIcon, { className: mergeClasses("aspect-square", iconColor) }),
     /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-foreground", children: title })
   ] }),
   /* @__PURE__ */ jsx(ControlledTimelineBody, { className: "pb-8", children: description })

package/dist/components/Form/ControlledTimeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledTimeline.js","sources":["../../../src/components/Form/ControlledTimeline.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~twMerge~~ } from '~~tailwind-merge~~';\n\nconst DEFAULT_RAIL_WIDTH = '1.75rem';\n\ninterface ITimelineSectionProps {\n children?: React.ReactNode;\n className?: string;\n}\n\nexport const ControlledTimelineRoot: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={~~twMerge~~('flex w-full flex-col', className)}>{children}</div>\n);\n\ninterface IControlledTimelineItemProps extends ITimelineSectionProps {\n /** Width of the icon column the connector line centres itself in. /\n railWidth?: string;\n}\n\nexport const ControlledTimelineItem: React.FC<IControlledTimelineItemProps> = ({\n children,\n className,\n railWidth = DEFAULT_RAIL_WIDTH,\n}) => (\n <div\n style={{ '--timeline-rail': railWidth } as React.CSSProperties}\n className={~~twMerge~~('relative flex flex-col gap-2', className)}\n >\n {children}\n </div>\n);\n\n/\n Spans the item and centres itself in the icon column, whose width comes from the item's\n * `--timeline-rail`. That keeps the line under icons of different sizes without measuring.\n */\nexport const ControlledTimelineConnector: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div\n aria-hidden\n className={~~twMerge~~('absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center', className)}\n >\n <span className=\"h-full w-0.5 bg-border\" />\n {children}\n </div>\n);\n\nexport const ControlledTimelineHeader: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={~~twMerge~~('relative flex items-center gap-4', className)}>{children}</div>\n);\n\nexport const ControlledTimelineIcon: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div\n className={~~twMerge~~(\n 'relative z-[2] flex w-[var(--timeline-rail,1.75rem)] shrink-0 items-center justify-center rounded-full',\n className,\n )}\n >\n {children}\n </div>\n);\n\nexport const ControlledTimelineBody: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={~~twMerge~~('flex gap-4 pl-[var(--timeline-rail,1.75rem)]', className)}>{children}</div>\n);\n\ninterface IControlledTimelineProps {\n title: string;\n description: React.ReactNode;\n iconColor?: string;\n}\n\nconst ControlledTimeline: React.FC<IControlledTimelineProps> = ({ title, description, iconColor = 'bg-scrim' }) => (\n <ControlledTimelineRoot>\n <ControlledTimelineItem railWidth=\"0.75rem\">\n <ControlledTimelineConnector />\n <ControlledTimelineHeader className=\"h-3\">\n <ControlledTimelineIcon className={~~twMerge~~('aspect-square', iconColor)} />\n <span className=\"text-base font-semibold text-foreground\">{title}</span>\n </ControlledTimelineHeader>\n <ControlledTimelineBody className=\"pb-8\">{description}</ControlledTimelineBody>\n </ControlledTimelineItem>\n </ControlledTimelineRoot>\n);\n\nexport default ControlledTimeline;\n"],"names":[],"mappings":";;~~AAGA~~,MAAM,qBAAqB;AAOpB,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,~~QAAQ~~,wBAAwB,SAAS,GAAI,SAAA,CAAS;~~AAQjE~~,MAAM,yBAAiE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,YAAY;AACd,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO,EAAE,mBAAmB,UAAA;AAAA,IAC5B,WAAW,~~QAAQ~~,gCAAgC,SAAS;AAAA,~~IAE3D~~;AAAA,EAAA;AACH;AAOK,MAAM,8BAA+D,CAAC,EAAE,UAAU,gBACvF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAW,~~QAAQ~~,~~qFAAqF~~,~~SAAS~~;AAAA,~~IAEjH~~,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,yBAAA,CAAyB;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AACH;AAGK,MAAM,2BAA4D,CAAC,EAAE,UAAU,UAAA,MACpF,oBAAC,OAAA,EAAI,WAAW,~~QAAQ~~,oCAAoC,SAAS,GAAI,SAAA,CAAS;~~AAG7E~~,MAAM,yBAA0D,CAAC,EAAE,UAAU,gBAClF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH;AAGK,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,~~QAAQ~~,gDAAgD,SAAS,GAAI,SAAA,CAAS;~~AAShG~~,MAAM,qBAAyD,CAAC,EAAE,OAAO,aAAa,YAAY,WAAA,MAChG,oBAAC,wBAAA,EACC,UAAA,qBAAC,wBAAA,EAAuB,WAAU,WAChC,UAAA;AAAA,EAAA,oBAAC,6BAAA,EAA4B;AAAA,EAC7B,qBAAC,0BAAA,EAAyB,WAAU,OAClC,UAAA;AAAA,IAAA,oBAAC,wBAAA,EAAuB,WAAW,~~QAAQ~~,iBAAiB,SAAS,GAAG;AAAA,~~IACxE~~,oBAAC,QAAA,EAAK,WAAU,2CAA2C,UAAA,MAAA,CAAM;AAAA,EAAA,GACnE;AAAA,EACA,oBAAC,wBAAA,EAAuB,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,CACxD,EAAA,CACF;"}
1	+ {"version":3,"file":"ControlledTimeline.js","sources":["../../../src/components/Form/ControlledTimeline.tsx"],"sourcesContent":["import React from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nconst DEFAULT_RAIL_WIDTH = '1.75rem';\n\ninterface ITimelineSectionProps {\n children?: React.ReactNode;\n className?: string;\n}\n\nexport const ControlledTimelineRoot: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={mergeClasses('flex w-full flex-col', className)}>{children}</div>\n);\n\ninterface IControlledTimelineItemProps extends ITimelineSectionProps {\n /** Width of the icon column the connector line centres itself in. /\n railWidth?: string;\n}\n\nexport const ControlledTimelineItem: React.FC<IControlledTimelineItemProps> = ({\n children,\n className,\n railWidth = DEFAULT_RAIL_WIDTH,\n}) => (\n <div\n style={{ '--timeline-rail': railWidth } as React.CSSProperties}\n className={mergeClasses('relative flex flex-col gap-2', className)}\n >\n {children}\n </div>\n);\n\n/\n Spans the item and centres itself in the icon column, whose width comes from the item's\n * `--timeline-rail`. That keeps the line under icons of different sizes without measuring.\n */\nexport const ControlledTimelineConnector: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div\n aria-hidden\n className={mergeClasses(\n 'absolute left-0 top-0 flex h-full w-[var(--timeline-rail,1.75rem)] justify-center',\n className,\n )}\n >\n <span className=\"h-full w-0.5 bg-border\" />\n {children}\n </div>\n);\n\nexport const ControlledTimelineHeader: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={mergeClasses('relative flex items-center gap-4', className)}>{children}</div>\n);\n\nexport const ControlledTimelineIcon: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div\n className={mergeClasses(\n 'relative z-[2] flex w-[var(--timeline-rail,1.75rem)] shrink-0 items-center justify-center rounded-full',\n className,\n )}\n >\n {children}\n </div>\n);\n\nexport const ControlledTimelineBody: React.FC<ITimelineSectionProps> = ({ children, className }) => (\n <div className={mergeClasses('flex gap-4 pl-[var(--timeline-rail,1.75rem)]', className)}>{children}</div>\n);\n\ninterface IControlledTimelineProps {\n title: string;\n description: React.ReactNode;\n iconColor?: string;\n}\n\nconst ControlledTimeline: React.FC<IControlledTimelineProps> = ({ title, description, iconColor = 'bg-scrim' }) => (\n <ControlledTimelineRoot>\n <ControlledTimelineItem railWidth=\"0.75rem\">\n <ControlledTimelineConnector />\n <ControlledTimelineHeader className=\"h-3\">\n <ControlledTimelineIcon className={mergeClasses('aspect-square', iconColor)} />\n <span className=\"text-base font-semibold text-foreground\">{title}</span>\n </ControlledTimelineHeader>\n <ControlledTimelineBody className=\"pb-8\">{description}</ControlledTimelineBody>\n </ControlledTimelineItem>\n </ControlledTimelineRoot>\n);\n\nexport default ControlledTimeline;\n"],"names":[],"mappings":";;AAIA,MAAM,qBAAqB;AAOpB,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,aAAa,wBAAwB,SAAS,GAAI,SAAA,CAAS;AAQtE,MAAM,yBAAiE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,YAAY;AACd,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO,EAAE,mBAAmB,UAAA;AAAA,IAC5B,WAAW,aAAa,gCAAgC,SAAS;AAAA,IAEhE;AAAA,EAAA;AACH;AAOK,MAAM,8BAA+D,CAAC,EAAE,UAAU,gBACvF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,yBAAA,CAAyB;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AACH;AAGK,MAAM,2BAA4D,CAAC,EAAE,UAAU,UAAA,MACpF,oBAAC,OAAA,EAAI,WAAW,aAAa,oCAAoC,SAAS,GAAI,SAAA,CAAS;AAGlF,MAAM,yBAA0D,CAAC,EAAE,UAAU,gBAClF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH;AAGK,MAAM,yBAA0D,CAAC,EAAE,UAAU,UAAA,MAClF,oBAAC,OAAA,EAAI,WAAW,aAAa,gDAAgD,SAAS,GAAI,SAAA,CAAS;AASrG,MAAM,qBAAyD,CAAC,EAAE,OAAO,aAAa,YAAY,WAAA,MAChG,oBAAC,wBAAA,EACC,UAAA,qBAAC,wBAAA,EAAuB,WAAU,WAChC,UAAA;AAAA,EAAA,oBAAC,6BAAA,EAA4B;AAAA,EAC7B,qBAAC,0BAAA,EAAyB,WAAU,OAClC,UAAA;AAAA,IAAA,oBAAC,wBAAA,EAAuB,WAAW,aAAa,iBAAiB,SAAS,GAAG;AAAA,IAC7E,oBAAC,QAAA,EAAK,WAAU,2CAA2C,UAAA,MAAA,CAAM;AAAA,EAAA,GACnE;AAAA,EACA,oBAAC,wBAAA,EAAuB,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,CACxD,EAAA,CACF;"}

package/dist/components/Form/ControlledVoiceTextarea.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 interface IControlledVoiceTextareaProps {
+    /** Reaches the field itself, so a `FieldLabel` can point at it. */
+    id?: string;
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;

package/dist/components/Form/ControlledVoiceTextarea.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
 import ControlledButton from "./ControlledButton.js";
 import ControlledTextarea from "./ControlledTextarea.js";
 const ControlledVoiceTextarea = ({
+  id,
   value,
   onChange,
   placeholder,
@@ -52,6 +53,7 @@ const ControlledVoiceTextarea = ({
     /* @__PURE__ */ jsx(
       ControlledTextarea,
       {
+        id,
         value,
         rows,
         resize: "none",
@@ -66,6 +68,7 @@ const ControlledVoiceTextarea = ({
       /* @__PURE__ */ jsx(ControlledTooltip, { content: isListening ? t("voiceInput.stop") : t("voiceInput.start"), children: /* @__PURE__ */ jsx(
         ControlledButton,
         {
+          "aria-label": isListening ? t("voiceInput.stop") : t("voiceInput.start"),
           defaultHtmlButton: true,
           disabled,
           onClick: toggle,

package/dist/components/Form/ControlledVoiceTextarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlledVoiceTextarea.js","sources":["../../../src/components/Form/ControlledVoiceTextarea.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport {\n appendInterimTranscript,\n applyVoiceUpdate,\n TVoiceTranscriptionError,\n useVoiceTranscription,\n VOICE_COMMANDS,\n} from '@/hooks/useVoiceTranscription';\n\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport ControlledTextarea from './ControlledTextarea';\n\ninterface IControlledVoiceTextareaProps {\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n rows?: number;\n lang?: string;\n className?: string;\n disabled?: boolean;\n}\n\nconst ControlledVoiceTextarea: React.FC<IControlledVoiceTextareaProps> = ({\n value,\n onChange,\n placeholder,\n rows = 4,\n lang = 'pt-BR',\n className,\n disabled,\n}) => {\n const { t } = useTranslation('ui');\n\n const committedRef = useRef(value);\n const lastEmittedValueRef = useRef(value);\n\n useEffect(() => {\n if (value === lastEmittedValueRef.current) return;\n committedRef.current = value;\n lastEmittedValueRef.current = value;\n }, [value]);\n\n const emitValue = (next: string) => {\n lastEmittedValueRef.current = next;\n onChange(next);\n };\n\n const { isSupported, isListening, error, toggle } = useVoiceTranscription({\n lang,\n onCommit: (update) => {\n const next = applyVoiceUpdate(committedRef.current, update);\n committedRef.current = next;\n emitValue(next);\n },\n onInterim: (text) => emitValue(appendInterimTranscript(committedRef.current, text)),\n });\n\n const handleManualChange = (next: string) => {\n committedRef.current = next;\n emitValue(next);\n };\n\n const errorMessageByCode: Record<TVoiceTranscriptionError, string> = {\n permission: t('voiceInput.errors.permission'),\n microphone: t('voiceInput.errors.microphone'),\n network: t('voiceInput.errors.network'),\n unavailable: t('voiceInput.errors.unavailable'),\n };\n\n const commandHint = VOICE_COMMANDS.map((command) => command.phrases[0]).join(', ');\n\n return (\n <div className={classNames('relative w-full', className)}>\n <ControlledTextarea\n value={value}\n rows={rows}\n resize=\"none\"\n disabled={disabled}\n placeholder={placeholder}\n onChange={(e) => handleManualChange(e.target.value)}\n className=\"pr-12\"\n />\n\n {isSupported && (\n <div className=\"absolute right-2 top-2 flex items-center gap-1\">\n <ControlledTooltip content={t('voiceInput.commandsHint', { commands: commandHint })} className=\"w-56\">\n <span className=\"flex size-7 items-center justify-center rounded-full text-foreground-faint\">\n <MaterialSymbol icon=\"help\" size={16} />\n </span>\n </ControlledTooltip>\n <ControlledTooltip content={isListening ? t('voiceInput.stop') : t('voiceInput.start')}>\n <ControlledButton\n defaultHtmlButton\n disabled={disabled}\n onClick={toggle}\n className={classNames(\n 'flex size-8 items-center justify-center rounded-full transition-colors',\n isListening\n ? 'bg-danger-soft text-danger-emphasis hover:bg-danger-soft'\n : 'text-foreground-faint hover:bg-muted-hover hover:text-brand-emphasis',\n )}\n >\n <MaterialSymbol\n icon={isListening ? 'stop' : 'mic'}\n size={18}\n className={isListening ? 'animate-pulse' : ''}\n />\n </ControlledButton>\n </ControlledTooltip>\n </div>\n )}\n\n {isSupported && error && (\n <span role=\"alert\" className=\"mt-1 flex items-center gap-1 text-xs text-danger-emphasis\">\n <MaterialSymbol icon=\"mic_off\" size={14} />\n {errorMessageByCode[error]}\n </span>\n )}\n </div>\n );\n};\n\nexport default ControlledVoiceTextarea;\n"],"names":[],"mappings":";;;;;;;;;~~AA4BA~~,MAAM,0BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,sBAAsB,OAAO,KAAK;AAExC,YAAU,MAAM;AACd,QAAI,UAAU,oBAAoB,QAAS;AAC3C,iBAAa,UAAU;AACvB,wBAAoB,UAAU;AAAA,EAChC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,CAAC,SAAiB;AAClC,wBAAoB,UAAU;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,EAAE,aAAa,aAAa,OAAO,OAAA,IAAW,sBAAsB;AAAA,IACxE;AAAA,IACA,UAAU,CAAC,WAAW;AACpB,YAAM,OAAO,iBAAiB,aAAa,SAAS,MAAM;AAC1D,mBAAa,UAAU;AACvB,gBAAU,IAAI;AAAA,IAChB;AAAA,IACA,WAAW,CAAC,SAAS,UAAU,wBAAwB,aAAa,SAAS,IAAI,CAAC;AAAA,EAAA,CACnF;AAED,QAAM,qBAAqB,CAAC,SAAiB;AAC3C,iBAAa,UAAU;AACvB,cAAU,IAAI;AAAA,EAChB;AAEA,QAAM,qBAA+D;AAAA,IACnE,YAAY,EAAE,8BAA8B;AAAA,IAC5C,YAAY,EAAE,8BAA8B;AAAA,IAC5C,SAAS,EAAE,2BAA2B;AAAA,IACtC,aAAa,EAAE,+BAA+B;AAAA,EAAA;AAGhD,QAAM,cAAc,eAAe,IAAI,CAAC,YAAY,QAAQ,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI;AAEjF,8BACG,OAAA,EAAI,WAAW,WAAW,mBAAmB,SAAS,GACrD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM,mBAAmB,EAAE,OAAO,KAAK;AAAA,QAClD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGX,eACC,qBAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,MAAA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,2BAA2B,EAAE,UAAU,YAAA,CAAa,GAAG,WAAU,QAC7F,8BAAC,QAAA,EAAK,WAAU,8EACd,UAAA,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI,EAAA,CACxC,EAAA,CACF;AAAA,MACA,oBAAC,qBAAkB,SAAS,cAAc,EAAE,iBAAiB,IAAI,EAAE,kBAAkB,GACnF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,mBAAiB;AAAA,UACjB;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,cACI,6DACA;AAAA,UAAA;AAAA,UAGN,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,cAAc,SAAS;AAAA,cAC7B,MAAM;AAAA,cACN,WAAW,cAAc,kBAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA,EACF,CACF;AAAA,IAAA,GACF;AAAA,IAGD,eAAe,SACd,qBAAC,UAAK,MAAK,SAAQ,WAAU,6DAC3B,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,MAAK,WAAU,MAAM,IAAI;AAAA,MACxC,mBAAmB,KAAK;AAAA,IAAA,EAAA,CAC3B;AAAA,EAAA,GAEJ;AAEJ;"}
1	+ {"version":3,"file":"ControlledVoiceTextarea.js","sources":["../../../src/components/Form/ControlledVoiceTextarea.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport {\n appendInterimTranscript,\n applyVoiceUpdate,\n TVoiceTranscriptionError,\n useVoiceTranscription,\n VOICE_COMMANDS,\n} from '@/hooks/useVoiceTranscription';\n\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport ControlledTextarea from './ControlledTextarea';\n\ninterface IControlledVoiceTextareaProps {\n /** Reaches the field itself, so a `FieldLabel` can point at it. */\n id?: string;\n value: string;\n onChange: (value: string) => void;\n placeholder?: string;\n rows?: number;\n lang?: string;\n className?: string;\n disabled?: boolean;\n}\n\nconst ControlledVoiceTextarea: React.FC<IControlledVoiceTextareaProps> = ({\n id,\n value,\n onChange,\n placeholder,\n rows = 4,\n lang = 'pt-BR',\n className,\n disabled,\n}) => {\n const { t } = useTranslation('ui');\n\n const committedRef = useRef(value);\n const lastEmittedValueRef = useRef(value);\n\n useEffect(() => {\n if (value === lastEmittedValueRef.current) return;\n committedRef.current = value;\n lastEmittedValueRef.current = value;\n }, [value]);\n\n const emitValue = (next: string) => {\n lastEmittedValueRef.current = next;\n onChange(next);\n };\n\n const { isSupported, isListening, error, toggle } = useVoiceTranscription({\n lang,\n onCommit: (update) => {\n const next = applyVoiceUpdate(committedRef.current, update);\n committedRef.current = next;\n emitValue(next);\n },\n onInterim: (text) => emitValue(appendInterimTranscript(committedRef.current, text)),\n });\n\n const handleManualChange = (next: string) => {\n committedRef.current = next;\n emitValue(next);\n };\n\n const errorMessageByCode: Record<TVoiceTranscriptionError, string> = {\n permission: t('voiceInput.errors.permission'),\n microphone: t('voiceInput.errors.microphone'),\n network: t('voiceInput.errors.network'),\n unavailable: t('voiceInput.errors.unavailable'),\n };\n\n const commandHint = VOICE_COMMANDS.map((command) => command.phrases[0]).join(', ');\n\n return (\n <div className={classNames('relative w-full', className)}>\n <ControlledTextarea\n id={id}\n value={value}\n rows={rows}\n resize=\"none\"\n disabled={disabled}\n placeholder={placeholder}\n onChange={(e) => handleManualChange(e.target.value)}\n className=\"pr-12\"\n />\n\n {isSupported && (\n <div className=\"absolute right-2 top-2 flex items-center gap-1\">\n <ControlledTooltip content={t('voiceInput.commandsHint', { commands: commandHint })} className=\"w-56\">\n <span className=\"flex size-7 items-center justify-center rounded-full text-foreground-faint\">\n <MaterialSymbol icon=\"help\" size={16} />\n </span>\n </ControlledTooltip>\n <ControlledTooltip content={isListening ? t('voiceInput.stop') : t('voiceInput.start')}>\n <ControlledButton\n aria-label={isListening ? t('voiceInput.stop') : t('voiceInput.start')}\n defaultHtmlButton\n disabled={disabled}\n onClick={toggle}\n className={classNames(\n 'flex size-8 items-center justify-center rounded-full transition-colors',\n isListening\n ? 'bg-danger-soft text-danger-emphasis hover:bg-danger-soft'\n : 'text-foreground-faint hover:bg-muted-hover hover:text-brand-emphasis',\n )}\n >\n <MaterialSymbol\n icon={isListening ? 'stop' : 'mic'}\n size={18}\n className={isListening ? 'animate-pulse' : ''}\n />\n </ControlledButton>\n </ControlledTooltip>\n </div>\n )}\n\n {isSupported && error && (\n <span role=\"alert\" className=\"mt-1 flex items-center gap-1 text-xs text-danger-emphasis\">\n <MaterialSymbol icon=\"mic_off\" size={14} />\n {errorMessageByCode[error]}\n </span>\n )}\n </div>\n );\n};\n\nexport default ControlledVoiceTextarea;\n"],"names":[],"mappings":";;;;;;;;;AA8BA,MAAM,0BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,sBAAsB,OAAO,KAAK;AAExC,YAAU,MAAM;AACd,QAAI,UAAU,oBAAoB,QAAS;AAC3C,iBAAa,UAAU;AACvB,wBAAoB,UAAU;AAAA,EAChC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,CAAC,SAAiB;AAClC,wBAAoB,UAAU;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,EAAE,aAAa,aAAa,OAAO,OAAA,IAAW,sBAAsB;AAAA,IACxE;AAAA,IACA,UAAU,CAAC,WAAW;AACpB,YAAM,OAAO,iBAAiB,aAAa,SAAS,MAAM;AAC1D,mBAAa,UAAU;AACvB,gBAAU,IAAI;AAAA,IAChB;AAAA,IACA,WAAW,CAAC,SAAS,UAAU,wBAAwB,aAAa,SAAS,IAAI,CAAC;AAAA,EAAA,CACnF;AAED,QAAM,qBAAqB,CAAC,SAAiB;AAC3C,iBAAa,UAAU;AACvB,cAAU,IAAI;AAAA,EAChB;AAEA,QAAM,qBAA+D;AAAA,IACnE,YAAY,EAAE,8BAA8B;AAAA,IAC5C,YAAY,EAAE,8BAA8B;AAAA,IAC5C,SAAS,EAAE,2BAA2B;AAAA,IACtC,aAAa,EAAE,+BAA+B;AAAA,EAAA;AAGhD,QAAM,cAAc,eAAe,IAAI,CAAC,YAAY,QAAQ,QAAQ,CAAC,CAAC,EAAE,KAAK,IAAI;AAEjF,8BACG,OAAA,EAAI,WAAW,WAAW,mBAAmB,SAAS,GACrD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM,mBAAmB,EAAE,OAAO,KAAK;AAAA,QAClD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGX,eACC,qBAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,MAAA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,2BAA2B,EAAE,UAAU,YAAA,CAAa,GAAG,WAAU,QAC7F,8BAAC,QAAA,EAAK,WAAU,8EACd,UAAA,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI,EAAA,CACxC,EAAA,CACF;AAAA,MACA,oBAAC,qBAAkB,SAAS,cAAc,EAAE,iBAAiB,IAAI,EAAE,kBAAkB,GACnF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,cAAc,EAAE,iBAAiB,IAAI,EAAE,kBAAkB;AAAA,UACrE,mBAAiB;AAAA,UACjB;AAAA,UACA,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,cACI,6DACA;AAAA,UAAA;AAAA,UAGN,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,cAAc,SAAS;AAAA,cAC7B,MAAM;AAAA,cACN,WAAW,cAAc,kBAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA,EACF,CACF;AAAA,IAAA,GACF;AAAA,IAGD,eAAe,SACd,qBAAC,UAAK,MAAK,SAAQ,WAAU,6DAC3B,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,MAAK,WAAU,MAAM,IAAI;AAAA,MACxC,mBAAmB,KAAK;AAAA,IAAA,EAAA,CAC3B;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Form/FieldLabel.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+interface IFieldLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor' | 'className' | 'children'> {
+    /** The `id` of the field. Required: a label pointing at nothing names nothing. */
+    htmlFor: string;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * The label written above a field. A field's own `label` is a placeholder plus an accessible name,
+ * so it is gone as soon as the field is filled: a form over something that already exists reads as
+ * a column of bare values, and a choice already made no longer says what it was about.
+ *
+ * Leave the field's `label` out when using this: the association is what names the field then, and
+ * the placeholder is free for an actual example.
+ */
+declare const FieldLabel: React.FC<IFieldLabelProps>;
+export default FieldLabel;

package/dist/components/Form/FieldLabel.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const FieldLabel = ({ htmlFor, className, children, ...rest }) => /* @__PURE__ */ jsx("label", { ...rest, htmlFor, className: mergeClasses("block text-sm font-medium text-foreground", className), children });
+export {
+  FieldLabel as default
+};
+//# sourceMappingURL=FieldLabel.js.map

package/dist/components/Form/FieldLabel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldLabel.js","sources":["../../../src/components/Form/FieldLabel.tsx"],"sourcesContent":["import { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface IFieldLabelProps extends Omit<\n React.LabelHTMLAttributes<HTMLLabelElement>,\n 'htmlFor' | 'className' | 'children'\n> {\n /** The `id` of the field. Required: a label pointing at nothing names nothing. */\n htmlFor: string;\n className?: string;\n children: React.ReactNode;\n}\n\n/**\n * The label written above a field. A field's own `label` is a placeholder plus an accessible name,\n * so it is gone as soon as the field is filled: a form over something that already exists reads as\n * a column of bare values, and a choice already made no longer says what it was about.\n *\n * Leave the field's `label` out when using this: the association is what names the field then, and\n * the placeholder is free for an actual example.\n */\nconst FieldLabel: React.FC<IFieldLabelProps> = ({ htmlFor, className, children, ...rest }) => (\n <label {...rest} htmlFor={htmlFor} className={mergeClasses('block text-sm font-medium text-foreground', className)}>\n {children}\n </label>\n);\n\nexport default FieldLabel;\n"],"names":[],"mappings":";;AAoBA,MAAM,aAAyC,CAAC,EAAE,SAAS,WAAW,UAAU,GAAG,KAAA,0BAChF,SAAA,EAAO,GAAG,MAAM,SAAkB,WAAW,aAAa,6CAA6C,SAAS,GAC9G,SAAA,CACH;"}