@easy-shadcn/react/dist/chunk-3QEFY3EJ.mjs

Use shadcn/ui easy&enhance like component library

import { Popover } from './chunk-BYVT5GUO.mjs';
import { Calendar } from './chunk-XDDFEAIE.mjs';
import { Button } from './chunk-P4KSIALF.mjs';
import React from 'react';
import { CalendarIcon } from '@radix-ui/react-icons';
import { cn } from '@easy-shadcn/utils';
import { format } from 'date-fns';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

var useAllModeProps = ({
  mode,
  dateFormat,
  selected,
  onSelect
}) => {
  const [singleDate, setSingleDate] = React.useState();
  const [multiDate, setMultiDate] = React.useState();
  const [rangeDate, setRangeDate] = React.useState();
  switch (mode) {
    case "single": {
      const singleProps = {
        mode: "single",
        selected: selected || singleDate,
        defaultMonth: selected || singleDate,
        onSelect: onSelect || setSingleDate
      };
      return {
        props: singleProps,
        hasValue: !!singleProps.selected,
        renderText: () => {
          return singleProps.selected ? format(singleProps.selected, dateFormat) : null;
        }
      };
    }
    case "multiple": {
      const multiProps = {
        mode: "multiple",
        selected: selected || multiDate,
        defaultMonth: (selected || multiDate)?.at(-1),
        onSelect: onSelect || setMultiDate
      };
      return {
        props: multiProps,
        hasValue: multiProps.selected && multiProps.selected.length > 0,
        renderText: () => {
          return multiProps.selected ? multiProps.selected.map((dt) => format(dt, dateFormat)).join(", ") : null;
        }
      };
    }
    case "range": {
      const rangeProps = {
        mode: "range",
        selected: selected || rangeDate,
        defaultMonth: (selected || rangeDate)?.to,
        onSelect: onSelect || setRangeDate
      };
      return {
        props: rangeProps,
        hasValue: !!rangeProps.selected && !!rangeProps.selected.from,
        renderText: () => {
          return rangeProps.selected ? rangeProps.selected.from ? rangeProps.selected.to ? /* @__PURE__ */ jsxs(Fragment, { children: [
            format(rangeProps.selected.from, dateFormat),
            " -",
            " ",
            format(rangeProps.selected.to, dateFormat)
          ] }) : format(rangeProps.selected.from, dateFormat) : null : null;
        }
      };
    }
    default:
      return {};
  }
};
var DatePicker = ({
  placeholder = "Pick a date",
  mode = "single",
  dateFormat = "yyyy-MM-dd",
  buttonClassName,
  selected,
  onSelect,
  ...resetProps
}) => {
  const allMode = useAllModeProps({
    mode,
    dateFormat,
    selected,
    onSelect
  });
  return /* @__PURE__ */ jsx(
    Popover,
    {
      contentProps: {
        className: "w-auto p-0",
        align: "start"
      },
      content: /* @__PURE__ */ jsx(Calendar, { initialFocus: true, ...resetProps, ...allMode.props }),
      children: /* @__PURE__ */ jsx(
        Button,
        {
          variant: "outline",
          className: cn(
            "justify-start text-left font-normal",
            !allMode.hasValue && "text-muted-foreground",
            buttonClassName
          ),
          icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
          children: allMode.renderText?.() || /* @__PURE__ */ jsx("span", { children: placeholder })
        }
      )
    }
  );
};

export { DatePicker };