@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/jarvis-dock/jarvis-dock.js

@@ -0,0 +1,98 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_CLASS = {
+  danger: "text-red-600 dark:text-red-400",
+  neutral: "text-foreground",
+  primary: "text-blue-600 dark:text-blue-400",
+  success: "text-emerald-600 dark:text-emerald-400"
+};
+const DEFAULT_LABELS = {
+  paletteTrigger: "Open command palette",
+  region: "Jarvis dock"
+};
+const ActionButton = (props) => {
+  const { action } = props;
+  const tone = action.tone ?? "neutral";
+  const handleClick = () => {
+    action.onActivate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "group relative flex h-12 w-12 flex-col items-center justify-center gap-0.5 rounded-md border border-transparent text-[10px] uppercase tracking-wide text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-jarvis-action": action.id,
+      "data-jarvis-tone": tone,
+      onClick: handleClick,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "text-base leading-none transition-transform group-hover:scale-110",
+              TONE_CLASS[tone]
+            ),
+            children: action.glyph
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: action.label }),
+        action.badge ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute right-1 top-1 inline-flex min-h-[14px] min-w-[14px] items-center justify-center rounded-full bg-foreground px-1 text-[9px] font-medium text-background",
+            "data-jarvis-badge": true,
+            children: action.badge
+          }
+        ) : null
+      ]
+    }
+  );
+};
+const JarvisDock = forwardRef(
+  (props, ref) => {
+    const { actions, className, labels, onOpenPalette, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handlePalette = () => {
+      onOpenPalette?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "inline-flex items-center gap-1 rounded-2xl border bg-background/90 p-1.5 shadow-md backdrop-blur",
+          className
+        ),
+        "data-jarvis-dock": true,
+        ref,
+        ...rest,
+        children: [
+          actions.map((action) => /* @__PURE__ */ jsx(ActionButton, { action }, action.id)),
+          onOpenPalette ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mx-1 h-8 w-px bg-border" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": resolvedLabels.paletteTrigger,
+                className: "flex h-12 w-12 items-center justify-center rounded-md border border-transparent text-base text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-jarvis-palette-trigger": true,
+                onClick: handlePalette,
+                type: "button",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2318" })
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+JarvisDock.displayName = "JarvisDock";
+export {
+  JarvisDock
+};

package/dist/components/kbd/index.js

@@ -0,0 +1,5 @@
+import { Kbd, kbdVariants } from "./kbd";
+export {
+  Kbd,
+  kbdVariants
+};

package/dist/components/kbd/kbd.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useSyncExternalStore
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const kbdVariants = cva(
+  "inline-flex select-none items-center justify-center rounded border border-border bg-muted font-mono font-medium text-foreground shadow-[0_1px_0_0_hsl(var(--border))] [&>svg]:h-3 [&>svg]:w-3",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-7 min-w-[1.75rem] px-2 text-sm",
+        md: "h-5 min-w-[1.25rem] px-1.5 text-xs",
+        sm: "h-4 min-w-[1rem] px-1 text-[10px]"
+      }
+    }
+  }
+);
+const MAC_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;
+const MODIFIER_LABELS = {
+  alt: { mac: "\u2325", other: "Alt" },
+  ctrl: { mac: "\u2303", other: "Ctrl" },
+  meta: { mac: "\u2318", other: "Win" },
+  mod: { mac: "\u2318", other: "Ctrl" },
+  shift: { mac: "\u21E7", other: "Shift" }
+};
+const SPECIAL_KEY_LABELS = {
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  arrowup: "\u2191",
+  backspace: "\u232B",
+  delete: "\u2326",
+  enter: "\u21B5",
+  escape: "Esc",
+  return: "\u21B5",
+  space: "Space",
+  tab: "\u21E5"
+};
+const SHORTCUT_SEPARATOR = /\s*\+\s*/;
+function isMacPlatform() {
+  if (typeof navigator === "undefined") return false;
+  return MAC_PLATFORM_PATTERN.test(navigator.userAgent);
+}
+function noopUnsubscribe() {
+  return;
+}
+function subscribeNoop() {
+  return noopUnsubscribe;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useIsMac() {
+  return useSyncExternalStore(subscribeNoop, isMacPlatform, getServerSnapshot);
+}
+function isModifier(value) {
+  return Object.hasOwn(MODIFIER_LABELS, value);
+}
+function formatToken(token, mac) {
+  const lowered = token.toLowerCase();
+  if (isModifier(lowered)) {
+    const labels = MODIFIER_LABELS[lowered];
+    return mac ? labels.mac : labels.other;
+  }
+  const special = SPECIAL_KEY_LABELS[lowered];
+  if (special !== void 0) return special;
+  return token.length === 1 ? token.toUpperCase() : token;
+}
+const Kbd = forwardRef(
+  ({ children, className, shortcut, size, ...rest }, ref) => {
+    const isMac = useIsMac();
+    if (children !== void 0) {
+      return /* @__PURE__ */ jsx(
+        "kbd",
+        {
+          className: cn(kbdVariants({ size }), className),
+          ref,
+          ...rest,
+          children
+        }
+      );
+    }
+    if (shortcut) {
+      const tokens = shortcut.split(SHORTCUT_SEPARATOR).filter(Boolean);
+      const ariaLabel = tokens.map((token) => formatToken(token, isMac)).join(" + ");
+      return /* @__PURE__ */ jsx("span", { "aria-label": ariaLabel, className: "inline-flex items-center gap-1", children: tokens.map((token, index) => /* @__PURE__ */ jsx(
+        "kbd",
+        {
+          className: cn(kbdVariants({ size }), className),
+          ref: index === 0 ? ref : void 0,
+          ...index === 0 ? rest : {},
+          children: formatToken(token, isMac)
+        },
+        `${token}-${index.toString()}`
+      )) });
+    }
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        className: cn(kbdVariants({ size }), className),
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+export {
+  Kbd,
+  kbdVariants
+};

package/dist/components/knowledge-check/index.js

@@ -0,0 +1,6 @@
+import {
+  KnowledgeCheck
+} from "./knowledge-check";
+export {
+  KnowledgeCheck
+};

package/dist/components/knowledge-check/knowledge-check.js

@@ -0,0 +1,448 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { CheckCircle2, RotateCcw, XCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const DEFAULT_LABELS = {
+  back: "Back",
+  check: "Check",
+  correct: "Correct",
+  falseOption: "False",
+  incorrect: "Try again",
+  next: "Next",
+  outOf: "of",
+  retry: "Retry",
+  scored: "You scored",
+  trueOption: "True"
+};
+function compareFillBlank(question, response) {
+  const normalize = (value) => question.caseSensitive ? value.trim() : value.trim().toLowerCase();
+  return normalize(response) === normalize(question.answer);
+}
+function isMultipleChoiceCorrect(question, value) {
+  return question.options.some(
+    (option) => option.value === value && option.correct === true
+  );
+}
+function evaluateAnswer(question, response) {
+  switch (question.type) {
+    case "fill-blank":
+      return typeof response === "string" && compareFillBlank(question, response);
+    case "multiple-choice":
+      return typeof response === "string" && isMultipleChoiceCorrect(question, response);
+    case "true-false":
+      return typeof response === "boolean" && response === question.answer;
+  }
+}
+function useKnowledgeCheckController(options) {
+  const { onAnswer, onComplete, questions } = options;
+  const [index, setIndex] = useState(0);
+  const [responses, setResponses] = useState({});
+  const [answers, setAnswers] = useState({});
+  const [completed, setCompleted] = useState(false);
+  const setResponse = useCallback(
+    (questionId, value) => {
+      setResponses((current2) => ({ ...current2, [questionId]: value }));
+    },
+    []
+  );
+  const handleSubmit = useCallback(() => {
+    const question = questions[index];
+    if (!question) return;
+    const response = responses[question.id];
+    if (response === void 0) return;
+    const answer = {
+      correct: evaluateAnswer(question, response),
+      questionId: question.id,
+      response
+    };
+    setAnswers((current2) => ({ ...current2, [question.id]: answer }));
+    onAnswer?.(answer);
+  }, [index, onAnswer, questions, responses]);
+  const handleNext = useCallback(() => {
+    if (index >= questions.length - 1) {
+      const finalScore = computeScore(questions, answers);
+      setCompleted(true);
+      onComplete?.(finalScore);
+      return;
+    }
+    setIndex((value) => value + 1);
+  }, [answers, index, onComplete, questions]);
+  const handlePrevious = useCallback(() => {
+    setIndex((value) => Math.max(0, value - 1));
+  }, []);
+  const handleReset = useCallback(() => {
+    setIndex(0);
+    setResponses({});
+    setAnswers({});
+    setCompleted(false);
+  }, []);
+  const score = useMemo(
+    () => completed ? computeScore(questions, answers) : void 0,
+    [answers, completed, questions]
+  );
+  const current = questions[index] ?? questions[0];
+  if (!current) {
+    throw new Error("KnowledgeCheck requires at least one question");
+  }
+  return {
+    answers,
+    current,
+    handleNext,
+    handlePrevious,
+    handleReset,
+    handleSubmit,
+    index,
+    isComplete: completed,
+    isFirst: index === 0,
+    isLast: index === questions.length - 1,
+    responses,
+    score,
+    setResponse
+  };
+}
+function computeScore(questions, answers) {
+  const correct = Object.values(answers).filter(
+    (entry) => entry.correct
+  ).length;
+  return { answers, correct, total: questions.length };
+}
+function Feedback({
+  answer,
+  correctLabel,
+  explanation,
+  incorrectLabel
+}) {
+  if (!answer) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "flex items-start gap-2 rounded-md border p-3 text-sm",
+        answer.correct ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200" : "border-destructive/40 bg-destructive/10 text-destructive"
+      ),
+      role: "status",
+      children: [
+        answer.correct ? /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: answer.correct ? correctLabel : incorrectLabel }),
+          explanation ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: explanation }) : null
+        ] })
+      ]
+    }
+  );
+}
+function MultipleChoiceOption({
+  groupName,
+  onChange,
+  option,
+  value
+}) {
+  const id = `${groupName}-${option.value}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm hover:bg-accent", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        checked: value === option.value,
+        className: "h-4 w-4",
+        id,
+        name: groupName,
+        onChange,
+        type: "radio",
+        value: option.value
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { className: "flex-1 cursor-pointer", htmlFor: id, children: option.label })
+  ] });
+}
+function MultipleChoiceField({
+  groupName,
+  onChange,
+  options,
+  value
+}) {
+  const handleSelect = useCallback(
+    (event) => {
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", role: "radiogroup", children: options.map((option) => /* @__PURE__ */ jsx(
+    MultipleChoiceOption,
+    {
+      groupName,
+      onChange: handleSelect,
+      option,
+      value
+    },
+    option.value
+  )) });
+}
+function TrueFalseField({
+  falseLabel,
+  groupName,
+  onChange,
+  trueLabel,
+  value
+}) {
+  const handleSelectTrue = useCallback(() => {
+    onChange(true);
+  }, [onChange]);
+  const handleSelectFalse = useCallback(() => {
+    onChange(false);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": groupName,
+      className: "flex flex-wrap gap-2",
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-pressed": value === true,
+            onClick: handleSelectTrue,
+            size: "sm",
+            type: "button",
+            variant: value === true ? "default" : "outline",
+            children: trueLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-pressed": value === false,
+            onClick: handleSelectFalse,
+            size: "sm",
+            type: "button",
+            variant: value === false ? "default" : "outline",
+            children: falseLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function FillBlankField({
+  inputId,
+  onChange,
+  value
+}) {
+  const handleChange = useCallback(
+    (event) => {
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(Input, { id: inputId, onChange: handleChange, value });
+}
+function QuestionField({
+  groupName,
+  inputId,
+  labels,
+  onResponse,
+  question,
+  response
+}) {
+  switch (question.type) {
+    case "fill-blank":
+      return /* @__PURE__ */ jsx(
+        FillBlankField,
+        {
+          inputId,
+          onChange: onResponse,
+          value: typeof response === "string" ? response : ""
+        }
+      );
+    case "multiple-choice":
+      return /* @__PURE__ */ jsx(
+        MultipleChoiceField,
+        {
+          groupName,
+          onChange: onResponse,
+          options: question.options,
+          value: typeof response === "string" ? response : void 0
+        }
+      );
+    case "true-false":
+      return /* @__PURE__ */ jsx(
+        TrueFalseField,
+        {
+          falseLabel: labels.falseOption,
+          groupName,
+          onChange: onResponse,
+          trueLabel: labels.trueOption,
+          value: typeof response === "boolean" ? response : void 0
+        }
+      );
+  }
+}
+function ScoreSummary({
+  labels,
+  onRetry,
+  score
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.scored }),
+    /* @__PURE__ */ jsxs("p", { className: "text-3xl font-bold tracking-tight text-foreground", children: [
+      score.correct,
+      " ",
+      labels.outOf,
+      " ",
+      score.total
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { onClick: onRetry, size: "sm", type: "button", variant: "outline", children: [
+      /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true", className: "mr-2 h-4 w-4" }),
+      labels.retry
+    ] })
+  ] });
+}
+function QuestionPane({
+  controller,
+  groupName,
+  inputId,
+  labels,
+  questions
+}) {
+  const question = controller.current;
+  const response = controller.responses[question.id];
+  const answer = controller.answers[question.id];
+  const handleResponse = useCallback(
+    (value) => {
+      controller.setResponse(question.id, value);
+    },
+    [controller, question.id]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: `${(controller.index + 1).toString()} ${labels.outOf} ${questions.length.toString()}` }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: question.question }),
+    /* @__PURE__ */ jsx(
+      QuestionField,
+      {
+        groupName,
+        inputId,
+        labels,
+        onResponse: handleResponse,
+        question,
+        response
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Feedback,
+      {
+        answer,
+        correctLabel: labels.correct,
+        explanation: question.explanation,
+        incorrectLabel: labels.incorrect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaneActions,
+      {
+        answered: answer !== void 0,
+        controller,
+        labels,
+        responseSet: response !== void 0
+      }
+    )
+  ] });
+}
+function PaneActions({
+  answered,
+  controller,
+  labels,
+  responseSet
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 pt-1", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: controller.isFirst,
+        onClick: controller.handlePrevious,
+        size: "sm",
+        type: "button",
+        variant: "ghost",
+        children: labels.back
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: answered ? /* @__PURE__ */ jsx(Button, { onClick: controller.handleNext, size: "sm", type: "button", children: controller.isLast ? labels.scored : labels.next }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !responseSet,
+        onClick: controller.handleSubmit,
+        size: "sm",
+        type: "button",
+        children: labels.check
+      }
+    ) })
+  ] });
+}
+const KnowledgeCheck = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      onAnswer,
+      onComplete,
+      questions,
+      title,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const groupName = useId();
+    const inputId = useId();
+    const controller = useKnowledgeCheckController({
+      onAnswer,
+      onComplete,
+      questions
+    });
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: title }) : null,
+          controller.isComplete && controller.score ? /* @__PURE__ */ jsx(
+            ScoreSummary,
+            {
+              labels: resolvedLabels,
+              onRetry: controller.handleReset,
+              score: controller.score
+            }
+          ) : /* @__PURE__ */ jsx(
+            QuestionPane,
+            {
+              controller,
+              groupName,
+              inputId,
+              labels: resolvedLabels,
+              questions
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+KnowledgeCheck.displayName = "KnowledgeCheck";
+export {
+  KnowledgeCheck
+};

package/dist/components/left-rail/index.js

@@ -0,0 +1,4 @@
+import { LeftRail } from "./left-rail";
+export {
+  LeftRail
+};

package/dist/components/left-rail/left-rail.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const LeftRail = forwardRef(
+  ({ children, className, footer, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 flex-col items-center gap-2", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-center gap-2", children: footer }) : null
+      ]
+    }
+  )
+);
+LeftRail.displayName = "LeftRail";
+export {
+  LeftRail
+};