@umodeapporg/ui 0.1.0

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

@@ -0,0 +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';\nimport { useLocation, useSearchParams } from 'react-router-dom';\n\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\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 = useLocation();\n    const [searchParams, setSearchParams] = useSearchParams();\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?.ignoreActiveTab === true) 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.\n              if ((event.target as HTMLElement).closest('input')) {\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>\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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"}

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

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+interface ITabsRootProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsRoot: React.FC<ITabsRootProps>;
+interface ITabsHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsHeader: React.FC<ITabsHeaderProps>;
+interface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Rendered as a div with role="tab", not a native button: a tab can carry its own controls
+ * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid
+ * HTML that silently breaks the inner controls.
+ *
+ * The active underline lives on the tab itself rather than on a separate sliding indicator,
+ * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.
+ */
+export declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
+interface ITabsBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TabsBody: React.FC<ITabsBodyProps>;
+interface ITabPanelProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus
+ * and scroll position of every tab the user is not looking at.
+ */
+export declare const TabPanel: React.FC<ITabPanelProps>;
+export {};

package/dist/components/Form/ControlledTabsPrimitives.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import classNames from "classnames";
+import { twMerge } from "tailwind-merge";
+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 Tab = forwardRef(
+  ({ value, disabled = false, className, children, ...rest }, ref) => {
+    const { active } = useContext(TabsContext);
+    const isActive = active === value;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tab",
+        "aria-selected": isActive,
+        tabIndex: disabled ? -1 : 0,
+        className: twMerge(
+          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",
+            { "pointer-events-none opacity-50": disabled }
+          ),
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+const TabsBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("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 });
+};
+export {
+  Tab,
+  TabPanel,
+  TabsBody,
+  TabsHeader,
+  TabsRoot
+};
+//# sourceMappingURL=ControlledTabsPrimitives.js.map

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

@@ -0,0 +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        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,QACL,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;"}

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type TTextareaResize = 'none' | 'vertical';
+interface IControlledTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    resize?: TTextareaResize;
+    className?: string;
+    containerClassName?: string;
+    /** Reaches the native textarea, for hosts that must focus or measure it imperatively. */
+    textareaRef?: React.Ref<HTMLTextAreaElement>;
+}
+/**
+ * The label is rendered as the placeholder and as the accessible name, mirroring
+ * ControlledInput: a floating label animates onto the border and relies on pseudo-element
+ * border segments to cut a notch, which breaks wherever the border is overridden.
+ *
+ * Background, border and focus ring come from the form base layer in index.css, so this
+ * component names no colour for them.
+ */
+declare const ControlledTextarea: React.FC<IControlledTextareaProps>;
+export default ControlledTextarea;

package/dist/components/Form/ControlledTextarea.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { twMerge } from "tailwind-merge";
+const RESIZE_CLASS = {
+  none: "resize-none",
+  vertical: "resize-y"
+};
+const ControlledTextarea = ({
+  label,
+  error = false,
+  errorMessage,
+  resize = "vertical",
+  className,
+  containerClassName,
+  textareaRef,
+  rows = 4,
+  placeholder,
+  "aria-label": ariaLabel,
+  ...rest
+}) => /* @__PURE__ */ jsxs("div", { className: classNames("w-full", containerClassName), children: [
+  /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      rows,
+      placeholder: placeholder ?? label,
+      "aria-label": ariaLabel ?? label,
+      "aria-invalid": error || void 0,
+      className: twMerge(
+        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",
+          RESIZE_CLASS[resize],
+          { "border-danger focus:border-danger": error }
+        ),
+        className
+      ),
+      ...rest
+    }
+  ),
+  error && errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-danger-emphasis", children: errorMessage })
+] });
+export {
+  ControlledTextarea as default
+};
+//# sourceMappingURL=ControlledTextarea.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+interface ITimelineSectionProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledTimelineRoot: React.FC<ITimelineSectionProps>;
+interface IControlledTimelineItemProps extends ITimelineSectionProps {
+    /** Width of the icon column the connector line centres itself in. */
+    railWidth?: string;
+}
+export declare const ControlledTimelineItem: React.FC<IControlledTimelineItemProps>;
+/**
+ * Spans the item and centres itself in the icon column, whose width comes from the item's
+ * `--timeline-rail`. That keeps the line under icons of different sizes without measuring.
+ */
+export declare const ControlledTimelineConnector: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineHeader: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineIcon: React.FC<ITimelineSectionProps>;
+export declare const ControlledTimelineBody: React.FC<ITimelineSectionProps>;
+interface IControlledTimelineProps {
+    title: string;
+    description: React.ReactNode;
+    iconColor?: string;
+}
+declare const ControlledTimeline: React.FC<IControlledTimelineProps>;
+export default ControlledTimeline;

