@easy-shadcn/react/dist/chunk-APWWYJ5R.js

Use shadcn/ui easy&enhance like component library

'use strict';

var chunkWRV7BOAJ_js = require('./chunk-WRV7BOAJ.js');
var chunkQMPOMXJG_js = require('./chunk-QMPOMXJG.js');
var chunkKRHWFZUK_js = require('./chunk-KRHWFZUK.js');
var React = require('react');
var reactIcons = require('@radix-ui/react-icons');
var utils = require('@easy-shadcn/utils');
var dateFns = require('date-fns');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var useAllModeProps = ({
  mode,
  dateFormat,
  selected,
  onSelect
}) => {
  const [singleDate, setSingleDate] = React__default.default.useState();
  const [multiDate, setMultiDate] = React__default.default.useState();
  const [rangeDate, setRangeDate] = React__default.default.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 ? dateFns.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) => dateFns.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
            dateFns.format(rangeProps.selected.from, dateFormat),
            " -",
            " ",
            dateFns.format(rangeProps.selected.to, dateFormat)
          ] }) : dateFns.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__ */ jsxRuntime.jsx(
    chunkWRV7BOAJ_js.Popover,
    {
      contentProps: {
        className: "w-auto p-0",
        align: "start"
      },
      content: /* @__PURE__ */ jsxRuntime.jsx(chunkQMPOMXJG_js.Calendar, { initialFocus: true, ...resetProps, ...allMode.props }),
      children: /* @__PURE__ */ jsxRuntime.jsx(
        chunkKRHWFZUK_js.Button,
        {
          variant: "outline",
          className: utils.cn(
            "justify-start text-left font-normal",
            !allMode.hasValue && "text-muted-foreground",
            buttonClassName
          ),
          icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CalendarIcon, {}),
          children: allMode.renderText?.() || /* @__PURE__ */ jsxRuntime.jsx("span", { children: placeholder })
        }
      )
    }
  );
};

exports.DatePicker = DatePicker;