@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/liquid-glass/liquid-glass.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const LiquidGlass = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative overflow-hidden rounded-xl border border-border/50 bg-card/50 backdrop-blur-md",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-0 motion-reduce:animate-none",
+              style: {
+                animation: "vllnt-liquid-shift 8s ease-in-out infinite",
+                background: "linear-gradient(120deg, transparent, oklch(var(--primary) / 0.18), transparent, oklch(var(--accent) / 0.18), transparent)",
+                backgroundSize: "200% 200%"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+        ]
+      }
+    );
+  }
+);
+LiquidGlass.displayName = "LiquidGlass";
+export {
+  LiquidGlass
+};

package/dist/components/list-box/index.js

@@ -0,0 +1,8 @@
+import {
+  ListBox,
+  ListBoxItem
+} from "./list-box";
+export {
+  ListBox,
+  ListBoxItem
+};

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

@@ -0,0 +1,127 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+const ListBoxContext = React.createContext(null);
+function useListBoxContext() {
+  const context = React.useContext(ListBoxContext);
+  if (!context) {
+    throw new Error("ListBoxItem must be used within a ListBox");
+  }
+  return context;
+}
+function nextSelection(current, item, selectionMode) {
+  if (selectionMode === "single") {
+    return [item];
+  }
+  return current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item];
+}
+function useListBoxSelection({
+  defaultValue,
+  onValueChange,
+  selectionMode,
+  value
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const selectedValues = value ?? internalValue;
+  const select = (item) => {
+    const next = nextSelection(selectedValues, item, selectionMode);
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+  return { select, selectedValues };
+}
+const ListBox = React.forwardRef(
+  ({
+    children,
+    className,
+    defaultValue = [],
+    disabled = false,
+    label,
+    onValueChange,
+    selectionMode = "single",
+    value
+  }, ref) => {
+    const { select, selectedValues } = useListBoxSelection({
+      defaultValue,
+      onValueChange,
+      selectionMode,
+      value
+    });
+    const context = React.useMemo(
+      () => ({ disabled, select, selectedValues }),
+      [disabled, select, selectedValues]
+    );
+    return /* @__PURE__ */ jsx(ListBoxContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": label,
+        "aria-multiselectable": selectionMode === "multiple",
+        className: cn(
+          "flex flex-col gap-0.5 rounded-md border border-input bg-background p-1",
+          className
+        ),
+        ref,
+        role: "listbox",
+        children
+      }
+    ) });
+  }
+);
+ListBox.displayName = "ListBox";
+const ListBoxItem = React.forwardRef(
+  ({ children, className, disabled = false, value }, ref) => {
+    const group = useListBoxContext();
+    const selected = group.selectedValues.includes(value);
+    const isDisabled = disabled || group.disabled;
+    const activate = () => {
+      if (!isDisabled) {
+        group.select(value);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": isDisabled || void 0,
+        "aria-selected": selected,
+        className: cn(
+          "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          selected && "bg-accent text-accent-foreground",
+          isDisabled && "pointer-events-none opacity-50",
+          className
+        ),
+        onClick: activate,
+        onKeyDown: handleKeyDown,
+        ref,
+        role: "option",
+        tabIndex: isDisabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: cn(
+                "size-4 shrink-0",
+                selected ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+        ]
+      }
+    );
+  }
+);
+ListBoxItem.displayName = "ListBoxItem";
+export {
+  ListBox,
+  ListBoxItem
+};

package/dist/components/live-cursor/index.js

@@ -0,0 +1,6 @@
+import {
+  LiveCursor
+} from "./live-cursor";
+export {
+  LiveCursor
+};

package/dist/components/live-cursor/live-cursor.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Live cursor"
+};
+const LiveCursor = forwardRef(
+  (props, ref) => {
+    const { className, color, labels, name, status, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const resolvedColor = color ?? "var(--foreground)";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-30 flex items-start gap-1",
+          className
+        ),
+        "data-live-cursor": true,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "-ml-1 -mt-1 drop-shadow-sm",
+              "data-live-cursor-pointer": true,
+              fill: resolvedColor,
+              height: 18,
+              viewBox: "0 0 16 18",
+              width: 16,
+              children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" })
+            }
+          ),
+          name === null || name === void 0 ? null : /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+              "data-live-cursor-chip": true,
+              style: { backgroundColor: resolvedColor },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: name }),
+                status ? /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-80", "data-live-cursor-status": true, children: status }) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LiveCursor.displayName = "LiveCursor";
+export {
+  LiveCursor
+};

package/dist/components/live-feed/live-feed.js

