@kenlo/kdls-design-system 2.9.1 → 2.10.0

package/foundations/tokens.css

@@ -3351,6 +3351,7 @@
 :root {
   --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
   --font-weight-regular: 400;
+  --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-size-display-lg: 56px;
@@ -3400,12 +3401,22 @@
 }
 
 /* ------------------------------------------------------------------------------ */
-/* ------------------------------------EASING------------------------------------ */
+/* ------------------------------------MOTION------------------------------------ */
 :root {
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+  }
+}
 /* ------------------------------------------------------------------------------ */
 /* -----------------------------PAGE BACKGROUND----------------------------- */
 :root {

package/kdls-manifest.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@kenlo/kdls-design-system",
-    "version": "2.9.1"
+    "version": "2.10.0"
   },
   "install": {
     "add": "npm install @kenlo/kdls-design-system",
@@ -12,10 +12,12 @@
     "note": "Use the Tailwind preset OR styles.css, never both — same class names."
   },
   "counts": {
-    "components": 58,
-    "propsTables": 83,
-    "props": 710,
-    "tokens": 548
+    "components": 60,
+    "propsTables": 85,
+    "props": 733,
+    "tokens": 552,
+    "api": 12,
+    "icons": 49
   },
   "components": [
     {
@@ -510,7 +512,7 @@
           "name": "size",
           "type": "'sm'|'md'|'lg'",
           "default": "'sm'",
-          "description": "'sm' = 12px · 'md' = 14px · 'lg' = 16px",
+          "description": "'sm' = rótulo 12px, caixa 24px · 'md' = rótulo 16px, caixa 28px · 'lg' = rótulo 16px, caixa 32px",
           "example": "size=\"sm\""
         },
         {
@@ -2111,6 +2113,21 @@
       ],
       "subComponents": []
     },
+    {
+      "name": "Form",
+      "kind": "value",
+      "import": "import { Form } from '@kenlo/kdls-design-system'",
+      "props": [
+        {
+          "name": "validateOn",
+          "type": "'change'|'blur'|'submit'",
+          "default": "'change'",
+          "description": "Quando as regras de validação dos campos filhos são avaliadas — 'change' a cada digitação · 'blur' ao sair do campo · 'submit' só no envio",
+          "example": "validateOn=\"blur\""
+        }
+      ],
+      "subComponents": []
+    },
     {
       "name": "Grid",
       "kind": "value",
@@ -2168,6 +2185,147 @@
       ],
       "subComponents": []
     },
