@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport type { Theme } from '../../theme/ThemeProvider';\n\nexport interface HeaderProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** URL da imagem do logo (tema escuro). Se não informado, usa logoSrc. */\n  logoDarkSrc?: string;\n  /** URL da imagem do logo (tema claro) */\n  logoSrc?: string;\n  /** Callback ao clicar na área do logo/título */\n  onLogoClick?: () => void;\n  /** Conteúdo da área direita (ex.: seletor de idioma, toggle tema, menu usuário) */\n  rightContent?: React.ReactNode;\n  /** Subtítulo abaixo do título */\n  subtitle?: React.ReactNode;\n  /** Tema opcional para escolher o logo correto sem depender do ThemeProvider do UI */\n  theme?: Theme;\n  /** Título exibido ao lado do logo (ex.: \"OFÍCIO.IA\") */\n  title?: React.ReactNode;\n}\n\nconst detectTheme = (): Theme => {\n  if (typeof document === 'undefined') {\n    return 'light';\n  }\n\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'Logo',\n  title,\n  subtitle,\n  theme,\n  onLogoClick,\n  rightContent,\n  className = '',\n}) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  const logoSrcResolved = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n\n  useEffect(() => {\n    const handleScroll = () => setIsScrolled(window.scrollY > 10);\n    window.addEventListener('scroll', handleScroll, { passive: true });\n    return () => window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n\n    const syncTheme = () => setResolvedTheme(detectTheme());\n    syncTheme();\n\n    if (typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new MutationObserver(syncTheme);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n\n    return () => observer.disconnect();\n  }, [theme]);\n\n  const handleClick = () => onLogoClick?.();\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      onLogoClick?.();\n    }\n  };\n\n  return (\n    <header\n      className={['fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"h-0.5 w-full bg-[var(--md-primary)]\" />\n      <div\n        className=\"flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3\"\n        style={{\n          color: 'var(--md-on-surface)',\n          background: `color-mix(in srgb, var(--md-surface) ${\n            isScrolled ? '14%' : '18%'\n          }, transparent)`,\n          borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${\n            isScrolled ? '22%' : '30%'\n          }, transparent)`,\n        }}\n      >\n        <div\n          className=\"flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80\"\n          onClick={onLogoClick ? handleClick : undefined}\n          onKeyDown={onLogoClick ? handleKeyDown : undefined}\n          role={onLogoClick ? 'button' : undefined}\n          tabIndex={onLogoClick ? 0 : undefined}\n        >\n          {logoSrcResolved && (\n            <div className=\"flex h-16 w-16 shrink-0 items-center justify-center\">\n              <img\n                alt={logoAlt}\n                className=\"h-full w-full object-contain\"\n                onError={(e) => {\n                  (e.target as HTMLImageElement).style.display = 'none';\n                  const next = (e.target as HTMLElement).nextElementSibling as HTMLElement;\n                  if (next) {\n                    next.style.display = 'block';\n                  }\n                }}\n                src={logoSrcResolved}\n              />\n              <svg\n                className=\"hidden h-full w-full\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\" />\n                <path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\" />\n              </svg>\n            </div>\n          )}\n          {(title || subtitle) && (\n            <div className=\"flex flex-col gap-1\">\n              {title && (\n                <h1\n                  className=\"m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl\"\n                  style={{ fontFamily: 'var(--font-logo)' }}\n                >\n                  {title}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n        {rightContent && (\n          <div className=\"flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between\">\n            {rightContent}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n};\n"],"names":["detectTheme","Header","logoSrc","logoDarkSrc","logoAlt","title","subtitle","theme","onLogoClick","rightContent","className","isScrolled","setIsScrolled","useState","resolvedTheme","setResolvedTheme","logoSrcResolved","useEffect","handleScroll","syncTheme","observer","handleClick","handleKeyDown","e","jsxs","jsx","next"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Menu } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, inverseScope } from '../../utils/styles';\nimport type { Theme } from '../../theme/ThemeProvider';\nimport { Logo, type LogoVariant } from '../Logo/Logo';\n\nexport type HeaderVariant = 'solid' | 'light' | 'glass';\n\nexport interface HeaderProps {\n  className?: string;\n  /** Texto alternativo da imagem de logo customizada. */\n  logoAlt?: string;\n  /** Imagem de logo para o tema escuro (substitui o SVG oficial). */\n  logoDarkSrc?: string;\n  /** Imagem de logo customizada (substitui o SVG oficial). */\n  logoSrc?: string;\n  /** Logo oficial usado quando não há `logoSrc`. Padrão: sbk. */\n  logoVariant?: LogoVariant;\n  /** Estado do menu lateral, anunciado no botão hamburger (aria-expanded). */\n  menuExpanded?: boolean;\n  /** Rótulo do botão hamburger. Padrão: \"Abrir menu\". */\n  menuLabel?: string;\n  /** Navegação principal, exibida ao centro. */\n  navigation?: React.ReactNode;\n  onLogoClick?: () => void;\n  onMenuClick?: () => void;\n  /** Conteúdo à direita (ações, seletor de tema, menu do usuário). */\n  rightContent?: React.ReactNode;\n  showMenuIcon?: boolean;\n  /** Fixa o header no topo. Padrão: true. */\n  sticky?: boolean;\n  subtitle?: React.ReactNode;\n  /** Tema para escolher entre logoSrc e logoDarkSrc sem depender do ThemeProvider. */\n  theme?: Theme;\n  title?: React.ReactNode;\n  /** Iniciais do usuário exibidas no avatar (ex.: \"CF\"). */\n  userInitials?: string;\n  /** `solid`: verde escuro (padrão). `light`: superfície clara. `glass`: Liquid Glass. */\n  variant?: HeaderVariant;\n}\n\nconst detectTheme = (): Theme =>\n  typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') === 'dark'\n    ? 'dark'\n    : 'light';\n\nconst VARIANT_CLASS: Record<HeaderVariant, string> = {\n  solid: inverseScope,\n  light: 'border-b border-sbk-line bg-sbk-surface text-sbk-fg',\n  glass: 'sbk-glass rounded-none border-x-0 border-t-0 text-sbk-fg',\n};\n\nexport const Header = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'SBK',\n  logoVariant = 'sbk',\n  title,\n  subtitle,\n  theme,\n  navigation,\n  onLogoClick,\n  onMenuClick,\n  menuExpanded,\n  menuLabel = 'Abrir menu',\n  rightContent,\n  showMenuIcon = true,\n  sticky = true,\n  userInitials,\n  variant = 'solid',\n  className,\n}: HeaderProps) => {\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n    if (!logoDarkSrc || typeof MutationObserver === 'undefined') return;\n    const sync = () => setResolvedTheme(detectTheme());\n    sync();\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [theme, logoDarkSrc]);\n\n  const customLogo = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n  const brand = (\n    <>\n      {customLogo ? (\n        <img alt={logoAlt} className=\"h-8 w-auto shrink-0 object-contain\" src={customLogo} />\n      ) : (\n        <Logo color={variant === 'solid' ? 'white' : 'auto'} height={28} variant={logoVariant} />\n      )}\n      {(title || subtitle) && (\n        <span className=\"grid min-w-0 gap-px text-left\">\n          {title && (\n            <span className=\"truncate text-base font-semibold leading-tight text-sbk-fg-heading\">\n              {title}\n            </span>\n          )}\n          {subtitle && (\n            <span className=\"truncate text-xs font-light leading-tight text-sbk-fg-muted\">\n              {subtitle}\n            </span>\n          )}\n        </span>\n      )}\n    </>\n  );\n\n  return (\n    <header\n      className={cn(\n        'z-[var(--sbk-z-sticky)] box-border flex h-16 w-full shrink-0 items-center justify-between gap-4 px-4 md:px-8',\n        sticky && 'sticky top-0',\n        VARIANT_CLASS[variant],\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-3\">\n        {showMenuIcon && (\n          <button\n            aria-expanded={menuExpanded}\n            aria-label={menuLabel}\n            className={cn(\n              buttonReset,\n              'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sbk-sm text-sbk-fg hover:bg-sbk-surface-hover',\n              focusRing,\n            )}\n            onClick={onMenuClick}\n            type=\"button\"\n          >\n            <Menu aria-hidden=\"true\" className=\"size-5\" />\n          </button>\n        )}\n        {onLogoClick ? (\n          <button\n            className={cn(\n              buttonReset,\n              'flex min-w-0 cursor-pointer items-center gap-3 rounded-sbk-xs',\n              focusRing,\n            )}\n            onClick={onLogoClick}\n            type=\"button\"\n          >\n            {brand}\n          </button>\n        ) : (\n          <div className=\"flex min-w-0 items-center gap-3\">{brand}</div>\n        )}\n      </div>\n\n      {navigation && (\n        <nav aria-label=\"Principal\" className=\"hidden min-w-0 flex-1 justify-center md:flex\">\n          {navigation}\n        </nav>\n      )}\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {rightContent}\n        {userInitials && (\n          <span\n            aria-label={`Usuário: ${userInitials}`}\n            className=\"inline-flex size-9 shrink-0 select-none items-center justify-center rounded-full bg-sbk-ciano text-[0.8125rem] font-semibold text-sbk-branco\"\n            role=\"img\"\n          >\n            {userInitials}\n          </span>\n        )}\n      </div>\n    </header>\n  );\n};\n\nHeader.displayName = 'Header';\n"],"names":["detectTheme","VARIANT_CLASS","inverseScope","Header","logoSrc","logoDarkSrc","logoAlt","logoVariant","title","subtitle","theme","navigation","onLogoClick","onMenuClick","menuExpanded","menuLabel","rightContent","showMenuIcon","sticky","userInitials","variant","className","resolvedTheme","setResolvedTheme","useState","useEffect","sync","observer","customLogo","brand","jsxs","Fragment","Logo","jsx","cn","buttonReset","focusRing","Menu"],"mappings":"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"}

package/dist/components/Highlight/Highlight.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+export interface HighlightProps extends React.HTMLAttributes<HTMLElement> {
+    /** Ciano Escuro (padrão) ou Verde Claro, conforme o brand book. */
+    tone?: 'ciano' | 'verde';
+}
+/**
+ * Highlight de palavra-chave do brand book: bloco retangular atrás de palavras
+ * estruturantes, sempre com texto branco. Use em poucas palavras por tela.
+ */
+export declare const Highlight: {
+    ({ tone, className, ...props }: HighlightProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Highlight/Highlight.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const s = ({ tone: o = "ciano", className: r, ...a }) => /* @__PURE__ */ e(
+  "mark",
+  {
+    className: i(
+      "rounded-sbk-xs px-1.5 py-0.5 font-semibold text-sbk-branco [box-decoration-break:clone]",
+      o === "ciano" ? "bg-sbk-ciano-escuro" : "bg-sbk-verde-claro",
+      r
+    ),
+    ...a
+  }
+);
+s.displayName = "Highlight";
+export {
+  s as Highlight
+};
+//# sourceMappingURL=Highlight.js.map

package/dist/components/Highlight/Highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.js","sources":["../../../src/components/Highlight/Highlight.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface HighlightProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ciano Escuro (padrão) ou Verde Claro, conforme o brand book. */\n  tone?: 'ciano' | 'verde';\n}\n\n/**\n * Highlight de palavra-chave do brand book: bloco retangular atrás de palavras\n * estruturantes, sempre com texto branco. Use em poucas palavras por tela.\n */\nexport const Highlight = ({ tone = 'ciano', className, ...props }: HighlightProps) => (\n  <mark\n    className={cn(\n      'rounded-sbk-xs px-1.5 py-0.5 font-semibold text-sbk-branco [box-decoration-break:clone]',\n      tone === 'ciano' ? 'bg-sbk-ciano-escuro' : 'bg-sbk-verde-claro',\n      className,\n    )}\n    {...props}\n  />\n);\n\nHighlight.displayName = 'Highlight';\n"],"names":["Highlight","tone","className","props","jsx","cn"],"mappings":";;AAYO,MAAMA,IAAY,CAAC,EAAE,MAAAC,IAAO,SAAS,WAAAC,GAAW,GAAGC,QACxD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ,MAAS,UAAU,wBAAwB;AAAA,MAC3CC;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAGFH,EAAU,cAAc;"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import type { LucideIcon, LucideProps } from 'lucide-react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps extends Omit<LucideProps, 'size' | 'ref'> {
+    /** Componente de ícone do lucide-react (ex.: `import { Search } from 'lucide-react'`). */
+    icon: LucideIcon;
+    /**
+     * Texto para leitores de tela. Sem label o ícone é decorativo (`aria-hidden`).
+     * Informe sempre que o ícone for o único conteúdo com significado.
+     */
+    label?: string;
+    size?: IconSize | number;
+}
+/**
+ * Wrapper padronizado para ícones lucide-react.
+ * Ícones herdam a cor do texto (currentColor), o que mantém a paleta da marca.
+ * Traço 1.75 acompanha o peso Leve da tipografia.
+ */
+export declare const Icon: {
+    ({ icon: IconComponent, label, size, strokeWidth, className, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+const e = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 }, d = ({
+  icon: m,
+  label: o,
+  size: r = "md",
+  strokeWidth: n = 1.75,
+  className: t,
+  ...s
+}) => {
+  const i = typeof r == "number" ? r : e[r];
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "aria-hidden": o ? void 0 : !0,
+      "aria-label": o,
+      className: c("shrink-0", t),
+      focusable: "false",
+      height: i,
+      role: o ? "img" : void 0,
+      strokeWidth: n,
+      width: i,
+      ...s
+    }
+  );
+};
+d.displayName = "Icon";
+export {
+  d as Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { LucideIcon, LucideProps } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps extends Omit<LucideProps, 'size' | 'ref'> {\n  /** Componente de ícone do lucide-react (ex.: `import { Search } from 'lucide-react'`). */\n  icon: LucideIcon;\n  /**\n   * Texto para leitores de tela. Sem label o ícone é decorativo (`aria-hidden`).\n   * Informe sempre que o ícone for o único conteúdo com significado.\n   */\n  label?: string;\n  size?: IconSize | number;\n}\n\nconst SIZE_PX: Record<IconSize, number> = { xs: 12, sm: 16, md: 20, lg: 24, xl: 32 };\n\n/**\n * Wrapper padronizado para ícones lucide-react.\n * Ícones herdam a cor do texto (currentColor), o que mantém a paleta da marca.\n * Traço 1.75 acompanha o peso Leve da tipografia.\n */\nexport const Icon = ({\n  icon: IconComponent,\n  label,\n  size = 'md',\n  strokeWidth = 1.75,\n  className,\n  ...props\n}: IconProps) => {\n  const px = typeof size === 'number' ? size : SIZE_PX[size];\n  return (\n    <IconComponent\n      aria-hidden={label ? undefined : true}\n      aria-label={label}\n      className={cn('shrink-0', className)}\n      focusable=\"false\"\n      height={px}\n      role={label ? 'img' : undefined}\n      strokeWidth={strokeWidth}\n      width={px}\n      {...props}\n    />\n  );\n};\n\nIcon.displayName = 'Icon';\n"],"names":["SIZE_PX","Icon","IconComponent","label","size","strokeWidth","className","props","px","jsx","cn"],"mappings":";;AAgBA,MAAMA,IAAoC,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA,GAOnEC,IAAO,CAAC;AAAA,EACnB,MAAMC;AAAA,EACN,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAiB;AACf,QAAMC,IAAK,OAAOJ,KAAS,WAAWA,IAAOJ,EAAQI,CAAI;AACzD,SACE,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,eAAaC,IAAQ,SAAY;AAAA,MACjC,cAAYA;AAAA,MACZ,WAAWO,EAAG,YAAYJ,CAAS;AAAA,MACnC,WAAU;AAAA,MACV,QAAQE;AAAA,MACR,MAAML,IAAQ,QAAQ;AAAA,MACtB,aAAAE;AAAA,MACA,OAAOG;AAAA,MACN,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAN,EAAK,cAAc;"}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type IconButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'inverse' | 'glass';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Nome acessível obrigatório: o botão não tem texto visível. */
+    'aria-label': string;
+    children: React.ReactNode;
+    shape?: 'square' | 'circle';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: IconButtonVariant;
+}
+/** Botão quadrado ou circular apenas com ícone. */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,49 @@
+import { jsx as i } from "react/jsx-runtime";
+import c from "react";
+import { cn as g } from "../../utils/cn.js";
+import { focusRing as d, transitionColors as m, buttonReset as k } from "../../utils/styles.js";
+const u = {
+  sm: "size-8 [&_svg]:size-4",
+  md: "size-10 [&_svg]:size-5",
+  lg: "size-12 [&_svg]:size-6"
+}, f = {
+  primary: "bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover",
+  secondary: "bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover",
+  ghost: "bg-transparent text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+  outline: "border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover",
+  inverse: "bg-transparent text-sbk-branco hover:bg-sbk-branco/10",
+  glass: "sbk-glass text-sbk-fg"
+}, l = c.forwardRef(
+  ({
+    children: r,
+    shape: s = "square",
+    size: e = "md",
+    variant: o = "ghost",
+    className: t,
+    type: n = "button",
+    ...b
+  }, a) => /* @__PURE__ */ i(
+    "button",
+    {
+      ref: a,
+      className: g(
+        k,
+        "inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        s === "circle" ? "rounded-full" : "rounded-sbk-sm",
+        m,
+        d,
+        u[e],
+        f[o],
+        t
+      ),
+      type: n,
+      ...b,
+      children: r
+    }
+  )
+);
+l.displayName = "IconButton";
+export {
+  l as IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'inverse' | 'glass';\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Nome acessível obrigatório: o botão não tem texto visível. */\n  'aria-label': string;\n  children: React.ReactNode;\n  shape?: 'square' | 'circle';\n  size?: 'sm' | 'md' | 'lg';\n  variant?: IconButtonVariant;\n}\n\nconst SIZE_CLASS = {\n  sm: 'size-8 [&_svg]:size-4',\n  md: 'size-10 [&_svg]:size-5',\n  lg: 'size-12 [&_svg]:size-6',\n} as const;\n\nconst VARIANT_CLASS: Record<IconButtonVariant, string> = {\n  primary: 'bg-sbk-primary text-sbk-on-primary hover:bg-sbk-primary-hover',\n  secondary: 'bg-sbk-secondary text-sbk-on-secondary hover:bg-sbk-secondary-hover',\n  ghost: 'bg-transparent text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\n  outline: 'border-sbk-line-strong bg-sbk-surface text-sbk-fg hover:bg-sbk-surface-hover',\n  inverse: 'bg-transparent text-sbk-branco hover:bg-sbk-branco/10',\n  glass: 'sbk-glass text-sbk-fg',\n};\n\n/** Botão quadrado ou circular apenas com ícone. */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      children,\n      shape = 'square',\n      size = 'md',\n      variant = 'ghost',\n      className,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      className={cn(\n        buttonReset,\n        'inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent disabled:cursor-not-allowed disabled:opacity-50',\n        shape === 'circle' ? 'rounded-full' : 'rounded-sbk-sm',\n        transitionColors,\n        focusRing,\n        SIZE_CLASS[size],\n        VARIANT_CLASS[variant],\n        className,\n      )}\n      type={type}\n      {...props}\n    >\n      {children}\n    </button>\n  ),\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["SIZE_CLASS","VARIANT_CLASS","IconButton","React","children","shape","size","variant","className","type","props","ref","jsx","cn","buttonReset","transitionColors","focusRing"],"mappings":";;;;AAeA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAGaC,IAAaC,EAAM;AAAA,EAC9B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACTC;AAAA,QACA;AAAA,QACAT,MAAU,WAAW,iBAAiB;AAAA,QACtCU;AAAA,QACAC;AAAA,QACAhB,EAAWM,CAAI;AAAA,QACfL,EAAcM,CAAO;AAAA,QACrBC;AAAA,MAAA;AAAA,MAEF,MAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAF,EAAW,cAAc;"}

package/dist/components/Input/Input.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import { type FieldSize } from '../../utils/styles';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     error?: string;
     fullWidth?: boolean;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg';
+    size?: FieldSize;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -1,78 +1,60 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import g from "react";
-import { cn as c } from "../../utils/cn.js";
-const b = g.forwardRef(
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import N, { useId as w } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { describedBy as y, fieldSize as g, fieldControl as h } from "../../utils/styles.js";
+import { Field as z } from "../Field/Field.js";
+const m = "pointer-events-none absolute z-[1] flex items-center text-sbk-fg-muted group-focus-within:text-sbk-primary [&_svg]:size-[1.125rem]", j = N.forwardRef(
   ({
-    label: i,
-    error: e,
-    helperText: s,
+    label: n,
+    error: s,
+    helperText: l,
     leftIcon: t,
-    rightIcon: o,
-    fullWidth: l = !1,
-    size: m = "md",
-    className: v,
-    id: p,
-    ...f
-  }, u) => {
-    const r = p || `input-${Math.random().toString(36).substring(2, 9)}`, n = !!e, x = c(
-      "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:bg-[var(--md-surface-container-high)] disabled:opacity-60",
-      n && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
+    rightIcon: a,
+    fullWidth: o = !1,
+    size: p = "md",
+    className: c,
+    id: f,
+    required: d,
+    ...u
+  }, b) => {
+    const v = w(), r = f ?? v;
+    return /* @__PURE__ */ e(
+      z,
       {
-        sm: "min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]",
-        md: "min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]",
-        lg: "min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]"
-      }[m],
-      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho
-      t && "pl-10",
-      o && "pr-10",
-      v
+        className: i(o && "w-full"),
+        error: s,
+        helperText: l,
+        id: r,
+        label: n,
+        required: d,
+        children: /* @__PURE__ */ x("div", { className: "group relative flex w-full items-center", children: [
+          t && /* @__PURE__ */ e("span", { className: i(m, "left-3"), children: t }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: b,
+              "aria-describedby": y(r, s, l),
+              "aria-invalid": s ? !0 : void 0,
+              className: i(
+                h,
+                g[p],
+                t && "pl-10",
+                a && "pr-10",
+                c
+              ),
+              id: r,
+              required: d,
+              ...u
+            }
+          ),
+          a && /* @__PURE__ */ e("span", { className: i(m, "right-3"), children: a })
+        ] })
+      }
     );
-    return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-[var(--spacing-xs)]", l && "w-full"), children: [
-      i && /* @__PURE__ */ a(
-        "label",
-        {
-          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
-          htmlFor: r,
-          children: i
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: "group relative flex w-full items-center", children: [
-        t && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: t }),
-        /* @__PURE__ */ a(
-          "input",
-          {
-            ref: u,
-            "aria-describedby": e ? `${r}-error` : s ? `${r}-helper` : void 0,
-            "aria-invalid": n ? !0 : void 0,
-            className: x,
-            id: r,
-            ...f
-          }
-        ),
-        o && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: o })
-      ] }),
-      e && /* @__PURE__ */ a(
-        "span",
-        {
-          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]",
-          id: `${r}-error`,
-          role: "alert",
-          children: e
-        }
-      ),
-      s && !e && /* @__PURE__ */ a(
-        "span",
-        {
-          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
-          id: `${r}-helper`,
-          children: s
-        }
-      )
-    ] });
   }
 );
