ivt/dist/chunks/CalendarRange-BCcF9etO.mjs

Ivt Components Library

import * as React from 'react';
import { c as cn } from './utils-05LlW3Cl.mjs';
import { C as CalendarDays } from './calendar-days-D8ft1Hpj.mjs';
import { b as addMonths, C as Calendar } from './calendar-olAv9AH7.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from './popover-CsYW0nDm.mjs';
import { B as Button } from './button-Co_1yLv6.mjs';
import { f as format } from './format-Cn5wls3k.mjs';
import { p as ptBR } from './date-bAe2UaSj.mjs';

function CalendarRange({ value, onChange, placeholder = "Selecione uma data", id = "date", buttonProps, popoverProps, popoverContentClassName, className, disabled, ...props }) {
    const [open, setOpen] = React.useState(false);
    const [leftMonth, setLeftMonth] = React.useState(value?.from ?? props.defaultMonth ?? new Date());
    const [rightMonth, setRightMonth] = React.useState(value?.to ?? addMonths(value?.from ?? props.defaultMonth ?? new Date(), 1));
    // Ao abrir o popover, ajusta os meses para refletir a seleção atual
    // biome-ignore lint/correctness/useExhaustiveDependencies: <useEffect>
    React.useEffect(()=>{
        if (open) {
            const left = value?.from ?? props.defaultMonth ?? new Date();
            const right = value?.to ?? addMonths(left, 1);
            setLeftMonth(left);
            setRightMonth(right);
        }
    // NÃO colocamos value como dependência isolada aqui para evitar piscar enquanto já aberto
    // queremos apenas "resetar" quando o popover for aberto
    }, [
        open
    ]);
    // Se a seleção mudar enquanto o popover estiver fechado, atualizar os meses iniciais
    React.useEffect(()=>{
        if (!open) {
            setLeftMonth(value?.from ?? props.defaultMonth ?? new Date());
            setRightMonth(value?.to ?? addMonths(value?.from ?? props.defaultMonth ?? new Date(), 1));
        }
    }, [
        value?.from,
        value?.to,
        open,
        props.defaultMonth
    ]);
    return /*#__PURE__*/ React.createElement(Popover, {
        ...popoverProps,
        open: open,
        onOpenChange: setOpen
    }, /*#__PURE__*/ React.createElement(PopoverTrigger, {
        asChild: true
    }, /*#__PURE__*/ React.createElement(Button, {
        id: id,
        variant: "outline",
        className: cn("hover:foreground justify-start text-left font-normal", !value && "text-muted-foreground hover:text-muted-foreground", className),
        disabled: disabled,
        ...buttonProps
    }, /*#__PURE__*/ React.createElement(CalendarDays, {
        className: "size-4"
    }), value?.from ? value.to ? /*#__PURE__*/ React.createElement(React.Fragment, null, format(value.from, "P", {
        locale: ptBR
    }), " -", " ", format(value.to, "P", {
        locale: ptBR
    })) : format(value.from, "P") : /*#__PURE__*/ React.createElement("span", null, placeholder))), /*#__PURE__*/ React.createElement(PopoverContent, {
        className: cn("w-auto p-3", popoverContentClassName),
        align: "start"
    }, /*#__PURE__*/ React.createElement("div", {
        className: "flex gap-4"
    }, /*#__PURE__*/ React.createElement(Calendar, {
        ...props,
        autoFocus: false,
        captionLayout: "dropdown",
        selected: value,
        onSelect: (r)=>onChange(r),
        locale: ptBR,
        numberOfMonths: 1,
        month: leftMonth,
        onMonthChange: (m)=>setLeftMonth(m),
        mode: "range"
    }), /*#__PURE__*/ React.createElement(Calendar, {
        ...props,
        autoFocus: false,
        captionLayout: "dropdown",
        selected: value,
        onSelect: (r)=>onChange(r),
        locale: ptBR,
        numberOfMonths: 1,
        month: rightMonth,
        onMonthChange: (m)=>setRightMonth(m),
        mode: "range"
    }))));
}

export { CalendarRange as C };
//# sourceMappingURL=CalendarRange-BCcF9etO.mjs.map