@aspprev/versi-ds 0.5.6 → 0.5.9

package/README.md

@@ -170,45 +170,32 @@ O servidor usa a porta `6006`. Para a configuração standalone:
 npm run storybook:standalone
 ```
 
-A árvore da documentação é organizada assim:
+A árvore da documentação usa os nomes técnicos abaixo; a interface apresenta rótulos em português:
 
 ```text
 Getting Started
-├── Introduction
-├── Installation
-├── Usage
-└── Contributing
+  Introduction · Installation · Usage · Contributing
 
 Foundations
-├── Overview
-├── Colors
-├── Typography
-├── Spacing
-└── Shadows
+  Overview · Colors · Typography · Spacing · Shadows · Borders · Icons
 
 Components
-├── Actions
-├── Forms
-├── Feedback
-├── Data Display
-├── Documents
-├── Navigation
-├── Overlay
-├── Layout
-└── Accessibility
+  Overview (catálogo com busca)
+  Actions · Forms · Feedback · Data Display · Documents
+  Navigation · Overlay · Layout · Accessibility · Utilities
 
 Patterns
-├── Forms
-└── Feedback
+  Overview · Forms · Feedback · Data/Table · Documents/UploadFlow
+  Forms/FormStates · Forms/ValidationStates · Forms/FormValidation
 
 Themes
-├── Overview
-├── Comparison
-└── ThemeLab
+  Overview · Comparison · ThemeLab
 
 Guidelines
-├── Accessibility
-└── Usage
+  Accessibility · Usage · ComponentChoice · Compatibility
+
+Laboratory
+  Forms/PlaceholderComparison · Forms/ValidationLayout
 ```
 
 A toolbar permite comparar esquema de cores, preset, contraste, escala de fonte e movimento reduzido. O addon de acessibilidade permanece disponível para inspeção manual e os testes automatizados usam Axe nos cenários visuais.
@@ -217,6 +204,7 @@ A toolbar permite comparar esquema de cores, preset, contraste, escala de fonte
 
 ```bash
 npm run tokens:check
+npm run check:generated
 npm run typecheck
 npm test
 npm run build
@@ -226,7 +214,7 @@ npm run check:package
 npm run prepack
 ```
 
-O script `prepack` valida tokens, governança, segurança, lint, TypeScript, build, tamanho e conteúdo do pacote.
+O script `prepack` valida tokens e bandeiras geradas, governança, segurança, lint, TypeScript, build, tamanho e conteúdo do pacote. `npm run lint -- --max-warnings=0` cobre fontes, histórias, testes, scripts, configurações e o piloto, preservando o snapshot auditado de terceiros fora da análise de estilo.
 
 Os workflows compartilham as validações de segurança, pacote e consumidores.
 Consulte [segurança do build e compatibilidade](docs/SEGURANCA-BUILD-COMPATIBILIDADE.md)
@@ -254,12 +242,17 @@ const root = document.documentElement;
 root.dataset.colorScheme = "dark";
 root.dataset.dsTheme = "azul1";
 root.dataset.contrast = "high";
+root.dataset.contrastTheme = "dark";
 root.dataset.fontScale = "large";
 root.dataset.motion = "reduce";
 ```
 
 Os valores válidos estão documentados em **Themes/Overview** no Storybook. Prefira tokens semânticos, como `--surface-page`, `--content-primary`, `--border-default` e `--focus-ring`, em vez de copiar valores de uma paleta.
 
+As identidades de cliente `basf`, `funssest`, `maisprevidencia`, `aceprev`, `cibrius`, `serpros` e `einvest` oferecem claro, escuro e alto contraste claro/escuro. Os presets legados continuam disponíveis. Consulte o [guia de integração e diferenças dos snapshots](docs/temas-clientes/INTEGRACAO.md) e **Temas → Clientes** no Storybook. As paletas são propostas para revisão visual.
+
+As entradas raiz e `/core` exportam `CLIENT_THEMES`, `LEGACY_THEMES`, `DESIGN_SYSTEM_THEMES` e os tipos `ClientTheme` e `DesignSystemTheme` para construir seletores no consumidor.
+
 ## Contribuição
 
 Ao criar ou alterar um componente:

package/dist/charts.js