-b.displayName = "Input";
+j.displayName = "Input";
 export {
-  b as Input
+  j as Input
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  error?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  label?: string;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      error,\n      helperText,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      size = 'md',\n      className,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;\n    const hasError = !!error;\n\n    const sizeClassMap: Record<NonNullable<InputProps['size']>, string> = {\n      sm: 'min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]',\n      md: 'min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]',\n      lg: 'min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]',\n    };\n\n    const combinedClass = cn(\n      'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:bg-[var(--md-surface-container-high)] disabled:opacity-60',\n      hasError &&\n        'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n      sizeClassMap[size],\n      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho\n      leftIcon && 'pl-10',\n      rightIcon && 'pr-10',\n      className,\n    );\n\n    return (\n      <div className={cn('flex flex-col gap-[var(--spacing-xs)]', fullWidth && 'w-full')}>\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={inputId}\n          >\n            {label}\n          </label>\n        )}\n        <div className=\"group relative flex w-full items-center\">\n          {leftIcon && (\n            <span className=\"pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {leftIcon}\n            </span>\n          )}\n          <input\n            ref={ref}\n            aria-describedby={\n              error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n            }\n            aria-invalid={hasError ? true : undefined}\n            className={combinedClass}\n            id={inputId}\n            {...props}\n          />\n          {rightIcon && (\n            <span className=\"pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {rightIcon}\n            </span>\n          )}\n        </div>\n        {error && (\n          <span\n            className=\"mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]\"\n            id={`${inputId}-error`}\n            role=\"alert\"\n          >\n            {error}\n          </span>\n        )}\n        {helperText && !error && (\n          <span\n            className=\"mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\"\n            id={`${inputId}-helper`}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","React","label","error","helperText","leftIcon","rightIcon","fullWidth","size","className","id","props","ref","inputId","hasError","combinedClass","cn","jsx","jsxs"],"mappings":";;;AAaO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUH,KAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC,IACnEI,IAAW,CAAC,CAACX,GAQbY,IAAgBC;AAAA,MACpB;AAAA,MACAF,KACE;AAAA,MATkE;AAAA,QACpE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,EAOSN,CAAI;AAAA;AAAA,MAEjBH,KAAY;AAAA,MACZC,KAAa;AAAA,MACbG;AAAA,IAAA;AAGF,6BACG,OAAA,EAAI,WAAWO,EAAG,yCAAyCT,KAAa,QAAQ,GAC9E,UAAA;AAAA,MAAAL,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASJ;AAAA,UAER,UAAAX;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAgB,EAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,QAAAb,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,0NACb,UAAAZ,GACH;AAAA,QAEF,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAL;AAAA,YACA,oBACET,IAAQ,GAAGU,CAAO,WAAWT,IAAa,GAAGS,CAAO,YAAY;AAAA,YAElE,gBAAcC,IAAW,KAAO;AAAA,YAChC,WAAWC;AAAA,YACX,IAAIF;AAAA,YACH,GAAGF;AAAA,UAAA;AAAA,QAAA;AAAA,QAELL,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,2NACb,UAAAX,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCH,KACC,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UACd,MAAK;AAAA,UAEJ,UAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAc,CAACD,KACd,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UAEb,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAJ,EAAM,cAAc;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport { describedBy, fieldControl, fieldSize, type FieldSize } from '../../utils/styles';\nimport { Field } from '../Field/Field';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  error?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  label?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  size?: FieldSize;\n}\n\nconst iconSlot =\n  'pointer-events-none absolute z-[1] flex items-center text-sbk-fg-muted group-focus-within:text-sbk-primary [&_svg]:size-[1.125rem]';\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      error,\n      helperText,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      size = 'md',\n      className,\n      id,\n      required,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <Field\n        className={cn(fullWidth && 'w-full')}\n        error={error}\n        helperText={helperText}\n        id={inputId}\n        label={label}\n        required={required}\n      >\n        <div className=\"group relative flex w-full items-center\">\n          {leftIcon && <span className={cn(iconSlot, 'left-3')}>{leftIcon}</span>}\n          <input\n            ref={ref}\n            aria-describedby={describedBy(inputId, error, helperText)}\n            aria-invalid={error ? true : undefined}\n            className={cn(\n              fieldControl,\n              fieldSize[size],\n              leftIcon && 'pl-10',\n              rightIcon && 'pr-10',\n              className,\n            )}\n            id={inputId}\n            required={required}\n            {...props}\n          />\n          {rightIcon && <span className={cn(iconSlot, 'right-3')}>{rightIcon}</span>}\n        </div>\n      </Field>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"names":["iconSlot","Input","React","label","error","helperText","leftIcon","rightIcon","fullWidth","size","className","id","required","props","ref","autoId","useId","inputId","jsx","Field","cn","jsxs","describedBy","fieldControl","fieldSize"],"mappings":";;;;;AAeA,MAAMA,IACJ,sIAEWC,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAASC,EAAA,GACTC,IAAUN,KAAMI;AAEtB,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAGZ,KAAa,QAAQ;AAAA,QACnC,OAAAJ;AAAA,QACA,YAAAC;AAAA,QACA,IAAIY;AAAA,QACJ,OAAAd;AAAA,QACA,UAAAS;AAAA,QAEA,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,UAAAf,uBAAa,QAAA,EAAK,WAAWc,EAAGpB,GAAU,QAAQ,GAAI,UAAAM,GAAS;AAAA,UAChE,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAJ;AAAA,cACA,oBAAkBQ,EAAYL,GAASb,GAAOC,CAAU;AAAA,cACxD,gBAAcD,IAAQ,KAAO;AAAA,cAC7B,WAAWgB;AAAA,gBACTG;AAAA,gBACAC,EAAUf,CAAI;AAAA,gBACdH,KAAY;AAAA,gBACZC,KAAa;AAAA,gBACbG;AAAA,cAAA;AAAA,cAEF,IAAIO;AAAA,cACJ,UAAAL;AAAA,cACC,GAAGC;AAAA,YAAA;AAAA,UAAA;AAAA,UAELN,uBAAc,QAAA,EAAK,WAAWa,EAAGpB,GAAU,SAAS,GAAI,UAAAO,EAAA,CAAU;AAAA,QAAA,EAAA,CACrE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAM,cAAc;"}

package/dist/components/Layout/Layout.d.ts

@@ -10,5 +10,7 @@ export declare const Stack: React.FC<StackProps>;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     cols?: 1 | 2 | 3 | 4;
     gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Empilha colunas em telas pequenas. Padrão: true. */
+    responsive?: boolean;
 }
 export declare const Grid: React.FC<GridProps>;

package/dist/components/Layout/Layout.js

@@ -1,41 +1,47 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as o } from "../../utils/cn.js";
-const t = ({ size: s = "lg", className: a, ...l }) => {
-  const g = {
+import { jsx as o } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+const t = ({ size: s = "lg", className: g, ...l }) => {
+  const a = {
     sm: "max-w-2xl",
     md: "max-w-4xl",
     lg: "max-w-6xl",
     xl: "max-w-7xl",
     full: "max-w-none"
   }[s];
-  return /* @__PURE__ */ m("div", { className: o("mx-auto w-full px-4", g, a), ...l });
-}, n = ({ gap: s = "md", className: a, ...l }) => {
-  const g = {
+  return /* @__PURE__ */ o("div", { className: c("mx-auto w-full px-4", a, g), ...l });
+}, p = ({ gap: s = "md", className: g, ...l }) => {
+  const a = {
     xs: "gap-1",
     sm: "gap-2",
     md: "gap-3",
     lg: "gap-4",
     xl: "gap-6"
   }[s];
-  return /* @__PURE__ */ m("div", { className: o("flex flex-col", g, a), ...l });
-}, d = ({ cols: s = 2, gap: a = "md", className: l, ...g }) => {
-  const x = {
+  return /* @__PURE__ */ o("div", { className: c("flex flex-col", a, g), ...l });
+}, n = ({
+  cols: s = 2,
+  gap: g = "md",
+  responsive: l = !0,
+  className: a,
+  ...r
+}) => {
+  const m = {
     1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4"
-  }[s], c = {
+    2: l ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-2",
+    3: l ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-3",
+    4: l ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : "grid-cols-4"
+  }[s], d = {
     xs: "gap-1",
     sm: "gap-2",
     md: "gap-3",
     lg: "gap-4",
     xl: "gap-6"
-  }[a];
-  return /* @__PURE__ */ m("div", { className: o("grid", x, c, l), ...g });
+  }[g];
+  return /* @__PURE__ */ o("div", { className: c("grid", m, d, a), ...r });
 };
 export {
   t as Container,
-  d as Grid,
-  n as Stack
+  n as Grid,
+  p as Stack
 };
 //# sourceMappingURL=Layout.js.map

package/dist/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nexport const Container: React.FC<ContainerProps> = ({ size = 'lg', className, ...props }) => {\n  const sizeClass = {\n    sm: 'max-w-2xl',\n    md: 'max-w-4xl',\n    lg: 'max-w-6xl',\n    xl: 'max-w-7xl',\n    full: 'max-w-none',\n  }[size];\n  return <div className={cn('mx-auto w-full px-4', sizeClass, className)} {...props} />;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Stack: React.FC<StackProps> = ({ gap = 'md', className, ...props }) => {\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('flex flex-col', gapClass, className)} {...props} />;\n};\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: 1 | 2 | 3 | 4;\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Grid: React.FC<GridProps> = ({ cols = 2, gap = 'md', className, ...props }) => {\n  const colsClass = {\n    1: 'grid-cols-1',\n    2: 'grid-cols-2',\n    3: 'grid-cols-3',\n    4: 'grid-cols-4',\n  }[cols];\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('grid', colsClass, gapClass, className)} {...props} />;\n};\n"],"names":["Container","size","className","props","sizeClass","jsx","cn","Stack","gap","gapClass","Grid","cols","colsClass"],"mappings":";;AAOO,MAAMA,IAAsC,CAAC,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,QAAY;AAC3F,QAAMC,IAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA,EACNH,CAAI;AACN,SAAO,gBAAAI,EAAC,SAAI,WAAWC,EAAG,uBAAuBF,GAAWF,CAAS,GAAI,GAAGC,GAAO;AACrF,GAMaI,IAA8B,CAAC,EAAE,KAAAC,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAClF,QAAMM,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,SAAI,WAAWC,EAAG,iBAAiBG,GAAUP,CAAS,GAAI,GAAGC,GAAO;AAC9E,GAOaO,IAA4B,CAAC,EAAE,MAAAC,IAAO,GAAG,KAAAH,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAC1F,QAAMS,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,EACHD,CAAI,GACAF,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAG,QAAQM,GAAWH,GAAUP,CAAS,GAAI,GAAGC,EAAA,CAAO;AAChF;"}
+{"version":3,"file":"Layout.js","sources":["../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nexport const Container: React.FC<ContainerProps> = ({ size = 'lg', className, ...props }) => {\n  const sizeClass = {\n    sm: 'max-w-2xl',\n    md: 'max-w-4xl',\n    lg: 'max-w-6xl',\n    xl: 'max-w-7xl',\n    full: 'max-w-none',\n  }[size];\n  return <div className={cn('mx-auto w-full px-4', sizeClass, className)} {...props} />;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Stack: React.FC<StackProps> = ({ gap = 'md', className, ...props }) => {\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('flex flex-col', gapClass, className)} {...props} />;\n};\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: 1 | 2 | 3 | 4;\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Empilha colunas em telas pequenas. Padrão: true. */\n  responsive?: boolean;\n}\n\nexport const Grid: React.FC<GridProps> = ({\n  cols = 2,\n  gap = 'md',\n  responsive = true,\n  className,\n  ...props\n}) => {\n  const colsClass = {\n    1: 'grid-cols-1',\n    2: responsive ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-2',\n    3: responsive ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3' : 'grid-cols-3',\n    4: responsive ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' : 'grid-cols-4',\n  }[cols];\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('grid', colsClass, gapClass, className)} {...props} />;\n};\n"],"names":["Container","size","className","props","sizeClass","jsx","cn","Stack","gap","gapClass","Grid","cols","responsive","colsClass"],"mappings":";;AAOO,MAAMA,IAAsC,CAAC,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,QAAY;AAC3F,QAAMC,IAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA,EACNH,CAAI;AACN,SAAO,gBAAAI,EAAC,SAAI,WAAWC,EAAG,uBAAuBF,GAAWF,CAAS,GAAI,GAAGC,GAAO;AACrF,GAMaI,IAA8B,CAAC,EAAE,KAAAC,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAClF,QAAMM,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,SAAI,WAAWC,EAAG,iBAAiBG,GAAUP,CAAS,GAAI,GAAGC,GAAO;AAC9E,GASaO,IAA4B,CAAC;AAAA,EACxC,MAAAC,IAAO;AAAA,EACP,KAAAH,IAAM;AAAA,EACN,YAAAI,IAAa;AAAA,EACb,WAAAV;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMU,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,GAAGD,IAAa,+BAA+B;AAAA,IAC/C,GAAGA,IAAa,8CAA8C;AAAA,IAC9D,GAAGA,IAAa,8CAA8C;AAAA,EAAA,EAC9DD,CAAI,GACAF,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAG,QAAQO,GAAWJ,GAAUP,CAAS,GAAI,GAAGC,EAAA,CAAO;AAChF;"}

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+export type LogoVariant = 'sbk' | 'sbk-ia';
+/**
+ * - `auto`: cor de título do tema atual (verde escuro no claro, branco no escuro)
+ * - `dark`: Verde Escuro, para fundos claros
+ * - `white`: para fundos escuros
+ * - `black`: monocromática
+ */
+export type LogoColor = 'auto' | 'dark' | 'white' | 'black';
+export interface LogoProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'color'> {
+    /** Reserva a zona de respiro do brand book (espaço livre igual à altura do símbolo). */
+    clearSpace?: boolean;
+    color?: LogoColor;
+    /** Altura em px. A largura acompanha a proporção oficial. */
+    height?: number;
+    /** Nome acessível. Padrão: "SBK" ou "SBK IA". */
+    title?: string;
+    variant?: LogoVariant;
+}
+/**
+ * Logo oficial SBK / SBK IA a partir dos SVGs do time de marca.
+ * Não aplica sombras, gradientes, distorção ou rotação (usos indevidos do brand book).
+ */
+export declare const Logo: {
+    ({ variant, color, height, clearSpace, title, className, style, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};