@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,6 +1,8 @@
 "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/badge";
 import {
@@ -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) {
@@ -113,57 +89,56 @@ function LiveFeedRow({
     ] })
   ] });
 }
-const LiveFeed = React.forwardRef(
-  ({
-    className,
-    description,
-    emptyLabel = "No events yet",
-    events,
-    maxItems = 50,
-    now,
-    tickMs = 3e4,
-    title = "Live feed",
-    ...props
-  }, ref) => {
-    const liveNow = useLiveDate(now, tickMs);
-    const visibleEvents = React.useMemo(
-      () => sortEventsDesc(events).slice(0, maxItems),
-      [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 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
-        ] }),
-        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "relative mr-1.5 inline-flex size-2",
-              children: [
-                /* @__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" })
-              ]
-            }
-          ),
-          " ",
-          "Live"
-        ] })
+const LiveFeed = ({
+  className,
+  description,
+  emptyLabel = "No events yet",
+  events,
+  maxItems = 50,
+  now,
+  ref,
+  tickMs = 3e4,
+  title = "Live feed",
+  ...props
+}) => {
+  const liveNow = useLiveDate(now, tickMs);
+  const visibleEvents = React.useMemo(
+    () => sortEventsDesc(events).slice(0, maxItems),
+    [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 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
       ] }),
-      /* @__PURE__ */ jsx(CardContent, { className: "pt-0", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[360px] divide-y divide-border/60 overflow-y-auto", children: visibleEvents.map((event, index) => /* @__PURE__ */ jsx(
-        LiveFeedRow,
-        {
-          event,
-          isLatest: index === 0,
-          now: liveNow
-        },
-        event.id
-      )) }) })
-    ] });
-  }
-);
+      /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "relative mr-1.5 inline-flex size-2",
+            children: [
+              /* @__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" })
+            ]
+          }
+        ),
+        " ",
+        "Live"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "pt-0", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[360px] divide-y divide-border/60 overflow-y-auto", children: visibleEvents.map((event, index) => /* @__PURE__ */ jsx(
+      LiveFeedRow,
+      {
+        event,
+        isLatest: index === 0,
+        now: liveNow
+      },
+      event.id
+    )) }) })
+  ] });
+};
 LiveFeed.displayName = "LiveFeed";
 export {
   LiveFeed

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,63 @@
+"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 = ({
+  children,
+  className,
+  ref,
+  strength = 0.4,
+  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 / 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,64 @@
+"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 = ({
+  children,
+  className,
+  ref,
+  strength = 0.4,
+  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 / 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/map-2d.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useRef,
@@ -23,7 +22,7 @@ const DEFAULT_LABELS = {
 };
 const MapContext = createContext(null);
 function useMapContext() {
-  const ctx = useContext(MapContext);
+  const ctx = use(MapContext);
   if (!ctx) {
     throw new Error("Map2D subcomponent used outside its root.");
   }
@@ -80,7 +79,12 @@ function useMapState(arguments_) {
     [pan, project, resolvedLabels, zoom, zoomIn, zoomOut]
   );
 }
-const MapControls = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const MapControls = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     "aria-label": "Map controls",
@@ -92,27 +96,35 @@ const MapControls = forwardRef(({ children, className, ...rest }, ref) => /* @__
     ...rest,
     children
   }
-));
+);
 MapControls.displayName = "MapControls";
-const ControlButton = forwardRef(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      ),
-      onClick: onActivate,
-      ref,
-      type: "button",
-      ...rest,
-      children: glyph
-    }
-  )
+const ControlButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-label": ariaLabel,
+    className: cn(
+      "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className
+    ),
+    onClick: onActivate,
+    ref,
+    type: "button",
+    ...rest,
+    children: glyph
+  }
 );
 ControlButton.displayName = "ControlButton";
-const MapZoomIn = forwardRef(({ ...rest }, ref) => {
+const MapZoomIn = ({
+  ref,
+  ...rest
+}) => {
   const { labels, zoomIn } = useMapContext();
   return /* @__PURE__ */ jsx(
     ControlButton,
@@ -124,9 +136,12 @@ const MapZoomIn = forwardRef(({ ...rest }, ref) => {
       ...rest
     }
   );
-});
+};
 MapZoomIn.displayName = "MapZoomIn";