@@ -12,7 +12,7 @@ import {
   normalizeTimeSeriesTooltipColor,
   resolveInteractiveDonutColors,
   resolveRelativeDonutSelection
-} from "./chunk-HKCVDOGK.js";
+} from "./chunk-YEUOULSF.js";
 export {
   InteractiveDonutChart,
   LazyApexChart,

package/dist/{chunk-2KJU6VM4.js → chunk-2XE4FX42.js}

@@ -93,11 +93,11 @@ var VARIANT_STYLES = {
   flat: {
     disabled: `cursor-not-allowed border-disabled bg-surface-disabled text-content-disabled`,
     default: {
-      primary: `bg-action-primary text-action-primary-content hover:bg-action-primary-hover active:bg-action-primary-active`,
-      secondary: `bg-action-secondary text-action-secondary-content hover:bg-action-secondary-hover active:bg-action-secondary-active`,
+      primary: `bg-action-primary text-action-primary-content hover:bg-action-primary-hover hover:text-action-primary-content-hover active:bg-action-primary-active active:text-action-primary-content-active`,
+      secondary: `bg-action-secondary text-action-secondary-content hover:bg-action-secondary-hover hover:text-action-secondary-content-hover active:bg-action-secondary-active active:text-action-secondary-content-active`,
       tertiary: `bg-action-tertiary text-action-tertiary-content opacity-100 hover:bg-action-tertiary-hover active:bg-action-tertiary-active`,
-      danger: `bg-action-danger text-action-danger-content hover:bg-action-danger-hover active:bg-action-danger-active`,
-      warning: `bg-action-warning text-action-warning-content hover:bg-action-warning-hover active:bg-action-warning-active`
+      danger: `bg-action-danger text-action-danger-content hover:bg-action-danger-hover hover:text-action-danger-content-hover active:bg-action-danger-active active:text-action-danger-content-active`,
+      warning: `bg-action-warning text-action-warning-content hover:bg-action-warning-hover hover:text-action-warning-content-hover active:bg-action-warning-active active:text-action-warning-content-active`
     }
   },
   outline: {
@@ -1361,7 +1361,7 @@ var Slider = ({
         ]
       }
     ),
-    ticks.map((tick, idx) => {
+    ticks.map((_tick, idx) => {
       return /* @__PURE__ */ jsx19(
         "div",
         {
@@ -1626,6 +1626,7 @@ function PageHeading({
 }
 
 // src/components/page-tabs/PageTabsHeader.tsx
+import { useRef as useRef3 } from "react";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function PageTabsHeader({
   title,
@@ -1635,6 +1636,9 @@ function PageTabsHeader({
   className = "",
   size = "default"
 }) {
+  const tabRefs = useRef3(/* @__PURE__ */ new Map());
+  const enabledTabs = tabs.filter((tab) => !tab.disabled);
+  const entryTab = enabledTabs.find((tab) => tab.id === activeTab)?.id ?? enabledTabs[0]?.id;
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -1645,24 +1649,41 @@ function PageTabsHeader({
           "nav",
           {
             "aria-label": title,
-            className: "flex w-auto flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
-            children: /* @__PURE__ */ jsx24("div", { role: "tablist", className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
+            className: "flex w-auto flex-row flex-nowrap items-end gap-3 overflow-x-auto p-1 tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
+            children: /* @__PURE__ */ jsx24("div", { role: "tablist", "aria-label": title, className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
               const Icon = tab.icon;
               const isActive = activeTab === tab.id;
               return /* @__PURE__ */ jsxs14(
                 "button",
                 {
                   type: "button",
+                  ref: (element) => {
+                    if (element) tabRefs.current.set(tab.id, element);
+                    else tabRefs.current.delete(tab.id);
+                  },
                   role: "tab",
+                  tabIndex: tab.id === entryTab ? 0 : -1,
                   "aria-selected": isActive,
                   "aria-current": isActive ? "page" : void 0,
                   disabled: tab.disabled,
                   onClick: () => onTabChange(tab.id),
-                  className: `inline-flex items-center gap-1 whitespace-nowrap border-b-[3px] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-1 disabled:cursor-not-allowed disabled:opacity-50 tablet:px-1 ${size === "small" ? "px-0.5 py-0 text-sm" : "p-0.5 text-base"} ${isActive ? "border-primary-1 font-semibold text-primary-1" : "border-transparent text-content-secondary hover:text-content-muted"}`,
+                  onKeyDown: (event) => {
+                    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+                    event.preventDefault();
+                    const index = enabledTabs.findIndex((item) => item.id === tab.id);
+                    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                    const forward = event.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    const targetIndex = event.key === "Home" ? 0 : event.key === "End" ? enabledTabs.length - 1 : (index + (forward ? 1 : -1) + enabledTabs.length) % enabledTabs.length;
+                    const target = enabledTabs[targetIndex];
+                    if (!target) return;
+                    tabRefs.current.get(target.id)?.focus();
+                    onTabChange(target.id);
+                  },
+                  className: `inline-flex items-center gap-1 whitespace-nowrap border-b-[3px] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-50 tablet:px-1 ${size === "small" ? "px-0.5 py-0 text-sm" : "p-0.5 text-base"} ${isActive ? "border-content-link font-semibold text-content-link" : "border-transparent text-content-secondary hover:text-content-muted"}`,
                   children: [
                     Icon && /* @__PURE__ */ jsx24(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
                     /* @__PURE__ */ jsx24("span", { children: tab.label }),
-                    tab.notification !== void 0 && tab.notification !== null && /* @__PURE__ */ jsx24("span", { className: "inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-feedback-danger-strong px-1 text-2xs font-bold text-action-tertiary-content", children: tab.notification })
+                    tab.notification !== void 0 && tab.notification !== null && /* @__PURE__ */ jsx24("span", { className: "inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-feedback-danger-strong px-1 text-2xs font-bold text-feedback-danger-on-strong", children: tab.notification })
                   ]
                 },
                 tab.id
@@ -1812,8 +1833,8 @@ import classNames12 from "classnames";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var COLOR_STYLES = {
   primary: {
-    outline: "border-primary-1 text-primary-1",
-    soft: "border-primary-1 bg-primary-5 text-primary-2",
+    outline: "border-status-primary-outline-border text-status-primary-outline-foreground",
+    soft: "border-status-primary-outline-border bg-status-primary-soft-background text-status-primary-soft-foreground",
     solid: "border-action-primary bg-action-primary text-action-primary-content"
   },
   blue: {
@@ -2060,7 +2081,7 @@ import React4, { useEffect as useEffect8, useId as useId3, useMemo as useMemo2,
 import {
   useEffect as useEffect7,
   useId as useId2,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState3
 } from "react";
 import {
@@ -2074,7 +2095,7 @@ import {
 
 // src/components/table/components/filter/FilterView.tsx
 import cs3 from "classnames";
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 function FilterView({
   id,
@@ -2095,7 +2116,7 @@ function FilterView({
   const handleControlChange = (control, event) => {
     onControlChange?.(control, event.target.value);
   };
-  const containerRef = useRef3(null);
+  const containerRef = useRef4(null);
   useEffect6(() => {
     if (!containerRef.current) return;
     containerRef.current.style.maxHeight = maxHeight ? `${maxHeight}px` : "";
@@ -2138,7 +2159,7 @@ function FilterView({
                 {
                   className: cs3(
                     "min-h-6 flex items-start gap-2 px-3 py-0.5 cursor-pointer rounded",
-                    control.value === option.value ? "bg-primary-5 text-primary-1" : "text-content-primary"
+                    control.value === option.value ? "bg-selection-background text-selection-content" : "text-content-primary"
                   ),
                   children: [
                     /* @__PURE__ */ jsx30(
@@ -2184,7 +2205,7 @@ function FilterView({
         {
           className: cs3(
             "min-h-10 flex items-start gap-2 px-3 py-1 cursor-pointer rounded",
-            optionChecked === option.value ? "bg-primary-5 text-primary-1" : "text-content-primary"
+            optionChecked === option.value ? "bg-selection-background text-selection-content" : "text-content-primary"
           ),
           children: [
             /* @__PURE__ */ jsx30(
@@ -2288,11 +2309,11 @@ function TableView({
   const [filterMaxHeight, setFilterMaxHeight] = useState3();
   const [filterCoords, setFilterCoords] = useState3(null);
   const [tableWidth, setTableWidth] = useState3();
-  const scrollContainerRef = useRef4(null);
-  const tableWrapperRef = useRef4(null);
-  const headerCellRefs = useRef4([]);
-  const filterTriggerRefs = useRef4([]);
-  const filterRef = useRef4(null);
+  const scrollContainerRef = useRef5(null);
+  const tableWrapperRef = useRef5(null);
+  const headerCellRefs = useRef5([]);
+  const filterTriggerRefs = useRef5([]);
+  const filterRef = useRef5(null);
   useEffect7(() => {
     const wrapper = tableWrapperRef.current;
     if (!wrapper) return;
@@ -3241,6 +3262,34 @@ function useContainerBreakpoint(ref, options = {}) {
   return current;
 }
 
+// src/theme-presets.ts
+var LEGACY_THEMES = [
+  "default",
+  "azul1",
+  "azul2",
+  "azul3",
+  "laranja1",
+  "laranja2",
+  "verde1",
+  "verde2",
+  "verde3",
+  "verde4",
+  "rosa1"
+];
+var CLIENT_THEMES = [
+  { id: "basf", label: "BASF" },
+  { id: "funssest", label: "FUNSSEST" },
+  { id: "maisprevidencia", label: "Mais Previd\xEAncia" },
+  { id: "aceprev", label: "ACEPREV" },
+  { id: "cibrius", label: "Cibrius" },
+  { id: "serpros", label: "SERPROS" },
+  { id: "einvest", label: "E-Invest" }
+];
+var DESIGN_SYSTEM_THEMES = [
+  ...LEGACY_THEMES,
+  ...CLIENT_THEMES.map((theme) => theme.id)
+];
+
 export {
   LoadingDotsView_default,
   Button_default,
@@ -3280,6 +3329,9 @@ export {
   Table_default,
   MobileCardTable_default,
   resolveContainerBreakpoint,
-  useContainerBreakpoint
+  useContainerBreakpoint,
+  LEGACY_THEMES,
+  CLIENT_THEMES,
+  DESIGN_SYSTEM_THEMES
 };
-//# sourceMappingURL=chunk-2KJU6VM4.js.map
+//# sourceMappingURL=chunk-2XE4FX42.js.map