date-picker

1import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid";
2 
3import { cn } from "~/lib/utils.ts";
4 
5import IconCalendar from "~icons/lucide/calendar";
6import IconChevronLeft from "~icons/lucide/chevron-left";
7import IconChevronRight from "~icons/lucide/chevron-right";
8import { children, Show, splitProps } from "solid-js";
9import { buttonVariants } from "./button.tsx";
10 
11const DatePicker = DatePickerPrimitive.Root;
12const DatePickerLabel = DatePickerPrimitive.Label;
13const DatePickerContext = DatePickerPrimitive.Context;
14const DatePickerTableHead = DatePickerPrimitive.TableHead;
15const DatePickerTableBody = DatePickerPrimitive.TableBody;
16const DatePickerYearSelect = DatePickerPrimitive.YearSelect;
17const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;
18const DatePickerPositioner = DatePickerPrimitive.Positioner;
19 
20const DatePickerControl = (props: DatePickerPrimitive.ControlProps) => {
21  const [local, others] = splitProps(props, ["class"]);
22  return (
23    <DatePickerPrimitive.Control
24      class={cn("inline-flex items-center gap-1", local.class)}
25      {...others}
26    />
27  );
28};
29 
30const DatePickerInput = (props: DatePickerPrimitive.InputProps) => {
31  const [local, others] = splitProps(props, ["class"]);
32  return (
33    <DatePickerPrimitive.Input
34      class={cn(
35        "h-8 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:bg-input/50 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 w-full placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
36        local.class,
37      )}
38      {...others}
39    />
40  );
41};
42 
43const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => {
44  const [local, others] = splitProps(props, ["class", "children"]);
45 
46  // prevents rendering children twice
47  const resolvedChildren = children(() => local.children);
48  const hasChildren = () => resolvedChildren.toArray().length !== 0;
49 
50  return (
51    <DatePickerPrimitive.Trigger
52      class={cn(
53// … truncated