@@ -1,15 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { normalizeDate } from "../../lib/format";
+import { useLiveDate } from "../../lib/use-live-date";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 import {
   SeverityBadge
 } from "../severity-badge/severity-badge";
@@ -17,32 +19,6 @@ const SECOND_MS = 1e3;
 const MINUTE_MS = 60 * SECOND_MS;
 const HOUR_MS = 60 * MINUTE_MS;
 const DAY_MS = 24 * HOUR_MS;
-function normalizeDate(input) {
-  if (input instanceof Date) {
-    return new Date(input.getTime());
-  }
-  return new Date(input);
-}
-function useLiveDate(now, tickMs) {
-  const fixedNow = React.useMemo(
-    () => now ? normalizeDate(now) : void 0,
-    [now]
-  );
-  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
-  React.useEffect(() => {
-    if (fixedNow) {
-      setLiveNow(fixedNow);
-      return;
-    }
-    const interval = window.setInterval(() => {
-      setLiveNow(/* @__PURE__ */ new Date());
-    }, tickMs);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [fixedNow, tickMs]);
-  return liveNow;
-}
 function formatRelative(eventDate, now) {
   const deltaMs = now.getTime() - eventDate.getTime();
   if (deltaMs < 5 * SECOND_MS) {
@@ -60,18 +36,20 @@ function formatRelative(eventDate, now) {
   if (deltaMs < 7 * DAY_MS) {
     return `${Math.floor(deltaMs / DAY_MS)}d ago`;
   }
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "short"
-  }).format(eventDate);
+  return SHORT_DATE_FORMATTER.format(eventDate);
 }
+const SHORT_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short"
+});
+const ABSOLUTE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  second: "2-digit"
+});
 function formatAbsolute(eventDate) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    second: "2-digit"
-  }).format(eventDate);
+  return ABSOLUTE_FORMATTER.format(eventDate);
 }
 function sortEventsDesc(events) {
   return [...events].sort(
@@ -129,7 +107,7 @@ const LiveFeed = React.forwardRef(
       [events, maxItems]
     );
     return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 gap-y-0 pb-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
           description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
@@ -139,10 +117,10 @@ const LiveFeed = React.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "relative mr-1.5 inline-flex h-2 w-2",
+              className: "relative mr-1.5 inline-flex size-2",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 animate-ping rounded-full bg-emerald-500 opacity-70" }),
-                /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })
+                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" }),
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-emerald-500" })
               ]
             }
           ),

package/dist/components/magnetic/index.js

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

package/dist/components/magnetic/magnetic.js

@@ -0,0 +1,58 @@
+"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;
+}
+const Magnetic = React.forwardRef(
+  ({ children, className, strength = 0.4, style, ...props }, ref) => {
+    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 / 2) * strength;
+      const offsetY = (event.clientY - bounds.top - bounds.height / 2) * strength;
+      setTransform(`translate(${offsetX}px, ${offsetY}px)`);
+    };
+    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
+      }
+    );
+  }
+);
+Magnetic.displayName = "Magnetic";
+export {
+  Magnetic
+};

package/dist/components/magnetic-button/index.js

@@ -0,0 +1,4 @@
+import { MagneticButton } from "./magnetic-button";
+export {
+  MagneticButton
+};

package/dist/components/magnetic-button/magnetic-button.js

@@ -0,0 +1,57 @@
+"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;
+}
+const MagneticButton = React.forwardRef(({ children, className, strength = 0.4, style, ...props }, ref) => {
+  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 / 2) * strength;
+    const offsetY = (event.clientY - bounds.top - bounds.height / 2) * strength;
+    setTransform(`translate(${offsetX}px, ${offsetY}px)`);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "transition-transform duration-200 ease-out will-change-transform",
+        className
+      ),
+      onPointerLeave: () => {
+        setTransform(void 0);
+      },
+      onPointerMove: handlePointerMove,
+      ref,
+      style: { transform, ...style },
+      type: "button",
+      ...props,
+      children
+    }
+  );
+});
+MagneticButton.displayName = "MagneticButton";
+export {
+  MagneticButton
+};

package/dist/components/map-2d/index.js

@@ -0,0 +1,20 @@
+import {
+  Map2D,
+  MapControls,
+  MapLayer,
+  MapMarker,
+  MapMarkerIcon,
+  MapPopup,
+  MapZoomIn,
+  MapZoomOut
+} from "./map-2d";
+export {
+  Map2D,
+  MapControls,
+  MapLayer,
+  MapMarker,
+  MapMarkerIcon,
+  MapPopup,
+  MapZoomIn,
+  MapZoomOut
+};