@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+const DEFAULT_LOCALE = "en-US";
+const COLOR_CLASSES = {
+  amber: {
+    bar: "bg-amber-500/30",
+    progress: "bg-amber-600 dark:bg-amber-500"
+  },
+  blue: {
+    bar: "bg-blue-500/30",
+    progress: "bg-blue-600 dark:bg-blue-500"
+  },
+  emerald: {
+    bar: "bg-emerald-500/30",
+    progress: "bg-emerald-600 dark:bg-emerald-500"
+  },
+  neutral: {
+    bar: "bg-muted",
+    progress: "bg-muted-foreground"
+  },
+  purple: {
+    bar: "bg-purple-500/30",
+    progress: "bg-purple-600 dark:bg-purple-500"
+  },
+  red: {
+    bar: "bg-red-500/30",
+    progress: "bg-red-600 dark:bg-red-500"
+  },
+  rose: {
+    bar: "bg-rose-500/30",
+    progress: "bg-rose-600 dark:bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  milestone: "Milestone",
+  today: "Today"
+};
+function toDate(value) {
+  return value instanceof Date ? new Date(value.getTime()) : new Date(value);
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function diffInDays(later, earlier) {
+  return (later.getTime() - earlier.getTime()) / MS_PER_DAY;
+}
+const TICK_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTickDateTimeFormatter(locale, scale) {
+  const key = `${locale}|${scale}`;
+  let formatter = TICK_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    const options = scale === "month" ? { month: "short", year: "numeric" } : { day: "2-digit", month: "short" };
+    formatter = Intl.DateTimeFormat(locale, options);
+    TICK_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+function buildTickFormatter(scale, locale) {
+  switch (scale) {
+    case "day":
+      return getTickDateTimeFormatter(locale, "day").format;
+    case "week":
+      return getTickDateTimeFormatter(locale, "week").format;
+    case "month":
+      return getTickDateTimeFormatter(locale, "month").format;
+    case "quarter":
+      return (date) => {
+        const quarter = Math.floor(date.getMonth() / 3) + 1;
+        return `Q${quarter.toString()} ${date.getFullYear().toString()}`;
+      };
+  }
+}
+function getTickStep(scale) {
+  switch (scale) {
+    case "day":
+      return 1;
+    case "week":
+      return 7;
+    case "month":
+      return 30;
+    case "quarter":
+      return 91;
+  }
+}
+function buildTicks(input) {
+  const { end, locale, scale, start, totalDays } = input;
+  const formatter = buildTickFormatter(scale, locale);
+  const stepDays = getTickStep(scale);
+  const tickCount = Math.floor(totalDays / stepDays);
+  return Array.from({ length: tickCount + 1 }).reduce((ticks, _, index) => {
+    const day = index * stepDays;
+    const date = new Date(start.getTime() + day * MS_PER_DAY);
+    if (date.getTime() <= end.getTime()) {
+      ticks.push({ label: formatter(date), offset: day });
+    }
+    return ticks;
+  }, []);
+}
+function useChartGeometry(options) {
+  const { endDate, locale, scale, startDate } = options;
+  return useMemo(() => {
+    const start = toDate(startDate);
+    const end = toDate(endDate);
+    const totalDays = Math.max(1, diffInDays(end, start));
+    const ticks = buildTicks({ end, locale, scale, start, totalDays });
+    return {
+      end,
+      pxPerDay: 1 / totalDays,
+      start,
+      ticks,
+      totalDays
+    };
+  }, [endDate, locale, scale, startDate]);
+}
+function TaskBar({ geometry, task }) {
+  const start = toDate(task.start);
+  const end = toDate(task.end);
+  const offsetDays = diffInDays(start, geometry.start);
+  const durationDays = Math.max(0.5, diffInDays(end, start));
+  const leftRatio = clamp(offsetDays / geometry.totalDays, 0, 1);
+  const widthRatio = clamp(durationDays / geometry.totalDays, 0, 1 - leftRatio);
+  const palette = COLOR_CLASSES[task.color ?? "blue"];
+  const progress = clamp(task.progress ?? 0, 0, 100);
+  const ariaLabel = typeof task.title === "string" ? `${task.title} from ${start.toISOString().slice(0, 10)} to ${end.toISOString().slice(0, 10)}, ${progress.toString()} percent complete` : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": progress,
+      className: cn(
+        "absolute top-1.5 flex h-5 items-center overflow-hidden rounded-md ring-1 ring-border",
+        palette.bar
+      ),
+      "data-task-id": task.id,
+      role: "progressbar",
+      style: {
+        left: `${(leftRatio * 100).toString()}%`,
+        width: `${(widthRatio * 100).toString()}%`
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("h-full rounded-md", palette.progress),
+          style: { width: `${progress.toString()}%` }
+        }
+      )
+    }
+  );
+}
+function MilestoneMarker({
+  geometry,
+  label,
+  milestone
+}) {
+  const date = toDate(milestone.date);
+  const offsetDays = diffInDays(date, geometry.start);
+  if (offsetDays < 0 || offsetDays > geometry.totalDays) return null;
+  const leftRatio = offsetDays / geometry.totalDays;
+  const titleText = typeof milestone.title === "string" ? milestone.title : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${label}: ${titleText}`,
+      className: "absolute top-0 z-10 -ml-1.5 flex flex-col items-center",
+      "data-milestone-id": milestone.id,
+      style: { left: `${(leftRatio * 100).toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "size-3 rotate-45 bg-amber-500 ring-2 ring-background"
+          }
+        ),
+        titleText ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 whitespace-nowrap rounded bg-amber-500/20 px-1 text-[10px] font-medium text-amber-900 dark:text-amber-200", children: titleText }) : null
+      ]
+    }
+  );
+}
+function TodayLine({ geometry, label, now }) {
+  const offsetDays = diffInDays(now, geometry.start);
+  if (offsetDays < 0 || offsetDays > geometry.totalDays) return null;
+  const leftRatio = offsetDays / geometry.totalDays;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": label,
+      className: "pointer-events-none absolute inset-y-0 z-10",
+      style: { left: `${(leftRatio * 100).toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-destructive"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute -top-5 -translate-x-1/2 whitespace-nowrap rounded bg-destructive/15 px-1 text-[10px] font-semibold uppercase tracking-wide text-destructive", children: label })
+      ]
+    }
+  );
+}
+function Axis({ geometry }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-7 items-end border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: geometry.ticks.map((tick) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "absolute -translate-x-1/2 px-1",
+      style: {
+        left: `${(tick.offset / geometry.totalDays * 100).toString()}%`
+      },
+      children: tick.label
+    },
+    tick.offset
+  )) });
+}
+function TaskRow({ geometry, task }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-8 items-center border-b border-border/40", children: /* @__PURE__ */ jsx(TaskBar, { geometry, task }) });
+}
+function LeftColumn({ groups, taskColumnWidth }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col border-r border-border bg-background",
+      style: {
+        minWidth: `${taskColumnWidth.toString()}px`,
+        width: `${taskColumnWidth.toString()}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-7 border-b border-border" }),
+        groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-7 items-center border-b border-border/60 px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: group.name }),
+          group.tasks.map((task) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex h-8 items-center justify-between gap-2 border-b border-border/40 px-3 text-sm text-foreground",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: task.title }),
+                task.assignee ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: task.assignee }) : null
+              ]
+            },
+            task.id
+          ))
+        ] }, group.id))
+      ]
+    }
+  );
+}
+function TimelineColumn({
+  geometry,
+  groups,
+  labels,
+  milestones,
+  now
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsx(Axis, { geometry }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-7 border-b border-border/60 bg-muted/20" }),
+        group.tasks.map((task) => /* @__PURE__ */ jsx(TaskRow, { geometry, task }, task.id))
+      ] }, group.id)),
+      milestones.map((milestone) => /* @__PURE__ */ jsx(
+        MilestoneMarker,
+        {
+          geometry,
+          label: labels.milestone,
+          milestone
+        },
+        milestone.id
+      )),
+      /* @__PURE__ */ jsx(TodayLine, { geometry, label: labels.today, now })
+    ] })
+  ] });
+}
+const GanttChart = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      endDate,
+      groups,
+      labels,
+      locale = DEFAULT_LOCALE,
+      milestones = [],
+      now,
+      scale = "month",
+      startDate,
+      taskColumnWidth = 200,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const geometry = useChartGeometry({ endDate, locale, scale, startDate });
+    const nowDate = useMemo(() => now ? toDate(now) : /* @__PURE__ */ new Date(), [now]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(LeftColumn, { groups, taskColumnWidth }),
+          /* @__PURE__ */ jsx(
+            TimelineColumn,
+            {
+              geometry,
+              groups,
+              labels: resolvedLabels,
+              milestones,
+              now: nowDate
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GanttChart.displayName = "GanttChart";
+export {
+  GanttChart
+};

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

@@ -0,0 +1,6 @@
+import {
+  GanttChart
+} from "./gantt-chart";
+export {
+  GanttChart
+};

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
+};