@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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-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
+};

package/dist/components/flow-diagram/flow-controls.js

@@ -12,7 +12,7 @@ import {
   X
 } from "lucide-react";
 import { cn } from "../../lib/utils";
-const BUTTON_CLASS = "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_CLASS = "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
 function ControlButton({
   disabled,
   icon,
@@ -36,14 +36,14 @@ function ControlButton({
 function getCopyIcon(status) {
   switch (status) {
     case "copying":
-      return /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" });
+      return /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" });
     case "success":
-      return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" });
+      return /* @__PURE__ */ jsx(Check, { className: "size-4 text-green-500" });
     case "error":
-      return /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-destructive" });
+      return /* @__PURE__ */ jsx(X, { className: "size-4 text-destructive" });
     case "idle":
     case void 0:
-      return /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" });
+      return /* @__PURE__ */ jsx(Copy, { className: "size-4" });
   }
 }
 function getCopyTitle(status) {
@@ -81,7 +81,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
             label: "Zoom in",
             onClick: onZoomIn,
             title: "Zoom in"
@@ -90,7 +90,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Minus, { className: "size-4" }),
             label: "Zoom out",
             onClick: onZoomOut,
             title: "Zoom out"
@@ -100,7 +100,7 @@ const FlowControls = memo(function FlowControls2({
         /* @__PURE__ */ jsx(
           ControlButton,
           {
-            icon: /* @__PURE__ */ jsx(Move, { className: "h-4 w-4" }),
+            icon: /* @__PURE__ */ jsx(Move, { className: "size-4" }),
             label: "Fit view",
             onClick: onFitView,
             title: "Fit view"
@@ -124,7 +124,7 @@ const FlowControls = memo(function FlowControls2({
           /* @__PURE__ */ jsx(
             ControlButton,
             {
-              icon: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }),
+              icon: /* @__PURE__ */ jsx(Maximize2, { className: "size-4" }),
               label: "Fullscreen",
               onClick: onFullscreen,
               title: "Toggle fullscreen"

package/dist/components/flow-diagram/flow-error-boundary.js

@@ -34,7 +34,7 @@ class FlowErrorBoundary extends Component {
           ),
           style: { height },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-6 text-destructive" }) }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Failed to render diagram" }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error?.message ?? "An unexpected error occurred while rendering the flow diagram." })
@@ -46,7 +46,7 @@ class FlowErrorBoundary extends Component {
                 onClick: this.handleRetry,
                 type: "button",
                 children: [
-                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
                   "Try again"
                 ]
               }

package/dist/components/flow-diagram/flow-fullscreen.js

@@ -39,11 +39,11 @@ const FlowFullscreen = memo(function FlowFullscreen2({
             "button",
             {
               "aria-label": "Close fullscreen",
-              className: "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors",
+              className: "flex size-8 items-center justify-center rounded hover:bg-muted transition-colors",
               onClick: onClose,
               title: "Close fullscreen (Esc)",
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-5" })
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children })

package/dist/components/follow-mode/follow-mode.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const PALETTE = {
+  amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
+  blue: { chip: "bg-blue-500 text-white", ring: "ring-blue-500" },
+  emerald: { chip: "bg-emerald-500 text-white", ring: "ring-emerald-500" },
+  purple: { chip: "bg-purple-500 text-white", ring: "ring-purple-500" },
+  red: { chip: "bg-red-500 text-white", ring: "ring-red-500" },
+  rose: { chip: "bg-rose-500 text-white", ring: "ring-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Follow mode",
+  stop: "Stop"
+};
+const FollowMode = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "blue",
+      labels,
+      name,
+      onStop,
+      ...rest
+    } = props;
+    const palette = PALETTE[color];
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full rounded-2xl ring-2 ring-inset",
+          palette.ring,
+          className
+        ),
+        "data-follow-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+              "data-follow-chip": true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                      palette.chip
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Following ",
+                        name
+                      ] })
+                    ]
+                  }
+                ),
+                onStop ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": resolvedLabels.stop,
+                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: onStop,
+                    type: "button",
+                    children: resolvedLabels.stop
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FollowMode.displayName = "FollowMode";
+export {
+  FollowMode
+};

package/dist/components/follow-mode/index.js

@@ -0,0 +1,6 @@
+import {
+  FollowMode
+} from "./follow-mode";
+export {
+  FollowMode
+};