@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/world-breadcrumbs/world-breadcrumbs.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const KIND_GLYPH = {
   agent: "\u25C7",
@@ -53,61 +50,62 @@ const Crumb = (props) => {
     }
   );
 };
-const WorldBreadcrumbs = forwardRef(
-  (props, ref) => {
-    const { className, crumbs, labels, onSelect, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (crumbs.length === 0) {
-      return /* @__PURE__ */ jsx(
-        "nav",
-        {
-          "aria-label": resolvedLabels.region,
-          className: cn(
-            "inline-flex items-center text-xs text-muted-foreground",
-            className
-          ),
-          "data-world-breadcrumbs": true,
-          "data-world-breadcrumbs-state": "empty",
-          ref,
-          ...rest,
-          children: resolvedLabels.empty
-        }
-      );
-    }
+const WorldBreadcrumbs = ({
+  ref,
+  ...props
+}) => {
+  const { className, crumbs, labels, onSelect, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (crumbs.length === 0) {
     return /* @__PURE__ */ jsx(
       "nav",
       {
         "aria-label": resolvedLabels.region,
         className: cn(
-          "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+          "inline-flex items-center text-xs text-muted-foreground",
           className
         ),
         "data-world-breadcrumbs": true,
+        "data-world-breadcrumbs-state": "empty",
         ref,
         ...rest,
-        children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(
-            Crumb,
-            {
-              crumb,
-              isLast: index === crumbs.length - 1,
-              onSelect
-            }
-          ),
-          index < crumbs.length - 1 ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "text-muted-foreground/60",
-              "data-world-breadcrumb-sep": true,
-              children: "\u203A"
-            }
-          ) : null
-        ] }, crumb.id))
+        children: resolvedLabels.empty
       }
     );
   }
-);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+        className
+      ),
+      "data-world-breadcrumbs": true,
+      ref,
+      ...rest,
+      children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          Crumb,
+          {
+            crumb,
+            isLast: index === crumbs.length - 1,
+            onSelect
+          }
+        ),
+        index < crumbs.length - 1 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "text-muted-foreground/60",
+            "data-world-breadcrumb-sep": true,
+            children: "\u203A"
+          }
+        ) : null
+      ] }, crumb.id))
+    }
+  );
+};
 WorldBreadcrumbs.displayName = "WorldBreadcrumbs";
 export {
   WorldBreadcrumbs

package/dist/components/world-clock-bar/world-clock-bar.js

@@ -1,34 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { useLiveDate } from "../../lib/use-live-date";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
-function normalizeDate(input) {
-  if (input instanceof Date) {
-    return new Date(input.getTime());
-  }
-  return new Date(input);
-}
-function useLiveDate(now, updateIntervalMs) {
-  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());
-    }, updateIntervalMs);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [fixedNow, updateIntervalMs]);
-  return liveNow;
-}
 const TIME_FORMATTER_CACHE = /* @__PURE__ */ new Map();
 function getTimeFormatter(locale, timeZone) {
   const key = `${locale}|${timeZone}`;
@@ -81,41 +55,40 @@ function WorldClockCard({
     /* @__PURE__ */ jsx("div", { className: "mt-3 text-[11px] uppercase tracking-[0.16em] text-muted-foreground", children: zone.timeZone })
   ] });
 }
-const WorldClockBar = React.forwardRef(
-  ({
-    as: Heading = "h2",
-    className,
-    now,
-    showDate = true,
-    title = "World clock",
-    updateIntervalMs = 6e4,
-    zones,
-    ...props
-  }, ref) => {
-    const liveNow = useLiveDate(now, updateIntervalMs);
-    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), ref, ...props, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Synchronized time across distributed teams and regions." })
-        ] }),
-        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
-          zones.length,
-          " zones"
-        ] })
+const WorldClockBar = ({
+  as: Heading = "h2",
+  className,
+  now,
+  ref,
+  showDate = true,
+  title = "World clock",
+  updateIntervalMs = 6e4,
+  zones,
+  ...props
+}) => {
+  const liveNow = useLiveDate(now, updateIntervalMs);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), ref, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Synchronized time across distributed teams and regions." })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: zones.map((zone) => /* @__PURE__ */ jsx(
-        WorldClockCard,
-        {
-          date: liveNow,
-          showDate,
-          zone
-        },
-        `${zone.city}-${zone.timeZone}`
-      )) })
-    ] });
-  }
-);
+      /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+        zones.length,
+        " zones"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: zones.map((zone) => /* @__PURE__ */ jsx(
+      WorldClockCard,
+      {
+        date: liveNow,
+        showDate,
+        zone
+      },
+      `${zone.city}-${zone.timeZone}`
+    )) })
+  ] });
+};
 WorldClockBar.displayName = "WorldClockBar";
 export {
   WorldClockBar

package/dist/components/zoom-hud/zoom-hud.js

@@ -1,59 +1,64 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Minus, Plus, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-const ZoomHUD = forwardRef(
-  ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
-        className
+const ZoomHUD = ({
+  className,
+  onReset,
+  onZoomIn,
+  onZoomOut,
+  ref,
+  zoom,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Zoom out",
+          onClick: onZoomOut,
+          size: "icon",
+          type: "button",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+        }
       ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Zoom out",
-            onClick: onZoomOut,
-            size: "icon",
-            type: "button",
-            variant: "ghost",
-            children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground", children: [
-          Math.round(zoom * 100),
-          "%"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Zoom in",
-            onClick: onZoomIn,
-            size: "icon",
-            type: "button",
-            variant: "ghost",
-            children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "aria-label": "Reset zoom",
-            onClick: onReset,
-            size: "icon",
-            type: "button",
-            variant: "ghost",
-            children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
-          }
-        )
-      ]
-    }
-  )
+      /* @__PURE__ */ jsxs("div", { className: "min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground", children: [
+        Math.round(zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Zoom in",
+          onClick: onZoomIn,
+          size: "icon",
+          type: "button",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Reset zoom",
+          onClick: onReset,
+          size: "icon",
+          type: "button",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+        }
+      )
+    ]
+  }
 );
 ZoomHUD.displayName = "ZoomHUD";
 export {