+    {
+      "name": "Header",
+      "kind": "value",
+      "import": "import { Header } from '@kenlo/kdls-design-system'",
+      "props": [
+        {
+          "name": "product",
+          "type": "'imob' | 'sites' | 'locacao' | 'leads' | 'generico' | 'base'",
+          "default": "'base'",
+          "description": "Produto Kenlo — define o logo exibido",
+          "example": "'imob' | 'locacao'"
+        },
+        {
+          "name": "logoHref",
+          "type": "string",
+          "default": "—",
+          "description": "Destino do clique no logo — normalmente a home do produto. Sem logoHref nem onLogoClick o logo não é clicável",
+          "example": "'/inicio'"
+        },
+        {
+          "name": "onLogoClick",
+          "type": "() => void",
+          "default": "—",
+          "description": "Callback do clique no logo — use com router client-side, ou junto de logoHref para interceptar a navegação",
+          "example": "() => navigate(\"/\")"
+        },
+        {
+          "name": "logoLabel",
+          "type": "string",
+          "default": "'Página inicial'",
+          "description": "Nome acessível do link do logo, lido no lugar da imagem",
+          "example": "'Início do Vira'"
+        },
+        {
+          "name": "navItems",
+          "type": "HeaderNavItem[]",
+          "default": "[]",
+          "description": "Itens de navegação principal (com suporte a submenus via children)",
+          "example": "[{ label: 'Indicadores', href: '/indicadores' }]"
+        },
+        {
+          "name": "activeNav",
+          "type": "string",
+          "default": "—",
+          "description": "Label do item de navegação ativo — deve corresponder a um item em navItems",
+          "example": "'Indicadores'"
+        },
+        {
+          "name": "notifications",
+          "type": "HeaderNotification[]",
+          "default": "[]",
+          "description": "Lista de notificações exibidas no painel ao clicar no sino",
+          "example": "[{ id: '1', title: 'Novo lead', time: '2min' }]"
+        },
+        {
+          "name": "onClearNotifications",
+          "type": "() => void",
+          "default": "—",
+          "description": "Callback para limpar todas as notificações do painel",
+          "example": "() => setNotifications([])"
+        },
+        {
+          "name": "showNotifications",
+          "type": "boolean",
+          "default": "true",
+          "description": "Exibe ou oculta o sino de notificações — use false quando o produto não tem esse conceito",
+          "example": "showNotifications={false}"
+        },
+        {
+          "name": "products",
+          "type": "HeaderProduct[]",
+          "default": "[]",
+          "description": "Lista de produtos Kenlo para navegação cruzada — o botão de grid só aparece quando há mais de 1 item (1 item = o próprio produto atual, sem destino pra navegar)",
+          "example": "[{ label: 'Sites' }, { label: 'CRM' }]"
+        },
+        {
+          "name": "user",
+          "type": "{ name, initials?, code?, company?, avatarSrc? }",
+          "default": "—",
+          "description": "Dados do usuário logado exibidos no perfil e no avatar",
+          "example": "{ name: 'Maria R.', initials: 'MR', company: 'Imob Alfa' }"
+        },
+        {
+          "name": "profileMenuItems",
+          "type": "HeaderProfileMenuItem[]",
+          "default": "[]",
+          "description": "Itens do menu de perfil (desktop e mobile), abaixo dos dados do usuário — vazio por padrão, nada decorativo é assumido",
+          "example": "[{ label: 'Editar perfil', onClick: () => {} }]"
+        },
+        {
+          "name": "onLogout",
+          "type": "() => void",
+          "default": "—",
+          "description": "Ação de sair — some por completo quando não é passado. Sempre a última linha (desktop e mobile)",
+          "example": "() => signOut()"
+        },
+        {
+          "name": "logoutLabel",
+          "type": "string",
+          "default": "'Sair'",
+          "description": "Texto da linha de logout",
+          "example": "'Sair'"
+        },
+        {
+          "name": "contextSelector",
+          "type": "ReactNode",
+          "default": "—",
+          "description": "Slot para seletor de contexto (unidade, site ou empresa)",
+          "example": "<Select label=\"Unidade\" options={units} />"
+        },
+        {
+          "name": "rightSlot",
+          "type": "ReactNode",
+          "default": "—",
+          "description": "Slot livre do lado direito, antes do avatar — ex.: um badge de versão",
+          "example": "<Badge label=\"v2.0.3\" variant=\"neutral\" />"
+        },
+        {
+          "name": "onFAQs",
+          "type": "() => void",
+          "default": "—",
+          "description": "Callback disparado ao clicar no botão de FAQs",
+          "example": "() => openFAQsPanel()"
+        },
+        {
+          "name": "showFAQs",
+          "type": "boolean",
+          "default": "true",
+          "description": "Exibe ou oculta o botão de FAQs na barra",
+          "example": "showFAQs={false}"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": "''",
+          "description": "Classe CSS adicional no elemento raiz do Header",
+          "example": "'header-main'"
+        }
+      ],
+      "subComponents": []
+    },
     {
       "name": "Icon",
       "kind": "value",
@@ -2262,16 +2420,16 @@
         },
         {
           "name": "variant",
-          "type": "'primary' | 'neutral'",
+          "type": "'primary' | 'neutral' | 'inverse'",
           "default": "'primary'",
-          "description": "'primary' = cor do tema ativo · 'neutral' = cinza neutro. Usar 'neutral' para chevrons e ações secundárias",
+          "description": "'primary' = cor do tema ativo · 'neutral' = cinza neutro, para chevrons e ações secundárias · 'inverse' = ícone branco com hover claro, para o botão sobre uma foto ou um fundo escuro",
           "example": "variant=\"primary\""
         },
         {
           "name": "size",
-          "type": "'sm' | 'md' | 'lg'",
+          "type": "'xs' | 'sm' | 'md' | 'lg'",
           "default": "'sm'",
-          "description": "Tamanho do botão e da área de hover — 'sm' = 32px · 'md' = 40px · 'lg' = 48px. O ícone é sempre 24px independente do tamanho.",
+          "description": "Tamanho que o botão ocupa — 'xs' = 24px (só o ícone entra na linha; o hover, o pressionado e a área de toque continuam com 32px em volta) · 'sm' = 32px · 'md' = 40px · 'lg' = 48px. O ícone é sempre 24px independente do tamanho.",
           "example": "size=\"sm\""
         },
         {
@@ -2296,6 +2454,13 @@
           "description": "Label acessível — obrigatório: não há como derivar um rótulo automático de um ícone arbitrário",
           "example": "aria-label=\"Excluir contato\""
         },
