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

package/dist/components/exercise/exercise.js

@@ -3,18 +3,24 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Dumbbell, Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const difficultyConfig = {
   easy: { className: "text-green-600 dark:text-green-400", label: "Easy" },
   hard: { className: "text-red-600 dark:text-red-400", label: "Hard" },
   medium: { className: "text-amber-600 dark:text-amber-400", label: "Medium" }
 };
-function ExerciseHeader({ completed, config, onToggle, title }) {
+function ExerciseHeader({
+  completed,
+  config,
+  Heading,
+  onToggle,
+  title
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "h-5 w-5 text-primary" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "size-5 text-primary" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: title }),
         /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", config.className), children: config.label })
       ] })
     ] }),
@@ -26,7 +32,7 @@ function ExerciseHeader({ completed, config, onToggle, title }) {
         size: "sm",
         variant: completed ? "default" : "outline",
         children: completed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4 mr-1" }),
           "Done"
         ] }) : "Mark Complete"
       }
@@ -50,10 +56,10 @@ function ExerciseHint({ hint, onShow, showHint }) {
 function ExerciseSolution({ onToggle, showSolution, solution }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Button, { className: "mb-3", onClick: onToggle, size: "sm", variant: "outline", children: showSolution ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(EyeOff, { className: "size-4 mr-1" }),
       "Hide Solution"
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(Eye, { className: "size-4 mr-1" }),
       "Show Solution"
     ] }) }),
     showSolution ? /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg bg-card border text-sm [&>pre]:my-0", children: [
@@ -63,6 +69,7 @@ function ExerciseSolution({ onToggle, showSolution, solution }) {
   ] });
 }
 function Exercise({
+  as: Heading = "h4",
   children,
   difficulty = "medium",
   hint,
@@ -78,6 +85,7 @@ function Exercise({
       {
         completed,
         config: difficultyConfig[difficulty],
+        Heading,
         onToggle: () => {
           setCompleted(!completed);
         },

package/dist/components/expandable-cards/expandable-cards.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const ExpandableCards = React.forwardRef(({ cards, className, ...props }, ref) => {
+  const [expandedId, setExpandedId] = React.useState(null);
+  const toggle = (id) => {
+    setExpandedId((current) => current === id ? null : id);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), ref, ...props, children: cards.map((card) => /* @__PURE__ */ jsx(
+    ExpandableCard,
+    {
+      card,
+      expanded: expandedId === card.id,
+      onToggle: toggle
+    },
+    card.id
+  )) });
+});
+ExpandableCards.displayName = "ExpandableCards";
+function ExpandableCard({
+  card,
+  expanded,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-expanded": expanded,
+        className: "flex w-full flex-col items-start gap-1 p-4 text-left transition-colors hover:bg-accent hover:text-accent-foreground",
+        onClick: () => {
+          onToggle(card.id);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: card.title }),
+          card.description === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: card.description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid transition-all duration-300 motion-reduce:transition-none",
+          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 text-sm text-muted-foreground", children: card.content }) })
+      }
+    )
+  ] });
+}
+export {
+  ExpandableCards
+};

package/dist/components/expandable-cards/index.js

@@ -0,0 +1,6 @@
+import {
+  ExpandableCards
+} from "./expandable-cards";
+export {
+  ExpandableCards
+};

package/dist/components/faq/faq.js

@@ -20,7 +20,7 @@ function FAQItem({ children, defaultOpen = false, question }) {
             ChevronDown,
             {
               className: cn(
-                "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+                "size-4 flex-shrink-0 transition-transform duration-200",
                 isOpen && "rotate-180"
               )
             }
@@ -40,11 +40,15 @@ function FAQItem({ children, defaultOpen = false, question }) {
     )
   ] });
 }
-function FAQ({ children, title = "Frequently Asked Questions" }) {
+function FAQ({
+  as: Heading = "h4",
+  children,
+  title = "Frequently Asked Questions"
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-4 border-b border-border", children: [
-      /* @__PURE__ */ jsx(HelpCircle, { className: "h-5 w-5 text-primary" }),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: title })
+      /* @__PURE__ */ jsx(HelpCircle, { className: "size-5 text-primary" }),
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold", children: title })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "px-4", children })
   ] });

