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

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

@@ -0,0 +1,344 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const FEEDBACK_DURATION_MS = 800;
+const DEFAULT_LABELS = {
+  region: "Geography quiz map"
+};
+const QuizContext = createContext(null);
+function useQuizContext() {
+  const ctx = useContext(QuizContext);
+  if (!ctx) {
+    throw new Error("GeographyQuizMap subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  const x = (lng + 180) / 360 * VIEWBOX_WIDTH;
+  const y = (90 - lat) / 180 * VIEWBOX_HEIGHT;
+  return { x, y };
+}
+function regionPath(region) {
+  const points = region.coordinates.map((coord, index) => {
+    const projected = projectEquirectangular(coord);
+    return `${index === 0 ? "M" : "L"}${projected.x.toString()},${projected.y.toString()}`;
+  }).join(" ");
+  return `${points} Z`;
+}
+function RegionShape({
+  disabled,
+  feedback,
+  isAnswerForCurrent,
+  isSelected,
+  onSelect,
+  region,
+  showAnswerFlash
+}) {
+  let fillClass = "fill-muted";
+  if (isSelected && feedback === "correct") fillClass = "fill-emerald-500";
+  else if (isSelected && feedback === "incorrect")
+    fillClass = "fill-destructive";
+  else if (showAnswerFlash && isAnswerForCurrent && !isSelected)
+    fillClass = "fill-emerald-500/40";
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      "aria-label": region.name,
+      className: cn(
+        fillClass,
+        "stroke-background outline-none transition-colors",
+        disabled ? "cursor-not-allowed" : "cursor-pointer hover:opacity-90 focus-visible:opacity-90"
+      ),
+      d: regionPath(region),
+      "data-region-id": region.id,
+      "data-state": isSelected ? feedback === "correct" ? "correct" : "incorrect" : showAnswerFlash && isAnswerForCurrent ? "answer" : void 0,
+      onClick: () => {
+        if (!disabled) onSelect(region.id);
+      },
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onSelect(region.id);
+      },
+      role: "button",
+      strokeWidth: 1,
+      tabIndex: disabled ? -1 : 0
+    }
+  );
+}
+function Stage({
+  backdrop,
+  backdropAlt,
+  current,
+  disabled,
+  feedback,
+  onSelect,
+  regions,
+  selectedRegionId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "block h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      role: "img",
+      viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        regions.map((region) => /* @__PURE__ */ jsx(
+          RegionShape,
+          {
+            disabled,
+            feedback,
+            isAnswerForCurrent: current?.answerRegionId === region.id,
+            isSelected: selectedRegionId === region.id,
+            onSelect,
+            region,
+            showAnswerFlash: feedback === "incorrect"
+          },
+          region.id
+        ))
+      ]
+    }
+  );
+}
+const GeographyQuizMapPrompt = forwardRef(({ className, ...rest }, ref) => {
+  const { current, phase } = useQuizContext();
+  if (phase !== "playing" || !current) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-x-3 top-3 z-10 rounded-md border bg-background/95 px-3 py-2 text-center text-sm font-medium text-foreground shadow-sm backdrop-blur",
+        className
+      ),
+      "data-quiz-prompt": true,
+      ref,
+      ...rest,
+      children: current.prompt
+    }
+  );
+});
+GeographyQuizMapPrompt.displayName = "GeographyQuizMapPrompt";
+const GeographyQuizMapScore = forwardRef(({ className, ...rest }, ref) => {
+  const { answers, totalQuestions } = useQuizContext();
+  const correct = answers.filter((entry) => entry.correct).length;
+  const accuracy = answers.length === 0 ? 0 : Math.round(correct / answers.length * 100);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute right-3 top-3 z-10 rounded-md border bg-background/95 px-2 py-1 text-xs font-medium text-foreground shadow-sm backdrop-blur",
+        className
+      ),
+      "data-quiz-score": true,
+      ref,
+      ...rest,
+      children: `${correct.toString()} / ${totalQuestions.toString()} \xB7 ${accuracy.toString()}%`
+    }
+  );
+});
+GeographyQuizMapScore.displayName = "GeographyQuizMapScore";
+const GeographyQuizMapResults = forwardRef(({ className, ...rest }, ref) => {
+  const { answers, phase, totalQuestions } = useQuizContext();
+  if (phase !== "complete") return null;
+  const correct = answers.filter((entry) => entry.correct).length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute inset-3 z-20 flex flex-col gap-3 overflow-auto rounded-md border bg-background/95 p-4 text-sm text-foreground shadow-md backdrop-blur",
+        className
+      ),
+      "data-quiz-results": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: `Results \xB7 ${correct.toString()} / ${totalQuestions.toString()}` }),
+        /* @__PURE__ */ jsx("ol", { className: "space-y-1", children: answers.map((entry) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-2 rounded-md border px-2 py-1",
+              entry.correct ? "border-emerald-300 bg-emerald-500/10" : "border-red-300 bg-red-500/10"
+            ),
+            "data-answer-correct": entry.correct ? "true" : "false",
+            "data-answer-id": entry.question.id,
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: entry.correct ? "\u2713" : "\u2717" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: entry.question.prompt })
+            ]
+          },
+          entry.question.id
+        )) })
+      ]
+    }
+  );
+});
+GeographyQuizMapResults.displayName = "GeographyQuizMapResults";
+function useQuizState(arguments_) {
+  const { onComplete, questions } = arguments_;
+  const [state, setState] = useState({
+    answers: [],
+    feedback: void 0,
+    questionIndex: 0,
+    selectedRegionId: void 0
+  });
+  const handleSelect = useCallback(
+    (regionId) => {
+      setState((current) => {
+        if (current.feedback) return current;
+        const question = questions[current.questionIndex];
+        if (!question) return current;
+        const correct = question.answerRegionId === regionId;
+        const next = {
+          ...current,
+          answers: [
+            ...current.answers,
+            { correct, question, selectedRegionId: regionId }
+          ],
+          feedback: correct ? "correct" : "incorrect",
+          selectedRegionId: regionId
+        };
+        scheduleAdvance(setState, onComplete, questions);
+        return next;
+      });
+    },
+    [onComplete, questions]
+  );
+  return { handleSelect, state };
+}
+function scheduleAdvance(setState, onComplete, questions) {
+  if (typeof window === "undefined") return;
+  window.setTimeout(() => {
+    setState((current) => {
+      const nextIndex = current.questionIndex + 1;
+      if (nextIndex >= questions.length) {
+        onComplete?.(current.answers);
+        return {
+          ...current,
+          feedback: void 0,
+          questionIndex: questions.length,
+          selectedRegionId: void 0
+        };
+      }
+      return {
+        ...current,
+        feedback: void 0,
+        questionIndex: nextIndex,
+        selectedRegionId: void 0
+      };
+    });
+  }, 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
+        ),
+        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
+        ]
+      }
+    ) });
+  }
+);
+GeographyQuizMap.displayName = "GeographyQuizMap";
+export {
+  GeographyQuizMap,
+  GeographyQuizMapPrompt,
+  GeographyQuizMapResults,
+  GeographyQuizMapScore
+};

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

@@ -0,0 +1,12 @@
+import {
+  GeographyQuizMap,
+  GeographyQuizMapPrompt,
+  GeographyQuizMapResults,
+  GeographyQuizMapScore
+} from "./geography-quiz-map";
+export {
+  GeographyQuizMap,
+  GeographyQuizMapPrompt,
+  GeographyQuizMapResults,
+  GeographyQuizMapScore
+};

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const GlassCard = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    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

@@ -0,0 +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
+    }
+  )
+);
+GlassPanel.displayName = "GlassPanel";
+export {
+  GlassPanel
+};

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

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

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

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function clampPercent(value) {
+  return Math.min(Math.max(value, 0), 100);
+}
+const GlassProgress = React.forwardRef(({ className, value, ...props }, ref) => {
+  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
+};