package/dist/components/Form/ControlledTimeline.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+const DEFAULT_RAIL_WIDTH = "1.75rem";
+const ControlledTimelineRoot = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex w-full flex-col", className), children });
+const ControlledTimelineItem = ({
+  children,
+  className,
+  railWidth = DEFAULT_RAIL_WIDTH
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: { "--timeline-rail": railWidth },
+    className: twMerge("relative flex flex-col gap-2", className),
+    children
+  }
+);
+const ControlledTimelineConnector = ({ children, className }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "aria-hidden": true,
+    className: twMerge("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 ControlledTimelineIcon = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: twMerge(
+      "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 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("span", { className: "text-base font-semibold text-foreground", children: title })
+  ] }),
+  /* @__PURE__ */ jsx(ControlledTimelineBody, { className: "pb-8", children: description })
+] }) });
+export {
+  ControlledTimelineBody,
+  ControlledTimelineConnector,
+  ControlledTimelineHeader,
+  ControlledTimelineIcon,
+  ControlledTimelineItem,
+  ControlledTimelineRoot,
+  ControlledTimeline as default
+};
+//# sourceMappingURL=ControlledTimeline.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,74 @@
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export type TControlledViewToggleSize = 'sm' | 'md';
+export interface IControlledViewToggleOption<V extends string = string> {
+    value: V;
+    /** Optional icon; options without one render their label as text instead. */
+    icon?: SymbolCodepoints;
+    /**
+     * Option name. Rendered as visible text when the option has no icon or when
+     * `showLabels` is on; otherwise shown as the option's tooltip.
+     */
+    label: string;
+    /**
+     * Replaces the label in the tooltip when the option needs to explain itself, not just be named.
+     * The label stays the accessible name, so it must remain short.
+     */
+    tooltip?: string;
+    /** Counter badge next to the label, as in ControlledTabs. Hidden when null/undefined. */
+    count?: number | null;
+    /** Replaces the counter badge with a spinner while this option's data loads. */
+    loading?: boolean;
+}
+interface IControlledViewToggleBaseProps<V extends string = string> {
+    options: Array<IControlledViewToggleOption<V>>;
+    /** Renders every option's label as visible text next to its icon. */
+    showLabels?: boolean;
+    /** `md` (default) pairs with page-level controls; `sm` matches compact filter bars. */
+    size?: TControlledViewToggleSize;
+    /** Disables every option, keeping the current selection visible. */
+    disabled?: boolean;
+    /**
+     * Mirrors the selection in the URL, on by default like `ControlledTabs`. Turn it off for toggles
+     * that hold form state (a weekday picker, an AND/OR combinator) or that live inside a drawer,
+     * where the selection is not page state and should not reach the URL.
+     */
+    syncWithUrl?: boolean;
+    /**
+     * Query param used when `syncWithUrl` is on, defaults to `view`. A page holding more than one
+     * synced toggle must give each a unique key: the first one mounted keeps the param and the others
+     * stop writing (with a warning in development) instead of overwriting each other.
+     *
+     * Lifecycle mirrors `ControlledTabs`: on mount an existing valid param wins over `value` and is
+     * pushed to the host through `onChange`; with no param (or an invalid one) the current value is
+     * stamped into the URL right away. From there on the host selection is the authority and every
+     * change rewrites the param, always preserving the other params and replacing the history entry.
+     * In `multiple` mode values are comma separated and an empty selection removes the param.
+     */
+    urlParamKey?: string;
+    className?: string;
+}
+interface IControlledViewToggleSingleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {
+    multiple?: false;
+    value: V;
+    onChange: (value: V) => void;
+}
+interface IControlledViewToggleMultipleProps<V extends string = string> extends IControlledViewToggleBaseProps<V> {
+    multiple: true;
+    value: Array<V>;
+    /** Receives the whole next selection, which may be empty. */
+    onChange: (values: Array<V>) => void;
+}
+export type TControlledViewToggleProps<V extends string = string> = IControlledViewToggleSingleProps<V> | IControlledViewToggleMultipleProps<V>;
+/**
+ * Segmented toggle for switching between visualization modes (e.g. cards /
+ * list / grouped). Options can be icon-only, text-only or icon + text, and the
+ * component is generic over the option value union so hosts keep their own mode
+ * types. Clicking the already-active option fires `onChange` again, letting
+ * hosts react to re-selection (e.g. reopening a configuration dialog).
+ *
+ * With `multiple`, it becomes a segmented multi-select: `value` is the selected
+ * array, clicking an option adds or removes it, and `onChange` receives the
+ * whole next selection, which may be empty.
+ */
+declare const ControlledViewToggle: <V extends string = string>(props: TControlledViewToggleProps<V>) => import("react").JSX.Element;
+export default ControlledViewToggle;

