"use client"

import * as React from "react"

import { DateSelect } from "@/components/ui/date-select"

export default function DateSelectDemo() {
  return <DateSelect />
}

`}),` `,(0,s.jsx)(n.h2,{children:"Installation"}),` `,(0,s.jsxs)(o,{defaultValue:"cli",children:[(0,s.jsxs)(p,{children:[(0,s.jsx)(r,{value:"cli",children:"CLI"}),(0,s.jsx)(r,{value:"manual",children:"Manual"})]}),(0,s.jsx)(E,{value:"cli",children:(0,s.jsx)(i,{registryName:"https://ui.booleanfields.com/r/date-select.json"})}),(0,s.jsx)(E,{value:"manual",children:(0,s.jsxs)(F,{children:[(0,s.jsx)(t,{children:"Install the following dependencies:"}),(0,s.jsx)(d,{packageName:"dayjs lucide-react motion"}),(0,s.jsx)(t,{children:"Copy and paste the following code into your project."}),(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"@/components/ui/date-select.tsx"})}),(0,s.jsx)(B,{name:"date-select",rawCodeString:`import * as React from "react" import dayjs from "dayjs" import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" // utils const isToday = (date: Date) => dayjs(date).isSame(dayjs(), "day") const getDatesForPage = (pageOffset: number, daysInPage: number): Date[] => { const datesArray: Date[] = [] const startDay = dayjs().add(pageOffset * daysInPage, "day") for (let i = 0; i < daysInPage; i++) { const nextDay = startDay.add(i, "day") datesArray.push(nextDay.toDate()) } return datesArray } const calculatePageOffsetForDate = ( targetDate: Date | undefined, daysInPage: number ): number => { if (!targetDate) { return 0 } const targetDay = dayjs(targetDate).startOf("day") const today = dayjs().startOf("day") const diffDays = targetDay.diff(today, "day") return Math.floor(diffDays / daysInPage) } // component type DateSelectProps = { value?: Date onChange?: (value: Date) => void className?: string disabled?: boolean daysInPage?: number } function DateSelect({ value, onChange, className, disabled, daysInPage = 3, }: DateSelectProps) { const [_value, setValue] = React.useState(value) const [pageOffset, setPageOffset] = React.useState(() => calculatePageOffsetForDate(value, daysInPage) ) const [direction, setDirection] = React.useState(0) const [isAnimating, setIsAnimating] = React.useState(false) const containerRef = React.useRef(null) const dates = React.useMemo( () => getDatesForPage(pageOffset, daysInPage), [pageOffset, daysInPage] ) const slideVariants = React.useMemo( () => ({ initial: (customDirection: number) => ({ x: customDirection * (containerRef.current?.offsetWidth || 218), }), animate: { x: 0, }, exit: (customDirection: number) => ({ x: customDirection * -(containerRef.current?.offsetWidth || 218), transition: { duration: 0.2 }, }), }), [] ) // listen for value changes, and if it's in a different page, update the page offset React.useEffect(() => { if (value) { const newPageOffset = calculatePageOffsetForDate(value, daysInPage) if (newPageOffset !== pageOffset) { if (newPageOffset > pageOffset) { setDirection(1) } else { setDirection(-1) } setPageOffset(newPageOffset) } setValue(value) } }, [value]) const handleNextPage = React.useCallback(() => { setIsAnimating(true) setDirection(1) const newPageOffset = pageOffset + 1 setPageOffset(newPageOffset) }, [pageOffset]) const handlePrevPage = React.useCallback(() => { setIsAnimating(true) setDirection(-1) const newPageOffset = pageOffset - 1 setPageOffset(newPageOffset) }, [pageOffset]) const handleDateClick = React.useCallback( (date: Date) => { if (value !== undefined && onChange === undefined) { console.error( "Warning: You provided a 'value' prop to the DateSelect component without an 'onChange' handler. This makes it a read-only component." ) return } setValue(date) onChange?.(date) }, [value, onChange] ) return (

