@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/credit-badge/credit-badge.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { badgeVariants } from "../badge/badge";
 function getStatusLabel(status) {
@@ -26,27 +25,32 @@ function getStatusClasses(status) {
       return "border-destructive/30 bg-destructive/10 text-destructive";
   }
 }
-const CreditBadge = React.forwardRef(
-  ({ amount, className, label, status, ...props }, reference) => {
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          badgeVariants({ variant: "outline" }),
-          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getStatusClasses(status),
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
-          /* @__PURE__ */ jsx("span", { children: amount ? `${amount} \u2022 ${label ?? getStatusLabel(status)}` : label ?? getStatusLabel(status) })
-        ]
-      }
-    );
-  }
-);
+const CreditBadge = ({
+  amount,
+  className,
+  label,
+  ref: reference,
+  status,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        badgeVariants({ variant: "outline" }),
+        "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getStatusClasses(status),
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
+        /* @__PURE__ */ jsx("span", { children: amount ? `${amount} \u2022 ${label ?? getStatusLabel(status)}` : label ?? getStatusLabel(status) })
+      ]
+    }
+  );
+};
 CreditBadge.displayName = "CreditBadge";
 export {
   CreditBadge

package/dist/components/curriculum/curriculum.js

@@ -4,8 +4,8 @@ import {
   Children,
   createContext,
   isValidElement,
+  use,
   useCallback,
-  useContext,
   useMemo,
   useState
 } from "react";
@@ -22,7 +22,7 @@ import {
 import { cn } from "../../lib/utils";
 const CurriculumContext = createContext(null);
 function useCurriculumContext() {
-  const ctx = useContext(CurriculumContext);
+  const ctx = use(CurriculumContext);
   if (!ctx) {
     throw new Error("CurriculumModule must be used within a Curriculum");
   }

package/dist/components/cursor/cursor.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePointerPosition() {
+  const [point, setPoint] = React.useState();
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const onMove = (event) => {
+      setPoint({ x: event.clientX, y: event.clientY });
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+    };
+  }, []);
+  return point;
+}
+const Cursor = ({
+  className,
+  ref,
+  size = 24,
+  style,
+  ...props
+}) => {
+  const point = usePointerPosition();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none fixed left-0 top-0 z-50 -translate-x-1/2 -translate-y-1/2 rounded-full border border-foreground bg-foreground/20 backdrop-invert transition-transform duration-100 ease-out motion-reduce:transition-none",
+        point ? "opacity-100" : "opacity-0",
+        className
+      ),
+      ref,
+      style: {
+        height: `${size}px`,
+        transform: point ? `translate(${point.x}px, ${point.y}px) translate(-50%, -50%)` : void 0,
+        width: `${size}px`,
+        ...style
+      },
+      ...props
+    }
+  );
+};
+Cursor.displayName = "Cursor";
+export {
+  Cursor
+};

package/dist/components/cursor/index.js

@@ -0,0 +1,4 @@
+import { Cursor } from "./cursor";
+export {
+  Cursor
+};

package/dist/components/data-list/data-list.js

@@ -34,61 +34,75 @@ const dataListItemVariants = cva(
 const DataListContext = React.createContext({
   density: "default"
 });
-const DataList = React.forwardRef(
-  ({ className, density, ...props }, reference) => {
-    const resolvedDensity = density ?? "default";
-    const contextValue = React.useMemo(
-      () => ({ density: resolvedDensity }),
-      [resolvedDensity]
-    );
-    return /* @__PURE__ */ jsx(DataListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "dl",
-      {
-        className: cn(
-          dataListVariants({ density: resolvedDensity }),
-          className
-        ),
-        ref: reference,
-        ...props
-      }
-    ) });
-  }
-);
+const DataList = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}) => {
+  const resolvedDensity = density ?? "default";
+  const contextValue = React.useMemo(
+    () => ({ density: resolvedDensity }),
+    [resolvedDensity]
+  );
+  return /* @__PURE__ */ jsx(DataListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(
+        dataListVariants({ density: resolvedDensity }),
+        className
+      ),
+      ref: reference,
+      ...props
+    }
+  ) });
+};
 DataList.displayName = "DataList";
