@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/gauge-chart/gauge-chart.js

@@ -0,0 +1,132 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const DEFAULT_SIZE = 200;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_THICKNESS = 16;
+function clamp(value, low, high) {
+  return Math.min(Math.max(value, low), high);
+}
+function polar(center, radius, degrees) {
+  const radians = degrees * Math.PI / 180;
+  return {
+    x: center.x + radius * Math.cos(radians),
+    y: center.y + radius * Math.sin(radians)
+  };
+}
+function arc(geom) {
+  const from = polar(geom.center, geom.radius, geom.start);
+  const to = polar(geom.center, geom.radius, geom.end);
+  const largeArc = geom.end - geom.start > 180 ? 1 : 0;
+  return `M ${from.x.toFixed(2)} ${from.y.toFixed(2)} A ${geom.radius} ${geom.radius} 0 ${largeArc} 1 ${to.x.toFixed(2)} ${to.y.toFixed(2)}`;
+}
+function GaugeText({
+  center,
+  label,
+  showValue,
+  size,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showValue ? /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: "fill-foreground font-semibold",
+        dominantBaseline: "middle",
+        fontSize: size * 0.16,
+        textAnchor: "middle",
+        x: center.x,
+        y: center.y - size * 0.06,
+        children: Math.round(value).toLocaleString()
+      }
+    ) : null,
+    label ? /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: "fill-muted-foreground text-xs",
+        dominantBaseline: "middle",
+        textAnchor: "middle",
+        x: center.x,
+        y: center.y + size * 0.1,
+        children: label
+      }
+    ) : null
+  ] });
+}
+const GaugeChart = ({
+  className,
+  color = "currentColor",
+  label,
+  max = DEFAULT_MAX,
+  min = DEFAULT_MIN,
+  ref,
+  showValue = true,
+  size = DEFAULT_SIZE,
+  thickness = DEFAULT_THICKNESS,
+  value,
+  ...props
+}) => {
+  const span = max - min;
+  const fraction = span > 0 ? clamp((value - min) / span, 0, 1) : 0;
+  const center = { x: size / 2, y: size / 2 };
+  const radius = size / 2 - thickness / 2;
+  const viewHeight = size / 2 + thickness + 28;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Gauge chart",
+          className: "h-full w-full",
+          height: viewHeight,
+          role: "img",
+          viewBox: `0 0 ${size} ${viewHeight}`,
+          width: size,
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "stroke-muted",
+                d: arc({ center, end: 360, radius, start: 180 }),
+                fill: "none",
+                strokeLinecap: "round",
+                strokeWidth: thickness
+              }
+            ),
+            fraction > 0 ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: arc({ center, end: 180 + fraction * 180, radius, start: 180 }),
+                fill: "none",
+                stroke: color,
+                strokeLinecap: "round",
+                strokeWidth: thickness
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              GaugeText,
+              {
+                center,
+                label,
+                showValue,
+                size,
+                value
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+GaugeChart.displayName = "GaugeChart";
+export {
+  GaugeChart
+};

package/dist/components/gauge-chart/index.js

@@ -0,0 +1,4 @@
+import { GaugeChart } from "./gauge-chart";
+export {
+  GaugeChart
+};

package/dist/components/geography-quiz-map/geography-quiz-map.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState
@@ -18,7 +17,7 @@ const DEFAULT_LABELS = {
 };
 const QuizContext = createContext(null);
 function useQuizContext() {
-  const ctx = useContext(QuizContext);
+  const ctx = use(QuizContext);
   if (!ctx) {
     throw new Error("GeographyQuizMap subcomponent used outside its root.");
   }
@@ -136,7 +135,11 @@ function Stage({
     }
   );
 }
-const GeographyQuizMapPrompt = forwardRef(({ className, ...rest }, ref) => {
+const GeographyQuizMapPrompt = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { current, phase } = useQuizContext();
   if (phase !== "playing" || !current) return null;
   return /* @__PURE__ */ jsx(
@@ -152,9 +155,13 @@ const GeographyQuizMapPrompt = forwardRef(({ className, ...rest }, ref) => {
       children: current.prompt
     }
   );
-});
+};
 GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
-const GeographyQuizMapScore = forwardRef(({ className, ...rest }, ref) => {
+const GeographyQuizMapScore = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { answers, totalQuestions } = useQuizContext();
   const correct = answers.filter((entry) => entry.correct).length;
   const accuracy = answers.length === 0 ? 0 : Math.round(correct / answers.length * 100);
@@ -171,9 +178,13 @@ const GeographyQuizMapScore = forwardRef(({ className, ...rest }, ref) => {
       children: `${correct.toString()} / ${totalQuestions.toString()} \xB7 ${accuracy.toString()}%`
     }
   );
-});
+};
 GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
