@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,648 +0,0 @@
-/**
-
-
-
-
-
-
-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>
-  )
-} */