@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/quiz/quiz.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+function QuizOptionButton({
+  index,
+  onSelect,
+  option,
+  selectedIndex,
+  submitted
+}) {
+  const isSelected = selectedIndex === index;
+  const showResult = submitted && isSelected;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "w-full text-left p-3 rounded-md border transition-colors hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary",
+        isSelected && !submitted && "border-primary bg-primary/10",
+        showResult && option.correct && "border-green-500 bg-green-500/10",
+        showResult && !option.correct && "border-red-500 bg-red-500/10",
+        submitted && !isSelected && option.correct && "border-green-500/50 bg-green-500/5"
+      ),
+      disabled: submitted,
+      onClick: () => {
+        onSelect(index);
+      },
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: option.label }),
+          showResult ? option.correct ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4 text-green-500",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5 13l4 4L19 7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4 text-red-500",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M6 18L18 6M6 6l12 12",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ) : null,
+          submitted && !isSelected && option.correct ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4 text-green-500/50",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5 13l4 4L19 7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ) : null
+        ] }),
+        submitted && option.explanation ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-2", children: option.explanation }) : null
+      ]
+    }
+  );
+}
+function QuizHint({ hint, onShow, showHint }) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-4", children: showHint ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic bg-muted/50 p-2 rounded", children: hint }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "text-sm text-primary hover:underline",
+      onClick: onShow,
+      type: "button",
+      children: "Show hint"
+    }
+  ) });
+}
+function QuizResult({
+  explanation,
+  isCorrect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "p-3 rounded-md text-sm mb-4",
+        isCorrect ? "bg-green-500/10 text-green-700 dark:text-green-300" : "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium mb-1", children: isCorrect ? "Correct!" : "Not quite right." }),
+        /* @__PURE__ */ jsx("div", { className: "[&>p]:mb-0", children: explanation })
+      ]
+    }
+  );
+}
+function Quiz({
+  className,
+  explanation,
+  hint,
+  onAnswer,
+  options,
+  question
+}) {
+  const [selectedIndex, setSelectedIndex] = useState(null);
+  const [showHint, setShowHint] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const handleReset = () => {
+    setSelectedIndex(null);
+    setSubmitted(false);
+    setShowHint(false);
+  };
+  const handleSubmit = () => {
+    setSubmitted(true);
+    const isCorrect2 = selectedIndex !== null && options[selectedIndex]?.correct;
+    onAnswer?.(Boolean(isCorrect2));
+  };
+  const isCorrect = selectedIndex !== null && options[selectedIndex]?.correct;
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-6 rounded-lg border bg-card p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-5 w-5 text-primary flex-shrink-0 mt-0.5",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: question })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: options.map((opt, index) => /* @__PURE__ */ jsx(
+      QuizOptionButton,
+      {
+        index,
+        onSelect: (index_) => {
+          if (!submitted) setSelectedIndex(index_);
+        },
+        option: opt,
+        selectedIndex,
+        submitted
+      },
+      index
+    )) }),
+    hint && !submitted ? /* @__PURE__ */ jsx(
+      QuizHint,
+      {
+        hint,
+        onShow: () => {
+          setShowHint(true);
+        },
+        showHint
+      }
+    ) : null,
+    submitted && explanation ? /* @__PURE__ */ jsx(QuizResult, { explanation, isCorrect: Boolean(isCorrect) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: submitted ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "px-3 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors",
+        onClick: handleReset,
+        type: "button",
+        children: "Try Again"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none transition-colors",
+        disabled: selectedIndex === null,
+        onClick: handleSubmit,
+        type: "button",
+        children: "Check Answer"
+      }
+    ) })
+  ] });
+}
+export {
+  Quiz
+};

package/dist/components/radio-group/index.js

@@ -0,0 +1,5 @@
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+export {
+  RadioGroup,
+  RadioGroupItem
+};

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+const RadioGroup = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export {
+  RadioGroup,
+  RadioGroupItem
+};

package/dist/components/resizable/index.js

@@ -0,0 +1,10 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from "./resizable";
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};

package/dist/components/resizable/resizable.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+import { cn } from "../../lib/utils";
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Group,
+  {
+    className: cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    ),
+    ...props
+  }
+);
+const ResizablePanel = Panel;
+const ResizableHandle = ({
+  className,
+  withHandle,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Separator,
+  {
+    className: cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    ),
+    ...props,
+    children: withHandle ? /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) }) : null
+  }
+);
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};

package/dist/components/scroll-area/index.js

@@ -0,0 +1,5 @@
+import { ScrollArea, ScrollBar } from "./scroll-area";
+export {
+  ScrollArea,
+  ScrollBar
+};

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/utils";
+const ScrollArea = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    className: cn("relative overflow-hidden", className),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    orientation,
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export {
+  ScrollArea,
+  ScrollBar
+};

package/dist/components/search-bar/index.js

@@ -0,0 +1,4 @@
+import { SearchBar } from "./search-bar";
+export {
+  SearchBar
+};