-const DataListItem = React.forwardRef(
-  ({ className, density, ...props }, reference) => {
-    const context = React.useContext(DataListContext);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          dataListItemVariants({ density: density ?? context.density }),
-          className
-        ),
-        ref: reference,
-        ...props
-      }
-    );
-  }
-);
+const DataListItem = ({
+  className,
+  density,
+  ref: reference,
+  ...props
+}) => {
+  const context = React.use(DataListContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        dataListItemVariants({ density: density ?? context.density }),
+        className
+      ),
+      ref: reference,
+      ...props
+    }
+  );
+};
 DataListItem.displayName = "DataListItem";
-const DataListLabel = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DataListLabel = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "dt",
   {
     className: cn("text-sm font-medium text-muted-foreground", className),
     ref: reference,
     ...props
   }
-));
+);
 DataListLabel.displayName = "DataListLabel";
-const DataListValue = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DataListValue = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "dd",
   {
     className: cn("m-0 text-sm leading-6 text-foreground", className),
     ref: reference,
     ...props
   }
-));
+);
 DataListValue.displayName = "DataListValue";
 export {
   DataList,

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarDays } from "lucide-react";
+import { cn } from "../../lib/utils";
+const DateField = ({
+  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(CalendarDays, { 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: "date",
+        value: currentValue
+      }
+    )
+  ] });
+};
+DateField.displayName = "DateField";
+export {
+  DateField
+};

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

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

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

@@ -11,58 +11,57 @@ const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "long",
   year: "numeric"
 });
-const DatePicker = React.forwardRef(
-  ({
-    buttonClassName,
-    calendarProps,
-    className,
-    onValueChange,
-    placeholder = "Pick a date",
-    value
-  }, reference) => {
-    const [open, setOpen] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState(
-      value
-    );
-    const selectedDate = value ?? internalValue;
-    const handleSelect = (nextDate) => {
-      if (value === void 0) {
-        setInternalValue(nextDate);
+const DatePicker = ({
+  buttonClassName,
+  calendarProps,
+  className,
+  onValueChange,
+  placeholder = "Pick a date",
+  ref: reference,
+  value
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState(
+    () => value
+  );
+  const selectedDate = value ?? internalValue;
+  const handleSelect = (nextDate) => {
+    if (value === void 0) {
+      setInternalValue(nextDate);
+    }
+    onValueChange?.(nextDate);
+    if (nextDate) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn(
+          "w-full justify-start text-left font-normal",
+          !selectedDate && "text-muted-foreground",
+          buttonClassName
+        ),
+        ref: reference,
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }),
+          selectedDate ? defaultDateFormatter.format(selectedDate) : placeholder
+        ]
       }
-      onValueChange?.(nextDate);
-      if (nextDate) {
-        setOpen(false);
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-auto p-0", className), children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        onSelect: handleSelect,
+        selected: selectedDate,
+        ...calendarProps
       }
-    };
-    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          className: cn(
-            "w-full justify-start text-left font-normal",
-            !selectedDate && "text-muted-foreground",
-            buttonClassName
-          ),
-          ref: reference,
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }),
-            selectedDate ? defaultDateFormatter.format(selectedDate) : placeholder
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-auto p-0", className), children: /* @__PURE__ */ jsx(
-        Calendar,
-        {
-          mode: "single",
-          onSelect: handleSelect,
-          selected: selectedDate,
-          ...calendarProps
-        }
-      ) })
-    ] });
-  }
-);
+    ) })
+  ] });
+};
 DatePicker.displayName = "DatePicker";
 export {
   DatePicker

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Calendar } from "../calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+const rangeFormatter = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+function formatRange(range) {
+  if (!range?.from) {
+    return void 0;
+  }
+  if (!range.to) {
+    return rangeFormatter.format(range.from);
+  }
+  return `${rangeFormatter.format(range.from)} \u2013 ${rangeFormatter.format(range.to)}`;
+}
+const DateRangePicker = ({
+  buttonClassName,
+  className,
+  defaultValue,
+  numberOfMonths = 2,
+  onValueChange,
+  placeholder = "Pick a date range",
+  ref,
+  value
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const selected = value ?? internalValue;
+  const label = formatRange(selected);
+  const handleSelect = (range) => {
+    if (value === void 0) {
+      setInternalValue(range);
+    }
+    onValueChange?.(range);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn(
+          "w-full justify-start text-left font-normal",
+          !label && "text-muted-foreground",
+          buttonClassName
+        ),
+        ref,
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }),
+          label ?? placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-auto p-0", className), children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "range",
+        numberOfMonths,
+        onSelect: handleSelect,
+        selected
+      }
+    ) })
+  ] });
+};
+DateRangePicker.displayName = "DateRangePicker";
+export {
+  DateRangePicker
+};

