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

package/dist/components/item/index.js

@@ -0,0 +1,18 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+} from "./item";
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+};

package/dist/components/item/item.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const itemVariants = cva("flex items-center gap-3 rounded-md text-sm", {
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  },
+  variants: {
+    size: {
+      default: "p-3",
+      sm: "p-2"
+    },
+    variant: {
+      default: "",
+      muted: "bg-muted/50",
+      outline: "border border-border"
+    }
+  }
+});
+const Item = React.forwardRef(
+  ({ className, size, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(itemVariants({ size, variant }), className),
+      "data-slot": "item",
+      ref,
+      ...props
+    }
+  )
+);
+Item.displayName = "Item";
+const ItemMedia = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center [&_svg]:size-5",
+        className
+      ),
+      "data-slot": "item-media",
+      ref,
+      ...props
+    }
+  )
+);
+ItemMedia.displayName = "ItemMedia";
+const ItemContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+      "data-slot": "item-content",
+      ref,
+      ...props
+    }
+  )
+);
+ItemContent.displayName = "ItemContent";
+const ItemTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("font-medium leading-none", className),
+      "data-slot": "item-title",
+      ref,
+      ...props
+    }
+  )
+);
+ItemTitle.displayName = "ItemTitle";
+const ItemDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    "data-slot": "item-description",
+    ref,
+    ...props
+  }
+));
+ItemDescription.displayName = "ItemDescription";
+const ItemActions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center gap-2", className),
+      "data-slot": "item-actions",
+      ref,
+      ...props
+    }
+  )
+);
+ItemActions.displayName = "ItemActions";
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+  itemVariants
+};

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

@@ -0,0 +1,6 @@
+import {
+  JarvisDock
+} from "./jarvis-dock";
+export {
+  JarvisDock
+};

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 handleActivateAction = () => {
+    action.onActivate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "group relative flex size-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: handleActivateAction,
+      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 size-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,125 @@
+"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_oklch(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",
+          role: "img",
+          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/key-concept/key-concept.js

@@ -16,10 +16,10 @@ function KeyConcept({
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 text-primary flex-shrink-0 mt-0.5", children: icon }) : /* @__PURE__ */ jsx(
+        icon ? /* @__PURE__ */ jsx("span", { className: "size-5 text-primary flex-shrink-0 mt-0.5", children: icon }) : /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-primary flex-shrink-0 mt-0.5",
+            className: "size-5 text-primary flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -43,17 +43,18 @@ function KeyConcept({
   );
 }
 function Glossary({
+  as: Heading = "h4",
   children,
   className,
   icon,
   title = "Key Terms"
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("my-6", className), children: [
-    /* @__PURE__ */ jsxs("h4", { className: "font-semibold mb-3 flex items-center gap-2", children: [
-      icon ? /* @__PURE__ */ jsx("span", { className: "h-4 w-4", children: icon }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Heading, { className: "font-semibold mb-3 flex items-center gap-2", children: [
+      icon ? /* @__PURE__ */ jsx("span", { className: "size-4", children: icon }) : /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-4 w-4",
+          className: "size-4",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",

package/dist/components/keyboard-shortcuts-help/keyboard-shortcuts-help.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
+import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 function KeyboardShortcutsHelpImpl({
+  as: Heading = "h2",
   className,
   closeIcon,
   footer,
@@ -13,25 +16,12 @@ function KeyboardShortcutsHelpImpl({
 }) {
   const closeButtonRef = useRef(null);
   useEffect(() => {
-    if (!isOpen) return;
-    closeButtonRef.current?.focus();
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
-  useEffect(() => {
-    document.body.style.overflow = isOpen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
+    if (isOpen) {
+      closeButtonRef.current?.focus();
+    }
   }, [isOpen]);
+  useEscapeKey(onClose, { enabled: isOpen, preventDefault: true });
+  useBodyScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -58,19 +48,19 @@ function KeyboardShortcutsHelpImpl({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "shortcuts-title", children: title }),
+                /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "shortcuts-title", children: title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     "aria-label": "Close shortcuts help",
-                    className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted",
+                    className: "flex size-8 items-center justify-center rounded-md hover:bg-muted",
                     onClick: onClose,
                     ref: closeButtonRef,
                     type: "button",
                     children: closeIcon ?? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-5 w-5",
+                        className: "size-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",

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

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