-const GeographyQuizMapResults = forwardRef(({ className, ...rest }, ref) => {
+const GeographyQuizMapResults = ({
+  className,
+  ref,
+  ...rest
+}) => {
   const { answers, phase, totalQuestions } = useQuizContext();
   if (phase !== "complete") return null;
   const correct = answers.filter((entry) => entry.correct).length;
@@ -208,7 +219,7 @@ const GeographyQuizMapResults = forwardRef(({ className, ...rest }, ref) => {
       ]
     }
   );
-});
+};
 GeographyQuizMapResults.displayName = "GeographyQuizMapResults";
 function useQuizState(arguments_) {
   const { onComplete, questions } = arguments_;
@@ -265,76 +276,75 @@ function scheduleAdvance(setState, onComplete, questions) {
     });
   }, FEEDBACK_DURATION_MS);
 }
-const GeographyQuizMap = forwardRef(
-  (props, ref) => {
-    const {
-      backdrop,
-      backdropAlt,
-      children,
-      className,
-      labels,
-      onComplete,
-      questions,
-      regions,
-      ...rest
-    } = props;
-    const titleId = useId();
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const { handleSelect, state } = useQuizState({ onComplete, questions });
-    const phase = state.questionIndex >= questions.length ? "complete" : "playing";
-    const current = questions[state.questionIndex];
-    const ctx = useMemo(
-      () => ({
-        answers: state.answers,
-        current,
-        feedback: state.feedback,
-        phase,
-        questionIndex: state.questionIndex,
-        totalQuestions: questions.length
-      }),
-      [
-        current,
-        phase,
-        questions.length,
-        state.answers,
-        state.feedback,
-        state.questionIndex
-      ]
-    );
-    return /* @__PURE__ */ jsx(QuizContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-labelledby": titleId,
-        className: cn(
-          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
-          className
+const GeographyQuizMap = (props) => {
+  const {
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    labels,
+    onComplete,
+    questions,
+    ref,
+    regions,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const { handleSelect, state } = useQuizState({ onComplete, questions });
+  const phase = state.questionIndex >= questions.length ? "complete" : "playing";
+  const current = questions[state.questionIndex];
+  const ctx = useMemo(
+    () => ({
+      answers: state.answers,
+      current,
+      feedback: state.feedback,
+      phase,
+      questionIndex: state.questionIndex,
+      totalQuestions: questions.length
+    }),
+    [
+      current,
+      phase,
+      questions.length,
+      state.answers,
+      state.feedback,
+      state.questionIndex
+    ]
+  );
+  return /* @__PURE__ */ jsx(QuizContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: resolvedLabels.region }),
+        /* @__PURE__ */ jsx(
+          Stage,
+          {
+            backdrop,
+            backdropAlt,
+            current,
+            disabled: phase === "complete" || Boolean(state.feedback),
+            feedback: state.feedback,
+            onSelect: handleSelect,
+            regions,
+            selectedRegionId: state.selectedRegionId
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: resolvedLabels.region }),
-          /* @__PURE__ */ jsx(
-            Stage,
-            {
-              backdrop,
-              backdropAlt,
-              current,
-              disabled: phase === "complete" || Boolean(state.feedback),
-              feedback: state.feedback,
-              onSelect: handleSelect,
-              regions,
-              selectedRegionId: state.selectedRegionId
-            }
-          ),
-          children
-        ]
-      }
-    ) });
-  }
-);
+        children
+      ]
+    }
+  ) });
+};
 GeographyQuizMap.displayName = "GeographyQuizMap";
 export {
   GeographyQuizMap,

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const GlassCard = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border/50 bg-card/60 p-6 text-card-foreground shadow-lg backdrop-blur-md",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+};
+GlassCard.displayName = "GlassCard";
+export {
+  GlassCard
+};

package/dist/components/glass-card/index.js

@@ -0,0 +1,4 @@
+import { GlassCard } from "./glass-card";
+export {
+  GlassCard
+};

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

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const GlassPanel = forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_oklch(var(--foreground)/0.08)] backdrop-blur-xl",
-        className
-      ),
-      ref,
-      ...props,
-      children
-    }
-  )
+const GlassPanel = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_oklch(var(--foreground)/0.08)] backdrop-blur-xl",
+      className
+    ),
+    ref,
+    ...props,
+    children
+  }
 );
 GlassPanel.displayName = "GlassPanel";
 export {

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

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function clampPercent(value) {
+  return Math.min(Math.max(value, 0), 100);
+}
+const GlassProgress = ({
+  className,
+  ref,
+  value,
+  ...props
+}) => {
+  const clamped = clampPercent(value);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": clamped,
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full border border-border/50 bg-muted/40 backdrop-blur",
+        className
+      ),
+      ref,
+      role: "progressbar",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full bg-primary transition-all",
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+};
+GlassProgress.displayName = "GlassProgress";
+export {
+  GlassProgress
+};

