@vector-business-services/cristal-ds-web 0.19.0 → 0.20.0

package/dist/index.js

@@ -1,17 +1,18 @@
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useLayoutEffect, useMemo, useCallback, useEffect, useContext, cloneElement } from 'react';
 import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
-import { CaretDown, WarningCircle, Info, Question, Check, CircleNotch, ArrowLeft, X, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, Funnel, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, Note, ArrowsInLineHorizontal, SortAscending, SortDescending, DotsThreeVertical, CaretLeft, CaretRight, Trash, CaretDoubleRight, CaretDoubleLeft, GearSix } from '@phosphor-icons/react';
+import { CaretDown, WarningCircle, Info, Question, Check, CircleNotch, ArrowLeft, X, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, Funnel, CalendarDot, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, Note, ArrowsInLineHorizontal, SortAscending, SortDescending, DotsThreeVertical, CaretLeft, CaretRight, Trash, CaretDoubleRight, CaretDoubleLeft, GearSix } from '@phosphor-icons/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
 import { Badge as Badge$1 } from 'primereact/badge';
 import { Button as Button$1 } from 'primereact/button';
+import { Calendar as Calendar$1 } from 'primereact/calendar';
+import { addLocale, PrimeReactContext, PrimeReactProvider, localeOption } from 'primereact/api';
 import { Card as Card$1 } from 'primereact/card';
 import { Chart as Chart$1 } from 'primereact/chart';
 import { Tooltip as Tooltip$1 } from 'primereact/tooltip';
 import { Checkbox as Checkbox$1 } from 'primereact/checkbox';
 import { Chip as Chip$1 } from 'primereact/chip';
 import { ContextMenu as ContextMenu$1 } from 'primereact/contextmenu';
-import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
 import { Menu as Menu$1 } from 'primereact/menu';
 import { Divider as Divider$1 } from 'primereact/divider';
 import { Sidebar } from 'primereact/sidebar';
