@braintwopoint0/playback-commons 0.1.10 → 0.1.12

package/dist/ui/index.js

@@ -15,7 +15,7 @@ function cn(...inputs) {
 // src/ui/button.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -899,14 +899,555 @@ var Highlight = ({
   );
 };
 
-// src/ui/chart.tsx
+// src/ui/popover.tsx
 import * as React10 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-zinc-800 bg-zinc-950 p-4 text-zinc-50 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/ui/calendar.tsx
+import * as React11 from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "lucide-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx13(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "bg-zinc-950 group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-zinc-300 border-zinc-800 shadow-xs has-focus:ring-zinc-300/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label" ? "text-sm" : "[&>svg]:text-zinc-400 flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-zinc-400 flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-zinc-400 select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-zinc-800 rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-zinc-800 rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-zinc-800 text-zinc-50 rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-zinc-400 aria-selected:text-zinc-400",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-zinc-400 opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx13(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx13(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx13(
+              ChevronRightIcon,
+              {
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx13(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx13("td", { ...props2, children: /* @__PURE__ */ jsx13("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React11.useRef(null);
+  React11.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx13(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "data-[selected-single=true]:bg-zinc-50 data-[selected-single=true]:text-zinc-900 data-[range-middle=true]:bg-zinc-800 data-[range-middle=true]:text-zinc-50 data-[range-start=true]:bg-zinc-50 data-[range-start=true]:text-zinc-900 data-[range-end=true]:bg-zinc-50 data-[range-end=true]:text-zinc-900 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/date-picker.tsx
+import * as React12 from "react";
+import { CalendarIcon } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function DatePicker({
+  value,
+  onChange,
+  min,
+  max,
+  className,
+  id,
+  placeholder = "Pick a date"
+}) {
+  const [open, setOpen] = React12.useState(false);
+  const selectedDate = value ? /* @__PURE__ */ new Date(value + "T00:00:00") : void 0;
+  const minDate = min ? /* @__PURE__ */ new Date(min + "T00:00:00") : void 0;
+  const maxDate = max ? /* @__PURE__ */ new Date(max + "T00:00:00") : void 0;
+  const formatDate2 = (date) => {
+    return date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    });
+  };
+  const handleDateSelect = (date) => {
+    if (date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      onChange(`${year}-${month}-${day}`);
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx14(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+      Button,
+      {
+        id,
+        variant: "outline",
+        className: cn(
+          "w-full justify-start text-left font-normal h-10 bg-zinc-800 border-none text-white shadow-input rounded-md px-3 py-2 text-sm",
+          "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-600",
+          "shadow-[0px_0px_1px_1px_var(--neutral-700)]",
+          "hover:shadow-none transition duration-400",
+          !selectedDate && "text-neutral-400",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx14(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          selectedDate ? formatDate2(selectedDate) : /* @__PURE__ */ jsx14("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx14(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx14(
+      Calendar,
+      {
+        mode: "single",
+        selected: selectedDate,
+        onSelect: handleDateSelect,
+        disabled: (date) => {
+          const dateAtMidnight = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate()
+          );
+          if (minDate) {
+            const minDateAtMidnight = new Date(
+              minDate.getFullYear(),
+              minDate.getMonth(),
+              minDate.getDate()
+            );
+            if (dateAtMidnight < minDateAtMidnight) return true;
+          }
+          if (maxDate) {
+            const maxDateAtMidnight = new Date(
+              maxDate.getFullYear(),
+              maxDate.getMonth(),
+              maxDate.getDate()
+            );
+            if (dateAtMidnight > maxDateAtMidnight) return true;
+          }
+          return false;
+        },
+        initialFocus: true
+      }
+    ) })
+  ] });
+}
+
+// src/ui/time-picker.tsx
+import * as React13 from "react";
+import { ClockIcon } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function TimePicker({
+  value,
+  onChange,
+  placeholder = "Select time",
+  className,
+  disabled = false,
+  min,
+  max
+}) {
+  const [open, setOpen] = React13.useState(false);
+  const [hours, setHours] = React13.useState(
+    value ? parseInt(value.split(":")[0]) : 9
+  );
+  const [minutes, setMinutes] = React13.useState(
+    value ? parseInt(value.split(":")[1]) : 0
+  );
+  const formatTime = (h, m) => {
+    return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
+  };
+  const handleTimeSelect = (h, m) => {
+    const timeString = formatTime(h, m);
+    setHours(h);
+    setMinutes(m);
+    onChange?.(timeString);
+    setOpen(false);
+  };
+  const generateTimeOptions = () => {
+    const options = [];
+    for (let h = 6; h <= 23; h++) {
+      for (let m = 0; m < 60; m += 15) {
+        const timeString = formatTime(h, m);
+        if (min && timeString < min) continue;
+        if (max && timeString > max) continue;
+        options.push({ hours: h, minutes: m, display: timeString });
+      }
+    }
+    return options;
+  };
+  const timeOptions = generateTimeOptions();
+  const displayValue = value || "";
+  return /* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-full justify-start text-left font-normal h-10 bg-zinc-800 border-none text-white shadow-input rounded-md px-3 py-2 text-sm",
+          "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-600",
+          "shadow-[0px_0px_1px_1px_var(--neutral-700)]",
+          "hover:shadow-none transition duration-400",
+          !value && "text-neutral-400",
+          className
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx15(ClockIcon, { className: "mr-2 h-4 w-4" }),
+          displayValue || placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx15(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx15("div", { className: "max-h-60 overflow-y-auto", children: /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-1 gap-1 p-2", children: timeOptions.map(({ hours: h, minutes: m, display }) => /* @__PURE__ */ jsx15(
+      Button,
+      {
+        variant: value === display ? "default" : "ghost",
+        className: "justify-start text-left h-8 text-sm",
+        onClick: () => handleTimeSelect(h, m),
+        children: display
+      },
+      display
+    )) }) }) })
+  ] });
+}
+
+// src/ui/datetime-picker.tsx
+import * as React14 from "react";
+import { CalendarIcon as CalendarIcon2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function DateTimePicker({
+  value,
+  onChange,
+  placeholder = "Pick date & time",
+  className,
+  disabled = false,
+  required = false
+}) {
+  const [open, setOpen] = React14.useState(false);
+  const hourRef = React14.useRef(null);
+  const minuteRef = React14.useRef(null);
+  const datePart = value ? value.split("T")[0] : "";
+  const timePart = value ? value.split("T")[1] || "" : "";
+  const selectedHour = timePart ? parseInt(timePart.split(":")[0]) : -1;
+  const selectedMinute = timePart ? parseInt(timePart.split(":")[1]) : -1;
+  const selectedDate = datePart ? /* @__PURE__ */ new Date(datePart + "T00:00:00") : void 0;
+  const formatDisplay = (val) => {
+    if (!val) return "";
+    const [d, t] = val.split("T");
+    if (!d) return "";
+    const date = /* @__PURE__ */ new Date(d + "T00:00:00");
+    const dateStr = date.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    });
+    if (!t) return dateStr;
+    return `${dateStr}, ${t}`;
+  };
+  const buildValue = (date, hour, minute) => {
+    const h = hour.toString().padStart(2, "0");
+    const m = minute.toString().padStart(2, "0");
+    return `${date}T${h}:${m}`;
+  };
+  const handleDateSelect = (date) => {
+    if (!date) return;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const newDate = `${year}-${month}-${day}`;
+    const h = selectedHour >= 0 ? selectedHour : 12;
+    const m = selectedMinute >= 0 ? selectedMinute : 0;
+    onChange(buildValue(newDate, h, m));
+  };
+  const handleHourSelect = (h) => {
+    if (!datePart) {
+      const now = /* @__PURE__ */ new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const m = selectedMinute >= 0 ? selectedMinute : 0;
+      onChange(buildValue(`${year}-${month}-${day}`, h, m));
+    } else {
+      const m = selectedMinute >= 0 ? selectedMinute : 0;
+      onChange(buildValue(datePart, h, m));
+    }
+  };
+  const handleMinuteSelect = (m) => {
+    if (!datePart) {
+      const now = /* @__PURE__ */ new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const h = selectedHour >= 0 ? selectedHour : 12;
+      onChange(buildValue(`${year}-${month}-${day}`, h, m));
+    } else {
+      const h = selectedHour >= 0 ? selectedHour : 12;
+      onChange(buildValue(datePart, h, m));
+    }
+  };
+  React14.useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        if (hourRef.current && selectedHour >= 0) {
+          const el = hourRef.current.querySelector(`[data-hour="${selectedHour}"]`);
+          el?.scrollIntoView({ block: "center" });
+        }
+        if (minuteRef.current && selectedMinute >= 0) {
+          const el = minuteRef.current.querySelector(`[data-minute="${selectedMinute}"]`);
+          el?.scrollIntoView({ block: "center" });
+        }
+      }, 50);
+    }
+  }, [open, selectedHour, selectedMinute]);
+  return /* @__PURE__ */ jsxs10(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        disabled,
+        className: cn(
+          "w-full justify-start text-left font-normal h-10 bg-zinc-800 border-none text-white shadow-input rounded-md px-3 py-2 text-sm",
+          "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-600",
+          "shadow-[0px_0px_1px_1px_var(--neutral-700)]",
+          "hover:shadow-none transition duration-400",
+          !value && "text-neutral-400",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx16(CalendarIcon2, { className: "mr-2 h-4 w-4 shrink-0" }),
+          value ? formatDisplay(value) : /* @__PURE__ */ jsx16("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx16(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs10("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx16(
+        Calendar,
+        {
+          mode: "single",
+          selected: selectedDate,
+          onSelect: handleDateSelect,
+          initialFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "flex border-l border-zinc-800", children: [
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: hourRef,
+            className: "h-[280px] w-16 overflow-y-auto p-1",
+            children: [
+              /* @__PURE__ */ jsx16("div", { className: "px-1 py-1.5 text-center text-xs text-zinc-400 font-medium", children: "Hr" }),
+              Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  "data-hour": i,
+                  type: "button",
+                  onClick: () => handleHourSelect(i),
+                  className: cn(
+                    "w-full rounded-md px-2 py-1.5 text-sm text-center cursor-pointer transition-colors",
+                    selectedHour === i ? "bg-zinc-50 text-zinc-900 font-medium" : "text-zinc-300 hover:bg-zinc-800"
+                  ),
+                  children: i.toString().padStart(2, "0")
+                },
+                i
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: minuteRef,
+            className: "h-[280px] w-16 overflow-y-auto border-l border-zinc-800 p-1",
+            children: [
+              /* @__PURE__ */ jsx16("div", { className: "px-1 py-1.5 text-center text-xs text-zinc-400 font-medium", children: "Min" }),
+              Array.from({ length: 12 }, (_, i) => i * 5).map((m) => /* @__PURE__ */ jsx16(
+                "button",
+                {
+                  "data-minute": m,
+                  type: "button",
+                  onClick: () => handleMinuteSelect(m),
+                  className: cn(
+                    "w-full rounded-md px-2 py-1.5 text-sm text-center cursor-pointer transition-colors",
+                    selectedMinute === m ? "bg-zinc-50 text-zinc-900 font-medium" : "text-zinc-300 hover:bg-zinc-800"
+                  ),
+                  children: m.toString().padStart(2, "0")
+                },
+                m
+              ))
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/ui/chart.tsx
+import * as React15 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React10.createContext(null);
+var ChartContext = React15.createContext(null);
 function useChart() {
-  const context = React10.useContext(ChartContext);
+  const context = React15.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -919,9 +1460,9 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React10.useId();
+  const uniqueId = React15.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx12(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx17(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs11(
     "div",
     {
       "data-slot": "chart",
@@ -932,8 +1473,8 @@ function ChartContainer({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx12(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ jsx17(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx17(RechartsPrimitive.ResponsiveContainer, { children })
       ]
     }
   ) });
@@ -945,7 +1486,7 @@ var ChartStyle = ({ id, config }) => {
   if (!colorConfig.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -980,7 +1521,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React10.useMemo(() => {
+  const tooltipLabel = React15.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -989,12 +1530,12 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ jsx12("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ jsx17("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ jsx12("div", { className: cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ jsx17("div", { className: cn("font-medium", labelClassName), children: value });
   }, [
     label,
     labelFormatter,
@@ -1008,7 +1549,7 @@ function ChartTooltipContent({
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn(
@@ -1017,19 +1558,19 @@ function ChartTooltipContent({
       ),
       children: [
         !nestLabel ? tooltipLabel : null,
-        /* @__PURE__ */ jsx12("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        /* @__PURE__ */ jsx17("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
           const key = `${nameKey || item.name || item.dataKey || "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
           const indicatorColor = color || item.payload.fill || item.color;
-          return /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx17(
             "div",
             {
               className: cn(
                 "flex w-full flex-wrap items-stretch gap-2",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
-                itemConfig?.icon ? /* @__PURE__ */ jsx12(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx12(
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx17(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx17(
                   "div",
                   {
                     className: cn(
@@ -1047,7 +1588,7 @@ function ChartTooltipContent({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: cn(
@@ -1055,11 +1596,11 @@ function ChartTooltipContent({
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs8("div", { className: "grid gap-1.5", children: [
+                      /* @__PURE__ */ jsxs11("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ jsx12("span", { className: "text-[var(--ash-grey)]", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ jsx17("span", { className: "text-[var(--ash-grey)]", children: itemConfig?.label || item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ jsx12("span", { className: "text-[var(--timberwolf)] font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value && /* @__PURE__ */ jsx17("span", { className: "text-[var(--timberwolf)] font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
                     ]
                   }
                 )
@@ -1084,7 +1625,7 @@ function ChartLegendContent({
   if (!payload?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: cn(
@@ -1095,14 +1636,14 @@ function ChartLegendContent({
       children: payload.filter((item) => item.type !== "none").map((item) => {
         const key = `${nameKey || item.dataKey || "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        return /* @__PURE__ */ jsxs8(
+        return /* @__PURE__ */ jsxs11(
           "div",
           {
             className: cn(
               "flex items-center gap-1.5 text-[var(--ash-grey)]"
             ),
             children: [
-              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx12(itemConfig.icon, {}) : /* @__PURE__ */ jsx12(
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx17(itemConfig.icon, {}) : /* @__PURE__ */ jsx17(
                 "div",
                 {
                   className: "h-2 w-2 shrink-0 rounded-[2px]",
@@ -1133,10 +1674,58 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+
+// src/ui/footer.tsx
+import { InstagramIcon, YoutubeIcon, LinkedinIcon } from "lucide-react";
+import Link2 from "next/link";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function TikTokIcon({ className }) {
+  return /* @__PURE__ */ jsx18(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx18("path", { d: "M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" })
+    }
+  );
+}
+function Footer() {
+  return /* @__PURE__ */ jsxs12("footer", { className: "container mx-auto flex p-5 items-center justify-between border-t border-[var(--timberwolf)]", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx18(Link2, { href: "https://www.instagram.com/playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(InstagramIcon, { className: "h-7 w-7" }) }),
+      /* @__PURE__ */ jsx18(Link2, { href: "https://youtube.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(YoutubeIcon, { className: "h-7 w-7" }) }),
+      /* @__PURE__ */ jsx18(Link2, { href: "https://www.tiktok.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx18(TikTokIcon, { className: "h-7 w-7" }) }),
+      /* @__PURE__ */ jsx18(
+        Link2,
+        {
+          href: "https://www.linkedin.com/company/playbacksports/",
+          target: "_blank",
+          children: /* @__PURE__ */ jsx18(LinkedinIcon, { className: "h-7 w-7" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12("h2", { className: "text-lg", children: [
+      "by",
+      " ",
+      /* @__PURE__ */ jsx18(Link2, { href: "https://www.braintwopoint0.com", children: /* @__PURE__ */ jsxs12("span", { className: "font-semibold", children: [
+        "BRAIN",
+        /* @__PURE__ */ jsx18("span", { className: "font-thin", children: "2.0" })
+      ] }) })
+    ] })
+  ] });
+}
 export {
   AnimatedTooltip,
   Badge,
   Button,
+  Calendar,
+  CalendarDayButton,
   Card,
   CardContent,
   CardDescription,
@@ -1149,6 +1738,8 @@ export {
   ChartStyle,
   ChartTooltip,
   ChartTooltipContent,
+  DatePicker,
+  DateTimePicker,
   Dialog,
   DialogClose,
   DialogContent,
@@ -1160,6 +1751,7 @@ export {
   DialogTitle,
   DialogTrigger,
   FlipWords,
+  Footer,
   HeroHighlight,
   Highlight,
   HoverCard,
@@ -1168,6 +1760,10 @@ export {
   HoverEffect,
   Input,
   Label,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectContent,
   SelectGroup,
@@ -1178,6 +1774,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  TimePicker,
   badgeVariants,
   buttonVariants
 };