package/dist/components/glass-progress/index.js

@@ -0,0 +1,4 @@
+import { GlassProgress } from "./glass-progress";
+export {
+  GlassProgress
+};

package/dist/components/globe-3d/globe-3d.js

@@ -3,10 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Children,
   createContext,
-  forwardRef,
   isValidElement,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -69,51 +68,52 @@ function project(coord, rotationLng, rotationLat) {
 }
 const GlobeContext = createContext(null);
 function useGlobeContext() {
-  const ctx = useContext(GlobeContext);
+  const ctx = use(GlobeContext);
   if (!ctx) {
     throw new Error("Globe3D subcomponent used outside its root.");
   }
   return ctx;
 }
-const GlobeMarker = forwardRef(
-  (props, ref) => {
-    const { color = "red", id, label, lat, lng, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const projected = project({ lat, lng }, rotationLng, rotationLat);
-    if (!projected.visible) return null;
-    const palette = PALETTE[color];
-    return /* @__PURE__ */ jsxs(
-      "g",
-      {
-        "data-marker-id": id,
-        "data-marker-visible": "true",
-        ref,
-        transform: `translate(${projected.x.toString()}, ${projected.y.toString()})`,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              className: cn("stroke-background", palette.fill),
-              r: "5",
-              strokeWidth: "1.5"
-            }
-          ),
-          label ? /* @__PURE__ */ jsx(
-            "text",
-            {
-              className: "select-none fill-foreground text-[10px] font-semibold",
-              dominantBaseline: "middle",
-              textAnchor: "middle",
-              y: "-10",
-              children: label
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+const GlobeMarker = ({
+  ref,
+  ...props
+}) => {
+  const { color = "red", id, label, lat, lng, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const projected = project({ lat, lng }, rotationLng, rotationLat);
+  if (!projected.visible) return null;
+  const palette = PALETTE[color];
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-marker-id": id,
+      "data-marker-visible": "true",
+      ref,
+      transform: `translate(${projected.x.toString()}, ${projected.y.toString()})`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: cn("stroke-background", palette.fill),
+            r: "5",
+            strokeWidth: "1.5"
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "select-none fill-foreground text-[10px] font-semibold",
+            dominantBaseline: "middle",
+            textAnchor: "middle",
+            y: "-10",
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
 GlobeMarker.displayName = "GlobeMarker";
 function buildArc(arguments_) {
   const { from, rotationLat, rotationLng, to } = arguments_;
@@ -136,28 +136,29 @@ function buildArc(arguments_) {
     { path: "", pen: "up" }
   ).path;
 }
-const GlobeArc = forwardRef(
-  (props, ref) => {
-    const { color = "cyan", from, id, strokeWidth = 2, to, ...rest } = props;
-    const { rotationLat, rotationLng } = useGlobeContext();
-    const path = buildArc({ from, rotationLat, rotationLng, to });
-    if (!path) return null;
-    const palette = PALETTE[color];
-    return /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: cn("fill-none", palette.stroke),
-        d: path,
-        "data-arc-id": id,
-        ref,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth,
-        ...rest
-      }
-    );
-  }
-);
+const GlobeArc = ({
+  ref,
+  ...props
+}) => {
+  const { color = "cyan", from, id, strokeWidth = 2, to, ...rest } = props;
+  const { rotationLat, rotationLng } = useGlobeContext();
+  const path = buildArc({ from, rotationLat, rotationLng, to });
+  if (!path) return null;
+  const palette = PALETTE[color];
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: cn("fill-none", palette.stroke),
+      d: path,
+      "data-arc-id": id,
+      ref,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth,
+      ...rest
+    }
+  );
+};
 GlobeArc.displayName = "GlobeArc";
 function buildLine(arguments_) {
   const { points, rotationLat, rotationLng } = arguments_;
@@ -358,7 +359,10 @@ function DataSummary({ children, titleId }) {
     )) })
   ] });
 }
-const Globe3D = forwardRef((props, ref) => {
+const Globe3D = ({
+  ref,
+  ...props
+}) => {
   const {
     autoRotate = true,
     children,
@@ -420,7 +424,7 @@ const Globe3D = forwardRef((props, ref) => {
       ]
     }
   ) });
-});
+};
 Globe3D.displayName = "Globe3D";
 export {
   Globe3D,