@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/grid/grid.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const colsClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12"
+};
+const smColsClasses = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  7: "sm:grid-cols-7",
+  8: "sm:grid-cols-8",
+  9: "sm:grid-cols-9",
+  10: "sm:grid-cols-10",
+  11: "sm:grid-cols-11",
+  12: "sm:grid-cols-12"
+};
+const mdColsClasses = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12"
+};
+const lgColsClasses = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12"
+};
+const gapClasses = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16"
+};
+const Grid = ({
+  className,
+  cols = 1,
+  gap = 4,
+  lgCols,
+  mdCols,
+  ref,
+  smCols,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "grid",
+      colsClasses[cols],
+      smCols !== void 0 && smColsClasses[smCols],
+      mdCols !== void 0 && mdColsClasses[mdCols],
+      lgCols !== void 0 && lgColsClasses[lgCols],
+      gapClasses[gap],
+      className
+    ),
+    ref,
+    ...props
+  }
+);
+Grid.displayName = "Grid";
+export {
+  Grid
+};

package/dist/components/grid/index.js

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

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

@@ -1,27 +1,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const GroupHull = forwardRef(
-  ({ children, className, description, eyebrow, title, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: cn(
-        "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-3 rounded-[1.5rem] border border-border/40" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative space-y-1", children: [
-          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) : null,
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
-          description ? /* @__PURE__ */ jsx("p", { className: "max-w-[48ch] text-sm leading-6 text-muted-foreground", children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative flex flex-1 flex-wrap items-start gap-4", children })
-      ]
-    }
-  )
+const GroupHull = ({
+  children,
+  className,
+  description,
+  eyebrow,
+  ref,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn(
+      "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-3 rounded-[1.5rem] border border-border/40" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative space-y-1", children: [
+        eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "max-w-[48ch] text-sm leading-6 text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex flex-1 flex-wrap items-start gap-4", children })
+    ]
+  }
 );
 GroupHull.displayName = "GroupHull";
 export {

package/dist/components/handoff-beacon/handoff-beacon.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const LEVEL_RING = {
   info: "ring-blue-500",
@@ -17,61 +14,62 @@ const LEVEL_DOT = {
 const DEFAULT_LABELS = {
   region: "Attention"
 };
-const HandoffBeacon = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      labels,
-      level = "info",
-      message,
-      source,
-      x,
-      y,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
-          className
+const HandoffBeacon = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    labels,
+    level = "info",
+    message,
+    source,
+    x,
+    y,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
+        className
+      ),
+      "data-handoff-level": level,
+      ref,
+      role: "status",
+      style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
+              LEVEL_DOT[level],
+              LEVEL_RING[level]
+            )
+          }
         ),
-        "data-handoff-level": level,
-        ref,
-        role: "status",
-        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "block size-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
-                LEVEL_DOT[level],
-                LEVEL_RING[level]
-              )
-            }
-          ),
-          source || message ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md",
-              "data-handoff-card": true,
-              children: source ? /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: source }),
-                message ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " \xB7 " }) : null,
-                message ? /* @__PURE__ */ jsx("span", { children: message }) : null
-              ] }) : message ? /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }) : null
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+        source || message ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md",
+            "data-handoff-card": true,
+            children: source ? /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: source }),
+              message ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " \xB7 " }) : null,
+              message ? /* @__PURE__ */ jsx("span", { children: message }) : null
+            ] }) : message ? /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }) : null
+          }
+        ) : null
+      ]
+    }
+  );
+};
 HandoffBeacon.displayName = "HandoffBeacon";
 export {
   HandoffBeacon

package/dist/components/heat-map-overlay/heat-map-overlay.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useId,
   useMemo
 } from "react";
@@ -154,61 +153,62 @@ function Stage({
     }
   );
 }