package/dist/components/field/field.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Label } from "../label/label";
+const FieldContext = React.createContext(null);
+function useFieldContext() {
+  const context = React.useContext(FieldContext);
+  if (!context) {
+    throw new Error("Field subcomponents must be used within a Field");
+  }
+  return context;
+}
+const fieldVariants = cva("flex", {
+  defaultVariants: {
+    orientation: "vertical"
+  },
+  variants: {
+    orientation: {
+      horizontal: "flex-row items-center gap-3",
+      vertical: "flex-col gap-1.5"
+    }
+  }
+});
+const Field = React.forwardRef(
+  ({ children, className, invalid = false, orientation }, ref) => {
+    const id = React.useId();
+    const value = React.useMemo(
+      () => ({
+        descriptionId: `${id}-description`,
+        errorId: `${id}-error`,
+        id: `${id}-control`,
+        invalid
+      }),
+      [id, invalid]
+    );
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(fieldVariants({ orientation }), className),
+        "data-slot": "field",
+        ref,
+        children
+      }
+    ) });
+  }
+);
+Field.displayName = "Field";
+const FieldLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { id, invalid } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(invalid && "text-destructive", className),
+      htmlFor: id,
+      ref,
+      ...props
+    }
+  );
+});
+FieldLabel.displayName = "FieldLabel";
+const FieldControl = React.forwardRef(
+  ({ children }, ref) => {
+    const { descriptionId, errorId, id, invalid } = useFieldContext();
+    const describedBy = [descriptionId, invalid ? errorId : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        id,
+        ref,
+        children
+      }
+    );
+  }
+);
+FieldControl.displayName = "FieldControl";
+const FieldDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { descriptionId } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-sm text-muted-foreground", className),
+      id: descriptionId,
+      ref,
+      ...props
+    }
+  );
+});
+FieldDescription.displayName = "FieldDescription";
+const FieldError = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { errorId } = useFieldContext();
+    if (!children) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("text-sm font-medium text-destructive", className),
+        id: errorId,
+        ref,
+        role: "alert",
+        ...props,
+        children
+      }
+    );
+  }
+);
+FieldError.displayName = "FieldError";
+export {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  fieldVariants
+};

package/dist/components/field/index.js

@@ -0,0 +1,16 @@
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  fieldVariants
+} from "./field";
+export {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  fieldVariants
+};

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Fieldset = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn(
+        "flex min-w-0 flex-col gap-4 disabled:opacity-50",
+        className
+      ),
+      "data-slot": "fieldset",
+      ref,
+      ...props
+    }
+  )
+);
+Fieldset.displayName = "Fieldset";
+const FieldsetLegend = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "legend",
+    {
+      className: cn("text-sm font-medium leading-none", className),
+      "data-slot": "fieldset-legend",
+      ref,
+      ...props
+    }
+  )
+);
+FieldsetLegend.displayName = "FieldsetLegend";
+const FieldsetContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-4", className),
+      "data-slot": "fieldset-content",
+      ref,
+      ...props
+    }
+  )
+);
+FieldsetContent.displayName = "FieldsetContent";
+export {
+  Fieldset,
+  FieldsetContent,
+  FieldsetLegend
+};

package/dist/components/fieldset/index.js

@@ -0,0 +1,10 @@
+import {
+  Fieldset,
+  FieldsetContent,
+  FieldsetLegend
+} from "./fieldset";
+export {
+  Fieldset,
+  FieldsetContent,
+  FieldsetLegend
+};

package/dist/components/file-upload/file-upload.js