package/dist/components/Form/ControlledViewToggle.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, Fragment } from "react";
+import classNames from "classnames";
+import { useSearchParams } from "react-router-dom";
+import ControlledButton from "./ControlledButton.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { formatNumber } from "../../helpers/formatHelpers.js";
+import { uiLogger } from "../../helpers/uiLogger.js";
+import { TABS_URL_PARAM, claimUrlParam, URL_PARAM_PRIORITY, releaseUrlParam, ownsUrlParam, queueUrlParamUpdate } from "../../helpers/urlParamSync.js";
+const DEFAULT_URL_PARAM_KEY = "view";
+const SIZE_STYLES = {
+  sm: {
+    // Inner radius mirrors the container radius minus its padding, so the active
+    // segment stays concentric with the outer border.
+    container: "h-9 gap-1 rounded-xl",
+    button: "h-7 rounded-lg px-2.5",
+    textClass: "text-xs",
+    // One step darker than md so the segments match the neighbouring controls
+    // in the compact filter bars this size is used by.
+    inactive: "text-foreground-muted hover:bg-muted-hover hover:text-foreground",
+    icon: 16
+  },
+  // leading-[18px] matches the icon height so icon-only, text-only and
+  // icon + text options all keep the same button height.
+  md: {
+    container: "gap-1 rounded-lg shadow-sm",
+    button: "rounded-md px-2.5 py-1.5",
+    textClass: "text-sm leading-[18px]",
+    inactive: "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted",
+    icon: 18
+  }
+};
+const ControlledViewToggle = (props) => {
+  const {
+    options,
+    showLabels = false,
+    size = "md",
+    disabled = false,
+    syncWithUrl = true,
+    urlParamKey = DEFAULT_URL_PARAM_KEY,
+    className
+  } = props;
+  const styles = SIZE_STYLES[size];
+  const [searchParams, setSearchParams] = useSearchParams();
+  const safeOptions = useMemo(() => Array.isArray(options) ? options : [], [options]);
+  const selectedValues = props.multiple ? Array.isArray(props.value) ? props.value : [] : [props.value];
+  const serializedValue = selectedValues.join(",");
+  const hasReadUrlSelectionRef = useRef(false);
+  const pendingUrlSelectionRef = useRef(null);
+  const ownerIdRef = useRef({});
+  const isUrlParamReserved = urlParamKey === TABS_URL_PARAM;
+  const isUrlSyncEnabled = syncWithUrl && !isUrlParamReserved;
+  useEffect(() => {
+    if (!syncWithUrl) return;
+    if (isUrlParamReserved) {
+      uiLogger.warn(
+        `[ControlledViewToggle] "${TABS_URL_PARAM}" belongs to ControlledTabs. Give this toggle its own urlParamKey: it will not write to the URL.`
+      );
+      return;
+    }
+    const ownerId = ownerIdRef.current;
+    if (!claimUrlParam(urlParamKey, ownerId, URL_PARAM_PRIORITY.viewToggle)) {
+      uiLogger.warn(
+        `[ControlledViewToggle] More than one control syncs "${urlParamKey}". Give each one a unique urlParamKey: this instance will not write to the URL.`
+      );
+    }
+    return () => releaseUrlParam(urlParamKey, ownerId);
+  }, [syncWithUrl, isUrlParamReserved, urlParamKey]);
+  useEffect(() => {
+    if (!isUrlSyncEnabled || !ownsUrlParam(urlParamKey, ownerIdRef.current)) return;
+    const rawParam = searchParams.get(urlParamKey) ?? "";
+    if (pendingUrlSelectionRef.current !== null) {
+      if (serializedValue === pendingUrlSelectionRef.current) pendingUrlSelectionRef.current = null;
+      return;
+    }
+    if (!hasReadUrlSelectionRef.current) {
+      hasReadUrlSelectionRef.current = true;
+      const optionValues = new Set(safeOptions.map((option) => option.value));
+      const urlValues = rawParam.split(",").map((rawValue) => rawValue.trim()).filter((rawValue) => optionValues.has(rawValue));
+      if (urlValues.length) {
+        const urlSelection = urlValues.join(",");
+        if (urlSelection !== serializedValue) {
+          pendingUrlSelectionRef.current = urlSelection;
+          if (props.multiple) props.onChange(urlValues);
+          else props.onChange(urlValues[0]);
+        }
+        return;
+      }
+    }
+    if (rawParam === serializedValue) return;
+    queueUrlParamUpdate(urlParamKey, serializedValue, setSearchParams);
+  }, [isUrlSyncEnabled, urlParamKey, searchParams, safeOptions, serializedValue, setSearchParams, props]);
+  const handleSelectOption = (optionValue) => {
+    if (!props.multiple) {
+      props.onChange(optionValue);
+      return;
+    }
+    const currentValues = Array.isArray(props.value) ? props.value : [];
+    props.onChange(
+      currentValues.includes(optionValue) ? currentValues.filter((selectedValue) => selectedValue !== optionValue) : [...currentValues, optionValue]
+    );
+  };
+  const renderOptionCounter = (option, isActive) => {
+    if (option.loading) return /* @__PURE__ */ jsx(LoadingSpinner, { size: 3 });
+    if (option.count === void 0 || option.count === null) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classNames(
+          "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 py-px text-[11px] font-medium leading-none",
+          isActive ? "bg-glass/25 text-white" : "bg-muted-hover text-foreground-subtle"
+        ),
+        children: formatNumber(option.count)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        "inline-flex shrink-0 items-center border border-border bg-surface p-1",
+        styles.container,
+        className
+      ),
+      children: safeOptions.map((option) => {
+        const isActive = selectedValues.includes(option.value);
+        const showText = showLabels || !option.icon;
+        const button = /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            "aria-pressed": isActive,
+            disabled,
+            onClick: () => handleSelectOption(option.value),
+            className: classNames(
+              "flex items-center justify-center gap-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand-border disabled:cursor-not-allowed",
+              styles.button,
+              isActive ? "bg-brand text-brand-fg shadow-sm" : styles.inactive
+            ),
+            children: [
+              option.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: option.icon, size: styles.icon }),
+              showText && /* @__PURE__ */ jsx("span", { className: classNames("whitespace-nowrap font-medium", styles.textClass), children: option.label }),
+              renderOptionCounter(option, isActive)
+            ]
+          }
+        );
+        return showText ? /* @__PURE__ */ jsx(Fragment, { children: button }, option.value) : /* @__PURE__ */ jsx(ControlledTooltip, { content: option.tooltip ?? option.label, children: button }, option.value);
+      })
+    }
+  );
+};
+export {
+  ControlledViewToggle as default
+};
+//# sourceMappingURL=ControlledViewToggle.js.map