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

package/dist/index.cjs

@@ -7,13 +7,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var autocomplete = require('primereact/autocomplete');
 var badge = require('primereact/badge');
 var button = require('primereact/button');
+var calendar = require('primereact/calendar');
+var api = require('primereact/api');
 var card = require('primereact/card');
 var chart = require('primereact/chart');
 var tooltip = require('primereact/tooltip');
 var checkbox = require('primereact/checkbox');
 var chip = require('primereact/chip');
 var contextmenu = require('primereact/contextmenu');
-var api = require('primereact/api');
 var menu = require('primereact/menu');
 var divider = require('primereact/divider');
 var sidebar = require('primereact/sidebar');
@@ -149,7 +150,7 @@ var AutoComplete = react.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",
@@ -159,7 +160,7 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
     disabled && "cr-field--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, style, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -216,13 +217,13 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
 var Badge = react.forwardRef(function Badge2({ variant = "default", size = "large", className, children, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.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__ */ jsxRuntime.jsx(
     badge.Badge,
     {
       unstyled: true,
       ref: primeRef,
-      className: classes,
+      className: classes2,
       value: size === "small" ? null : children,
       ...props
     }
@@ -238,14 +239,14 @@ var Button = react.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__ */ jsxRuntime.jsxs(
     button.Button,
     {
       unstyled: true,
       ref,
       type,
-      className: classes,
+      className: classes2,
       ...props,
       children: [
         leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-button__icon", "aria-hidden": "true", children: leadingIcon }),
@@ -255,15 +256,202 @@ var Button = react.forwardRef(function Button2({
     }
   );
 });
+var LOCALE = "cr-pt-BR";
+api.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__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretLeft, {}) }),
+  nextIcon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.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 = api.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__ */ jsxRuntime.jsx(
+    calendar.Calendar,
+    {
+      ...setas,
+      locale,
+      ...props,
+      ref,
+      inline: true,
+      unstyled: true,
+      className,
+      pt: {
+        root: { className: "cr-calendar-inline" },
+        panel: { className: "cr-calendar" },
+        ...ptDoPainel(offDays)
+      }
+    }
+  );
+}
+var Calendar = react.forwardRef(CalendarBase);
 var Card = react.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__ */ jsxRuntime.jsx(
     card.Card,
     {
       unstyled: true,
       ref,
       pt: {
-        root: { className: classes, style },
+        root: { className: classes2, style },
         body: { className: "cr-card__body" },
         content: { className: "cr-card__content" }
       },
@@ -323,11 +511,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" }
@@ -586,8 +774,8 @@ var Chart = react.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__ */ jsxRuntime.jsxs("div", { ...props, ref: raiz, id, className: classes, children: [
+  const classes2 = ["cr-chart", card && "cr-chart--card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, ref: raiz, id, className: classes2, children: [
     card && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-chart__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-chart__title-row", children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-chart__title", children: title }),
@@ -680,7 +868,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
   react.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate && !checked;
   }, [indeterminate, checked]);
-  const classes = [
+  const classes2 = [
     "cr-checkbox",
     `cr-checkbox--${position}`,
     `cr-checkbox--label-${labelSize}`,
@@ -688,7 +876,7 @@ var Checkbox = react.forwardRef(function Checkbox2({
     disabled && "cr-checkbox--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       checkbox.Checkbox,
       {
@@ -735,7 +923,7 @@ var Chip = react.forwardRef(function Chip2({
   className,
   ...props
 }, ref) {
-  const classes = [
+  const classes2 = [
     "cr-chip",
     `cr-chip--${variant}`,
     `cr-chip--${size}`,
@@ -749,7 +937,7 @@ var Chip = react.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__ */ jsxRuntime.jsx("span", { className: "cr-chip__icon cr-chip__icon--leading", "aria-hidden": "true", children: leadingIcon }) : void 0,
@@ -825,7 +1013,7 @@ var Menu = react.forwardRef(function Menu2({
       template: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-menu__loading", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.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: {
@@ -859,7 +1047,7 @@ var Menu = react.forwardRef(function Menu2({
       unstyled: true,
       ref: primeRef,
       id,
-      className: classes,
+      className: classes2,
       model: items,
       popup,
       popupAlignment,
@@ -888,9 +1076,9 @@ var ContextMenu = react.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",
@@ -923,10 +1111,120 @@ var ContextMenu = react.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 = react.useId();
+  const id = inputId ?? autoId;
+  const hintId = `${id}-hint`;
+  const supportText = error ?? hint;
+  const pelaSeta = react.useRef(false);
+  const peloTeclado = react.useRef(false);
+  const calendario = react.useRef(null);
+  react.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__ */ jsxRuntime.jsxs("div", { className: classes2, style, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      calendar.Calendar,
+      {
+        ...setas,
+        locale,
+        placeholder,
+        ...props,
+        ref: calendario,
+        unstyled: true,
+        inputId: id,
+        required,
+        disabled,
+        showIcon: true,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+}
+var DatePicker = react.forwardRef(DatePickerBase);
 var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", variant = "solid", className, style, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.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__ */ jsxRuntime.jsx(
     divider.Divider,
     {
@@ -934,7 +1232,7 @@ var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", v
       ref: primeRef,
       layout: orientation,
       pt: {
-        root: { className: classes, style },
+        root: { className: classes2, style },
         content: { className: "cr-divider__content" }
       },
       ...props
@@ -961,7 +1259,7 @@ var IconButton = react.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}`,
@@ -974,7 +1272,7 @@ var IconButton = react.forwardRef(function IconButton2({
         unstyled: true,
         ref: ligar,
         type,
-        className: classes,
+        className: classes2,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
       }
@@ -1051,7 +1349,7 @@ var Drawer = react.forwardRef(function Drawer2({
       primeiro.focus();
     }
   };
-  const classes = [
+  const classes2 = [
     "cr-drawer",
     `cr-drawer--${side}`,
     `cr-drawer--${behavior}`,
@@ -1076,7 +1374,7 @@ var Drawer = react.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,
@@ -1165,7 +1463,7 @@ var Input = react.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}`,
@@ -1173,7 +1471,7 @@ var Input = react.forwardRef(function Input2({
     disabled && "cr-field--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -1223,7 +1521,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"
@@ -1235,7 +1533,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,
@@ -1339,7 +1637,7 @@ var Menubar = react.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" },
@@ -1394,7 +1692,7 @@ var Menubar = react.forwardRef(function Menubar2({
     tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-menubar__tools", children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { tool }, tool.label)) }),
     user && /* @__PURE__ */ jsxRuntime.jsx(Profile, { user, menu: userMenu })
   ] }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, id, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, id, className: classes2, children: /* @__PURE__ */ jsxRuntime.jsx(
     menubar.Menubar,
     {
       ...props,
@@ -1410,13 +1708,13 @@ var Menubar = react.forwardRef(function Menubar2({
 var Tag = react.forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.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__ */ jsxRuntime.jsx(
     tag.Tag,
     {
       unstyled: true,
       ref: primeRef,
-      className: classes,
+      className: classes2,
       icon: icon ? () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
       value: children,
       ...props
@@ -1506,7 +1804,7 @@ var MenuPrincipal = react.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: {
@@ -1533,7 +1831,7 @@ var MenuPrincipal = react.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,
@@ -1616,7 +1914,7 @@ var Modal = react.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__ */ jsxRuntime.jsx(
     dialog.Dialog,
     {
@@ -1633,7 +1931,7 @@ var Modal = react.forwardRef(function Modal2({
       pt: {
         mask: { className: "cr-modal__mask" },
         root: {
-          className: classes,
+          className: classes2,
           "aria-labelledby": titleId,
           "aria-describedby": void 0
         },
@@ -1724,7 +2022,7 @@ var MultiSelect = react.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}`,
@@ -1835,7 +2133,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
     // Animação de entrada e saída da lista, a do Prime (comum.css).
     transition: transicaoDoPopup()
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -1912,8 +2210,8 @@ var PageHeader = react.forwardRef(function PageHeader2({
       );
     }
   );
-  const classes = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: classes, ...props, children: [
+  const classes2 = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: classes2, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2013,7 +2311,7 @@ var Select = react.forwardRef(function Select2({
     },
     [ref]
   );
-  const classes = [
+  const classes2 = [
     "cr-field",
     `cr-field--${variant}`,
     `cr-field--${size}`,
@@ -2055,7 +2353,7 @@ var Select = react.forwardRef(function Select2({
     }),
     emptyMessage: { className: "cr-lista__item cr-select__item cr-select__empty" }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
@@ -2225,13 +2523,13 @@ var Radio = react.forwardRef(function Radio2({
 }, ref) {
   const autoId = react.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__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       radiobutton.RadioButton,
       {
@@ -2324,7 +2622,7 @@ var SegmentControl = react.forwardRef(
   }, ref) {
     const primeRef = react.useRef(null);
     react.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__ */ jsxRuntime.jsx(
       selectbutton.SelectButton,
       {
@@ -2349,7 +2647,7 @@ var SegmentControl = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.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.
@@ -2373,7 +2671,7 @@ var Skeleton = react.forwardRef(function Skeleton2({
 }, ref) {
   const primeRef = react.useRef(null);
   react.useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = [
+  const classes2 = [
     "cr-skeleton",
     `cr-skeleton--${shape}`,
     animated && "cr-skeleton--animated",
@@ -2389,7 +2687,7 @@ var Skeleton = react.forwardRef(function Skeleton2({
       height,
       size,
       animation: animated ? "wave" : "none",
-      pt: { root: { ...props, className: classes } }
+      pt: { root: { ...props, className: classes2 } }
     }
   );
 });
@@ -2409,14 +2707,14 @@ var Switch = react.forwardRef(function Switch2({
 }, ref) {
   const autoId = react.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__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes2, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       inputswitch.InputSwitch,
       {
@@ -2592,7 +2890,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"}`,
@@ -2622,7 +2920,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),
@@ -2639,7 +2937,7 @@ function coluna(element, index, opcoes) {
         rowCheckbox: caixa("Selecionar linha")
       }
     },
-    element.key ?? chave
+    element.key ?? chave2
   );
 }
 function TableBase({
@@ -2797,11 +3095,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
             });
           })
@@ -2895,7 +3193,7 @@ function BarraDeFiltros({
   clearLabel
 }) {
   const chipsRef = react.useRef(null);
-  const [setas, setSetas] = react.useState({ esquerda: false, direita: false });
+  const [setas2, setSetas] = react.useState({ esquerda: false, direita: false });
   const medir = react.useCallback(() => {
     const chips = chipsRef.current;
     if (!chips) return;
@@ -2918,7 +3216,7 @@ function BarraDeFiltros({
     behavior: "smooth"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-table-toolbar__filters", children: [
-    setas.esquerda && /* @__PURE__ */ jsxRuntime.jsx(
+    setas2.esquerda && /* @__PURE__ */ jsxRuntime.jsx(
       IconButton,
       {
         variant: "tertiary",
@@ -2949,7 +3247,7 @@ function BarraDeFiltros({
       },
       `${filter.label}:${filter.value}`
     )) }),
-    setas.direita && /* @__PURE__ */ jsxRuntime.jsx(
+    setas2.direita && /* @__PURE__ */ jsxRuntime.jsx(
       IconButton,
       {
         variant: "tertiary",
@@ -3166,12 +3464,14 @@ exports.AccordionTab = AccordionTab;
 exports.AutoComplete = AutoComplete;
 exports.Badge = Badge;
 exports.Button = Button;
+exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Column = Column;
 exports.ContextMenu = ContextMenu;
+exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.IconButton = IconButton;