setIsAnimating(false)} custom={direction} > {dates.map((date) => ( ))}

) } DateSelect.displayName = "DateSelect" type DateButtonProps = { date: Date handleDateClick: (date: Date) => void isAnimating: boolean _value: Date | undefined disabled?: boolean } const DateButton = ({ date, handleDateClick, isAnimating, _value, disabled, }: DateButtonProps) => { const isDateSelected = _value && dayjs(date).isSame(_value, "day") return ( ) } DateButton.displayName = "DateButton" export { DateSelect } `,highlightedCodeHtml:`

import * as React from "react"
import dayjs from "dayjs"
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
import { AnimatePresence, motion } from "motion/react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

// utils

const isToday = (date: Date) => dayjs(date).isSame(dayjs(), "day")

const getDatesForPage = (pageOffset: number, daysInPage: number): Date[] => {
  const datesArray: Date[] = []
  const startDay = dayjs().add(pageOffset * daysInPage, "day")

  for (let i = 0; i < daysInPage; i++) {
    const nextDay = startDay.add(i, "day")
    datesArray.push(nextDay.toDate())
  }
  return datesArray
}

const calculatePageOffsetForDate = (
  targetDate: Date | undefined,
  daysInPage: number
): number => {
  if (!targetDate) {
    return 0
  }
  const targetDay = dayjs(targetDate).startOf("day")
  const today = dayjs().startOf("day")
  const diffDays = targetDay.diff(today, "day")
  return Math.floor(diffDays / daysInPage)
}

// component

type DateSelectProps = {
  value?: Date
  onChange?: (value: Date) => void
  className?: string
  disabled?: boolean
  daysInPage?: number
}