@@ -3,16 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FileUp, UploadCloud, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function useFileUploadState(controlledFiles, multiple, onFilesChange) {
   const [internalFiles, setInternalFiles] = React.useState(
     controlledFiles ?? []
   );
-  React.useEffect(() => {
-    if (controlledFiles !== void 0) {
-      setInternalFiles(controlledFiles);
-    }
-  }, [controlledFiles]);
   const resolvedFiles = controlledFiles ?? internalFiles;
   const updateFiles = React.useCallback(
     (nextFiles) => {
@@ -73,7 +68,7 @@ function FileListItem({
         size: "icon",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )
   ] });
@@ -127,13 +122,13 @@ function FileUploadDropzone({
       role: "button",
       tabIndex: disabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 h-10 w-10 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 size-10 text-muted-foreground" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium", children: dropzoneText }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
         ] }),
         /* @__PURE__ */ jsxs("span", { className: "mt-4 inline-flex h-10 items-center justify-center rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm", children: [
-          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 size-4" }),
           browseLabel
         ] }),
         children

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useTransition } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function SearchInput({
   disabled,
   label,
@@ -149,25 +149,26 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   tagsLabel: "Tags:"
 };
+const EMPTY_FILTER_BAR_LABELS = {};
 function FilterBarImpl({
   className,
   currentDifficulty,
   currentTags,
   difficultyOptions,
-  labels = {},
+  labels = EMPTY_FILTER_BAR_LABELS,
   onFiltersChange,
   searchQuery,
   tags
 }) {
-  const [isPending, setIsPending] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const handleDifficultyChange = useCallback(
     (difficulty) => {
-      setIsPending(true);
-      onFiltersChange({ difficulty });
-      setIsPending(false);
+      startTransition(() => {
+        onFiltersChange({ difficulty });
+      });
     },
-    [onFiltersChange]
+    [onFiltersChange, startTransition]
   );
   const handleSearchChange = useCallback(
     (search) => {

package/dist/components/flashcard/flashcard.js

@@ -3,9 +3,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { RefreshCcw } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
-import { Button } from "../button";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../card/card";
 function Flashcard({
   answer,
   category,
@@ -39,7 +45,7 @@ function Flashcard({
             /* @__PURE__ */ jsx(CardTitle, { children: title })
           ] }),
           /* @__PURE__ */ jsxs(Button, { onClick: toggleFlipped, size: "sm", variant: "outline", children: [
-            /* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 size-4" }),
             "Flip"
           ] })
         ] }),

package/dist/components/floating-action-button/floating-action-button.js

@@ -14,7 +14,7 @@ function FloatingActionButtonImpl({
     {
       "aria-label": ariaLabel,
       className: cn(
-        "fixed z-40 flex h-12 w-12 items-center justify-center rounded-full",
+        "fixed z-40 flex size-12 items-center justify-center rounded-full",
         "bg-primary text-primary-foreground shadow-lg",
         "transition-transform hover:scale-110",
         "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",

package/dist/components/floating-navbar/floating-navbar.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function useScrollVisibility(reduced) {
+  const [visible, setVisible] = React.useState(true);
+  const lastScrollY = React.useRef(0);
+  React.useEffect(() => {
+    if (reduced || typeof window === "undefined") {
+      return;
+    }
+    const onScroll = () => {
+      const current = window.scrollY;
+      setVisible(current < lastScrollY.current || current < 16);
+      lastScrollY.current = current;
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [reduced]);
+  return reduced ? true : visible;
+}
+const FloatingNavbar = React.forwardRef(({ children, className, ...props }, ref) => {
+  const reduced = usePrefersReducedMotion();
+  const visible = useScrollVisibility(reduced);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "fixed inset-x-0 top-4 z-50 mx-auto flex w-fit items-center gap-4 rounded-full border bg-card/70 px-6 py-2 shadow-lg backdrop-blur transition-transform duration-300",
+        visible ? "" : "-translate-y-[150%]",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+FloatingNavbar.displayName = "FloatingNavbar";
+export {
+  FloatingNavbar
+};

package/dist/components/floating-navbar/index.js

@@ -0,0 +1,4 @@
+import { FloatingNavbar } from "./floating-navbar";
+export {
+  FloatingNavbar
+};

package/dist/components/floating-toolbar/floating-toolbar.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const VARIANT_CLASSES = {
+  destructive: "border-red-300 bg-red-500/10 text-red-700 hover:bg-red-500/20 dark:text-red-300",
+  ghost: "border-border bg-background text-foreground hover:bg-accent",
+  primary: "border-primary bg-primary text-primary-foreground hover:bg-primary/90"
+};
+const DEFAULT_LABELS = {
+  region: "Selection actions"
+};
+const FloatingToolbar = forwardRef(
+  (props, ref) => {
+    const { actions, className, labels, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+          className
+        ),
+        "data-floating-toolbar": true,
+        ref,
+        role: "toolbar",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: actions.map((action) => {
+          const variant = action.variant ?? "ghost";
+          const handleActivateToolbarAction = () => {
+            action.onActivate();
+          };
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-label": action.ariaLabel ?? void 0,
+              className: cn(
+                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                VARIANT_CLASSES[variant],
+                action.disabled ? "cursor-not-allowed opacity-50" : ""
+              ),
+              "data-action-id": action.id,
+              "data-variant": variant,
+              disabled: action.disabled,
+              onClick: handleActivateToolbarAction,
+              type: "button",
+              children: [
+                action.glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex size-3", children: action.glyph }) : null,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          );
+        })
+      }
+    );
+  }
+);
+FloatingToolbar.displayName = "FloatingToolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/floating-toolbar/index.js

@@ -0,0 +1,6 @@
+import {
+  FloatingToolbar
+} from "./floating-toolbar";
+export {
+  FloatingToolbar
+};