@braintwopoint0/playback-commons 0.1.9 → 0.1.11

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: {
@@ -200,7 +200,7 @@ var Input = React4.forwardRef(
             type,
             className: cn(
               `flex h-10 w-full border-none bg-zinc-800 text-white shadow-input rounded-lg px-3 py-2 text-sm  file:border-0 file:bg-transparent
-          file:text-sm file:font-mediumplaceholder-text-neutral-600
+          file:text-sm file:font-medium placeholder:text-neutral-500
           focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-600
            disabled:cursor-not-allowed disabled:opacity-50
            shadow-[0px_0px_1px_1px_var(--neutral-700)]
@@ -314,61 +314,147 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 // src/ui/select.tsx
 import * as React6 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { useMotionTemplate as useMotionTemplate2, useMotionValue as useMotionValue2, motion as motion2 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
-  SelectPrimitive.Trigger,
+var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => {
+  const radius = 100;
+  const [visible, setVisible] = React6.useState(false);
+  let mouseX = useMotionValue2(0);
+  let mouseY = useMotionValue2(0);
+  function handleMouseMove({ currentTarget, clientX, clientY }) {
+    let { left, top } = currentTarget.getBoundingClientRect();
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+  return /* @__PURE__ */ jsx7(
+    motion2.div,
+    {
+      style: {
+        background: useMotionTemplate2`
+          radial-gradient(
+            ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
+            var(--timberwolf),
+            transparent 80%
+          )
+        `
+      },
+      onMouseMove: handleMouseMove,
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      className: "p-[2px] rounded-lg transition duration-300 group/input",
+      children: /* @__PURE__ */ jsxs3(
+        SelectPrimitive.Trigger,
+        {
+          ref,
+          className: cn(
+            "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md bg-zinc-800 text-white px-3 py-2 text-sm border-none shadow-[0px_0px_1px_1px_var(--neutral-700)] group-hover/input:shadow-none transition duration-400 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx7(
+              "svg",
+              {
+                className: "h-4 w-4 opacity-50",
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  SelectPrimitive.ScrollUpButton,
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-neutral-700 bg-zinc-800 px-3 py-2 text-sm text-white shadow-sm ring-offset-background placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-600 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex cursor-default items-center justify-center py-1",
       className
     ),
     ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx7(
-        "svg",
-        {
-          className: "h-4 w-4 opacity-50",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
-        }
-      ) })
-    ]
+    children: /* @__PURE__ */ jsx7(
+      "svg",
+      {
+        className: "h-4 w-4",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx7("path", { d: "m18 15-6-6-6 6" })
+      }
+    )
   }
 ));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx7(
-  SelectPrimitive.Content,
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  SelectPrimitive.ScrollDownButton,
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-700 bg-zinc-800 text-white shadow-md 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",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      "flex cursor-default items-center justify-center py-1",
       className
     ),
-    position,
     ...props,
     children: /* @__PURE__ */ jsx7(
-      SelectPrimitive.Viewport,
+      "svg",
       {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
+        className: "h-4 w-4",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
       }
     )
   }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-700 bg-zinc-800 text-white shadow-md 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",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx7(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx7(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx7(SelectScrollDownButton, {})
+    ]
+  }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
@@ -376,12 +462,12 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-white/10 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-white/10 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx7("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx7("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(
         "svg",
         {
           className: "h-4 w-4",
@@ -413,27 +499,27 @@ var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
     ...props
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 // src/ui/animated-tooltip.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import {
-  motion as motion2,
+  motion as motion3,
   useTransform,
-  useMotionValue as useMotionValue2,
+  useMotionValue as useMotionValue3,
   useSpring
 } from "motion/react";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var AnimatedTooltip = ({
   items
 }) => {
-  const [hoveredIndex, setHoveredIndex] = useState2(null);
+  const [hoveredIndex, setHoveredIndex] = useState3(null);
   const springConfig = { stiffness: 100, damping: 5 };
-  const x = useMotionValue2(0);
+  const x = useMotionValue3(0);
   const rotate = useSpring(
     useTransform(x, [-100, 100], [-45, 45]),
     springConfig
@@ -454,7 +540,7 @@ var AnimatedTooltip = ({
       onMouseLeave: () => setHoveredIndex(null),
       children: [
         hoveredIndex === item.id && /* @__PURE__ */ jsxs4(
-          motion2.div,
+          motion3.div,
           {
             initial: { opacity: 0, y: 20, scale: 0.6 },
             animate: {
@@ -500,15 +586,15 @@ var AnimatedTooltip = ({
 };
 
 // src/ui/card-hover-effect.tsx
-import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
+import { AnimatePresence as AnimatePresence2, motion as motion4 } from "motion/react";
 import Link from "next/link";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var HoverEffect = ({
   items,
   className
 }) => {
-  let [hoveredIndex, setHoveredIndex] = useState3(null);
+  let [hoveredIndex, setHoveredIndex] = useState4(null);
   return /* @__PURE__ */ jsx9(
     "div",
     {
@@ -525,7 +611,7 @@ var HoverEffect = ({
           onMouseLeave: () => setHoveredIndex(null),
           children: [
             /* @__PURE__ */ jsx9(AnimatePresence2, { children: hoveredIndex === idx && /* @__PURE__ */ jsx9(
-              motion3.span,
+              motion4.span,
               {
                 className: "absolute inset-0 h-full w-full bg-neutral-400/[0.5] block rounded-3xl",
                 layoutId: "hoverBackground",
@@ -605,16 +691,16 @@ var HoverCardDescription = ({
 };
 
 // src/ui/flip-words.tsx
-import { useCallback, useEffect, useState as useState4 } from "react";
-import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
+import { useCallback, useEffect, useState as useState5 } from "react";
+import { AnimatePresence as AnimatePresence3, motion as motion5 } from "motion/react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var FlipWords = ({
   words,
   duration = 3e3,
   className
 }) => {
-  const [currentWord, setCurrentWord] = useState4(words[0]);
-  const [isAnimating, setIsAnimating] = useState4(false);
+  const [currentWord, setCurrentWord] = useState5(words[0]);
+  const [isAnimating, setIsAnimating] = useState5(false);
   const startAnimation = useCallback(() => {
     const word = words[words.indexOf(currentWord) + 1] || words[0];
     setCurrentWord(word);
@@ -633,7 +719,7 @@ var FlipWords = ({
         setIsAnimating(false);
       },
       children: /* @__PURE__ */ jsx10(
-        motion4.div,
+        motion5.div,
         {
           initial: {
             opacity: 0,
@@ -661,7 +747,7 @@ var FlipWords = ({
             className
           ),
           children: currentWord.split(" ").map((word, wordIndex) => /* @__PURE__ */ jsxs6(
-            motion4.span,
+            motion5.span,
             {
               initial: { opacity: 0, y: 10, filter: "blur(8px)" },
               animate: { opacity: 1, y: 0, filter: "blur(0px)" },
@@ -672,7 +758,7 @@ var FlipWords = ({
               className: "inline-block whitespace-nowrap",
               children: [
                 word.split("").map((letter, letterIndex) => /* @__PURE__ */ jsx10(
-                  motion4.span,
+                  motion5.span,
                   {
                     initial: { opacity: 0, y: 10, filter: "blur(8px)" },
                     animate: { opacity: 1, y: 0, filter: "blur(0px)" },
@@ -699,21 +785,21 @@ var FlipWords = ({
 
 // src/ui/hero-highlight.tsx
 import {
-  useMotionValue as useMotionValue3,
-  motion as motion5,
-  useMotionTemplate as useMotionTemplate2,
+  useMotionValue as useMotionValue4,
+  motion as motion6,
+  useMotionTemplate as useMotionTemplate3,
   animate
 } from "motion/react";
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var HeroHighlight = ({
   children,
   className,
   containerClassName
 }) => {
-  let mouseX = useMotionValue3(0);
-  let mouseY = useMotionValue3(0);
-  const [isHoverable, setIsHoverable] = useState5(false);
+  let mouseX = useMotionValue4(0);
+  let mouseY = useMotionValue4(0);
+  const [isHoverable, setIsHoverable] = useState6(false);
   useEffect2(() => {
     const mediaQuery = window.matchMedia("(pointer: fine)");
     setIsHoverable(mediaQuery.matches);
@@ -755,18 +841,18 @@ var HeroHighlight = ({
       children: [
         /* @__PURE__ */ jsx11("div", { className: "absolute inset-0 bg-dot-thick-neutral-800 pointer-events-none" }),
         /* @__PURE__ */ jsx11(
-          motion5.div,
+          motion6.div,
           {
             className: "pointer-events-none bg-dot-thick-gray-100 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100",
             style: {
-              WebkitMaskImage: useMotionTemplate2`
+              WebkitMaskImage: useMotionTemplate3`
             radial-gradient(
               200px circle at ${mouseX}px ${mouseY}px,
               black 0%,
               transparent 100%
             )
           `,
-              maskImage: useMotionTemplate2`
+              maskImage: useMotionTemplate3`
             radial-gradient(
               200px circle at ${mouseX}px ${mouseY}px,
               black 0%,
@@ -786,7 +872,7 @@ var Highlight = ({
   className
 }) => {
   return /* @__PURE__ */ jsx11(
-    motion5.span,
+    motion6.span,
     {
       initial: {
         backgroundSize: "0% 100%"
@@ -813,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 />");
   }
@@ -833,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",
@@ -846,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 })
       ]
     }
   ) });
@@ -859,7 +1486,7 @@ var ChartStyle = ({ id, config }) => {
   if (!colorConfig.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -894,7 +1521,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React10.useMemo(() => {
+  const tooltipLabel = React15.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -903,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,
@@ -922,7 +1549,7 @@ function ChartTooltipContent({
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn(
@@ -931,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(
@@ -961,7 +1588,7 @@ function ChartTooltipContent({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: cn(
@@ -969,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() })
                     ]
                   }
                 )
@@ -998,7 +1625,7 @@ function ChartLegendContent({
   if (!payload?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: cn(
@@ -1009,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]",
@@ -1051,6 +1678,8 @@ export {
   AnimatedTooltip,
   Badge,
   Button,
+  Calendar,
+  CalendarDayButton,
   Card,
   CardContent,
   CardDescription,
@@ -1063,6 +1692,8 @@ export {
   ChartStyle,
   ChartTooltip,
   ChartTooltipContent,
+  DatePicker,
+  DateTimePicker,
   Dialog,
   DialogClose,
   DialogContent,
@@ -1082,14 +1713,21 @@ export {
   HoverEffect,
   Input,
   Label,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  TimePicker,
   badgeVariants,
   buttonVariants
 };