@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/tilt-card/tilt-card.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function clamp(value, max) {
+  return Math.min(Math.max(value, -max), max);
+}
+const TiltCard = ({
+  children,
+  className,
+  maxTilt = 12,
+  ref,
+  style,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const [transform, setTransform] = React.useState();
+  const handlePointerMove = (event) => {
+    if (reduced) {
+      return;
+    }
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const offsetX = (event.clientX - bounds.left) / bounds.width - 0.5;
+    const offsetY = (event.clientY - bounds.top) / bounds.height - 0.5;
+    const rotateY = clamp(offsetX * maxTilt * 2, maxTilt);
+    const rotateX = clamp(-offsetY * maxTilt * 2, maxTilt);
+    setTransform(
+      `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "transition-transform duration-200 ease-out will-change-transform",
+        className
+      ),
+      onPointerLeave: () => {
+        setTransform(void 0);
+      },
+      onPointerMove: handlePointerMove,
+      ref,
+      style: { transform, ...style },
+      ...props,
+      children
+    }
+  );
+};
+TiltCard.displayName = "TiltCard";
+export {
+  TiltCard
+};

package/dist/components/time-field/index.js

@@ -0,0 +1,4 @@
+import { TimeField } from "./time-field";
+export {
+  TimeField
+};

package/dist/components/time-field/time-field.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils";
+const TimeField = ({
+  className,
+  defaultValue = "",
+  onValueChange,
+  ref,
+  value,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(Clock, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background py-2 pl-9 pr-3 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&::-webkit-calendar-picker-indicator]:opacity-60",
+          className
+        ),
+        onChange: (event) => {
+          if (value === void 0) {
+            setInternalValue(event.target.value);
+          }
+          onValueChange?.(event.target.value);
+        },
+        ref,
+        type: "time",
+        value: currentValue
+      }
+    )
+  ] });
+};
+TimeField.displayName = "TimeField";
+export {
+  TimeField
+};

package/dist/components/time-picker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker } from "./time-picker";
+export {
+  TimePicker
+};

package/dist/components/time-picker/time-picker.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+function pad(value) {
+  return value.toString().padStart(2, "0");
+}
+function buildOptions(count, step) {
+  return Array.from(
+    { length: Math.ceil(count / step) },
+    (_unused, index) => pad(index * step)
+  );
+}
+function splitTime(value) {
+  const [hour = "", minute = ""] = value.split(":");
+  return { hour, minute };
+}
+function TimeColumn({ label, onSelect, options, selected }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: "flex max-h-56 flex-col gap-1 overflow-y-auto px-1",
+      role: "listbox",
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-selected": option === selected,
+          className: cn(
+            "rounded-sm px-3 py-1.5 text-sm tabular-nums outline-none transition-colors hover:bg-accent focus-visible:bg-accent",
+            option === selected && "bg-primary text-primary-foreground hover:bg-primary"
+          ),
+          onClick: () => {
+            onSelect(option);
+          },
+          role: "option",
+          type: "button",
+          children: option
+        },
+        option
+      ))
+    }
+  );
+}
+const TimePicker = ({
+  className,
+  defaultValue = "",
+  minuteStep = 5,
+  onValueChange,
+  placeholder = "Select time",
+  ref,
+  value
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const { hour, minute } = splitTime(currentValue);
+  const commit = (nextHour, nextMinute) => {
+    const next = `${nextHour || "00"}:${nextMinute || "00"}`;
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn(
+          "w-full justify-start text-left font-normal",
+          !currentValue && "text-muted-foreground",
+          className
+        ),
+        ref,
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(Clock, { className: "mr-2 size-4" }),
+          currentValue || placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: "Hour",
+          onSelect: (nextHour) => {
+            commit(nextHour, minute);
+          },
+          options: buildOptions(24, 1),
+          selected: hour
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: "Minute",
+          onSelect: (nextMinute) => {
+            commit(hour, nextMinute);
+          },
+          options: buildOptions(60, minuteStep),
+          selected: minute
+        }
+      )
+    ] }) })
+  ] });
+};
+TimePicker.displayName = "TimePicker";
+export {
+  TimePicker
+};

package/dist/components/timeline/timeline.js

@@ -2,8 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
-  useContext,
+  use,
   useMemo
 } from "react";
 import { cva } from "class-variance-authority";
@@ -59,7 +58,7 @@ const TimelineContext = createContext({
   orientation: "vertical"
 });
 function useTimelineOrientation() {
-  return useContext(TimelineContext).orientation;
+  return use(TimelineContext).orientation;
 }
 const timelineVariants = cva("flex", {
   defaultVariants: {
@@ -72,25 +71,29 @@ const timelineVariants = cva("flex", {
     }
   }
 });
-const Timeline = forwardRef(
-  ({ children, className, orientation, ...rest }, ref) => {
-    const resolvedOrientation = orientation ?? "vertical";
-    const contextValue = useMemo(
-      () => ({ orientation: resolvedOrientation }),
-      [resolvedOrientation]
-    );
-    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "ol",
-      {
-        className: cn(timelineVariants({ orientation }), className),
-        "data-orientation": resolvedOrientation,
-        ref,
-        ...rest,
-        children
-      }
-    ) });
-  }
-);
+const Timeline = ({
+  children,
+  className,
+  orientation,
+  ref,
+  ...rest
+}) => {
+  const resolvedOrientation = orientation ?? "vertical";
+  const contextValue = useMemo(
+    () => ({ orientation: resolvedOrientation }),
+    [resolvedOrientation]
+  );
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn(timelineVariants({ orientation }), className),
+      "data-orientation": resolvedOrientation,
+      ref,
+      ...rest,
+      children
+    }
+  ) });
+};
 Timeline.displayName = "Timeline";
 function Marker({ color, icon, status }) {
   const palette = STATUS_CLASSES[status];
@@ -186,50 +189,51 @@ function ItemBody({
     }
   );
 }
-const TimelineItem = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color,
-      date,
-      description,
-      icon,
-      isLast = false,
-      status = "upcoming",
-      title,
-      ...rest
-    } = props;
-    const orientation = useTimelineOrientation();
-    return /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: cn(
-          "relative",
-          orientation === "horizontal" ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1" : "flex items-start gap-3 pb-6 last:pb-0",
-          className
-        ),
-        "data-status": status,
-        ref,
-        ...rest,
-        children: [
-          isLast ? null : /* @__PURE__ */ jsx(Connector, { orientation, status }),
-          /* @__PURE__ */ jsx(Marker, { color, icon, status }),
-          /* @__PURE__ */ jsx(
-            ItemBody,
-            {
-              date,
-              description,
-              orientation,
-              title,
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const TimelineItem = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    color,
+    date,
+    description,
+    icon,
+    isLast = false,
+    status = "upcoming",
+    title,
+    ...rest
+  } = props;
+  const orientation = useTimelineOrientation();
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "relative",
+        orientation === "horizontal" ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1" : "flex items-start gap-3 pb-6 last:pb-0",
+        className
+      ),
+      "data-status": status,
+      ref,
+      ...rest,
+      children: [
+        isLast ? null : /* @__PURE__ */ jsx(Connector, { orientation, status }),
+        /* @__PURE__ */ jsx(Marker, { color, icon, status }),
+        /* @__PURE__ */ jsx(
+          ItemBody,
+          {
+            date,
+            description,
+            orientation,
+            title,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
 TimelineItem.displayName = "TimelineItem";
 export {
   Timeline,

package/dist/components/timeline-scrubber/timeline-scrubber.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useId
 } from "react";
 import { cn } from "../../lib/utils";
@@ -105,7 +104,10 @@ const TickMark = (props) => {
     }
   );
 };
-const TimelineScrubber = forwardRef((props, ref) => {
+const TimelineScrubber = ({
+  ref,
+  ...props
+}) => {
   const {
     className,
     end,
@@ -172,7 +174,7 @@ const TimelineScrubber = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 TimelineScrubber.displayName = "TimelineScrubber";
 export {
   TimelineScrubber

package/dist/components/tldr-section/tldr-section.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useReducer, useRef, useState } from "react";
+function skeletonReducer(_state, action) {
+  return action === "show";
+}
 function TLDRSection({ children, label }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [showSkeleton, setShowSkeleton] = useState(false);
+  const [showSkeleton, dispatchSkeleton] = useReducer(skeletonReducer, false);
   const hasBeenOpenedRef = useRef(false);
   const timerReference = useRef(null);
   useEffect(() => {
@@ -12,11 +15,11 @@ function TLDRSection({ children, label }) {
         clearTimeout(timerReference.current);
       }
       const rafId = requestAnimationFrame(() => {
-        setShowSkeleton(true);
+        dispatchSkeleton("show");
         hasBeenOpenedRef.current = true;
       });
       timerReference.current = setTimeout(() => {
-        setShowSkeleton(false);
+        dispatchSkeleton("hide");
         timerReference.current = null;
       }, 800);
       return () => {
@@ -25,7 +28,7 @@ function TLDRSection({ children, label }) {
           clearTimeout(timerReference.current);
           timerReference.current = null;
         }
-        setShowSkeleton(false);
+        dispatchSkeleton("hide");
       };
     }
     return () => {
@@ -33,7 +36,7 @@ function TLDRSection({ children, label }) {
         clearTimeout(timerReference.current);
         timerReference.current = null;
       }
-      setShowSkeleton(false);
+      dispatchSkeleton("hide");
     };
   }, [isExpanded]);
   return /* @__PURE__ */ jsxs("div", { className: "my-8 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [

package/dist/components/toast/toast.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const toastVariants = cva(
@@ -17,16 +16,26 @@ const toastVariants = cva(
     }
   }
 );
-const Toast = React.forwardRef(({ className, variant, ...props }, reference) => /* @__PURE__ */ jsx(
+const Toast = ({
+  className,
+  ref: reference,
+  variant,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(toastVariants({ variant }), className),
     ref: reference,
     ...props
   }
-));
+);
 Toast.displayName = "Toast";
-const ToastAction = React.forwardRef(({ altText, className, ...props }, reference) => /* @__PURE__ */ jsx(
+const ToastAction = ({
+  altText,
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "button",
   {
     className: cn(
@@ -37,9 +46,13 @@ const ToastAction = React.forwardRef(({ altText, className, ...props }, referenc
     type: "button",
     ...props
   }
-));
+);
 ToastAction.displayName = "ToastAction";
-const ToastClose = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsxs(
+const ToastClose = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   "button",
   {
     className: cn(
@@ -55,25 +68,33 @@ const ToastClose = React.forwardRef(({ className, ...props }, reference) => /* @
       "\u2715"
     ]
   }
-));
+);
 ToastClose.displayName = "ToastClose";
-const ToastTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const ToastTitle = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn("text-sm font-semibold", className),
     ref: reference,
     ...props
   }
-));
+);
 ToastTitle.displayName = "ToastTitle";
-const ToastDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const ToastDescription = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn("text-sm opacity-90", className),
     ref: reference,
     ...props
   }
-));
+);
 ToastDescription.displayName = "ToastDescription";
 export {
   Toast,

package/dist/components/toggle/toggle.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -24,14 +23,20 @@ const toggleVariants = cva(
     }
   }
 );
-const Toggle = forwardRef(({ className, size, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+const Toggle = ({
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}) => /* @__PURE__ */ jsx(
   TogglePrimitive.Root,
   {
     className: cn(toggleVariants({ className, size, variant })),
     ref,
     ...props
   }
-));
+);
 Toggle.displayName = TogglePrimitive.Root.displayName;
 export {
   Toggle,

package/dist/components/toggle-group/toggle-group.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cn } from "../../lib/utils";
 import { toggleVariants } from "../toggle/toggle";
@@ -8,7 +8,14 @@ const ToggleGroupContext = createContext({
   size: "default",
   variant: "default"
 });
-const ToggleGroup = forwardRef(({ children, className, size, variant, ...props }, ref) => {
+const ToggleGroup = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}) => {
   const contextValue = useMemo(() => ({ size, variant }), [size, variant]);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Root,
@@ -19,10 +26,17 @@ const ToggleGroup = forwardRef(({ children, className, size, variant, ...props }
       children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children })
     }
   );
-});
+};
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = forwardRef(({ children, className, size, variant, ...props }, ref) => {
-  const context = useContext(ToggleGroupContext);
+const ToggleGroupItem = ({
+  children,
+  className,
+  ref,
+  size,
+  variant,
+  ...props
+}) => {
+  const context = use(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -38,7 +52,7 @@ const ToggleGroupItem = forwardRef(({ children, className, size, variant, ...pro
       children
     }
   );
-});
+};
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 export {
   ToggleGroup,

package/dist/components/toolbar/index.js

@@ -0,0 +1,8 @@
+import {
+  Toolbar,
+  ToolbarSeparator
+} from "./toolbar";
+export {
+  Toolbar,
+  ToolbarSeparator
+};