+        {
+          "name": "aria-expanded",
+          "type": "boolean",
+          "default": "—",
+          "description": "Diz ao leitor de tela se o que o botão abre está aberto — gatilho de menu, gaveta ou acordeão. Os demais atributos de botão (aria-*, onKeyDown, title…) também chegam ao elemento raiz",
+          "example": "aria-expanded={open}"
+        },
         {
           "name": "className",
           "type": "string",
@@ -2852,16 +3017,16 @@
             },
             {
               "name": "iconVariant",
-              "type": "'neutral' | 'primary'",
+              "type": "'neutral' | 'primary' | 'inverse'",
               "default": "'primary'",
-              "description": "Variant de cor do IconButton interno — use 'neutral' para ícones de opções e chevrons.",
+              "description": "Variant de cor do IconButton interno — use 'neutral' para ícones de opções e chevrons, 'inverse' sobre foto ou fundo escuro.",
               "example": "iconVariant=\"primary\""
             },
             {
               "name": "iconSize",
-              "type": "'sm' | 'md' | 'lg'",
+              "type": "'xs' | 'sm' | 'md' | 'lg'",
               "default": "'sm'",
-              "description": "Tamanho do IconButton interno — o ícone continua 24px em qualquer tamanho.",
+              "description": "Tamanho do IconButton interno — o ícone continua 24px em qualquer tamanho; 'xs' ocupa só os 24px do ícone na linha.",
               "example": "iconSize=\"sm\""
             },
             {
@@ -3883,9 +4048,8 @@
         {
           "name": "active",
           "type": "boolean",
-          "default": "false",
-          "required": true,
-          "description": "Estado ativo — preenchido com cor primária. Inativo = apenas contorno",
+          "default": "—",
+          "description": "Estado ativo de uma pílula de filtro ou alternância — preenchida com a cor primária; false = só o contorno. Omita quando a pílula é uma ação (abre algo, navega): sem active ela é anunciada como botão simples, sem estado ligado/desligado",
           "example": "active={isActive}"
         },
         {
@@ -5459,6 +5623,20 @@
           "default": "true",
           "description": "Exibe o botão de fechar (✕) — ligado por padrão; passar false para ocultar",
           "example": "showDismiss: false"
+        },
+        {
+          "name": "onDismiss",
+          "type": "() => void",
+          "default": "—",
+          "description": "Callback do clique no botão de fechar. Preenchido pelo ToastProvider ao usar toast() — só é passado à mão quando o <Toast> é renderizado diretamente",
+          "example": "onDismiss: () => remove(id)"
+        },
+        {
+          "name": "leaving",
+          "type": "boolean",
+          "default": "false",
+          "description": "Dispara a animação de saída. Controlado pelo ToastProvider durante a remoção — não passar à mão no uso normal",
+          "example": "leaving"
         }
       ],
       "subComponents": []
@@ -5646,6 +5824,122 @@
       "subComponents": []
     }
   ],
