@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/Box/Box.css

@@ -99,3 +99,86 @@
 .umds-box--shadow-level1 { box-shadow: var(--umds-primitive-shadow-level-1); }
 .umds-box--shadow-level2 { box-shadow: var(--umds-primitive-shadow-level-2); }
 .umds-box--shadow-level3 { box-shadow: var(--umds-primitive-shadow-level-3); }
+
+/* ── Layout flex (direction, gap, align, justify, wrap) ──
+   Liga quando qualquer uma das props é passada; mesmos nomes e valores do Stack. */
+.umds-box--flex {
+  display: flex;
+}
+
+.umds-box--vertical   { flex-direction: column; }
+.umds-box--horizontal { flex-direction: row; }
+.umds-box--wrap       { flex-wrap: wrap; }
+
+.umds-box--gap-none   { gap: 0; }
+.umds-box--gap-quarck { gap: var(--umds-primitive-spacing-quarck); }
+.umds-box--gap-nano   { gap: var(--umds-primitive-spacing-nano); }
+.umds-box--gap-micro  { gap: var(--umds-primitive-spacing-micro); }
+.umds-box--gap-mini   { gap: var(--umds-primitive-spacing-mini); }
+.umds-box--gap-xxxs   { gap: var(--umds-primitive-spacing-xxxs); }
+.umds-box--gap-xxs    { gap: var(--umds-primitive-spacing-xxs); }
+.umds-box--gap-xs     { gap: var(--umds-primitive-spacing-xs); }
+.umds-box--gap-sm     { gap: var(--umds-primitive-spacing-sm); }
+.umds-box--gap-md     { gap: var(--umds-primitive-spacing-md); }
+.umds-box--gap-lg     { gap: var(--umds-primitive-spacing-lg); }
+.umds-box--gap-xl     { gap: var(--umds-primitive-spacing-xl); }
+.umds-box--gap-xxl    { gap: var(--umds-primitive-spacing-xxl); }
+.umds-box--gap-xxxl   { gap: var(--umds-primitive-spacing-xxxl); }
+
+.umds-box--align-start    { align-items: flex-start; }
+.umds-box--align-center   { align-items: center; }
+.umds-box--align-end      { align-items: flex-end; }
+.umds-box--align-stretch  { align-items: stretch; }
+.umds-box--align-baseline { align-items: baseline; }
+
+.umds-box--justify-start   { justify-content: flex-start; }
+.umds-box--justify-center  { justify-content: center; }
+.umds-box--justify-end     { justify-content: flex-end; }
+.umds-box--justify-between { justify-content: space-between; }
+.umds-box--justify-around  { justify-content: space-around; }
+.umds-box--justify-evenly  { justify-content: space-evenly; }
+
+/* ── Lista: ul/ol sem marcador, margem nem recuo do navegador ──
+   :where() zera a especificidade, para o padding do Box (p, px, py) vencer. */
+:where(ul.umds-box, ol.umds-box) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Como item de Stack/Box flex ── */
+.umds-box--grow { flex-grow: 1; }
+.umds-box--shrink-0 { flex-shrink: 0; }
+.umds-box--shrink-1 { flex-shrink: 1; }
+
+.umds-box--basis-auto { flex-basis: auto; }
+.umds-box--basis-0    { flex-basis: 0; }
+.umds-box--basis-25   { flex-basis: 25%; }
+.umds-box--basis-33   { flex-basis: 33.3333%; }
+.umds-box--basis-50   { flex-basis: 50%; }
+.umds-box--basis-66   { flex-basis: 66.6667%; }
+.umds-box--basis-75   { flex-basis: 75%; }
+.umds-box--basis-100  { flex-basis: 100%; }
+
+/* O padrão do Box já é min-width: 0; estas duas só tornam a escolha explícita. */
+.umds-box--min-w-0    { min-width: 0; }
+.umds-box--min-w-auto { min-width: auto; }
+
+/* ── Overflow: o eixo vem depois do geral, então vence por ordem de cascata ── */
+.umds-box--overflow-visible { overflow: visible; }
+.umds-box--overflow-hidden  { overflow: hidden; }
+.umds-box--overflow-auto    { overflow: auto; }
+.umds-box--overflow-scroll  { overflow: scroll; }
+
+.umds-box--overflow-x-visible { overflow-x: visible; }
+.umds-box--overflow-x-hidden  { overflow-x: hidden; }
+.umds-box--overflow-x-auto    { overflow-x: auto; }
+.umds-box--overflow-x-scroll  { overflow-x: scroll; }
+
+.umds-box--overflow-y-visible { overflow-y: visible; }
+.umds-box--overflow-y-hidden  { overflow-y: hidden; }
+.umds-box--overflow-y-auto    { overflow-y: auto; }
+.umds-box--overflow-y-scroll  { overflow-y: scroll; }
+
+/* ── Dimensão ── */
+.umds-box--full-height { height: 100%; }

