@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const ExpandableCards = ({
+  cards,
+  className,
+  ref,
+  ...props
+}) => {
+  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/field/field.js

@@ -0,0 +1,137 @@
+"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.use(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 = ({
+  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 = ({
+  className,
+  ref,
+  ...props
+}) => {
+  const { id, invalid } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(invalid && "text-destructive", className),
+      htmlFor: id,
+      ref,
+      ...props
+    }
+  );
+};
+FieldLabel.displayName = "FieldLabel";
+const FieldControl = ({
+  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 = ({
+  className,
+  ref,
+  ...props
+}) => {
+  const { descriptionId } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-sm text-muted-foreground", className),
+      id: descriptionId,
+      ref,
+      ...props
+    }
+  );
+};
+FieldDescription.displayName = "FieldDescription";
+const FieldError = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  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,49 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const Fieldset = ({
+  className,
+  ref,
+  ...props
+}) => /* @__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 = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "legend",
+  {
+    className: cn("text-sm font-medium leading-none", className),
+    "data-slot": "fieldset-legend",
+    ref,
+    ...props
+  }
+);
+FieldsetLegend.displayName = "FieldsetLegend";
+const FieldsetContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__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

@@ -164,8 +164,9 @@ function FileUploadComponent({
   helperText = "Supports one or more files.",
   multiple = true,
   onFilesChange,
+  ref: reference,
   ...props
-}, reference) {
+}) {
   const inputReference = React.useRef(null);
   const [isDragging, setIsDragging] = React.useState(false);
   const { addFiles, removeFile, resolvedFiles } = useFileUploadState(
@@ -215,8 +216,8 @@ function FileUploadComponent({
     /* @__PURE__ */ jsx(FileUploadList, { files: resolvedFiles, onRemove: removeFile })
   ] });
 }
-const FileUpload = React.forwardRef(FileUploadComponent);
-FileUpload.displayName = "FileUpload";
+FileUploadComponent.displayName = "FileUpload";
+const FileUpload = FileUploadComponent;
 export {
   FileUpload
 };

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

@@ -0,0 +1,67 @@
+"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 = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  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

@@ -1,8 +1,5 @@
 "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",
@@ -12,54 +9,55 @@ const VARIANT_CLASSES = {
 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
-          );
-        })
-      }
-    );
-  }
-);
+const FloatingToolbar = ({
+  ref,
+  ...props
+}) => {
+  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/flow-diagram/flow-fullscreen.js

@@ -1,26 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
+import { memo } from "react";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
+import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 const FlowFullscreen = memo(function FlowFullscreen2({
   children,
   isOpen,
   onClose
 }) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
+  useEscapeKey(onClose, { enabled: isOpen, target: "document" });
   if (!isOpen) return null;
   if (typeof document === "undefined") return null;
   return createPortal(

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

@@ -6,6 +6,8 @@ import {
   useReactFlow
 } from "@xyflow/react";
 import { toPng } from "html-to-image";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
+import { useEscapeKey } from "../../lib/use-escape-key";
 const MIN_ZOOM = 0.1;
 const MAX_ZOOM = 2;
 const ZOOM_STEP = 0.2;
@@ -44,24 +46,11 @@ function useFullscreenState(allowFullscreen) {
   const closeFullscreen = useCallback(() => {
     setIsFullscreen(false);
   }, []);
-  useEffect(() => {
-    if (!isFullscreen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        closeFullscreen();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isFullscreen, closeFullscreen]);
-  useEffect(() => {
-    document.body.style.overflow = isFullscreen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isFullscreen]);
+  useEscapeKey(closeFullscreen, {
+    enabled: isFullscreen,
+    target: "document"
+  });
+  useBodyScrollLock(isFullscreen);
   return { closeFullscreen, isFullscreen, toggleFullscreen };
 }
 const IMAGE_WIDTH = 1024;