Date Picker

1import { children, Show, splitProps } from "solid-js"
2 
3import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid"
4 
5import { cn } from "~/lib/utils"
6import { buttonVariants } from "~/registry/ui/button"
7 
8const DatePicker = DatePickerPrimitive.Root
9const DatePickerLabel = DatePickerPrimitive.Label
10const DatePickerContext = DatePickerPrimitive.Context
11const DatePickerTableHead = DatePickerPrimitive.TableHead
12const DatePickerTableBody = DatePickerPrimitive.TableBody
13const DatePickerYearSelect = DatePickerPrimitive.YearSelect
14const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect
15const DatePickerPositioner = DatePickerPrimitive.Positioner
16 
17const DatePickerControl = (props: DatePickerPrimitive.ControlProps) => {
18  const [local, others] = splitProps(props, ["class"])
19  return (
20    <DatePickerPrimitive.Control
21      class={cn("inline-flex items-center gap-1", local.class)}
22      {...others}
23    />
24  )
25}
26 
27const DatePickerInput = (props: DatePickerPrimitive.InputProps) => {
28  const [local, others] = splitProps(props, ["class"])
29  return (
30    <DatePickerPrimitive.Input
31      class={cn(
32        "h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
33        local.class
34      )}
35      {...others}
36    />
37  )
38}
39 
40const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => {
41  const [local, others] = splitProps(props, ["class", "children"])
42 
43  // prevents rendering children twice
44  const resolvedChildren = children(() => local.children)
45  const hasChildren = () => resolvedChildren.toArray().length !== 0
46 
47  return (
48    <DatePickerPrimitive.Trigger
49      class={cn(
50        "flex min-h-9 min-w-9 items-center justify-center rounded-md border border-border bg-background transition-[box-shadow,background-color] hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4",
51        local.class
52      )}
53      {...others}
54    >
55      <Show when={!hasChildren()} fallback={resolvedChildren()}>
56        <svg
57          xmlns="http://www.w3.org/2000/svg"
58          viewBox="0 0 24 24"
59          fill="none"
60          stroke="currentColor"
61          stroke-width="2"
62          stroke-linecap="round"
63          stroke-linejoin="round"
64          class="size-4"
65// … truncated