@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/x/date-picker-x.tsx

@@ -0,0 +1,648 @@
+/**
+
+
+
+
+
+
+export function DatePickerX({ datePicker = 'default', children, ...props }: any) {
+    switch (datePicker) {
+        case 'Closable':
+            break
+        default:
+            break;
+    }
+}
+
+const DatePickerDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='date' className='px-1'>
+        Date picker
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant='outline' id='date' className='w-full justify-between font-normal'>
+            {date ? date.toLocaleDateString() : 'Pick a date'}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={date => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+const DatePickerRangeDemo = () => {
+  const [range, setRange] = useState<DateRange | undefined>(undefined)
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='dates' className='px-1'>
+        Range date picker
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant='outline' id='dates' className='w-full justify-between font-normal'>
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+              : 'Pick a date'}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+          <Calendar
+            mode='range'
+            selected={range}
+            onSelect={range => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+const DatePickerWithIconDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='date' className='px-1'>
+        Date picker with icon
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant='outline' id='date' className='w-full justify-between font-normal'>
+            <span className='flex items-center'>
+              <CalendarIcon className='mr-2' />
+              {date ? date.toLocaleDateString() : 'Pick a date'}
+            </span>
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+          <Calendar
+            mode='single'
+            selected={date}
+            onSelect={date => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+const DatePickerWithinInputDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(new Date())
+  const [month, setMonth] = useState<Date | undefined>(date)
+  const [value, setValue] = useState(formatDate(date))
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='date' className='px-1'>
+        Date picker within input
+      </Label>
+      <div className='relative flex gap-2'>
+        <Input
+          id='date'
+          value={value}
+          placeholder='January 01, 2025'
+          className='bg-background pr-10'
+          onChange={e => {
+            const date = new Date(e.target.value)
+
+            setValue(e.target.value)
+
+            if (isValidDate(date)) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={e => {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button id='date-picker' variant='ghost' className='absolute top-1/2 right-2 size-6 -translate-y-1/2'>
+              <CalendarIcon className='size-3.5' />
+              <span className='sr-only'>Pick a date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='end' alignOffset={-8} sideOffset={10}>
+            <Calendar
+              mode='single'
+              selected={date}
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={date => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+const DatePickerWithNaturalLanguageDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('In 2 days')
+  const [date, setDate] = useState<Date | undefined>(parseDate(value) || undefined)
+  const [month, setMonth] = useState<Date | undefined>(date)
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='date' className='px-1'>
+        Date picker with natural language input
+      </Label>
+      <div className='relative flex gap-2'>
+        <Input
+          id='date'
+          value={value}
+          placeholder='Tomorrow or next week'
+          className='bg-background pr-10'
+          onChange={e => {
+            setValue(e.target.value)
+            const date = parseDate(e.target.value)
+
+            if (date) {
+              setDate(date)
+              setMonth(date)
+            }
+          }}
+          onKeyDown={e => {
+            if (e.key === 'ArrowDown') {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        />
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button id='date-picker' variant='ghost' className='absolute top-1/2 right-2 size-6 -translate-y-1/2'>
+              <CalendarIcon className='size-3.5' />
+              <span className='sr-only'>Pick a date</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='end' alignOffset={-8} sideOffset={10}>
+            <Calendar
+              mode='single'
+              selected={date}
+              month={month}
+              onMonthChange={setMonth}
+              onSelect={date => {
+                setDate(date)
+                setValue(formatDate(date))
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className='text-muted-foreground px-1 text-sm'>
+        Your post will be published on <span className='font-medium'>{formatDate(date)}</span>.
+      </div>
+    </div>
+  )
+}
+
+const DatePickerWithShortDateDisplayDemo = () => {
+  const [range, setRange] = useState<DateRange | undefined>({
+    from: new Date(2025, 10, 20),
+    to: new Date(2025, 10, 24)
+  })
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='dates' className='px-1'>
+        Date picker with short date
+      </Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant='outline' id='dates' className='w-full justify-between font-normal'>
+            {range?.from && range?.to
+              ? formatDateRange(range.from, range.to, {
+                  includeTime: false
+                })
+              : 'Pick a date'}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+          <Calendar
+            mode='range'
+            selected={range}
+            onSelect={range => {
+              setRange(range)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+const DatePickerDisableOutsideDaysDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='date' className='px-1'>
+        Disable outside days
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant='outline' id='date' className='w-full justify-between font-normal'>
+            {date ? date.toLocaleDateString() : 'Pick a date'}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+          <Calendar
+            mode='single'
+            selected={date}
+            showOutsideDays={false}
+            onSelect={date => {
+              setDate(date)
+              setOpen(false)
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+const DatePickerDemo = () => {
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='time-picker' className='px-1'>
+        Time input
+      </Label>
+      <Input
+        type='time'
+        id='time-picker'
+        step='1'
+        defaultValue='08:30:00'
+        className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+      />
+    </div>
+  )
+}
+
+const TimePickerWithIconDemo = () => {
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor='timepicker'>Time input with start icon</Label>
+      <div className='relative'>
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50'>
+          <Clock8Icon className='size-4' />
+          <span className='sr-only'>User</span>
+        </div>
+        <Input
+          type='time'
+          id='time-picker'
+          step='1'
+          defaultValue='08:30:00'
+          className='peer bg-background appearance-none pl-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+        />
+      </div>
+    </div>
+  )
+}
+
+const DatePickerAndTimePickerDemo = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+
+  return (
+    <div className='flex gap-4'>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='date-picker' className='px-1'>
+          Date picker
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant='outline' id='date-picker' className='justify-between font-normal'>
+              {date ? date.toLocaleDateString() : 'Pick a date'}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+            <Calendar
+              mode='single'
+              selected={date}
+              onSelect={date => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='time-picker' className='px-1'>
+          Time input
+        </Label>
+        <Input
+          type='time'
+          id='time-picker'
+          step='1'
+          defaultValue='06:30:00'
+          className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+        />
+      </div>
+    </div>
+  )
+}
+
+const DatePickerAndTimeRangePicker = () => {
+  const [open, setOpen] = useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+
+  return (
+    <div className='flex flex-col gap-6'>
+      <div className='flex w-full max-w-xs flex-col gap-3'>
+        <Label htmlFor='date' className='px-1'>
+          Date
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant='outline' id='date' className='w-full justify-between font-normal'>
+              {date ? date.toLocaleDateString() : 'Pick a date'}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+            <Calendar
+              mode='single'
+              selected={date}
+              onSelect={date => {
+                setDate(date)
+                setOpen(false)
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className='flex gap-4'>
+        <div className='flex flex-col gap-3'>
+          <Label htmlFor='time-from' className='px-1'>
+            From
+          </Label>
+          <Input
+            type='time'
+            id='time-from'
+            step='1'
+            defaultValue='01:30:00'
+            className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+          />
+        </div>
+        <div className='flex flex-col gap-3'>
+          <Label htmlFor='time-to' className='px-1'>
+            To
+          </Label>
+          <Input
+            type='time'
+            id='time-to'
+            step='1'
+            defaultValue='02:30:00'
+            className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const DatePickerRangeAndTimePickerDemo = () => {
+  const [openFrom, setOpenFrom] = useState(false)
+  const [openTo, setOpenTo] = useState(false)
+  const [dateFrom, setDateFrom] = useState<Date | undefined>(new Date('2025-06-18'))
+  const [dateTo, setDateTo] = useState<Date | undefined>(new Date('2025-06-25'))
+
+  return (
+    <div className='flex w-full max-w-64 min-w-0 flex-col gap-6'>
+      <div className='flex gap-4'>
+        <div className='flex flex-1 flex-col gap-3'>
+          <Label htmlFor='date-from' className='px-1'>
+            Departure date
+          </Label>
+          <Popover open={openFrom} onOpenChange={setOpenFrom}>
+            <PopoverTrigger asChild>
+              <Button variant='outline' id='date-from' className='w-full justify-between font-normal'>
+                {dateFrom
+                  ? dateFrom.toLocaleDateString('en-US', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric'
+                    })
+                  : 'Pick a date'}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+              <Calendar
+                mode='single'
+                selected={dateFrom}
+                onSelect={date => {
+                  setDateFrom(date)
+                  setOpenFrom(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className='flex flex-col gap-3'>
+          <Label htmlFor='time-from' className='invisible px-1'>
+            From
+          </Label>
+          <Input
+            type='time'
+            id='time-from'
+            step='1'
+            defaultValue='09:30:00'
+            className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+          />
+        </div>
+      </div>
+      <div className='flex gap-4'>
+        <div className='flex flex-1 flex-col gap-3'>
+          <Label htmlFor='date-to' className='px-1'>
+            Return date
+          </Label>
+          <Popover open={openTo} onOpenChange={setOpenTo}>
+            <PopoverTrigger asChild>
+              <Button variant='outline' id='date-to' className='w-full justify-between font-normal'>
+                {dateTo
+                  ? dateTo.toLocaleDateString('en-US', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric'
+                    })
+                  : 'Pick a date'}
+                <ChevronDownIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+              <Calendar
+                mode='single'
+                selected={dateTo}
+                captionLayout='dropdown'
+                onSelect={date => {
+                  setDateTo(date)
+                  setOpenTo(false)
+                }}
+                disabled={dateFrom && { before: dateFrom }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className='flex flex-col gap-3'>
+          <Label htmlFor='time-to' className='invisible px-1'>
+            To
+          </Label>
+          <Input
+            type='time'
+            id='time-to'
+            step='1'
+            defaultValue='18:30:00'
+            className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ChartFilterDemo = () => {
+  const [range, setRange] = useState<DateRange | undefined>({
+    from: new Date(2025, 0, 1),
+    to: new Date(2025, 0, 31)
+  })
+
+  const filteredData = useMemo(() => {
+    if (!range?.from && !range?.to) {
+      return chartData
+    }
+
+    return chartData.filter(item => {
+      const date = new Date(item.date)
+
+      return date >= range.from! && date <= range.to!
+    })
+  }, [range])
+
+  return (
+    <Card className='@container/card w-full max-w-xl'>
+      <CardHeader className='flex flex-col border-b @md/card:grid'>
+        <CardTitle>Web Analytics</CardTitle>
+        <CardDescription>Showing total visitors for this month.</CardDescription>
+        <CardAction className='mt-2 @md/card:mt-0'>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant='outline'>
+                <CalendarIcon />
+                {range?.from && range?.to
+                  ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+                  : 'January 2025'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto overflow-hidden p-0' align='end'>
+              <Calendar
+                className='w-full'
+                mode='range'
+                defaultMonth={range?.from}
+                selected={range}
+                onSelect={setRange}
+                startMonth={range?.from}
+                fixedWeeks
+                showOutsideDays
+                disabled={{
+                  after: new Date(2025, 0, 31),
+                  before: new Date(2025, 0, 1)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </CardAction>
+      </CardHeader>
+      <CardContent className='px-4'>
+        <ChartContainer config={chartConfig} className='aspect-auto h-62 w-full'>
+          <BarChart
+            accessibilityLayer
+            data={filteredData}
+            margin={{
+              left: 12,
+              right: 12
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey='date'
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={20}
+              tickFormatter={value => {
+                const date = new Date(value)
+
+                return date.toLocaleDateString('en-US', {
+                  day: 'numeric'
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className='w-[150px]'
+                  nameKey='visitors'
+                  labelFormatter={value => {
+                    return new Date(value).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric'
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey='visitors' fill={`var(--color-visitors)`} radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className='border-t'>
+        <div className='text-sm'>
+          You had <span className='font-semibold'>{total.toLocaleString()}</span> visitors for the month of January.
+        </div>
+      </CardFooter>
+    </Card>
+  )
+} */