package/dist/components/Box/Box.d.ts

@@ -1,12 +1,55 @@
 import './Box.css';
 /** Degraus da escala oficial de espaçamento do 1DS. */
 export type BoxSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+export type BoxTag = "div" | "span" | "ul" | "ol" | "li" | "section" | "nav" | "header" | "footer" | "form";
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+export type BoxOverflow = "visible" | "hidden" | "auto" | "scroll";
 /**
  * Box — superfície com padding, fundo, borda e raio vindos dos tokens.
  *
  * É a caixa genérica do DS. Existe para evitar o `<div style={{ padding: 16,
  * background: "#fff", borderRadius: 8 }}>` escrito à mão: cada valor sai da
  * escala oficial, não da memória de quem escreve.
+ *
+ * Também é layout: com `direction`, `gap`, `align`, `justify` ou `wrap` (os
+ * mesmos nomes e valores do `Stack`) a caixa vira um flex, e uma linha, um
+ * cartão ou uma região com borda, fundo e padding é UM componente só, sem
+ * `Stack` por dentro nem flex no CSS do produto. Sem nenhuma dessas props, o
+ * Box continua sendo um bloco comum. Diferente do `Stack`, o `gap` do Box
+ * não tem valor padrão: sem `gap`, os filhos ficam colados.
+ *
+ * Também é item de flex: dentro de um `Stack` ou de outro `Box` flex, `grow`,
+ * `shrink`, `basis`, `minWidth`, `fullHeight`, `fullWidth` e `overflow*` (os
+ * mesmos nomes e valores do `Stack`) fazem a superfície crescer, encolher ou
+ * rolar no lugar certo, sem CSS do produto.
+ *
+ * `as` troca o elemento (`div` por padrão; `section`, `nav`, `li`, `ul`...):
+ * uma linha com borda e fundo dentro de uma lista é `<Box as="li">`. Com `nav`,
+ * `section` ou `form`, passe `aria-label` ou `aria-labelledby`.
+ *
+ * Atributos HTML (`id`, `style`, `title`, `role`, `tabIndex`, `data-*`,
+ * `aria-*`) vão para o elemento raiz.
+ * @property {string} as - Elemento HTML: 'div' (padrão) | 'span' | 'ul' | 'ol' | 'li' | 'section' | 'nav' | 'header' | 'footer' | 'form'
+ * @property {boolean} grow - Como item de Stack/Box flex: cresce para ocupar o espaço livre
+ * @property {string} shrink - Como item flex: '0' não encolhe, '1' encolhe
+ * @property {string} basis - Como item flex: tamanho base ('auto', '0', '25', '33', '50', '66', '75', '100'; os números são %)
+ * @property {string} minWidth - '0' (padrão do Box) deixa o conteúdo longo encolher; 'auto' devolve o mínimo do conteúdo
+ * @property {string} overflow - Overflow nos dois eixos
+ * @property {string} overflowX - Overflow horizontal
+ * @property {string} overflowY - Overflow vertical
+ * @property {boolean} fullHeight - Ocupa 100% da altura do pai
+ * @property {function} onSubmit - Só com as="form": callback do envio
+ * @property {string} direction - Liga o layout flex: 'vertical' | 'horizontal'
+ * @property {string} gap - Liga o layout flex: espaço entre os filhos, na escala do DS
+ * @property {string} align - Liga o layout flex: alinhamento no eixo transversal
+ * @property {string} justify - Liga o layout flex: distribuição no eixo principal
+ * @property {boolean} wrap - Liga o layout flex: permite quebrar em várias linhas
  * @property {string} padding - Padding em todos os lados, na escala do DS
  * @property {string} paddingX - Padding horizontal (sobrescreve padding)
  * @property {string} paddingY - Padding vertical (sobrescreve padding)
@@ -16,11 +59,25 @@ export type BoxSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs"
  * @property {string} shadow - Elevação
  * @property {boolean} fullWidth - Ocupa 100% da largura disponível
  * @property {string} className - Classes CSS adicionais
- * @quandoUsar Agrupar conteúdo numa superfície com respiro e fundo: painel de filtros, bloco de resumo, área destacada dentro de uma tela.
- * @quandoNaoUsar Para um item de listagem com título, ações e elevação própria — use `Card`, que já tem essa anatomia. Para só distribuir filhos no eixo sem desenhar nada, use `Stack`.
+ * @quandoUsar Agrupar conteúdo numa superfície com respiro e fundo: painel de filtros, bloco de resumo, área destacada dentro de uma tela. Uma linha de resultado ou um cartão simples cujo conteúdo precisa alinhar em linha (`direction="horizontal"`, `align="center"`, `gap="xxxs"`) com borda, fundo e padding.
+ * @quandoNaoUsar Para um item de listagem com título, ações e elevação própria — use `Card`, que já tem essa anatomia. Para uma linha de lista clicável (hover, foco, selecionado), use `ListItem`. Para só distribuir filhos no eixo sem desenhar nada (sem fundo, borda nem padding), use `Stack`.
  */
 /** Degraus da escala oficial de espaçamento do 1DS. */