-const MapZoomOut = forwardRef(({ ...rest }, ref) => {
+const MapZoomOut = ({
+  ref,
+  ...rest
+}) => {
   const { labels, zoomOut } = useMapContext();
   return /* @__PURE__ */ jsx(
     ControlButton,
@@ -138,9 +153,14 @@ const MapZoomOut = forwardRef(({ ...rest }, ref) => {
       ...rest
     }
   );
-});
+};
 MapZoomOut.displayName = "MapZoomOut";
-const MapMarkerIcon = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("g", { className: cn("text-primary", className), ref, ...rest, children }));
+const MapMarkerIcon = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx("g", { className: cn("text-primary", className), ref, ...rest, children });
 MapMarkerIcon.displayName = "MapMarkerIcon";
 function MarkerVisual({ children }) {
   if (children) return children;
@@ -158,82 +178,78 @@ function MarkerVisual({ children }) {
     /* @__PURE__ */ jsx("circle", { className: "fill-background", cx: "0", cy: "0", r: "2" })
   ] });
 }
-const MapMarker = forwardRef(
-  (props, ref) => {
-    const { children, className, onSelect, popup, position, title, ...rest } = props;
-    const { project } = useMapContext();
-    const point = project(position);
-    const markerId = useId();
-    const popupId = `${markerId}-popup`;
-    const labelText = title ?? (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
-    return /* @__PURE__ */ jsx("foreignObject", { height: "48", width: "48", x: point.x - 24, y: point.y - 24, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "aria-describedby": popup ? popupId : void 0,
-        "aria-label": labelText,
-        className: cn(
-          "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          className
+const MapMarker = ({
+  ref,
+  ...props
+}) => {
+  const { children, className, onSelect, popup, position, title, ...rest } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  const markerId = useId();
+  const popupId = `${markerId}-popup`;
+  const labelText = title ?? (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
+  return /* @__PURE__ */ jsx("foreignObject", { height: "48", width: "48", x: point.x - 24, y: point.y - 24, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-describedby": popup ? popupId : void 0,
+      "aria-label": labelText,
+      className: cn(
+        "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "data-marker-id": markerId,
+      onClick: onSelect,
+      ref,
+      type: "button",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "pointer-events-none size-6 overflow-visible",
+            viewBox: "-10 -10 20 20",
+            children: /* @__PURE__ */ jsx(MarkerVisual, { children })
+          }
         ),
-        "data-marker-id": markerId,
-        onClick: onSelect,
-        ref,
-        type: "button",
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "pointer-events-none size-6 overflow-visible",
-              viewBox: "-10 -10 20 20",
-              children: /* @__PURE__ */ jsx(MarkerVisual, { children })
-            }
-          ),
-          popup ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block",
-              id: popupId,
-              role: "tooltip",
-              children: popup
-            }
-          ) : null
-        ]
-      }
-    ) });
-  }
-);
-MapMarker.displayName = "MapMarker";
-const MapPopup = forwardRef(
-  (props, ref) => {
-    const { children, className, position, ...rest } = props;
-    const { project } = useMapContext();
-    const point = project(position);
-    return /* @__PURE__ */ jsx(
-      "foreignObject",
-      {
-        height: "200",
-        width: "320",
-        x: point.x - 160,
-        y: point.y - 220,
-        children: /* @__PURE__ */ jsx(
-          "div",
+        popup ? /* @__PURE__ */ jsx(
+          "span",
           {
-            className: cn(
-              "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
-              className
-            ),
-            ref,
-            ...rest,
-            children
+            className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block",
+            id: popupId,
+            role: "tooltip",
+            children: popup
           }
-        )
-      }
-    );
-  }
-);
+        ) : null
+      ]
+    }
+  ) });
+};
+MapMarker.displayName = "MapMarker";
+const MapPopup = ({
+  ref,
+  ...props
+}) => {
+  const { children, className, position, ...rest } = props;
+  const { project } = useMapContext();
+  const point = project(position);
+  return /* @__PURE__ */ jsx("foreignObject", { height: "200", width: "320", x: point.x - 160, y: point.y - 220, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  ) });
+};
 MapPopup.displayName = "MapPopup";
-const MapLayer = forwardRef((props, ref) => {
+const MapLayer = ({
+  ref,
+  ...props
+}) => {
   const {
     className,
     data,
@@ -269,7 +285,7 @@ const MapLayer = forwardRef((props, ref) => {
       })
     }
   );
-});
+};
 MapLayer.displayName = "MapLayer";
 function usePanHandlers() {
   const { height, pan, setPan, width, zoom } = useMapContext();
@@ -404,7 +420,10 @@ function bucketChildren(children) {
     { controls: null, layers: [], markers: [], popups: [] }
   );
 }
-const Map2D = forwardRef((props, ref) => {
+const Map2D = ({
+  ref,
+  ...props
+}) => {
   const {
     backdrop,
     backdropAlt,
@@ -441,7 +460,7 @@ const Map2D = forwardRef((props, ref) => {
       ]
     }
   ) });
-});
+};
 Map2D.displayName = "Map2D";
 export {
   Map2D,