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

package/dist/index.js

@@ -1,6 +1,6 @@
 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, CalendarDot, 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, CalendarDots, 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';
@@ -14,9 +14,11 @@ 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 { Menu as Menu$1 } from 'primereact/menu';
+import { InputText } from 'primereact/inputtext';
+import { RadioButton } from 'primereact/radiobutton';
+import { OverlayPanel } from 'primereact/overlaypanel';
 import { Divider as Divider$1 } from 'primereact/divider';
 import { Sidebar } from 'primereact/sidebar';
-import { InputText } from 'primereact/inputtext';
 import { Menubar as Menubar$1 } from 'primereact/menubar';
 import { Tag as Tag$1 } from 'primereact/tag';
 import { Message as Message$1 } from 'primereact/message';
@@ -26,7 +28,6 @@ import { TabMenu } from 'primereact/tabmenu';
 import { Paginator as Paginator$1 } from 'primereact/paginator';
 import { Dropdown } from 'primereact/dropdown';
 import { Panel as Panel$1 } from 'primereact/panel';
-import { RadioButton } from 'primereact/radiobutton';
 import { ScrollPanel as ScrollPanel$1 } from 'primereact/scrollpanel';
 import { SelectButton } from 'primereact/selectbutton';
 import { Skeleton as Skeleton$1 } from 'primereact/skeleton';