+  "api": [
+    {
+      "name": "NavContext",
+      "import": "import { NavContext } from '@kenlo/kdls-design-system'",
+      "from": "components/Nav/Nav.tsx"
+    },
+    {
+      "name": "SCROLLBAR_CLASSES",
+      "import": "import { SCROLLBAR_CLASSES } from '@kenlo/kdls-design-system'",
+      "from": "foundations/Scrollbar/index.ts"
+    },
+    {
+      "name": "Toaster",
+      "import": "import { Toaster } from '@kenlo/kdls-design-system'",
+      "from": "components/Toast/index.ts"
+    },
+    {
+      "name": "applyCustomScheme",
+      "import": "import { applyCustomScheme } from '@kenlo/kdls-design-system'",
+      "from": "components/ColorScheme/ColorScheme.ts"
+    },
+    {
+      "name": "clearCustomScheme",
+      "import": "import { clearCustomScheme } from '@kenlo/kdls-design-system'",
+      "from": "components/ColorScheme/ColorScheme.ts"
+    },
+    {
+      "name": "configureKdls",
+      "import": "import { configureKdls } from '@kenlo/kdls-design-system'",
+      "from": "components/Theme/Theme.ts"
+    },
+    {
+      "name": "generatePalette",
+      "import": "import { generatePalette } from '@kenlo/kdls-design-system'",
+      "from": "components/ColorScheme/ColorScheme.ts"
+    },
+    {
+      "name": "lastDays",
+      "import": "import { lastDays } from '@kenlo/kdls-design-system'",
+      "from": "components/DatePicker/index.ts"
+    },
+    {
+      "name": "nextDays",
+      "import": "import { nextDays } from '@kenlo/kdls-design-system'",
+      "from": "components/DatePicker/index.ts"
+    },
+    {
+      "name": "toast",
+      "import": "import { toast } from '@kenlo/kdls-design-system'",
+      "from": "components/Toast/index.ts"
+    },
+    {
+      "name": "useCustomScheme",
+      "import": "import { useCustomScheme } from '@kenlo/kdls-design-system'",
+      "from": "components/ColorScheme/ColorScheme.ts"
+    },
+    {
+      "name": "useFormContext",
+      "import": "import { useFormContext } from '@kenlo/kdls-design-system'",
+      "from": "components/Form/index.ts"
+    }
+  ],
+  "icons": {
+    "note": "49 icon exports — import by name from @kenlo/kdls-design-system, or use <Icon />.",
+    "names": [
+      "Facebook",
+      "FacebookColor",
+      "Google",
+      "GoogleColor",
+      "Instagram",
+      "InstagramColor",
+      "KenloKFilled",
+      "KenloKRegular",
+      "LeadDoubleFilled",
+      "LeadDoubleRegular",
+      "LeadInfoFilled",
+      "LeadInfoRegular",
+      "LeadSingleFilled",
+      "LeadSingleRegular",
+      "LeadUndefinedFilled",
+      "LeadUndefinedRegular",
+      "LeadVerifiedFilled",
+      "LeadVerifiedRegular",
+      "LinkedIn",
+      "LinkedInColor",
+      "LyaDoubleFilled",
+      "LyaDoubleRegular",
+      "LyaEditor",
+      "LyaFichaLimpa",
+      "LyaKoin",
+      "LyaOmni",
+      "LyaOraculo",
+      "LyaSdr",
+      "LyaSingleFilled",
+      "LyaSingleRegular",
+      "LyaStudio",
+      "Messenger",
+      "MessengerColor",
+      "Pinterest",
+      "PinterestColor",
+      "Telegram",
+      "TelegramColor",
+      "VideoHorizontalFilled",
+      "VideoHorizontalRegular",
+      "VideoTour3DFilled",
+      "VideoTour3DRegular",
+      "VideoVerticalFilled",
+      "VideoVerticalRegular",
+      "WhatsApp",
+      "WhatsAppColor",
+      "X",
+      "XColor",
+      "YouTube",
+      "YouTubeColor"
+    ]
+  },
   "tokens": {
     "body": [
       {
@@ -7619,6 +7913,20 @@
         "value": "var(--color-neutral-90)"
       }
     ],
+    "duration": [
+      {
+        "name": "--duration-base",
+        "value": "200ms"
+      },
+      {
+        "name": "--duration-fast",
+        "value": "120ms"
+      },
+      {
+        "name": "--duration-slow",
+        "value": "300ms"
+      }
+    ],
     "ease": [
       {
         "name": "--ease-spring",
@@ -7688,6 +7996,10 @@
         "name": "--font-weight-bold",
         "value": "700"
       },
+      {
+        "name": "--font-weight-medium",
+        "value": "500"
+      },
       {
         "name": "--font-weight-regular",
         "value": "400"
@@ -7883,8 +8195,6 @@
       "ColorScheme",
       "Field",
       "Floating",
-      "Form",
-      "Header",
       "Menu",
       "Radio",
       "Theme"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/kdls-design-system",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "private": false,
   "type": "module",
   "description": "KDLS Design System — componentes React + TypeScript",
@@ -59,7 +59,12 @@
     "gen:manifest": "node scripts/gen-manifest.mjs",
     "prepublishOnly": "npm run build:lib",
     "gen:font": "node scripts/gen-font.mjs",
-    "check:fonts": "node scripts/check-fonts.mjs"
+    "check:fonts": "node scripts/check-fonts.mjs",
+    "check:tokens": "node scripts/gen-tokens.mjs --check",
+    "check:styles": "node scripts/gen-styles.mjs --check",
+    "check:manifest": "node scripts/gen-manifest.mjs --check",
+    "check:props": "node scripts/check-props.mjs --check",
+    "check:all": "npm run check:tokens && npm run check:styles && npm run check:manifest && npm run check:props && npm run typecheck && npm run test:run"
   },
   "peerDependencies": {
     "@fluentui/react-icons": "^2.0.320",