@1doc/1ds-react 2.8.0 → 2.9.0

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;
+  }
+}

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,125 @@
+import './Calendar.css';
+/**
+ * Evento do Calendar.
+ * @property {string} id - Identidade do evento (opcional)
+ * @property {string} date - Dia do evento: `YYYY-MM-DD` (ou um `Date`)
+ * @property {string} title - Texto do evento
+ * @property {string} color - Cor de DADO do evento: nome de um token (`--umds-primitive-blue-pure`) ou uma cor. Padrão: o primário. A cor vai no fundo suave e na barra do lado; o texto é sempre escuro (a cor nunca fica sozinha).
+ * @property {string} time - Horário, mostrado antes do título (ex.: "09:00")
+ */
+export interface CalendarEvent {
+    id?: string;
+    date: any;
+    title: string;
+    color?: string;
+    time?: string;
+    [key: string]: any;
+}
+/** Um dia da grade, já pronto para desenhar. */
+/** Um dia da grade, já pronto para desenhar. */
+export interface CalendarDayCell {
+    iso: string;
+    day: number;
+    outside: boolean;
+    today: boolean;
+    selected: boolean;
+    tabIndex: number;
+    label: string;
+    classes: string;
+    visible: CalendarEvent[];
+    hidden: number;
+    moreText: string;
+    moreAria: string;
+    [key: string]: any;
+}
+/**
+ * Calendar — agenda com eventos por dia, em visão de mês ou de semana.
+ *
+ * `events` é uma lista plana (`{ date, title, color? }`): o componente agrupa
+ * por dia. A cor é cor de DADO (um token, como o do `ColorPicker`), aplicada num
+ * fundo suave com uma barra do lado; o texto do evento é sempre escuro, então a
+ * cor nunca é a única informação.
+ *
+ * Mês: cada dia mostra até `maxVisible` eventos e um "+N" para o resto
+ * (`onMoreClick` recebe o dia e os eventos escondidos). O corte é por QUANTIDADE,
+ * não por altura. Semana: sete colunas, todos os eventos de cada dia.
+ *
+ * É uma grade acessível (`role="grid"`): um Tab entra no dia em foco (hoje, ou o
+ * primeiro), as setas movem de dia (mudando de mês ou de semana se for preciso),
+ * Home e End vão às pontas da semana, PageUp e PageDown trocam de mês (ou de
+ * semana), Enter e Espaço acionam `onDayClick`. Os eventos do dia em foco entram
+ * na ordem de Tab depois dele.
+ *
+ * A data mostrada (`date`) e a visão (`view`) são controláveis (`onDateChange`,
+ * `onViewChange`) ou internas (`defaultDate`, `defaultView`). O cabeçalho aceita
+ * o slot `headerStart` (um filtro de escopo, à esquerda) e `headerEnd` (a
+ * legenda, à direita). Nomes de mês e de dia saem do `Intl` no `locale` pedido;
+ * os demais textos são props.
+ * @property {CalendarEvent[]} events - Eventos (lista plana)
+ * @property {string} view - Visão: 'month' | 'week' (controlada)
+ * @property {string} defaultView - Visão inicial (não controlada; padrão 'month')
+ * @property {string} date - Data de referência `YYYY-MM-DD`: o mês ou a semana que ela contém é o que se vê (controlada)
+ * @property {string} defaultDate - Data inicial (não controlada; padrão hoje)
+ * @property {string} selectedDate - Dia marcado como selecionado (`YYYY-MM-DD`)
+ * @property {string} today - O "hoje" do calendário (`YYYY-MM-DD`; padrão a data do sistema). Útil em testes e em demonstração.
+ * @property {number} weekStartsOn - Primeiro dia da semana: 0 domingo (padrão) | 1 segunda
+ * @property {number} maxVisible - Eventos por dia na visão de mês antes do "+N" (padrão 3)
+ * @property {string} locale - Idioma dos nomes de mês e de dia (padrão 'pt-BR')
+ * @property {string} ariaLabel - Nome acessível da grade (padrão: o título, ex.: "Maio 2026")
+ * @property {string} previousLabel - Nome do botão de voltar (padrão "Anterior")
+ * @property {string} nextLabel - Nome do botão de avançar (padrão "Próximo")
+ * @property {string} todayLabel - Texto do botão de hoje (padrão "Hoje")
+ * @property {string} monthLabel - Texto da visão de mês (padrão "Mês")
+ * @property {string} weekLabel - Texto da visão de semana (padrão "Semana")
+ * @property {string} viewLabel - Nome do seletor de visão (padrão "Visão")
+ * @property {boolean} hideViewSwitcher - Esconde o seletor Mês/Semana
+ * @property {string} moreLabel - Texto do "+N"; `{count}` vira o número (padrão "+{count}")
+ * @property {string} moreAriaLabel - Nome do "+N"; `{count}` e `{date}` são trocados (padrão "{count} eventos a mais em {date}")
+ * @property {function} dayLabel - Nome acessível de cada dia: `(iso, quantidade) => texto` (padrão: "sexta-feira, 15 de maio de 2026, 2 eventos", no `locale`)
+ * @property {function} onDayClick - Clique (ou Enter) num dia: recebe `YYYY-MM-DD`
+ * @property {function} onEventClick - Clique num evento: recebe o evento
+ * @property {function} onMoreClick - Clique no "+N": recebe o dia e a lista dos eventos escondidos
+ * @property {function} onDateChange - Mudou a data de referência (navegação): recebe `YYYY-MM-DD`
+ * @property {function} onViewChange - Mudou a visão: recebe 'month' | 'week'
+ * @property {string} className - Classes CSS adicionais
+ * @slot headerStart - Cabeçalho, à esquerda: um filtro de escopo.
+ * @slot headerEnd - Cabeçalho, antes do seletor de visão: a legenda.
+ * @quandoUsar Mostrar prazos, vencimentos e compromissos distribuídos no tempo: agenda de documentos, de tarefas, de assinaturas.
+ * @quandoNaoUsar Para escolher UMA data num campo, use `DatePicker`. Para uma sequência de acontecimentos sem grade de dias, use `Timeline`. Para uma grade de horas (agenda com horário de início e fim), este componente não serve: não tem eixo de horas.
+ */
+/** Um dia da grade, já pronto para desenhar. */
+export interface CalendarProps {
+    events?: CalendarEvent[];
+    view?: "month" | "week";
+    defaultView?: "month" | "week";
+    date?: string;
+    defaultDate?: string;
+    selectedDate?: string;
+    today?: string;
+    weekStartsOn?: 0 | 1;
+    maxVisible?: number;
+    locale?: string;
+    ariaLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    todayLabel?: string;
+    monthLabel?: string;
+    weekLabel?: string;
+    viewLabel?: string;
+    hideViewSwitcher?: boolean;
+    moreLabel?: string;
+    moreAriaLabel?: string;
+    dayLabel?: (iso: string, count: number) => string;
+    className?: string;
+    /** Slot `headerStart`: à esquerda do cabeçalho. */
+    headerStart?: any;
+    /** Slot `headerEnd`: à direita, antes do seletor de visão. */
+    headerEnd?: any;
+    onDayClick?: (iso: string) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onMoreClick?: (iso: string, hidden: CalendarEvent[]) => void;
+    onDateChange?: (iso: string) => void;
+    onViewChange?: (view: "month" | "week") => void;
+}
+declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;