package/dist/components/search-bar/search-bar.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useDebounce } from "../../lib/use-debounce";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+function SearchBar({
+  className,
+  onSearch,
+  placeholder = "Search posts..."
+}) {
+  const router = useRouter();
+  const searchParameters = useSearchParams();
+  const initialQuery = searchParameters.get("search") ?? "";
+  const [query, setQuery] = useState(initialQuery);
+  const debouncedQuery = useDebounce(query, 300);
+  const isInitialMount = useRef(true);
+  const isUserTyping = useRef(false);
+  const typingTimeoutReference = useRef(void 0);
+  const lastSetSearchParameterReference = useRef("");
+  const lastDebouncedQueryReference = useRef("");
+  useEffect(() => {
+    const searchParameter = searchParameters.get("search") ?? "";
+    if (searchParameter === lastSetSearchParameterReference.current) {
+      return;
+    }
+    if (!isUserTyping.current && query !== searchParameter) {
+      requestAnimationFrame(() => {
+        setQuery(searchParameter);
+        lastDebouncedQueryReference.current = searchParameter;
+      });
+    }
+  }, [searchParameters, query]);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      const initialTrimmed = debouncedQuery.trim();
+      lastDebouncedQueryReference.current = initialTrimmed;
+      lastSetSearchParameterReference.current = initialTrimmed;
+      return;
+    }
+    const trimmedQuery = debouncedQuery.trim();
+    if (trimmedQuery === lastDebouncedQueryReference.current) {
+      return;
+    }
+    lastDebouncedQueryReference.current = trimmedQuery;
+    if (onSearch) {
+      onSearch(trimmedQuery);
+      return;
+    }
+    const currentUrlParameter = searchParameters.get("search") ?? "";
+    if (trimmedQuery === currentUrlParameter) {
+      lastSetSearchParameterReference.current = trimmedQuery;
+      return;
+    }
+    const parameters = new URLSearchParams(searchParameters);
+    if (trimmedQuery) {
+      parameters.set("search", trimmedQuery);
+    } else {
+      parameters.delete("search");
+    }
+    const newUrl = parameters.toString();
+    lastSetSearchParameterReference.current = trimmedQuery;
+    router.replace(`?${newUrl}`);
+  }, [debouncedQuery, router, onSearch, searchParameters]);
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutReference.current) {
+        clearTimeout(typingTimeoutReference.current);
+      }
+    };
+  }, []);
+  const handleInputChange = (event) => {
+    isUserTyping.current = true;
+    setQuery(event.target.value);
+    if (typingTimeoutReference.current) {
+      clearTimeout(typingTimeoutReference.current);
+    }
+    typingTimeoutReference.current = setTimeout(() => {
+      isUserTyping.current = false;
+    }, 350);
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    isUserTyping.current = false;
+    if (typingTimeoutReference.current) {
+      clearTimeout(typingTimeoutReference.current);
+    }
+    const trimmedQuery = query.trim();
+    if (onSearch) {
+      onSearch(trimmedQuery);
+    } else {
+      const parameters = new URLSearchParams(searchParameters);
+      if (trimmedQuery) {
+        parameters.set("search", trimmedQuery);
+      } else {
+        parameters.delete("search");
+      }
+      const newUrl = parameters.toString();
+      lastSetSearchParameterReference.current = trimmedQuery;
+      router.replace(`?${newUrl}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { className: `flex gap-2 ${className}`, onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": placeholder,
+        className: "flex-1",
+        onChange: handleInputChange,
+        placeholder,
+        type: "text",
+        value: query
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "outline", children: "Search" })
+  ] });
+}
+export {
+  SearchBar
+};

package/dist/components/search-dialog/index.js

@@ -0,0 +1,4 @@
+import { SearchDialog } from "./search-dialog";
+export {
+  SearchDialog
+};

package/dist/components/search-dialog/search-dialog.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../command";
+function useKeyboardShortcut(callback) {
+  useEffect(() => {
+    const down = (event) => {
+      if ((event.key === "k" || event.key === "K") && (event.metaKey || event.ctrlKey)) {
+        const target = event.target;
+        if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        callback();
+      }
+    };
+    window.addEventListener("keydown", down, { capture: true, passive: false });
+    return () => {
+      window.removeEventListener("keydown", down, { capture: true });
+    };
+  }, [callback]);
+}
+function SearchDialog({
+  buttonText = "Search...",
+  buttonTextMobile = "Search...",
+  emptyText = "No results found.",
+  enableKeyboardShortcut = true,
+  groupHeading,
+  items,
+  onSelect,
+  searchPlaceholder = "Search..."
+}) {
+  const [open, setOpen] = useState(false);
+  const sortedItems = [...items].sort((a, b) => a.title.localeCompare(b.title));
+  useKeyboardShortcut(() => {
+    if (enableKeyboardShortcut) {
+      setOpen((previous) => !previous);
+    }
+  });
+  const handleSelect = (item) => {
+    setOpen(false);
+    onSelect(item);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn(
+          "relative h-9 w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
+        ),
+        onClick: () => {
+          setOpen(true);
+        },
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline-flex", children: buttonText }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex lg:hidden", children: buttonTextMobile }),
+          /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+            "K"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandDialog, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { heading: groupHeading, children: sortedItems.map((item) => /* @__PURE__ */ jsx(
+          CommandItem,
+          {
+            onSelect: () => {
+              handleSelect(item);
+            },
+            value: `${item.title} ${item.description || ""} ${item.keywords || ""} ${item.id}`,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.title }),
+              item.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.description }) : null
+            ] })
+          },
+          item.id
+        )) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  SearchDialog
+};

package/dist/components/select/index.js

@@ -0,0 +1,24 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+} from "./select";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};