function DateSelect({
  value,
  onChange,
  className,
  disabled,
  daysInPage = 3,
}: DateSelectProps) {
  const [_value, setValue] = React.useState<Date | undefined>(value)

  const [pageOffset, setPageOffset] = React.useState(() =>
    calculatePageOffsetForDate(value, daysInPage)
  )
  const [direction, setDirection] = React.useState(0)
  const [isAnimating, setIsAnimating] = React.useState(false)
  const containerRef = React.useRef<HTMLDivElement>(null)

  const dates = React.useMemo(
    () => getDatesForPage(pageOffset, daysInPage),
    [pageOffset, daysInPage]
  )

  const slideVariants = React.useMemo(
    () => ({
      initial: (customDirection: number) => ({
        x: customDirection * (containerRef.current?.offsetWidth || 218),
      }),
      animate: {
        x: 0,
      },
      exit: (customDirection: number) => ({
        x: customDirection * -(containerRef.current?.offsetWidth || 218),
        transition: { duration: 0.2 },
      }),
    }),
    []
  )

  // listen for value changes, and if it's in a different page, update the page offset
  React.useEffect(() => {
    if (value) {
      const newPageOffset = calculatePageOffsetForDate(value, daysInPage)
      if (newPageOffset !== pageOffset) {
        if (newPageOffset > pageOffset) {
          setDirection(1)
        } else {
          setDirection(-1)
        }
        setPageOffset(newPageOffset)
      }
      setValue(value)
    }
  }, [value])

  const handleNextPage = React.useCallback(() => {
    setIsAnimating(true)
    setDirection(1)
    const newPageOffset = pageOffset + 1
    setPageOffset(newPageOffset)
  }, [pageOffset])

  const handlePrevPage = React.useCallback(() => {
    setIsAnimating(true)
    setDirection(-1)
    const newPageOffset = pageOffset - 1
    setPageOffset(newPageOffset)
  }, [pageOffset])

  const handleDateClick = React.useCallback(
    (date: Date) => {
      if (value !== undefined && onChange === undefined) {
        console.error(
          "Warning: You provided a 'value' prop to the DateSelect component without an 'onChange' handler. This makes it a read-only component."
        )
        return
      }
      setValue(date)
      onChange?.(date)
    },
    [value, onChange]
  )

  return (
    <div className={cn("flex items-center justify-center gap-1.5", className)}>
      <Button
        variant="ghost"
        size="icon"
        className="text-muted-foreground"
        disabled={pageOffset === 0 || disabled}
        onClick={handlePrevPage}
        aria-label="Previous dates"
      >
        <ChevronLeftIcon className="h-4 w-4" />
      </Button>

      <div
        ref={containerRef}
        className="relative w-[var(--date-select-width)] overflow-hidden rounded-md border"
        style={
          {
            "--date-select-width": \`\${60 * daysInPage}px\`,
          } as React.CSSProperties
        }
      >
        <AnimatePresence
          mode="popLayout"
          initial={false}
          onExitComplete={() => setIsAnimating(false)}
          custom={direction}
        >
          <motion.div
            key={pageOffset}
            custom={direction}
            variants={slideVariants}
            initial="initial"
            animate="animate"
            exit="exit"
            transition={{ x: { type: "spring", stiffness: 300, damping: 30 } }}
            className="grid h-full divide-x"
            style={{
              gridTemplateColumns: \`repeat(\${daysInPage}, 1fr)\`,
            }}
            aria-hidden={isAnimating}
          >
            {dates.map((date) => (
              <DateButton
                key={date.toString()}
                date={date}
                handleDateClick={handleDateClick}
                isAnimating={isAnimating}
                _value={_value}
                disabled={disabled}
              />
            ))}
          </motion.div>
        </AnimatePresence>
      </div>

      <Button
        variant="ghost"
        size="icon"
        className="text-muted-foreground"
        onClick={handleNextPage}
        aria-label="Next dates"
        disabled={disabled}
      >
        <ChevronRightIcon className="h-4 w-4" />
      </Button>
    </div>
  )
}

DateSelect.displayName = "DateSelect"

type DateButtonProps = {
  date: Date
  handleDateClick: (date: Date) => void
  isAnimating: boolean
  _value: Date | undefined
  disabled?: boolean
}

const DateButton = ({
  date,
  handleDateClick,
  isAnimating,
  _value,
  disabled,
}: DateButtonProps) => {
  const isDateSelected = _value && dayjs(date).isSame(_value, "day")

  return (
    <button
      onClick={() => handleDateClick(date)}
      tabIndex={isAnimating ? -1 : 0}
      disabled={disabled}
      className={cn(
        "focus-visible:ring-ring/50 relative flex flex-col items-center justify-center px-1 py-3 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
        "first:rounded-l-md last:rounded-r-md",
        "disabled:pointer-events-none disabled:opacity-50",
        isDateSelected ? "bg-primary" : "bg-background hover:bg-accent"
      )}
    >
      <span
        className={cn(
          "text-xs",
          isDateSelected ? "text-primary-foreground" : "text-muted-foreground"
        )}
      >
        {dayjs(date).format("MMM")}
      </span>
      <span
        className={cn(
          "text-base font-medium tabular-nums",
          isDateSelected
            ? "text-primary-foreground"
            : "text-secondary-foreground"
        )}
      >
        {date.getDate()}
      </span>
      <span
        className={cn(
          "text-xs",
          isDateSelected ? "text-primary-foreground" : "text-muted-foreground"
        )}
      >
        {dayjs(date).format("ddd")}
      </span>
      {isToday(date) && (
        <span className="bg-primary absolute bottom-1 h-1 w-1 rounded-full" />
      )}
    </button>
  )
}

DateButton.displayName = "DateButton"

export { DateSelect }

`}),(0,s.jsx)(t,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,s.jsx)(n.h2,{children:"Usage"}),` `,(0,s.jsx)(y,{rawCodeString:'import { DateSelect } from "@/components/ui/date-select"',highlightedCodeHtml:'

import { DateSelect } from "@/components/ui/date-select"

',language:"tsx"}),` `,(0,s.jsx)(y,{rawCodeString:`const [date, setDate] = React.useState(new Date()) `,highlightedCodeHtml:`

const [date, setDate] = React.useState(new Date())

<DateSelect value={date} onChange={setDate} />

`,language:"tsx"}),` `,(0,s.jsx)(n.h2,{children:"Examples"}),` `,(0,s.jsx)(n.h3,{children:"Default"}),` `,(0,s.jsx)(l,{name:"date-select-demo",rawCodeString:`"use client" import * as React from "react" import { DateSelect } from "@/components/ui/date-select" export default function DateSelectDemo() { return } `,highlightedCodeHtml:`

"use client"

import * as React from "react"

import { DateSelect } from "@/components/ui/date-select"

export default function DateSelectDemo() {
  return <DateSelect />
}

`}),` `,(0,s.jsx)(n.h3,{children:"Disabled"}),` `,(0,s.jsx)(l,{name:"date-select-disabled-demo",rawCodeString:`"use client" import * as React from "react" import { DateSelect } from "@/components/ui/date-select" export default function DateSelectDisabledDemo() { const [selectedDate, setSelectedDate] = React.useState(new Date()) return } `,highlightedCodeHtml:`

"use client"

import * as React from "react"

import { DateSelect } from "@/components/ui/date-select"

export default function DateSelectDisabledDemo() {
  const [selectedDate, setSelectedDate] = React.useState<Date>(new Date())

  return <DateSelect value={selectedDate} onChange={setSelectedDate} disabled />
}

`}),` `,(0,s.jsx)(n.h3,{children:"Custom visible days"}),` `,(0,s.jsx)(l,{name:"date-select-custom-days-demo",rawCodeString:`"use client" import * as React from "react" import { DateSelect } from "@/components/ui/date-select" export default function DateSelectCustomDaysDemo() { const [selectedDate, setSelectedDate] = React.useState(new Date()) return ( ) } `,highlightedCodeHtml:`

"use client"

import * as React from "react"

import { DateSelect } from "@/components/ui/date-select"

export default function DateSelectCustomDaysDemo() {
  const [selectedDate, setSelectedDate] = React.useState<Date>(new Date())

  return (
    <DateSelect
      value={selectedDate}
      onChange={setSelectedDate}
      daysInPage={5}
    />
  )
}

`}),` `,(0,s.jsx)(n.h3,{children:"Controlled"}),` `,(0,s.jsx)(l,{name:"date-select-external-update-demo",rawCodeString:`"use client" import * as React from "react" import dayjs from "dayjs" import { Button } from "@/components/ui/button" import { DateSelect } from "@/components/ui/date-select" export default function DateSelectExternalUpdateDemo() { const [selectedDate, setSelectedDate] = React.useState(new Date()) const handleSetFutureDate = () => { setSelectedDate(dayjs(selectedDate).add(10, "day").toDate()) } return (

) } `,highlightedCodeHtml:`

"use client"

import * as React from "react"
import dayjs from "dayjs"

import { Button } from "@/components/ui/button"
import { DateSelect } from "@/components/ui/date-select"

export default function DateSelectExternalUpdateDemo() {
  const [selectedDate, setSelectedDate] = React.useState<Date>(new Date())

  const handleSetFutureDate = () => {
    setSelectedDate(dayjs(selectedDate).add(10, "day").toDate())
  }

  return (
    <div className="flex flex-col items-center gap-4">
      <DateSelect value={selectedDate} onChange={setSelectedDate} />
      <Button variant={"outline"} onClick={handleSetFutureDate}>
        + 5 Days
      </Button>
    </div>
  )
}

`})]})}function O(a={}){let{wrapper:n}=a.components||{};return n?(0,s.jsx)(n,Object.assign({},a,{children:(0,s.jsx)(g,a)})):g(a)}var R=O;function e(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(w);})(); ;return Component;

Date Select

Installation

Usage

Examples

Default

Disabled

Custom visible days

Controlled