+/** Elemento HTML que o Box renderiza (mesma lista do Stack). */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
 export interface BoxProps {
+    /** Elemento HTML renderizado. @default 'div' */
+    as?: BoxTag;
+    /** Liga o layout flex. Eixo do empilhamento. @default 'vertical' (quando o flex está ligado) */
+    direction?: "vertical" | "horizontal";
+    /** Liga o layout flex. Espaço entre os filhos, na escala oficial (`none` = 0). Sem valor, não há espaço. */
+    gap?: BoxSpacing;
+    /** Liga o layout flex. Alinhamento no eixo transversal. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Liga o layout flex. Distribuição no eixo principal. */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /** Liga o layout flex. Permite quebrar em várias linhas. */
+    wrap?: boolean;
     /** Padding em todos os lados. @default 'none' */
     padding?: BoxSpacing;
     /** Padding horizontal. Sobrescreve `padding` no eixo X. */
@@ -37,8 +94,31 @@ export interface BoxProps {
     shadow?: "none" | "level1" | "level2" | "level3";
     /** Ocupa 100% da largura disponível. */
     fullWidth?: boolean;
+    /** Ocupa 100% da altura do pai. */
+    fullHeight?: boolean;
+    /** Como item de Stack/Box flex: cresce para ocupar o espaço livre. */
+    grow?: boolean;
+    /** Como item flex: `"0"` não encolhe; `"1"` encolhe. */
+    shrink?: "0" | "1";
+    /** Como item flex: tamanho base. Os números são porcentagem do pai. */
+    basis?: "auto" | "0" | "25" | "33" | "50" | "66" | "75" | "100";
+    /** `"0"` (já é o padrão do Box) deixa o conteúdo encolher; `"auto"` volta ao mínimo do conteúdo. */
+    minWidth?: "0" | "auto";
+    /** Overflow nos dois eixos. */
+    overflow?: BoxOverflow;
+    /** Overflow horizontal (vence `overflow` no eixo X). */
+    overflowX?: BoxOverflow;
+    /** Overflow vertical (vence `overflow` no eixo Y). */
+    overflowY?: BoxOverflow;
+    /** Só com `as="form"`: chamado no envio do formulário. */
+    onSubmit?: (event: any) => void;
     /** Classes CSS adicionais. */
     className?: string;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
     /** Conteúdo da caixa. */
     children?: any;
 }

package/dist/components/Box/Box.js

@@ -1,9 +1,26 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Box.css';
 function Box(props) {
+    function elementTag() {
+        return props.as || "div";
+    }
+    function isFlex() {
+        return !!(props.direction ||
+            props.gap ||
+            props.align ||
+            props.justify ||
+            props.wrap);
+    }
     function classes() {
         return [
             "umds-box",
+            isFlex() ? "umds-box--flex" : "",
+            isFlex() ? `umds-box--${props.direction || "vertical"}` : "",
+            props.gap ? `umds-box--gap-${props.gap}` : "",
+            props.align ? `umds-box--align-${props.align}` : "",
+            props.justify ? `umds-box--justify-${props.justify}` : "",
+            props.wrap ? "umds-box--wrap" : "",
             props.padding ? `umds-box--p-${props.padding}` : "",
             props.paddingX ? `umds-box--px-${props.paddingX}` : "",
             props.paddingY ? `umds-box--py-${props.paddingY}` : "",
@@ -18,11 +35,34 @@ function Box(props) {
                 ? `umds-box--shadow-${props.shadow}`
                 : "",
             props.fullWidth ? "umds-box--full" : "",
+            props.fullHeight ? "umds-box--full-height" : "",
+            props.grow ? "umds-box--grow" : "",
+            props.shrink ? `umds-box--shrink-${props.shrink}` : "",
+            props.basis ? `umds-box--basis-${props.basis}` : "",
+            props.minWidth ? `umds-box--min-w-${props.minWidth}` : "",
+            props.overflow ? `umds-box--overflow-${props.overflow}` : "",
+            props.overflowX ? `umds-box--overflow-x-${props.overflowX}` : "",
+            props.overflowY ? `umds-box--overflow-y-${props.overflowY}` : "",
             props.className,
         ]
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "class" ||
+                chave === "title" ||
+                chave === "role" ||
+                chave === "tabIndex") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [elementTag() === "div" ? (_jsx("div", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "span" ? (_jsx("span", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "li" ? (_jsx("li", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "section" ? (_jsx("section", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "nav" ? (_jsx("nav", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "header" ? (_jsx("header", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "footer" ? (_jsx("footer", { id: props.id, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, elementTag() === "form" ? (_jsx("form", { id: props.id, onSubmit: (event) => props.onSubmit && props.onSubmit(event), ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
 }
 export default Box;

package/dist/components/Button/Button.css

@@ -38,6 +38,18 @@
 }
 
 /* ── Tamanhos ── */
+.umds-button--xs {
+  /* 26px: 24 + 2, os dois degraus do DS somados (sem token próprio; é a altura do botão dentro de card/linha) */
+  height: calc(var(--umds-primitive-spacing-xxs) + var(--umds-primitive-spacing-micro));
+  padding: 0 var(--umds-primitive-spacing-mini); /* 12px */
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+.umds-button--xs .umds-icon {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
 .umds-button--sm {
   height: var(--umds-primitive-spacing-xs); /* 32px */
   padding: 0 var(--umds-primitive-spacing-nano); /* era 0 12px (protótipo --space-3) — snap 14/07: controle compacto → 8px (escala sm 8 / md 16 / lg 24) */
@@ -110,6 +122,22 @@
   cursor: not-allowed;
 }
 
+/* ── Neutral text (sem borda, sem azul: barra de ações) ── */
+.umds-button--neutral-text {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-button--neutral-text:hover:not(:disabled) {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-button--neutral-text:disabled {
+  color: var(--umds-semantic-color-neutral-dark-up);
+  cursor: not-allowed;
+}
+
 /* ── Text ── */
 .umds-button--text {
   background-color: transparent;
@@ -172,6 +200,7 @@
   padding: 0;
 }
 
+.umds-button--icon.umds-button--xs { width: calc(var(--umds-primitive-spacing-xxs) + var(--umds-primitive-spacing-micro)); }  /* 26px */
 .umds-button--icon.umds-button--sm { width: var(--umds-primitive-spacing-xs); }  /* 32px */
 .umds-button--icon.umds-button--md { width: var(--umds-primitive-spacing-sm); }  /* 40px */
 .umds-button--icon.umds-button--lg { width: var(--umds-primitive-spacing-md); }  /* 48px */

package/dist/components/Button/Button.d.ts

@@ -1,8 +1,8 @@
 import './Button.css';
 /**
  * Button — botão de ação com variantes, tamanhos, ícones e estado de carregamento.
- * @property {string} variant - Variante visual: 'primary' | 'secondary' | 'neutral' | 'text' | 'negative' | 'negative-outlined' | 'icon'
- * @property {string} size - Tamanho do botão: 'sm' | 'md' | 'lg'
+ * @property {string} variant - Variante visual: 'primary' | 'secondary' | 'neutral' | 'neutral-text' | 'text' | 'negative' | 'negative-outlined' | 'icon'. `neutral` é o contornado cinza; `neutral-text` é o texto sem borda e sem azul, para barras de ações onde nenhum botão é a ação principal.
+ * @property {string} size - Tamanho do botão: 'xs' (26px, para dentro de card e linha de lista) | 'sm' (32px) | 'md' (40px) | 'lg' (48px)
  * @property {boolean} disabled - Desabilita o botão
  * @property {string} type - Tipo nativo do botão: 'button' | 'submit' | 'reset'
  * @property {Function} onClick - Callback disparado no clique
@@ -25,8 +25,8 @@ import './Button.css';
  * @quandoNaoUsar Para NAVEGAR para outra página ou recurso — use `Link`, que gera `<a>` e permite abrir em nova aba. A regra: se o usuário pode querer "abrir em nova aba", é `Link`.
  */
 export interface ButtonProps {
-    variant?: "primary" | "secondary" | "neutral" | "text" | "negative" | "negative-outlined" | "icon";
-    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "neutral" | "neutral-text" | "text" | "negative" | "negative-outlined" | "icon";
+    size?: "xs" | "sm" | "md" | "lg";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     children?: any;

package/dist/components/Button/Button.js

@@ -15,6 +15,9 @@ function Button(props) {
             .filter(Boolean)
             .join(" ");
     }
+    function iconSize() {
+        return props.size === "xs" ? "sm" : props.size;
+    }
     function showStartIcon() {
         const isLoading = props.loading;
         const position = props.loadingPosition || "center";
@@ -68,6 +71,6 @@ function Button(props) {
             props.onClick(event);
         }
     }
-    return (_jsxs("button", { type: props.type || "button", disabled: props.disabled, id: props.id, name: props.name, value: props.value, form: props.form, autoFocus: props.autoFocus, tabIndex: props.tabIndex, "aria-label": props.ariaLabel, "aria-busy": props.loading, onClick: (event) => handleClick(event), className: classes(), children: [showLoadingAtStart() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: props.size }) })) : null, showStartIcon() ? (_jsx(_Fragment, { children: startIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.startIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: props.size }) })) : null, showLoadingAtCenter() ? (_jsx("span", { className: "umds-button__visually-hidden", children: props.children })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: endIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.endIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: props.size }) })) : null] }));
+    return (_jsxs("button", { type: props.type || "button", disabled: props.disabled, id: props.id, name: props.name, value: props.value, form: props.form, autoFocus: props.autoFocus || undefined, tabIndex: props.tabIndex, "aria-label": props.ariaLabel, "aria-busy": props.loading, onClick: (event) => handleClick(event), className: classes(), children: [showLoadingAtStart() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showStartIcon() ? (_jsx(_Fragment, { children: startIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.startIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null, showLoadingAtCenter() ? (_jsx("span", { className: "umds-button__visually-hidden", children: props.children })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: endIconIsIcon() ? (_jsx(Icon, { variant: "inherit", icon: props.endIcon, size: iconSize() })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx("span", { "aria-hidden": "true", className: "umds-button__loading", children: _jsx(Icon, { variant: "inherit", icon: props.loadingIcon || faRefresh, size: iconSize() }) })) : null] }));
 }
 export default Button;

package/dist/components/Calendar/Calendar.css

@@ -0,0 +1,245 @@
+/* ─────────────────────────────────────────────
+   CALENDAR
+   Agenda com eventos por dia: visão de mês e de semana.
+
+   O evento é um chip de fundo suave (a cor do dado a 16% sobre o branco) com
+   uma barra da cor do dado no lado esquerdo. O TEXTO é sempre escuro: a cor
+   nunca é o único sinal, e o contraste do texto não depende do tom escolhido.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-calendar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--umds-semantic-color-background-white);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  font-family: var(--umds-semantic-font-family-base);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  overflow: hidden;
+}
+
+/* ── Cabeçalho ── */
+.umds-calendar__toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-xxxs); /* 16px */
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-calendar__toolbar-start,
+.umds-calendar__toolbar-end {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  min-width: 0;
+}
+
+.umds-calendar__toolbar-end {
+  justify-content: flex-end;
+}
+
+.umds-calendar__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+.umds-calendar__title {
+  /* 152px (200 - 48): o título trocando de tamanho não faz os botões dançarem. */
+  min-width: calc(var(--umds-primitive-spacing-giant) - var(--umds-primitive-spacing-md));
+  text-align: center;
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+/* ── Grade ── */
+.umds-calendar__grid {
+  display: flex;
+  flex-direction: column;
+}
+
+.umds-calendar__weekdays,
+.umds-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.umds-calendar__weekdays {
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-calendar__weekday {
+  padding: var(--umds-primitive-spacing-nano); /* 8px */
+  text-align: center;
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-calendar__week + .umds-calendar__week .umds-calendar__cell {
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-calendar__cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--umds-primitive-spacing-xxl); /* 80px */
+  padding: var(--umds-primitive-spacing-nano); /* 8px */
+  border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-background-white);
+  cursor: default;
+}
+
+.umds-calendar__cell:first-child {
+  border-left: none;
+}
+
+.umds-calendar--week .umds-calendar__cell {
+  min-height: var(--umds-primitive-spacing-giant); /* 200px */
+}
+
+.umds-calendar__cell--outside {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-calendar__cell--today {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-calendar__cell--selected {
+  box-shadow: inset 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+.umds-calendar__cell:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-calendar__day-number {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--umds-primitive-spacing-xxs); /* 24px */
+  height: var(--umds-primitive-spacing-xxs);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  border-radius: var(--umds-primitive-border-radius-circular);
+}
+
+/* Hoje: o número num círculo cheio. Texto claro sobre o primário. */
+.umds-calendar__cell--today .umds-calendar__day-number {
+  background: var(--umds-semantic-color-primary-pure);
+  color: var(--umds-semantic-color-background-white);
+  font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+/* ── Eventos ── */
+.umds-calendar__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  min-width: 0;
+}
+
+.umds-calendar__event {
+  display: flex;
+  align-items: baseline;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
+  border: none;
+  /* A cor do dado vem do `style` (barra e fundo suave); o texto é sempre escuro. */
+  border-left: var(--umds-primitive-border-width-thin) solid transparent;
+  border-radius: var(--umds-primitive-border-radius-xs);
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  text-align: left;
+  cursor: pointer;
+}
+
+.umds-calendar__event:hover {
+  filter: brightness(0.96);
+}
+
+.umds-calendar__event:focus-visible,
+.umds-calendar__more:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-border-width-thin);
+}
+
+.umds-calendar__event-time {
+  flex: none;
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-calendar__event-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.umds-calendar--week .umds-calendar__event-title {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.umds-calendar__more {
+  align-self: flex-start;
+  margin: 0;
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-quarck); /* 2px 4px */
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-xs);
+  background: transparent;
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-primary-dark);
+  cursor: pointer;
+}
+
+.umds-calendar__more:hover {
+  text-decoration: underline;
+}
+
+/* Telas estreitas: o cabeçalho empilha e a célula perde folga. */
+@media (max-width: 640px) {
+  .umds-calendar__toolbar {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .umds-calendar__toolbar-start,
+  .umds-calendar__toolbar-end {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .umds-calendar__cell {
+    padding: var(--umds-primitive-spacing-quarck); /* 4px */
+  }
+}
+
+@media (forced-colors: active) {
+  .umds-calendar__event {
+    border: var(--umds-primitive-border-width-hairline) solid CanvasText;
+  }
+
+  .umds-calendar__cell--today .umds-calendar__day-number {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}