@@ -311,16 +312,16 @@ addLocale(LOCALE, {
   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");
+  const dia2 = event.target;
+  if (!(dia2 instanceof HTMLElement) || !dia2.classList.contains("cr-calendar__date")) return;
+  const painel = dia2.closest(".cr-calendar");
+  const td = dia2.closest("td");
+  const mes = dia2.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;
+    if (dia2.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`
     );
@@ -335,26 +336,26 @@ 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 mesmoDia = (data, dia2) => data instanceof Date && data.getDate() === dia2.day && data.getMonth() === dia2.month && data.getFullYear() === dia2.year;
+var chave = (dia2) => dia2.year * 1e4 + dia2.month * 100 + dia2.day;
 var chaveDe = (data) => chave({ day: data.getDate(), month: data.getMonth(), year: data.getFullYear() });
-function escolhido(props, dia) {
+function escolhido(props, dia2) {
   const { value } = props;
-  if (value instanceof Date) return mesmoDia(value, dia);
+  if (value instanceof Date) return mesmoDia(value, dia2);
   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 chave(dia2) >= chaveDe(inicio) && chave(dia2) <= chaveDe(fim ?? inicio);
   }
-  return value.some((data) => mesmoDia(data, dia));
+  return value.some((data) => mesmoDia(data, dia2));
 }
-function noPeriodo(props, dia) {
+function noPeriodo(props, dia2) {
   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 (mesmoDia(inicio, dia2) || mesmoDia(fim, dia2)) return "cr-calendar__day--edge";
   if (inicio && fim) {
-    const data = new Date(dia.year, dia.month, dia.day);
+    const data = new Date(dia2.year, dia2.month, dia2.day);
     if (data > inicio && data < fim) return "cr-calendar__day--middle";
   }
   return void 0;
@@ -377,20 +378,20 @@ function ptDoPainel(offDays = []) {
     table: { className: "cr-calendar__table" },
     tableHeaderCell: { className: "cr-calendar__weekday" },
     day: ({ props, context }) => {
-      const dia = context.date;
+      const dia2 = 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}`,
+        "aria-selected": escolhido(props, dia2),
+        "aria-disabled": dia2.selectable ? void 0 : true,
+        "aria-label": `${dia2.day} de ${meses[dia2.month]?.toLowerCase()} de ${dia2.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)
+          offDays.some((data) => mesmoDia(data, dia2)) && "cr-calendar__day--off",
+          noPeriodo(props, dia2)
         )
       };
     },
@@ -1109,6 +1110,255 @@ var ContextMenu = forwardRef(function ContextMenu2({
     }
   );
 });
+var Input = forwardRef(function Input2({
+  variant = "outline",
+  size = "large",
+  label,
+  leadingIcon,
+  trailingIcon,
+  hint,
+  error,
+  id,
+  required,
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const supportText = error ?? hint;
+  const classes2 = [
+    "cr-field",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  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: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cr-field__control", children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "cr-field__icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ jsx(
+        InputText,
+        {
+          unstyled: true,
+          ref,
+          id: inputId,
+          className: "cr-field__input",
+          required,
+          disabled,
+          invalid: Boolean(error),
+          "aria-invalid": error ? true : void 0,
+          ...props,
+          "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"])
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "cr-field__icon", children: trailingIcon })
+    ] }),
+    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 Radio = forwardRef(function Radio2({
+  label,
+  showLabel = true,
+  labelSize = "default",
+  checked = false,
+  value,
+  name,
+  onChange,
+  disabled,
+  required,
+  id,
+  className,
+  style,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const classes2 = [
+    "cr-radio",
+    `cr-radio--label-${labelSize}`,
+    disabled && "cr-radio--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
+    /* @__PURE__ */ jsx(
+      RadioButton,
+      {
+        unstyled: true,
+        inputRef: ref,
+        inputId,
+        checked,
+        value,
+        name,
+        onChange,
+        disabled,
+        required,
+        pt: {
+          // Marcado pela prop do Cristal, não pelo atributo interno do Prime (data-p-checked).
+          root: { className: `cr-radio__control${checked ? " cr-radio__control--checked" : ""}` },
+          input: { ...props, className: "cr-radio__input" },
+          box: { className: "cr-radio__box" },
+          icon: { className: "cr-radio__icon" }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `cr-radio__label${showLabel ? "" : " cr-radio__label--hidden cr-so-leitor"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
+
+// src/components/Calendar/periodos.ts
+var dia = (ano, mes, numero) => new Date(ano, mes, numero);
+var semHora = (data) => dia(data.getFullYear(), data.getMonth(), data.getDate());
+var menos = (data, dias) => dia(data.getFullYear(), data.getMonth(), data.getDate() - dias);
+var DATE_PERIODS = {
+  today: { label: "Hoje", range: (hoje) => [semHora(hoje), semHora(hoje)] },
+  yesterday: { label: "Ontem", range: (hoje) => [menos(hoje, 1), menos(hoje, 1)] },
+  last7Days: { label: "\xDAltimos 7 dias", range: (hoje) => [menos(hoje, 6), semHora(hoje)] },
+  last14Days: { label: "\xDAltimos 14 dias", range: (hoje) => [menos(hoje, 13), semHora(hoje)] },
+  last30Days: { label: "\xDAltimos 30 dias", range: (hoje) => [menos(hoje, 29), semHora(hoje)] },
+  thisMonth: {
+    label: "Este m\xEAs",
+    range: (hoje) => [dia(hoje.getFullYear(), hoje.getMonth(), 1), semHora(hoje)]
+  },
+  // A semana começa no domingo, como no calendário.
+  lastWeek: {
+    label: "Semana passada",
+    range: (hoje) => {
+      const domingo = menos(hoje, hoje.getDay() + 7);
+      return [domingo, menos(domingo, -6)];
+    }
+  },
+  lastMonth: {
+    label: "M\xEAs passado",
+    range: (hoje) => [
+      dia(hoje.getFullYear(), hoje.getMonth() - 1, 1),
+      dia(hoje.getFullYear(), hoje.getMonth(), 0)
+    ]
+  },
+  thisYear: {
+    label: "Este ano",
+    range: (hoje) => [dia(hoje.getFullYear(), 0, 1), semHora(hoje)]
+  }
+};
+var PERIODOS_PADRAO = [
+  DATE_PERIODS.today,
+  DATE_PERIODS.yesterday,
+  DATE_PERIODS.last7Days,
+  DATE_PERIODS.last14Days,
+  DATE_PERIODS.last30Days,
+  DATE_PERIODS.thisMonth
+];
+var MESES = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
+var dataPorExtenso = (data) => `${data.getDate()} de ${MESES[data.getMonth()]} de ${data.getFullYear()}`;
+var periodoPorExtenso = ([inicio, fim]) => `${dataPorExtenso(inicio)} a ${dataPorExtenso(fim)}`;
+var mesmoDia2 = (a, b) => !!a && !!b && semHora(a).getTime() === semHora(b).getTime();
+var periodoDe = (periods, range, hoje) => range ? periods.find((period) => {
+  const [inicio, fim] = period.range(hoje);
+  return mesmoDia2(inicio, range[0]) && mesmoDia2(fim, range[1]);
+}) : void 0;
+var dataCurta = (data) => data ? `${String(data.getDate()).padStart(2, "0")}/${String(data.getMonth() + 1).padStart(2, "0")}/${data.getFullYear()}` : "";
+function lerData(texto) {
+  const partes = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(texto.replace(/\s/g, ""));
+  if (!partes) return null;
+  const [d, m, a] = [Number(partes[1]), Number(partes[2]), Number(partes[3])];
+  const data = dia(a, m - 1, d);
+  return data.getMonth() === m - 1 && data.getDate() === d ? data : null;
+}
+function ListaDePeriodos({
+  periods,
+  periodo,
+  onEscolher
+}) {
+  const grupo = useId();
+  return /* @__PURE__ */ jsx("div", { className: "cr-data-picker__periods", role: "radiogroup", "aria-label": "Per\xEDodos", children: periods.map((item) => /* @__PURE__ */ jsx(
+    Radio,
+    {
+      className: "cr-data-picker__period",
+      name: grupo,
+      label: item.label,
+      value: item.label,
+      checked: periodo === item,
+      onChange: () => onEscolher(item)
+    },
+    item.label
+  )) });
+}
+var mesmoRascunho = (a, b) => (a[0] === b[0] || mesmoDia2(a[0], b[0])) && (a[1] === b[1] || mesmoDia2(a[1], b[1]));
+function CamposDoPeriodo({
+  value,
+  onChange
+}) {
+  const [textos, setTextos] = useState([
+    dataCurta(value[0]),
+    dataCurta(value[1])
+  ]);
+  const [base, setBase] = useState(value);
+  if (!mesmoRascunho(base, value)) {
+    setBase(value);
+    setTextos([dataCurta(value[0]), dataCurta(value[1])]);
+  }
+  const digitar = (indice, texto) => {
+    const novosTextos = [...textos];
+    novosTextos[indice] = texto;
+    setTextos(novosTextos);
+    const data = lerData(texto);
+    if (!data) return;
+    const novo = [...value];
+    novo[indice] = data;
+    if (novo[0] && novo[1] && novo[0] > novo[1]) novo[indice === 0 ? 1 : 0] = null;
+    setBase(novo);
+    onChange(novo);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cr-data-picker__inputs", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "medium",
+        "aria-label": "Data inicial",
+        placeholder: "dd / mm / aaaa",
+        value: textos[0],
+        onChange: (event) => digitar(0, event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "cr-data-picker__dash", "aria-hidden": "true", children: "-" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "medium",
+        "aria-label": "Data final",
+        placeholder: "dd / mm / aaaa",
+        value: textos[1],
+        onChange: (event) => digitar(1, event.target.value)
+      }
+    )
+  ] });
+}
+function RodapeDoPeriodo({
+  podeSelecionar,
+  onFechar,
+  onSelecionar
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cr-data-picker__footer", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "medium", onClick: onFechar, children: "Fechar" }),
+    /* @__PURE__ */ jsx(Button, { size: "medium", disabled: !podeSelecionar, onClick: onSelecionar, children: "Selecionar" })
+  ] });
+}
 function DatePickerBase({
   variant = "outline",
   size = "large",
@@ -1125,6 +1375,12 @@ function DatePickerBase({
   style,
   onShow,
   onHide,
+  periods = [],
+  footer = false,
+  today,
+  value,
+  onChange,
+  footerTemplate,
   ...props
 }, ref) {
   const autoId = useId();
@@ -1135,6 +1391,31 @@ function DatePickerBase({
   const peloTeclado = useRef(false);
   const calendario = useRef(null);
   useImperativeHandle(ref, () => calendario.current, []);
+  const comPeriodos = props.selectionMode === "range" && periods.length > 0;
+  const dataPicker = footer || comPeriodos;
+  const [aberto, setAberto] = useState(false);
+  const [rascunho, setRascunho] = useState(null);
+  const [periodo, setPeriodo] = useState(null);
+  const devolverFoco = useRef(false);
+  const ignorarAbertura = useRef(false);
+  const valorNaTela = footer && aberto ? rascunho : value;
+  const emitir = (novo) => onChange?.({
+    value: novo,
+    stopPropagation: () => {
+    },
+    preventDefault: () => {
+    },
+    target: { name: props.name, id, value: novo }
+  });
+  const fechar = (pelosBotoes) => {
+    devolverFoco.current = pelosBotoes;
+    setAberto(false);
+  };
+  const mudar = (novo, novoPeriodo) => {
+    setPeriodo(novoPeriodo);
+    if (footer) setRascunho(novo);
+    else emitir(novo);
+  };
   const classes2 = [
     "cr-field",
     "cr-datepicker",
@@ -1156,6 +1437,59 @@ function DatePickerBase({
         locale,
         placeholder,
         ...props,
+        value: valorNaTela,
+        onChange: footer ? (event) => mudar(event.value, null) : comPeriodos ? (event) => {
+          setPeriodo(null);
+          onChange?.(event);
+        } : onChange,
+        ...dataPicker && {
+          visible: aberto,
+          onVisibleChange: (event) => {
+            if (!event.callback) {
+              if (ignorarAbertura.current || aberto) return;
+              const hoje = today ?? /* @__PURE__ */ new Date();
+              setRascunho(value);
+              setPeriodo(periodoDe(periods, value ?? null, hoje) ?? null);
+              setAberto(true);
+              return;
+            }
+            if (footer && event.type === "dateselect") return;
+            fechar(false);
+            event.callback?.();
+          },
+          footerTemplate: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+            comPeriodos && /* @__PURE__ */ jsx(
+              ListaDePeriodos,
+              {
+                periods,
+                periodo,
+                onEscolher: (item) => {
+                  mudar(item.range(today ?? /* @__PURE__ */ new Date()), item);
+                  if (!footer) fechar(true);
+                }
+              }
+            ),
+            props.selectionMode === "range" && /* @__PURE__ */ jsx(
+              CamposDoPeriodo,
+              {
+                value: valorNaTela ?? [null, null],
+                onChange: (novo) => mudar(novo, null)
+              }
+            ),
+            footer && /* @__PURE__ */ jsx(
+              RodapeDoPeriodo,
+              {
+                podeSelecionar: props.selectionMode === "range" ? Boolean(rascunho?.[0] && rascunho[1]) : rascunho != null,
+                onFechar: () => fechar(true),
+                onSelecionar: () => {
+                  emitir(rascunho);
+                  fechar(true);
+                }
+              }
+            )
+          ] })
+        },
+        ...!dataPicker && { footerTemplate },
         ref: calendario,
         unstyled: true,
         inputId: id,
@@ -1172,12 +1506,19 @@ function DatePickerBase({
           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();
+          if ((peloTeclado.current || devolverFoco.current) && semFoco && atual) {
+            if (dataPicker) {
+              ignorarAbertura.current = true;
+              atual.focus();
+              ignorarAbertura.current = false;
+            } else {
+              atual.focus();
+              atual.hide();
+            }
           }
           peloTeclado.current = false;
           pelaSeta.current = false;
+          devolverFoco.current = false;
           onHide?.();
         },
         pt: {
@@ -1191,15 +1532,27 @@ function DatePickerBase({
                 if (event.code === "ArrowDown" && !calendario.current?.getOverlay()) {
                   pelaSeta.current = true;
                 }
+                const painel = calendario.current?.getOverlay();
+                if (dataPicker && event.code === "ArrowDown" && painel) {
+                  const dia2 = painel.querySelector(".cr-calendar__date--selected") ?? painel.querySelector(
+                    ".cr-calendar__date:not(.cr-calendar__date--disabled)"
+                  );
+                  if (dia2) {
+                    event.preventDefault();
+                    dia2.tabIndex = 0;
+                    dia2.focus();
+                  }
+                }
               }
             }
           },
           dropdownButton: { root: { className: "cr-datepicker__button" } },
           panel: {
-            className: "cr-calendar cr-datepicker__panel",
+            className: `cr-calendar cr-datepicker__panel${dataPicker ? " cr-datepicker__panel--data-picker" : ""}`,
             onKeyDown: (event) => {
               if (["Enter", "NumpadEnter", "Space"].includes(event.code))
                 peloTeclado.current = true;
+              if (dataPicker && event.code === "Escape" && aberto) fechar(true);
             }
           },
           // Animação de entrada e saída (a do Prime) e o lado do painel, medido logo depois de o
@@ -1208,7 +1561,11 @@ function DatePickerBase({
             const campo = document.getElementById(id);
             seguirLado(painelDoCampo(campo, ".cr-datepicker__panel"), campo);
           }),
-          ...ptDoPainel(offDays)
+          ...ptDoPainel(offDays),
+          // As partes do Data Picker entram no rodapé do Prime, que some no layout: cada uma ocupa o
+          // seu lugar na grade do painel (DatePicker.css). O Prime aplica o pt do footer, mas não o
+          // declara no tipo.
+          ...{ footer: { className: "cr-datepicker__extras" } }
         }
       }
     ),
@@ -1219,6 +1576,213 @@ function DatePickerBase({
   ] });
 }
 var DatePicker = forwardRef(DatePickerBase);
+function mesDaTela(range, meses, hoje) {
+  const base = (meses > 1 ? range[1] : range[0]) ?? range[0] ?? hoje;
+  return new Date(base.getFullYear(), base.getMonth() - (meses > 1 ? 1 : 0), 1);
+}
+function PainelDePeriodo({
+  value,
+  periods,
+  footer,
+  today,
+  numberOfMonths,
+  minDate,
+  maxDate,
+  disabledDates,
+  offDays,
+  onSelect,
+  onClose
+}) {
+  const [rascunho, setRascunho] = useState(value ?? [null, null]);
+  const [periodo, setPeriodo] = useState(() => periodoDe(periods, value, today) ?? null);
+  const [mes, setMes] = useState(() => mesDaTela(rascunho, numberOfMonths, today));
+  const mudar = (novo, novoPeriodo) => {
+    setRascunho(novo);
+    setPeriodo(novoPeriodo);
+    if (!footer && novo[0] && novo[1]) onSelect([novo[0], novo[1]], novoPeriodo);
+  };
+  const [inicio, fim] = rascunho;
+  return /* @__PURE__ */ jsxs("div", { className: "cr-date-range", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cr-date-range__body", children: [
+      periods.length > 0 && /* @__PURE__ */ jsx(
+        ListaDePeriodos,
+        {
+          periods,
+          periodo,
+          onEscolher: (item) => {
+            const range = item.range(today);
+            setMes(mesDaTela(range, numberOfMonths, today));
+            mudar(range, item);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "cr-date-range__calendars", children: [
+        /* @__PURE__ */ jsx(
+          CamposDoPeriodo,
+          {
+            value: rascunho,
+            onChange: (novo) => {
+              setMes(mesDaTela(novo, numberOfMonths, today));
+              mudar(novo, null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            selectionMode: "range",
+            numberOfMonths,
+            value: rascunho,
+            viewDate: mes,
+            onViewDateChange: (event) => setMes(event.value),
+            onChange: (event) => {
+              const [novoInicio = null, novoFim = null] = event.value ?? [];
+              mudar([novoInicio, novoFim], null);
+            },
+            minDate,
+            maxDate,
+            disabledDates,
+            offDays
+          }
+        )
+      ] })
+    ] }),
+    footer && /* @__PURE__ */ jsx(
+      RodapeDoPeriodo,
+      {
+        podeSelecionar: Boolean(inicio && fim),
+        onFechar: onClose,
+        onSelecionar: () => inicio && fim && onSelect([inicio, fim], periodo)
+      }
+    )
+  ] });
+}
+var DateRangeButton = forwardRef(
+  function DateRangeButton2({
+    value = null,
+    onChange,
+    label,
+    required,
+    placeholder = "Selecione o per\xEDodo",
+    periods = PERIODOS_PADRAO,
+    footer = true,
+    numberOfMonths = 2,
+    minDate,
+    maxDate,
+    disabledDates,
+    offDays,
+    today,
+    disabled,
+    id,
+    className,
+    style
+  }, ref) {
+    const autoId = useId();
+    const botaoId = id ?? autoId;
+    const rotuloId = `${botaoId}-rotulo`;
+    const textoId = `${botaoId}-texto`;
+    const painelId = `${botaoId}-painel`;
+    const painel = useRef(null);
+    const botao = useRef(null);
+    const [aberto, setAberto] = useState(false);
+    const [hoje, setHoje] = useState(() => today ?? /* @__PURE__ */ new Date());
+    const periodo = periodoDe(periods, value, today ?? hoje);
+    const classes2 = ["cr-field", "cr-date-range-field", disabled && "cr-field--disabled", className].filter(Boolean).join(" ");
+    const fechar = () => painel.current?.hide();
+    return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
+      label && /* @__PURE__ */ jsxs("span", { id: rotuloId, className: "cr-field__label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          unstyled: true,
+          ref: (elemento) => {
+            const el = elemento;
+            botao.current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) ref.current = el;
+          },
+          id: botaoId,
+          type: "button",
+          className: "cr-date-range-button",
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": aberto,
+          "aria-controls": aberto ? painelId : void 0,
+          "aria-labelledby": label ? `${rotuloId} ${textoId}` : void 0,
+          onClick: (event) => {
+            setHoje(today ?? /* @__PURE__ */ new Date());
+            painel.current?.toggle(event);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "cr-date-range-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CalendarDots, {}) }),
+            /* @__PURE__ */ jsx("span", { id: textoId, className: "cr-date-range-button__text", children: value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              periodo && /* @__PURE__ */ jsxs("span", { className: "cr-date-range-button__period", children: [
+                periodo.label,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: periodoPorExtenso(value) })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "cr-date-range-button__placeholder", children: placeholder }) }),
+            /* @__PURE__ */ jsx("span", { className: "cr-date-range-button__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CaretDown, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        OverlayPanel,
+        {
+          ref: painel,
+          unstyled: true,
+          id: painelId,
+          onShow: () => {
+            setAberto(true);
+            const raiz = document.getElementById(painelId);
+            const alvo = raiz?.querySelector('input[type="radio"]:checked') ?? raiz?.querySelector('input, button, [tabindex="0"]');
+            alvo?.focus();
+          },
+          onHide: () => {
+            setAberto(false);
+            const ativo = document.activeElement;
+            if (ativo === document.body || document.getElementById(painelId)?.contains(ativo)) {
+              botao.current?.focus();
+            }
+          },
+          pt: {
+            root: {
+              className: "cr-date-range__panel",
+              role: "dialog",
+              "aria-label": label ?? "Escolher per\xEDodo"
+            },
+            // Animação de entrada e saída (a do Prime) e o lado do painel em relação ao botão.
+            transition: transicaoDoPopup(
+              () => seguirLado(document.getElementById(painelId), botao.current)
+            )
+          },
+          children: /* @__PURE__ */ jsx(
+            PainelDePeriodo,
+            {
+              value,
+              periods,
+              footer,
+              today: today ?? hoje,
+              numberOfMonths,
+              minDate,
+              maxDate,
+              disabledDates,
+              offDays,
+              onClose: fechar,
+              onSelect: (range, item) => {
+                onChange?.({ value: range, period: item });
+                fechar();
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
 var Divider = forwardRef(function Divider2({ orientation = "horizontal", variant = "solid", className, style, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1443,62 +2007,6 @@ var Drawer = forwardRef(function Drawer2({
     }
   );
 });
-var Input = forwardRef(function Input2({
-  variant = "outline",
-  size = "large",
-  label,
-  leadingIcon,
-  trailingIcon,
-  hint,
-  error,
-  id,
-  required,
-  disabled,
-  className,
-  ...props
-}, ref) {
-  const autoId = useId();
-  const inputId = id ?? autoId;
-  const hintId = `${inputId}-hint`;
-  const supportText = error ?? hint;
-  const classes2 = [
-    "cr-field",
-    `cr-field--${variant}`,
-    `cr-field--${size}`,
-    error && "cr-field--error",
-    disabled && "cr-field--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  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: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "cr-field__control", children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "cr-field__icon", "aria-hidden": "true", children: leadingIcon }),
-      /* @__PURE__ */ jsx(
-        InputText,
-        {
-          unstyled: true,
-          ref,
-          id: inputId,
-          className: "cr-field__input",
-          required,
-          disabled,
-          invalid: Boolean(error),
-          "aria-invalid": error ? true : void 0,
-          ...props,
-          "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"])
-        }
-      ),
-      trailingIcon && /* @__PURE__ */ jsx("span", { className: "cr-field__icon", children: trailingIcon })
-    ] }),
-    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
-    ] })
-  ] });
-});
 
 // src/components/Menubar/assets/vector-logo-simbolo.svg
 var vector_logo_simbolo_default = 'data:image/svg+xml,<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="42.7061" height="20" viewBox="0 0 42.7061 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Grupo 2380">%0A<path id="Caminho 1049" d="M26.8782 10.21C26.8393 10.1525 26.7869 10.1055 26.7255 10.0731C26.6642 10.0408 26.5958 10.024 26.5264 10.0244H4.21626C4.14666 10.024 4.07803 10.0408 4.0165 10.0733C3.95497 10.1059 3.90244 10.1531 3.8636 10.2109C3.82535 10.2676 3.80224 10.3333 3.79648 10.4015C3.79072 10.4697 3.80251 10.5383 3.8307 10.6007L7.35895 19.7545C7.39283 19.8281 7.44722 19.8905 7.51559 19.934C7.58397 19.9776 7.66345 20.0005 7.74451 20C7.82641 19.9998 7.90647 19.9758 7.97493 19.9308C8.0434 19.8859 8.09731 19.822 8.13007 19.7469L11.5604 13.47H25.3511C25.4325 13.4705 25.5123 13.4474 25.5809 13.4035C25.6494 13.3596 25.7038 13.2969 25.7375 13.2228L26.9086 10.5964C26.9365 10.5347 26.9484 10.4669 26.9431 10.3993C26.9378 10.3318 26.9154 10.2666 26.8782 10.21V10.21Z" fill="%23C1BFBF"/>%0A<g id="Grupo 2378">%0A<path id="Caminho 1050" d="M26.3926 6.06543L24.0666 19.1424C24.0588 19.2502 24.0736 19.3585 24.1103 19.4602C24.1469 19.5619 24.2045 19.6549 24.2792 19.7329C24.3554 19.813 24.447 19.8767 24.5485 19.9202C24.65 19.9637 24.7593 19.9861 24.8698 19.986H30.4229L29.2578 13.5446L26.3926 6.06543Z" fill="%231545DE"/>%0A<g id="Grupo 2377">%0A<path id="Caminho 1051" d="M42.2783 16.0921H42.0598C42.0303 11.9033 41.8911 10.7668 41.2541 10.086C40.167 9.29536 38.9793 8.65329 37.7225 8.17676C37.1378 7.91016 36.4755 7.60812 36.3684 7.52881C36.1102 7.27149 34.8768 5.05179 34.2145 3.85884C33.9378 3.36107 33.6956 2.92488 33.5311 2.63887C33.166 1.80107 32.5487 1.09795 31.7653 0.627372C30.9818 0.15679 30.0712 -0.0578392 29.16 0.0133599H21.1072C21.036 0.0134652 20.966 0.0313585 20.9036 0.0653944C20.8411 0.0994303 20.7881 0.148532 20.7494 0.208251C20.7106 0.268417 20.6872 0.337237 20.6813 0.408613C20.6754 0.479989 20.6872 0.551716 20.7157 0.617433L28.9955 19.7283C29.0285 19.8051 29.0832 19.8705 29.1529 19.9166C29.2226 19.9626 29.3043 19.9872 29.3878 19.9873H30.9849C31.0972 19.9869 31.2048 19.9425 31.2848 19.8637C31.3648 19.7848 31.4107 19.6778 31.4126 19.5655C31.4126 18.581 31.8037 17.6368 32.4999 16.9406C33.1961 16.2444 34.1403 15.8533 35.1248 15.8533C36.1093 15.8533 37.0535 16.2444 37.7497 16.9406C38.4459 17.6368 38.837 18.581 38.837 19.5655C38.839 19.6778 38.8848 19.7848 38.9648 19.8637C39.0447 19.9425 39.1524 19.9869 39.2647 19.9873H41.6396C41.6961 19.9871 41.752 19.9758 41.8041 19.9539C41.8561 19.9321 41.9034 19.9002 41.9431 19.8601C41.9828 19.82 42.0143 19.7724 42.0356 19.7201C42.0569 19.6678 42.0677 19.6119 42.0674 19.5554C42.0674 19.2179 42.0674 18.9015 42.0674 18.5911H42.2783C42.3923 18.5904 42.5013 18.5445 42.5815 18.4636C42.6617 18.3826 42.7065 18.2731 42.7061 18.1591V16.5241C42.7065 16.4101 42.6617 16.3006 42.5815 16.2196C42.5013 16.1386 42.3923 16.0928 42.2783 16.0921V16.0921ZM31.6058 8.33621H27.9359C27.7958 8.33732 27.6591 8.29246 27.547 8.20849C27.4348 8.12452 27.3533 8.00609 27.3149 7.87135L26.0545 3.91029C26.0293 3.8176 26.0262 3.72028 26.0455 3.62619C26.0649 3.5321 26.1061 3.44388 26.1658 3.36866C26.2264 3.29247 26.3034 3.23091 26.391 3.18856C26.4786 3.1462 26.5747 3.12414 26.672 3.124H28.9305C29.2861 3.13975 29.6349 3.22716 29.9558 3.38098C30.2768 3.53479 30.5634 3.75184 30.7984 4.01912C31.7475 5.02307 32.2662 6.35841 32.2437 7.73973C32.2339 7.90191 32.1624 8.05419 32.0437 8.16517C31.925 8.27615 31.7683 8.33736 31.6058 8.33621V8.33621Z" fill="%231545DE"/>%0A</g>%0A</g>%0A<path id="Caminho 1052" d="M18.318 0.208784C18.2779 0.150057 18.224 0.102045 18.1611 0.0689531C18.0981 0.0358617 18.028 0.0186933 17.9569 0.0189526H0.432107C0.361515 0.0187583 0.291932 0.0356991 0.229331 0.0683223C0.166729 0.100945 0.112985 0.148276 0.0727059 0.206248C0.0332923 0.263519 0.00898875 0.329827 0.00205642 0.399002C-0.00487591 0.468178 0.00578389 0.537987 0.0330492 0.601939L1.0404 3.29747C1.07434 3.3749 1.13023 3.44069 1.20115 3.48672C1.27206 3.53275 1.35491 3.55701 1.43945 3.55648H16.5134C16.5968 3.55702 16.6787 3.53341 16.749 3.4885C16.8194 3.44359 16.8753 3.37931 16.9099 3.30338L18.3526 0.607835C18.3813 0.543894 18.3933 0.473655 18.3872 0.403804C18.3812 0.333954 18.3573 0.266823 18.318 0.208784V0.208784Z" fill="%23C1BFBF"/>%0A<path id="Caminho 1053" d="M20.2107 5.18251C20.1706 5.12378 20.1167 5.07577 20.0538 5.04268C19.9908 5.00959 19.9207 4.99242 19.8496 4.99268H2.32482C2.25423 4.99248 2.18465 5.00943 2.12205 5.04205C2.05945 5.07467 2.0057 5.122 1.96542 5.17997C1.92601 5.23725 1.9017 5.30355 1.89477 5.37273C1.88784 5.4419 1.8985 5.51171 1.92577 5.57567L2.93311 8.2712C2.96706 8.34863 3.02294 8.41442 3.09386 8.46045C3.16478 8.50648 3.24763 8.53073 3.33217 8.53021H18.4061C18.4896 8.53075 18.5714 8.50714 18.6417 8.46224C18.7121 8.41733 18.768 8.35304 18.8026 8.27711L20.2453 5.58157C20.274 5.51761 20.2859 5.44738 20.2798 5.37754C20.2738 5.30771 20.25 5.24058 20.2107 5.18251V5.18251Z" fill="%23C1BFBF"/>%0A</g>%0A</svg>%0A';
@@ -2504,61 +3012,6 @@ var Panel = forwardRef(function Panel2({ className, style, children, ...props },
     }
   );
 });