-const HeatMapOverlay = forwardRef(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      blur = 12,
-      children,
-      className,
-      data,
-      gradient = DEFAULT_GRADIENT,
-      labels,
-      opacity = 0.7,
-      radius = 30,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const gradientId = useId();
-    const blurId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const projected = useMemo(() => projectPoints(data), [data]);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-          className
+const HeatMapOverlay = ({
+  ref,
+  ...props
+}) => {
+  const {
+    backdrop,
+    backdropAlt,
+    blur = 12,
+    children,
+    className,
+    data,
+    gradient = DEFAULT_GRADIENT,
+    labels,
+    opacity = 0.7,
+    radius = 30,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const gradientId = useId();
+  const blurId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const projected = useMemo(() => projectPoints(data), [data]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Stage,
+          {
+            backdrop,
+            backdropAlt,
+            blur,
+            blurId,
+            data: projected,
+            gradient,
+            gradientId,
+            opacity,
+            radius
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            Stage,
-            {
-              backdrop,
-              backdropAlt,
-              blur,
-              blurId,
-              data: projected,
-              gradient,
-              gradientId,
-              opacity,
-              radius
-            }
-          ),
-          children ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur", children }) : null,
-          /* @__PURE__ */ jsx(DataSummary, { data, titleId })
-        ]
-      }
-    );
-  }
-);
+        children ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur", children }) : null,
+        /* @__PURE__ */ jsx(DataSummary, { data, titleId })
+      ]
+    }
+  );
+};
 HeatMapOverlay.displayName = "HeatMapOverlay";
 export {
   HeatMapOverlay

package/dist/components/heat-overlay/heat-overlay.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { cn } from "../../lib/utils";
 const TONE_FILL = {
   cool: "fill-blue-500",
@@ -38,54 +38,55 @@ const HeatBlob = (props) => {
     }
   );
 };
-const HeatOverlay = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      defaultTone = "warn",
-      intensity = 48,
-      labels,
-      points,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const gradientId = useId();
-    if (points.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "pointer-events-none absolute inset-0 z-10 h-full w-full",
-          className
-        ),
-        "data-heat-overlay": true,
-        ref,
-        role: "img",
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { cx: "50%", cy: "50%", id: gradientId, r: "50%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
-            /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "currentColor", stopOpacity: "0.4" }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
-          ] }) }),
-          points.map((point) => /* @__PURE__ */ jsx(
-            HeatBlob,
-            {
-              defaultTone,
-              gradientId,
-              intensity,
-              point
-            },
-            point.id
-          ))
-        ]
-      }
-    );
+const HeatOverlay = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    defaultTone = "warn",
+    intensity = 48,
+    labels,
+    points,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const gradientId = useId();
+  if (points.length === 0) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute inset-0 z-10 h-full w-full",
+        className
+      ),
+      "data-heat-overlay": true,
+      ref,
+      role: "img",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { cx: "50%", cy: "50%", id: gradientId, r: "50%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+          /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "currentColor", stopOpacity: "0.4" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+        ] }) }),
+        points.map((point) => /* @__PURE__ */ jsx(
+          HeatBlob,
+          {
+            defaultTone,
+            gradientId,
+            intensity,
+            point
+          },
+          point.id
+        ))
+      ]
+    }
+  );
+};
 HeatOverlay.displayName = "HeatOverlay";
 export {
   HeatOverlay

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

@@ -1,9 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useMemo
-} from "react";
+import { useMemo } from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_TICK_COUNT = 8;
 const COLOR_PALETTE = {
@@ -274,68 +271,69 @@ function Legend({ categories }) {
     );
   }) });
 }
-const HistoricTimeline = forwardRef(
-  (props, ref) => {
-    const {
-      categories = [],
-      className,
-      endYear,
-      eras = [],
-      events = [],
-      labels,
-      periods = [],
-      startYear,
-      tickCount = DEFAULT_TICK_COUNT,
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const ticks = useMemo(
-      () => buildTicks(startYear, endYear, tickCount),
-      [endYear, startYear, tickCount]
-    );
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn(
-          "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
-          className
+const HistoricTimeline = ({
+  ref,
+  ...props
+}) => {
+  const {
+    categories = [],
+    className,
+    endYear,
+    eras = [],
+    events = [],
+    labels,
+    periods = [],
+    startYear,
+    tickCount = DEFAULT_TICK_COUNT,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const ticks = useMemo(
+    () => buildTicks(startYear, endYear, tickCount),
+    [endYear, startYear, tickCount]
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Axis, { ticks }),
+        /* @__PURE__ */ jsx(EraLabels, { endYear, eras, startYear }),
+        /* @__PURE__ */ jsx(
+          PeriodLane,
+          {
+            categories,
+            endYear,
+            periods,
+            startYear
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(Axis, { ticks }),
-          /* @__PURE__ */ jsx(EraLabels, { endYear, eras, startYear }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
           /* @__PURE__ */ jsx(
-            PeriodLane,
+            EventLane,
             {
               categories,
               endYear,
-              periods,
+              events,
               startYear
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
-            /* @__PURE__ */ jsx(
-              EventLane,
-              {
-                categories,
-                endYear,
-                events,
-                startYear
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(Legend, { categories })
-        ]
-      }
-    );
-  }
-);
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Legend, { categories })
+      ]
+    }
+  );
+};
 HistoricTimeline.displayName = "HistoricTimeline";
 export {
   HistoricTimeline