@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useId,
   useMemo,
@@ -410,63 +409,56 @@ function PaneActions({
     ) })
   ] });
 }
-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 questionTextId = 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,
-              questionTextId
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const KnowledgeCheck = ({
+  ref,
+  ...props
+}) => {
+  const { className, labels, onAnswer, onComplete, questions, title, ...rest } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const groupName = useId();
+  const inputId = useId();
+  const questionTextId = 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,
+            questionTextId
+          }
+        )
+      ]
+    }
+  );
+};
 KnowledgeCheck.displayName = "KnowledgeCheck";
 export {
   KnowledgeCheck

package/dist/components/label/label.js

@@ -1,20 +1,23 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Label = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     className: cn(labelVariants(), className),
     ref,
     ...props
   }
-));
+);
 Label.displayName = LabelPrimitive.Root.displayName;
 export {
   Label

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

@@ -1,23 +1,27 @@
 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
-      ]
-    }
-  )
+const LeftRail = ({
+  children,
+  className,
+  footer,
+  ref,
+  title,
+  ...props
+}) => /* @__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 {

package/dist/components/link/index.js

@@ -0,0 +1,5 @@
+import { Link, linkVariants } from "./link";
+export {
+  Link,
+  linkVariants
+};

package/dist/components/link/link.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../../lib/utils";
+const linkVariants = cva(
+  "inline-flex items-center gap-1 rounded-sm underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: "font-medium text-primary hover:underline",
+        muted: "text-muted-foreground hover:text-foreground hover:underline",
+        underline: "font-medium text-primary underline hover:text-primary/80"
+      }
+    }
+  }
+);
+const Link = ({
+  asChild = false,
+  children,
+  className,
+  external = false,
+  ref,
+  rel,
+  showExternalIcon = true,
+  target,
+  variant,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(linkVariants({ variant }), className),
+      ref,
+      rel: external ? rel ?? "noreferrer noopener" : rel,
+      target: external ? target ?? "_blank" : target,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        external && showExternalIcon ? /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-3.5 shrink-0" }) : null
+      ] })
+    }
+  );
+};
+Link.displayName = "Link";
+export {
+  Link,
+  linkVariants
+};

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

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

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

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const LiquidGlass = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-xl border border-border/50 bg-card/50 backdrop-blur-md",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 motion-reduce:animate-none",
+            style: {
+              animation: "vllnt-liquid-shift 8s ease-in-out infinite",
+              background: "linear-gradient(120deg, transparent, oklch(var(--primary) / 0.18), transparent, oklch(var(--accent) / 0.18), transparent)",
+              backgroundSize: "200% 200%"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+};
+LiquidGlass.displayName = "LiquidGlass";
+export {
+  LiquidGlass
+};

package/dist/components/list-box/index.js

@@ -0,0 +1,8 @@
+import {
+  ListBox,
+  ListBoxItem
+} from "./list-box";
+export {
+  ListBox,
+  ListBoxItem
+};

package/dist/components/list-box/list-box.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+const ListBoxContext = React.createContext(null);
+function useListBoxContext() {
+  const context = React.use(ListBoxContext);
+  if (!context) {
+    throw new Error("ListBoxItem must be used within a ListBox");
+  }
+  return context;
+}
+function nextSelection(current, item, selectionMode) {
+  if (selectionMode === "single") {
+    return [item];
+  }
+  return current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item];
+}
+function useListBoxSelection({
+  defaultValue,
+  onValueChange,
+  selectionMode,
+  value
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const selectedValues = value ?? internalValue;
+  const select = (item) => {
+    const next = nextSelection(selectedValues, item, selectionMode);
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+  return { select, selectedValues };
+}
+const ListBox = ({
+  children,
+  className,
+  defaultValue = [],
+  disabled = false,
+  label,
+  onValueChange,
+  ref,
+  selectionMode = "single",
+  value
+}) => {
+  const { select, selectedValues } = useListBoxSelection({
+    defaultValue,
+    onValueChange,
+    selectionMode,
+    value
+  });
+  const context = React.useMemo(
+    () => ({ disabled, select, selectedValues }),
+    [disabled, select, selectedValues]
+  );
+  return /* @__PURE__ */ jsx(ListBoxContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-multiselectable": selectionMode === "multiple",
+      className: cn(
+        "flex flex-col gap-0.5 rounded-md border border-input bg-background p-1",
+        className
+      ),
+      ref,
+      role: "listbox",
+      children
+    }
+  ) });
+};
+ListBox.displayName = "ListBox";
+const ListBoxItem = ({
+  children,
+  className,
+  disabled = false,
+  ref,
+  value
+}) => {
+  const group = useListBoxContext();
+  const selected = group.selectedValues.includes(value);
+  const isDisabled = disabled || group.disabled;
+  const activate = () => {
+    if (!isDisabled) {
+      group.select(value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      activate();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      "aria-selected": selected,
+      className: cn(
+        "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        selected && "bg-accent text-accent-foreground",
+        isDisabled && "pointer-events-none opacity-50",
+        className
+      ),
+      onClick: activate,
+      onKeyDown: handleKeyDown,
+      ref,
+      role: "option",
+      tabIndex: isDisabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: cn(
+              "size-4 shrink-0",
+              selected ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+      ]
+    }
+  );
+};
+ListBoxItem.displayName = "ListBoxItem";
+export {
+  ListBox,
+  ListBoxItem
+};

package/dist/components/live-cursor/live-cursor.js

@@ -1,61 +1,59 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   region: "Live cursor"
 };
-const LiveCursor = forwardRef(
-  (props, ref) => {
-    const { className, color, labels, name, status, x, y, ...rest } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const resolvedColor = color ?? "var(--foreground)";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region,
-        className: cn(
-          "pointer-events-none absolute z-30 flex items-start gap-1",
-          className
+const LiveCursor = ({
+  ref,
+  ...props
+}) => {
+  const { className, color, labels, name, status, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const resolvedColor = color ?? "var(--foreground)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute z-30 flex items-start gap-1",
+        className
+      ),
+      "data-live-cursor": true,
+      ref,
+      role: "img",
+      style: { left: x, top: y },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "-ml-1 -mt-1 drop-shadow-sm",
+            "data-live-cursor-pointer": true,
+            fill: resolvedColor,
+            height: 18,
+            viewBox: "0 0 16 18",
+            width: 16,
+            children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" })
+          }
         ),
-        "data-live-cursor": true,
-        ref,
-        role: "img",
-        style: { left: x, top: y },
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              "aria-hidden": "true",
-              className: "-ml-1 -mt-1 drop-shadow-sm",
-              "data-live-cursor-pointer": true,
-              fill: resolvedColor,
-              height: 18,
-              viewBox: "0 0 16 18",
-              width: 16,
-              children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" })
-            }
-          ),
-          name === null || name === void 0 ? null : /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
-              "data-live-cursor-chip": true,
-              style: { backgroundColor: resolvedColor },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: name }),
-                status ? /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-80", "data-live-cursor-status": true, children: status }) : null
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+        name === null || name === void 0 ? null : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+            "data-live-cursor-chip": true,
+            style: { backgroundColor: resolvedColor },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: name }),
+              status ? /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-80", "data-live-cursor-status": true, children: status }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 LiveCursor.displayName = "LiveCursor";
 export {
   LiveCursor