-var Radio = forwardRef(function Radio2({
-  label,
-  showLabel = true,
-  labelSize = "default",
-  checked = false,
-  value,
-  name,
-  onChange,
-  disabled,
-  required,
-  id,
-  className,
-  style,
-  ...props
-}, ref) {
-  const autoId = useId();
-  const inputId = id ?? autoId;
-  const classes2 = [
-    "cr-radio",
-    `cr-radio--label-${labelSize}`,
-    disabled && "cr-radio--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
-    /* @__PURE__ */ jsx(
-      RadioButton,
-      {
-        unstyled: true,
-        inputRef: ref,
-        inputId,
-        checked,
-        value,
-        name,
-        onChange,
-        disabled,
-        required,
-        pt: {
-          // Marcado pela prop do Cristal, não pelo atributo interno do Prime (data-p-checked).
-          root: { className: `cr-radio__control${checked ? " cr-radio__control--checked" : ""}` },
-          input: { ...props, className: "cr-radio__input" },
-          box: { className: "cr-radio__box" },
-          icon: { className: "cr-radio__icon" }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        className: `cr-radio__label${showLabel ? "" : " cr-radio__label--hidden cr-so-leitor"}`,
-        htmlFor: inputId,
-        children: label
-      }
-    )
-  ] });
-});
 var porcentagem = (posicao, total, visivel) => total > visivel ? Math.round(posicao / (total - visivel) * 100) : 0;
 var ScrollPanel = forwardRef(function ScrollPanel2({
   children,
@@ -3457,6 +3910,6 @@ var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "F
   );
 });
 
-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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DATE_PERIODS, DatePicker, DateRangeButton, 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