package/dist/components/date-range-picker/index.js

@@ -0,0 +1,6 @@
+import {
+  DateRangePicker
+} from "./date-range-picker";
+export {
+  DateRangePicker
+};

package/dist/components/dialog/dialog.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -8,7 +7,11 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DialogOverlay = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -18,9 +21,14 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /
     ref: reference,
     ...props
   }
-));
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ children, className, ...props }, reference) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+const DialogContent = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -40,7 +48,7 @@ const DialogContent = React.forwardRef(({ children, className, ...props }, refer
       ]
     }
   )
-] }));
+] });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({
   className,
@@ -70,7 +78,11 @@ const DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DialogTitle = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     className: cn(
@@ -80,16 +92,20 @@ const DialogTitle = React.forwardRef(({ className, ...props }, reference) => /*
     ref: reference,
     ...props
   }
-));
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DialogDescription = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     className: cn("text-sm text-muted-foreground", className),
     ref: reference,
     ...props
   }
-));
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export {
   Dialog,

package/dist/components/dock/dock.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DockPointerContext = React.createContext(null);
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+}
+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 magnify(distance) {
+  const range = 100;
+  const clamped = Math.min(Math.abs(distance), range);
+  return 1 + 0.5 * (1 - clamped / range);
+}
+const Dock = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  const [pointerX, setPointerX] = React.useState(null);
+  return /* @__PURE__ */ jsx(DockPointerContext.Provider, { value: pointerX, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-end gap-2 rounded-2xl border bg-card/60 p-2 backdrop-blur",
+        className
+      ),
+      onPointerLeave: () => {
+        setPointerX(null);
+      },
+      onPointerMove: (event) => {
+        setPointerX(event.clientX);
+      },
+      ref,
+      ...props,
+      children
+    }
+  ) });
+};
+Dock.displayName = "Dock";
+function useDockScale(reference, pointerX, reduced) {
+  if (reduced || pointerX === null || reference.current === null) {
+    return 1;
+  }
+  const bounds = reference.current.getBoundingClientRect();
+  const center = bounds.left + bounds.width / 2;
+  return magnify(pointerX - center);
+}
+const DockIcon = ({
+  children,
+  className,
+  ref,
+  style,
+  ...props
+}) => {
+  const pointerX = React.use(DockPointerContext);
+  const reduced = usePrefersReducedMotion();
+  const reference = React.useRef(null);
+  const scale = useDockScale(reference, pointerX, reduced);
+  const setReferences = React.useCallback(
+    (node) => {
+      reference.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex aspect-square w-12 items-center justify-center rounded-xl bg-accent text-accent-foreground transition-transform",
+        className
+      ),
+      ref: setReferences,
+      style: { transform: `scale(${scale})`, ...style },
+      ...props,
+      children
+    }
+  );
+};
+DockIcon.displayName = "DockIcon";
+export {
+  Dock,
+  DockIcon
+};