@@ -147,7 +148,7 @@ var AutoComplete = forwardRef(function AutoComplete2({
   const id = inputId ?? autoId;
   const hintId = `${id}-hint`;
   const supportText = error ?? hint;
-  const classes = [
+  const classes2 = [
     "cr-field",
     "cr-autocomplete",
     dropdown && "cr-autocomplete--dropdown",
@@ -157,7 +158,7 @@ var AutoComplete = forwardRef(function AutoComplete2({
     disabled && "cr-field--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
     label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -214,13 +215,13 @@ var AutoComplete = forwardRef(function AutoComplete2({
 var Badge = forwardRef(function Badge2({ variant = "default", size = "large", className, children, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = ["cr-badge", `cr-badge--${variant}`, `cr-badge--${size}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-badge", `cr-badge--${variant}`, `cr-badge--${size}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Badge$1,
     {
       unstyled: true,
       ref: primeRef,
-      className: classes,
+      className: classes2,
       value: size === "small" ? null : children,
       ...props
     }
@@ -236,14 +237,14 @@ var Button = forwardRef(function Button2({
   children,
   ...props
 }, ref) {
-  const classes = ["cr-button", `cr-button--${variant}`, `cr-button--${size}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-button", `cr-button--${variant}`, `cr-button--${size}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     Button$1,
     {
       unstyled: true,
       ref,
       type,
-      className: classes,
+      className: classes2,
       ...props,
       children: [
         leadingIcon && /* @__PURE__ */ jsx("span", { className: "cr-button__icon", "aria-hidden": "true", children: leadingIcon }),
@@ -253,15 +254,202 @@ var Button = forwardRef(function Button2({
     }
   );
 });
+var LOCALE = "cr-pt-BR";
+addLocale(LOCALE, {
+  firstDayOfWeek: 0,
+  dayNames: [
+    "domingo",
+    "segunda-feira",
+    "ter\xE7a-feira",
+    "quarta-feira",
+    "quinta-feira",
+    "sexta-feira",
+    "s\xE1bado"
+  ],
+  dayNamesShort: ["dom", "seg", "ter", "qua", "qui", "sex", "s\xE1b"],
+  dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
+  monthNames: [
+    "Janeiro",
+    "Fevereiro",
+    "Mar\xE7o",
+    "Abril",
+    "Maio",
+    "Junho",
+    "Julho",
+    "Agosto",
+    "Setembro",
+    "Outubro",
+    "Novembro",
+    "Dezembro"
+  ],
+  monthNamesShort: [
+    "Jan",
+    "Fev",
+    "Mar",
+    "Abr",
+    "Mai",
+    "Jun",
+    "Jul",
+    "Ago",
+    "Set",
+    "Out",
+    "Nov",
+    "Dez"
+  ],
+  dateFormat: "dd/mm/yy",
+  weekHeader: "Sem",
+  today: "Hoje",
+  clear: "Limpar",
+  chooseDate: "Escolher data",
+  chooseMonth: "Escolher m\xEAs",
+  chooseYear: "Escolher ano",
+  prevMonth: "M\xEAs anterior",
+  nextMonth: "Pr\xF3ximo m\xEAs",
+  prevYear: "Ano anterior",
+  nextYear: "Pr\xF3ximo ano",
+  prevDecade: "D\xE9cada anterior",
+  nextDecade: "Pr\xF3xima d\xE9cada"
+});
+function seguirFocoDoDia(event) {
+  const dia = event.target;
+  if (!(dia instanceof HTMLElement) || !dia.classList.contains("cr-calendar__date")) return;
+  const painel = dia.closest(".cr-calendar");
+  const td = dia.closest("td");
+  const mes = dia.closest(".cr-calendar__month");
+  if (!painel || !td || !mes || event.relatedTarget) return;
+  const indice = [...painel.querySelectorAll(".cr-calendar__month")].indexOf(mes);
+  const { pDay, pMonth, pYear } = td.dataset;
+  requestAnimationFrame(() => {
+    if (dia.isConnected || document.activeElement !== document.body) return;
+    const novo = painel.querySelectorAll(".cr-calendar__month")[indice]?.querySelector(
+      `td[data-p-day="${pDay}"][data-p-month="${pMonth}"][data-p-year="${pYear}"] .cr-calendar__date`
+    );
+    if (novo) {
+      novo.tabIndex = 0;
+      novo.focus();
+    }
+  });
+}
+if (typeof document !== "undefined") document.addEventListener("focusout", seguirFocoDoDia, true);
+var setas = {
+  prevIcon: /* @__PURE__ */ jsx("span", { className: "cr-icon-button__icon", children: /* @__PURE__ */ jsx(CaretLeft, {}) }),
+  nextIcon: /* @__PURE__ */ jsx("span", { className: "cr-icon-button__icon", children: /* @__PURE__ */ jsx(CaretRight, {}) })
+};
+var mesmoDia = (data, dia) => data instanceof Date && data.getDate() === dia.day && data.getMonth() === dia.month && data.getFullYear() === dia.year;
+var chave = (dia) => dia.year * 1e4 + dia.month * 100 + dia.day;
+var chaveDe = (data) => chave({ day: data.getDate(), month: data.getMonth(), year: data.getFullYear() });
+function escolhido(props, dia) {
+  const { value } = props;
+  if (value instanceof Date) return mesmoDia(value, dia);
+  if (!Array.isArray(value)) return false;
+  if (props.selectionMode === "range") {
+    const [inicio, fim] = value;
+    if (!inicio) return false;
+    return chave(dia) >= chaveDe(inicio) && chave(dia) <= chaveDe(fim ?? inicio);
+  }
+  return value.some((data) => mesmoDia(data, dia));
+}
+function noPeriodo(props, dia) {
+  if (props.selectionMode !== "range" || !Array.isArray(props.value)) return void 0;
+  const [inicio, fim] = props.value;
+  if (mesmoDia(inicio, dia) || mesmoDia(fim, dia)) return "cr-calendar__day--edge";
+  if (inicio && fim) {
+    const data = new Date(dia.year, dia.month, dia.day);
+    if (data > inicio && data < fim) return "cr-calendar__day--middle";
+  }
+  return void 0;
+}
+var classes = (...lista) => lista.filter(Boolean).join(" ");
+function ptDoPainel(offDays = []) {
+  return {
+    groupContainer: { className: "cr-calendar__months" },
+    group: { className: "cr-calendar__month" },
+    header: { className: "cr-calendar__header" },
+    previousButton: {
+      className: "cr-icon-button cr-icon-button--tertiary cr-icon-button--xsmall"
+    },
+    nextButton: { className: "cr-icon-button cr-icon-button--tertiary cr-icon-button--xsmall" },
+    title: { className: "cr-calendar__title" },
+    // O nome dos botões do título é o texto que aparece neles (o mês e o ano), não "Escolher mês".
+    monthTitle: { className: "cr-calendar__title-button", "aria-label": void 0 },
+    yearTitle: { className: "cr-calendar__title-button", "aria-label": void 0 },
+    decadeTitle: { className: "cr-calendar__title-text" },
+    table: { className: "cr-calendar__table" },
+    tableHeaderCell: { className: "cr-calendar__weekday" },
+    day: ({ props, context }) => {
+      const dia = context.date;
+      const meses = localeOption("monthNames", props.locale ?? LOCALE);
+      return {
+        // O Prime põe o escolhido e o desabilitado no <span> do dia, que não tem papel: eles vão
+        // para a célula da grade (gridcell). O nome da célula inclui o número que aparece nela.
+        "aria-selected": escolhido(props, dia),
+        "aria-disabled": dia.selectable ? void 0 : true,
+        "aria-label": `${dia.day} de ${meses[dia.month]?.toLowerCase()} de ${dia.year}`,
+        className: classes(
+          "cr-calendar__day",
+          context.today && "cr-calendar__day--today",
+          context.otherMonth && "cr-calendar__day--other-month",
+          offDays.some((data) => mesmoDia(data, dia)) && "cr-calendar__day--off",
+          noPeriodo(props, dia)
+        )
+      };
+    },
+    dayLabel: ({ context }) => ({
+      "aria-selected": void 0,
+      "aria-disabled": void 0,
+      className: classes(
+        "cr-calendar__date",
+        context.selected && "cr-calendar__date--selected",
+        context.disabled && "cr-calendar__date--disabled"
+      )
+    }),
+    monthPicker: { className: "cr-calendar__picker cr-calendar__picker--months" },
+    month: ({ context }) => ({
+      className: classes(
+        "cr-calendar__option",
+        context.selected && "cr-calendar__option--selected",
+        context.disabled && "cr-calendar__option--disabled"
+      )
+    }),
+    yearPicker: { className: "cr-calendar__picker cr-calendar__picker--years" },
+    year: ({ context }) => ({
+      className: classes(
+        "cr-calendar__option",
+        context.selected && "cr-calendar__option--selected",
+        context.disabled && "cr-calendar__option--disabled"
+      )
+    })
+  };
+}
+function CalendarBase({ offDays, locale = LOCALE, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Calendar$1,
+    {
+      ...setas,
+      locale,
+      ...props,
+      ref,
+      inline: true,
+      unstyled: true,
+      className,
+      pt: {
+        root: { className: "cr-calendar-inline" },
+        panel: { className: "cr-calendar" },
+        ...ptDoPainel(offDays)
+      }
+    }
+  );
+}
+var Calendar = forwardRef(CalendarBase);
 var Card = forwardRef(function Card2({ padding = "xsmall", outline = false, className, style, children, ...props }, ref) {
-  const classes = ["cr-card", `cr-card--${padding}`, outline && "cr-card--outline", className].filter(Boolean).join(" ");
+  const classes2 = ["cr-card", `cr-card--${padding}`, outline && "cr-card--outline", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Card$1,
     {
       unstyled: true,
       ref,
       pt: {
-        root: { className: classes, style },
+        root: { className: classes2, style },
         body: { className: "cr-card__body" },
         content: { className: "cr-card__content" }
       },
@@ -321,11 +509,11 @@ function Tooltip({
       )
     );
   }, [target, tooltipId, describe]);
-  const classes = ["cr-tooltip", `cr-tooltip--${type}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-tooltip", `cr-tooltip--${type}`, className].filter(Boolean).join(" ");
   const pt = {
     root: (options) => {
       const side = options?.state?.position ?? position;
-      return { className: `${classes} cr-tooltip--${side}`, "aria-hidden": false };
+      return { className: `${classes2} cr-tooltip--${side}`, "aria-hidden": false };
     },
     arrow: { className: "cr-tooltip__arrow" },
     text: { className: "cr-tooltip__text" }
@@ -584,8 +772,8 @@ var Chart = forwardRef(function Chart2({
     };
   }, [tema, yAxis, y2Axis, temDireita, series, type, stacked]);
   const card = Boolean(title || actions);
-  const classes = ["cr-chart", card && "cr-chart--card", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ...props, ref: raiz, id, className: classes, children: [
+  const classes2 = ["cr-chart", card && "cr-chart--card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ...props, ref: raiz, id, className: classes2, children: [
     card && /* @__PURE__ */ jsxs("div", { className: "cr-chart__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "cr-chart__title-row", children: [
         title && /* @__PURE__ */ jsx("span", { className: "cr-chart__title", children: title }),
@@ -678,7 +866,7 @@ var Checkbox = forwardRef(function Checkbox2({
   useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate && !checked;
   }, [indeterminate, checked]);
-  const classes = [
+  const classes2 = [
     "cr-checkbox",
     `cr-checkbox--${position}`,
     `cr-checkbox--label-${labelSize}`,
@@ -686,7 +874,7 @@ var Checkbox = forwardRef(function Checkbox2({
     disabled && "cr-checkbox--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsx(
       Checkbox$1,
       {
@@ -733,7 +921,7 @@ var Chip = forwardRef(function Chip2({
   className,
   ...props
 }, ref) {
-  const classes = [
+  const classes2 = [
     "cr-chip",
     `cr-chip--${variant}`,
     `cr-chip--${size}`,
@@ -747,7 +935,7 @@ var Chip = forwardRef(function Chip2({
     {
       unstyled: true,
       pt: { root: { ref, "aria-label": void 0 } },
-      className: classes,
+      className: classes2,
       label,
       "aria-disabled": disabled || void 0,
       icon: leadingIcon ? () => /* @__PURE__ */ jsx("span", { className: "cr-chip__icon cr-chip__icon--leading", "aria-hidden": "true", children: leadingIcon }) : void 0,
@@ -823,7 +1011,7 @@ var Menu = forwardRef(function Menu2({
       template: () => /* @__PURE__ */ jsx("div", { className: "cr-menu__loading", children: /* @__PURE__ */ jsx(CircleNotch, { className: "cr-menu__spinner", "aria-hidden": "true" }) })
     }
   ] : itensDoPrime(model);
-  const classes = ["cr-lista cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
+  const classes2 = ["cr-lista cr-menu", `cr-menu--${density}`, popup && "cr-menu--popup", className].filter(Boolean).join(" ");
   const pt = {
     // O nome acessível vai na lista (role=menu); o Prime lê `ariaLabel`, mas não o declara no tipo.
     menu: {
@@ -857,7 +1045,7 @@ var Menu = forwardRef(function Menu2({
       unstyled: true,
       ref: primeRef,
       id,
-      className: classes,
+      className: classes2,
       model: items,
       popup,
       popupAlignment,
@@ -886,9 +1074,9 @@ var ContextMenu = forwardRef(function ContextMenu2({
     hide: (event) => primeRef.current?.hide(event),
     getElement: () => primeRef.current?.getElement() ?? null
   }));
-  const classes = ["cr-lista cr-menu cr-context-menu", `cr-menu--${density}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-lista cr-menu cr-context-menu", `cr-menu--${density}`, className].filter(Boolean).join(" ");
   const pt = {
-    root: { ...props, className: classes },
+    root: { ...props, className: classes2 },
     // O nome vai na lista (o Prime dá a ela role=menubar, vertical).
     menu: {
       className: "cr-menu__list",
@@ -921,10 +1109,120 @@ var ContextMenu = forwardRef(function ContextMenu2({
     }
   );
 });
+function DatePickerBase({
+  variant = "outline",
+  size = "large",
+  label,
+  hint,
+  error,
+  offDays,
+  locale = LOCALE,
+  placeholder = "dd/mm/aaaa",
+  inputId,
+  required,
+  disabled,
+  className,
+  style,
+  onShow,
+  onHide,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = inputId ?? autoId;
+  const hintId = `${id}-hint`;
+  const supportText = error ?? hint;
+  const pelaSeta = useRef(false);
+  const peloTeclado = useRef(false);
+  const calendario = useRef(null);
+  useImperativeHandle(ref, () => calendario.current, []);
+  const classes2 = [
+    "cr-field",
+    "cr-datepicker",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Calendar$1,
+      {
+        ...setas,
+        locale,
+        placeholder,
+        ...props,
+        ref: calendario,
+        unstyled: true,
+        inputId: id,
+        required,
+        disabled,
+        showIcon: true,
+        icon: /* @__PURE__ */ jsx(CalendarDot, { "aria-hidden": "true" }),
+        onShow: () => {
+          if (!pelaSeta.current) document.getElementById(id)?.focus();
+          pelaSeta.current = false;
+          onShow?.();
+        },
+        onHide: () => {
+          const atual = calendario.current;
+          const ativo = document.activeElement;
+          const semFoco = ativo === document.body || atual?.getOverlay()?.contains(ativo);
+          if (peloTeclado.current && semFoco && atual) {
+            atual.focus();
+            atual.hide();
+          }
+          peloTeclado.current = false;
+          pelaSeta.current = false;
+          onHide?.();
+        },
+        pt: {
+          root: { className: "cr-datepicker__root" },
+          input: {
+            root: {
+              className: "cr-field__control cr-datepicker__input",
+              "aria-describedby": supportText ? hintId : void 0,
+              "aria-invalid": error ? true : void 0,
+              onKeyDown: (event) => {
+                if (event.code === "ArrowDown" && !calendario.current?.getOverlay()) {
+                  pelaSeta.current = true;
+                }
+              }
+            }
+          },
+          dropdownButton: { root: { className: "cr-datepicker__button" } },
+          panel: {
+            className: "cr-calendar cr-datepicker__panel",
+            onKeyDown: (event) => {
+              if (["Enter", "NumpadEnter", "Space"].includes(event.code))
+                peloTeclado.current = true;
+            }
+          },
+          // Animação de entrada e saída (a do Prime) e o lado do painel, medido logo depois de o
+          // Prime posicionar.
+          transition: transicaoDoPopup(() => {
+            const campo = document.getElementById(id);
+            seguirLado(painelDoCampo(campo, ".cr-datepicker__panel"), campo);
+          }),
+          ...ptDoPainel(offDays)
+        }
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
+      supportText
+    ] })
+  ] });
+}
+var DatePicker = forwardRef(DatePickerBase);
 var Divider = forwardRef(function Divider2({ orientation = "horizontal", variant = "solid", className, style, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = ["cr-divider", `cr-divider--${orientation}`, `cr-divider--${variant}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-divider", `cr-divider--${orientation}`, `cr-divider--${variant}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Divider$1,
     {
@@ -932,7 +1230,7 @@ var Divider = forwardRef(function Divider2({ orientation = "horizontal", variant
       ref: primeRef,
       layout: orientation,
       pt: {
-        root: { className: classes, style },
+        root: { className: classes2, style },
         content: { className: "cr-divider__content" }
       },
       ...props
@@ -959,7 +1257,7 @@ var IconButton = forwardRef(function IconButton2({
     [ref]
   );
   const texto = tooltip ?? props["aria-label"];
-  const classes = [
+  const classes2 = [
     "cr-icon-button",
     `cr-icon-button--${variant}`,
     `cr-icon-button--${size}`,
@@ -972,7 +1270,7 @@ var IconButton = forwardRef(function IconButton2({
         unstyled: true,
         ref: ligar,
         type,
-        className: classes,
+        className: classes2,
         ...props,
         children: /* @__PURE__ */ jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
       }
@@ -1049,7 +1347,7 @@ var Drawer = forwardRef(function Drawer2({
       primeiro.focus();
     }
   };
-  const classes = [
+  const classes2 = [
     "cr-drawer",
     `cr-drawer--${side}`,
     `cr-drawer--${behavior}`,
@@ -1074,7 +1372,7 @@ var Drawer = forwardRef(function Drawer2({
           className: `cr-drawer__mask cr-drawer__mask--${side}${modal ? "" : " cr-drawer__mask--sem-overlay"}`
         },
         root: {
-          className: classes,
+          className: classes2,
           role: "dialog",
           "aria-modal": modal || void 0,
           "aria-labelledby": titleId,
@@ -1163,7 +1461,7 @@ var Input = forwardRef(function Input2({
   const inputId = id ?? autoId;
   const hintId = `${inputId}-hint`;
   const supportText = error ?? hint;
-  const classes = [
+  const classes2 = [
     "cr-field",
     `cr-field--${variant}`,
     `cr-field--${size}`,
@@ -1171,7 +1469,7 @@ var Input = forwardRef(function Input2({
     disabled && "cr-field--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -1221,7 +1519,7 @@ function ToolButton({ tool }) {
   const hasMenu = Boolean(tool.menu?.length);
   const hasBadge = tool.badge !== void 0 && tool.badge !== null;
   const name = hasBadge ? `${tool.label}, ${tool.badgeLabel ?? String(tool.badge)}` : tool.label;
-  const classes = [
+  const classes2 = [
     "cr-menubar__tool",
     tool.showOnTablet && "cr-menubar__tool--tablet",
     open && "cr-menubar__tool--active"
@@ -1233,7 +1531,7 @@ function ToolButton({ tool }) {
         unstyled: true,
         ref: buttonRef,
         type: "button",
-        className: classes,
+        className: classes2,
         "aria-label": name,
         "aria-haspopup": hasMenu ? "menu" : void 0,
         "aria-expanded": hasMenu ? open : void 0,
@@ -1337,7 +1635,7 @@ var Menubar = forwardRef(function Menubar2({
     event.preventDefault();
     onSearch?.(search);
   };
-  const classes = ["cr-menubar", !showSearch && "cr-menubar--no-search", className].filter(Boolean).join(" ");
+  const classes2 = ["cr-menubar", !showSearch && "cr-menubar--no-search", className].filter(Boolean).join(" ");
   const pt = {
     // A área start some do layout (display: contents): o início e a busca viram colunas do grid.
     start: { className: "cr-menubar__start" },
@@ -1392,7 +1690,7 @@ var Menubar = forwardRef(function Menubar2({
     tools.length > 0 && /* @__PURE__ */ jsx("div", { className: "cr-menubar__tools", children: tools.map((tool) => /* @__PURE__ */ jsx(ToolButton, { tool }, tool.label)) }),
     user && /* @__PURE__ */ jsx(Profile, { user, menu: userMenu })
   ] }) : null;
-  return /* @__PURE__ */ jsx("div", { ref, id, className: classes, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref, id, className: classes2, children: /* @__PURE__ */ jsx(
     Menubar$1,
     {
       ...props,
@@ -1408,13 +1706,13 @@ var Menubar = forwardRef(function Menubar2({
 var Tag = forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
+  const classes2 = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Tag$1,
     {
       unstyled: true,
       ref: primeRef,
-      className: classes,
+      className: classes2,
       icon: icon ? () => /* @__PURE__ */ jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
       value: children,
       ...props
@@ -1504,7 +1802,7 @@ var MenuPrincipal = forwardRef(
       );
       anterior = entry;
     });
-    const classes = ["cr-menu-principal", popup && "cr-menu-principal--popup", className].filter(Boolean).join(" ");
+    const classes2 = ["cr-menu-principal", popup && "cr-menu-principal--popup", className].filter(Boolean).join(" ");
     const pt = {
       // O nome acessível vai na lista (role=menu), como no Menu.
       menu: {
@@ -1531,7 +1829,7 @@ var MenuPrincipal = forwardRef(
         unstyled: true,
         ref: primeRef,
         id,
-        className: classes,
+        className: classes2,
         style: popup && baseDoAlvo !== void 0 ? { "--cr-menu-principal-topo": `${baseDoAlvo}px` } : void 0,
         model: items,
         popup,
@@ -1614,7 +1912,7 @@ var Modal = forwardRef(function Modal2({
     [...body.children].forEach((child) => observer.observe(child));
     return () => observer.disconnect();
   }, [body, children]);
-  const classes = ["cr-modal", `cr-modal--${size}`, rolavel && "cr-modal--scrollable", className].filter(Boolean).join(" ");
+  const classes2 = ["cr-modal", `cr-modal--${size}`, rolavel && "cr-modal--scrollable", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -1631,7 +1929,7 @@ var Modal = forwardRef(function Modal2({
       pt: {
         mask: { className: "cr-modal__mask" },
         root: {
-          className: classes,
+          className: classes2,
           "aria-labelledby": titleId,
           "aria-describedby": void 0
         },
@@ -1722,7 +2020,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
   const supportText = error ?? hint;
   const selected = value ?? [];
   const overflow = selected.length > maxChips;
-  const classes = [
+  const classes2 = [
     "cr-field",
     `cr-field--${variant}`,
     `cr-field--${size}`,
@@ -1833,7 +2131,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
     // Animação de entrada e saída da lista, a do Prime (comum.css).
     transition: transicaoDoPopup()
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -1910,8 +2208,8 @@ var PageHeader = forwardRef(function PageHeader2({
       );
     }
   );
-  const classes = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...props, children: [
+  const classes2 = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes2, ...props, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2011,7 +2309,7 @@ var Select = forwardRef(function Select2({
     },
     [ref]
   );
-  const classes = [
+  const classes2 = [
     "cr-field",
     `cr-field--${variant}`,
     `cr-field--${size}`,
@@ -2053,7 +2351,7 @@ var Select = forwardRef(function Select2({
     }),
     emptyMessage: { className: "cr-lista__item cr-select__item cr-select__empty" }
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -2223,13 +2521,13 @@ var Radio = forwardRef(function Radio2({
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
-  const classes = [
+  const classes2 = [
     "cr-radio",
     `cr-radio--label-${labelSize}`,
     disabled && "cr-radio--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsx(
       RadioButton,
       {
@@ -2322,7 +2620,7 @@ var SegmentControl = forwardRef(
   }, ref) {
     const primeRef = useRef(null);
     useImperativeHandle(ref, () => primeRef.current?.getElement());
-    const classes = ["cr-segment", `cr-segment--${variant}`, className].filter(Boolean).join(" ");
+    const classes2 = ["cr-segment", `cr-segment--${variant}`, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       SelectButton,
       {
@@ -2347,7 +2645,7 @@ var SegmentControl = forwardRef(
           /* @__PURE__ */ jsx("span", { className: "cr-segment__label", children: option.label })
         ] }),
         pt: {
-          root: { className: classes },
+          root: { className: classes2 },
           button: {
             className: "cr-segment__item",
             // O Prime só ativa com a barra de espaço; um role=button responde também ao Enter.
@@ -2371,7 +2669,7 @@ var Skeleton = forwardRef(function Skeleton2({
 }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = [
+  const classes2 = [
     "cr-skeleton",
     `cr-skeleton--${shape}`,
     animated && "cr-skeleton--animated",
@@ -2387,7 +2685,7 @@ var Skeleton = forwardRef(function Skeleton2({
       height,
       size,
       animation: animated ? "wave" : "none",
-      pt: { root: { ...props, className: classes } }
+      pt: { root: { ...props, className: classes2 } }
     }
   );
 });
@@ -2407,14 +2705,14 @@ var Switch = forwardRef(function Switch2({
 }, ref) {
   const autoId = useId();
   const inputId = id ?? autoId;
-  const classes = [
+  const classes2 = [
     "cr-switch",
     `cr-switch--${size}`,
     `cr-switch--label-${labelPosition}`,
     disabled && "cr-switch--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsx(
       InputSwitch,
       {
@@ -2590,7 +2888,7 @@ function coluna(element, index, opcoes) {
   const { help, header, align, selectionMode, ...props } = element.props;
   const { carregando, ajustada, abrirMenu } = opcoes;
   const frozen = opcoes.fixada ?? props.frozen;
-  const chave = chaveDaColuna(element.props, index);
+  const chave2 = chaveDaColuna(element.props, index);
   const celula = [
     "cr-table__cell",
     `cr-table__cell--${align ?? "left"}`,
@@ -2620,7 +2918,7 @@ function coluna(element, index, opcoes) {
           // Botão direito (ou a tecla de menu) no cabeçalho: o menu de contexto da coluna.
           ...abrirMenu && !selectionMode && !carregando && {
             onContextMenu: (event) => abrirMenu(event, {
-              chave,
+              chave: chave2,
               titulo: typeof header === "string" ? header : props.field ?? "",
               sortField: props.sortField ?? props.field,
               sortable: Boolean(props.sortable),
@@ -2637,7 +2935,7 @@ function coluna(element, index, opcoes) {
         rowCheckbox: caixa("Selecionar linha")
       }
     },
-    element.key ?? chave
+    element.key ?? chave2
   );
 }
 function TableBase({
@@ -2795,11 +3093,11 @@ function TableBase({
             }
           },
           children: elementos.map((element, index) => {
-            const chave = chaveDaColuna(element.props, index);
+            const chave2 = chaveDaColuna(element.props, index);
             return coluna(element, index, {
               carregando,
-              fixada: fixadas[chave],
-              ajustada: Boolean(ajustadas[chave]),
+              fixada: fixadas[chave2],
+              ajustada: Boolean(ajustadas[chave2]),
               abrirMenu: columnMenu ? abrirMenu : void 0
             });
           })
@@ -2893,7 +3191,7 @@ function BarraDeFiltros({
   clearLabel
 }) {
   const chipsRef = useRef(null);
-  const [setas, setSetas] = useState({ esquerda: false, direita: false });
+  const [setas2, setSetas] = useState({ esquerda: false, direita: false });
   const medir = useCallback(() => {
     const chips = chipsRef.current;
     if (!chips) return;
@@ -2916,7 +3214,7 @@ function BarraDeFiltros({
     behavior: "smooth"
   });
   return /* @__PURE__ */ jsxs("div", { className: "cr-table-toolbar__filters", children: [
-    setas.esquerda && /* @__PURE__ */ jsx(
+    setas2.esquerda && /* @__PURE__ */ jsx(
       IconButton,
       {
         variant: "tertiary",
@@ -2947,7 +3245,7 @@ function BarraDeFiltros({
       },
       `${filter.label}:${filter.value}`
     )) }),
-    setas.direita && /* @__PURE__ */ jsx(
+    setas2.direita && /* @__PURE__ */ jsx(
       IconButton,
       {
         variant: "tertiary",
@@ -3159,6 +3457,6 @@ var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "F
   );
 });
 
-export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Column, ContextMenu, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, Tabs, Tag, Toast, Tooltip };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DatePicker, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, Tabs, Tag, Toast, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map