@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/pricing-table/pricing-table.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useRef,
   useState
@@ -119,41 +118,42 @@ function PlanCta({ cta, highlighted }) {
     }
   );
 }
-const PricingPlan = forwardRef(
-  (props, ref) => {
-    const {
-      badge,
-      className,
-      cta,
-      description,
-      features,
-      highlighted = false,
-      name,
-      period,
-      price,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
-          highlighted ? "border-primary shadow-md ring-1 ring-primary/20" : "border-border",
-          className
-        ),
-        ref,
-        ...rest,
-        children: [
-          badge ? /* @__PURE__ */ jsx(PlanBadgePill, { badge, highlighted }) : null,
-          /* @__PURE__ */ jsx(PlanHeader, { description, name }),
-          /* @__PURE__ */ jsx(PlanPrice, { period, price }),
-          features && features.length > 0 ? /* @__PURE__ */ jsx(PlanFeatures, { features }) : null,
-          cta ? /* @__PURE__ */ jsx(PlanCta, { cta, highlighted }) : null
-        ]
-      }
-    );
-  }
-);
+const PricingPlan = ({
+  ref,
+  ...props
+}) => {
+  const {
+    badge,
+    className,
+    cta,
+    description,
+    features,
+    highlighted = false,
+    name,
+    period,
+    price,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
+        highlighted ? "border-primary shadow-md ring-1 ring-primary/20" : "border-border",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        badge ? /* @__PURE__ */ jsx(PlanBadgePill, { badge, highlighted }) : null,
+        /* @__PURE__ */ jsx(PlanHeader, { description, name }),
+        /* @__PURE__ */ jsx(PlanPrice, { period, price }),
+        features && features.length > 0 ? /* @__PURE__ */ jsx(PlanFeatures, { features }) : null,
+        cta ? /* @__PURE__ */ jsx(PlanCta, { cta, highlighted }) : null
+      ]
+    }
+  );
+};
 PricingPlan.displayName = "PricingPlan";
 const PERIOD_ARROW_KEYS = /* @__PURE__ */ new Set([
   "ArrowDown",
@@ -243,40 +243,41 @@ function PeriodToggle({
     }
   );
 }
-const PricingTable = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      defaultPeriod = "monthly",
-      onPeriodChange,
-      period: controlledPeriod,
-      periodLabels,
-      showPeriodToggle = false,
-      ...rest
-    } = props;
-    const [uncontrolledPeriod, setUncontrolledPeriod] = useState(defaultPeriod);
-    const period = controlledPeriod ?? uncontrolledPeriod;
-    const handlePeriodChange = useCallback(
-      (next) => {
-        if (controlledPeriod === void 0) setUncontrolledPeriod(next);
-        onPeriodChange?.(next);
-      },
-      [controlledPeriod, onPeriodChange]
-    );
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), ref, ...rest, children: [
-      showPeriodToggle ? /* @__PURE__ */ jsx(
-        PeriodToggle,
-        {
-          labels: periodLabels ?? {},
-          onChange: handlePeriodChange,
-          period
-        }
-      ) : null,
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children })
-    ] });
-  }
-);
+const PricingTable = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    defaultPeriod = "monthly",
+    onPeriodChange,
+    period: controlledPeriod,
+    periodLabels,
+    showPeriodToggle = false,
+    ...rest
+  } = props;
+  const [uncontrolledPeriod, setUncontrolledPeriod] = useState(defaultPeriod);
+  const period = controlledPeriod ?? uncontrolledPeriod;
+  const handlePeriodChange = useCallback(
+    (next) => {
+      if (controlledPeriod === void 0) setUncontrolledPeriod(next);
+      onPeriodChange?.(next);
+    },
+    [controlledPeriod, onPeriodChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), ref, ...rest, children: [
+    showPeriodToggle ? /* @__PURE__ */ jsx(
+      PeriodToggle,
+      {
+        labels: periodLabels ?? {},
+        onChange: handlePeriodChange,
+        period
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children })
+  ] });
+};
 PricingTable.displayName = "PricingTable";
 export {
   PricingPlan,

package/dist/components/primary-source-viewer/primary-source-viewer.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useId,
   useMemo,
   useState
@@ -54,7 +53,7 @@ const DEFAULT_LABELS = {
 };
 const ViewerContext = createContext(null);
 function useViewerContext() {
-  const ctx = useContext(ViewerContext);
+  const ctx = use(ViewerContext);
   if (!ctx) {
     throw new Error("PrimarySourceViewer subcomponent used outside its root.");
   }
@@ -87,7 +86,12 @@ function useViewerState(resolvedLabels) {
     [resolvedLabels, rotate, rotation, zoom, zoomIn, zoomOut]
   );
 }
-const PrimarySourceToolbar = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const PrimarySourceToolbar = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -99,27 +103,35 @@ const PrimarySourceToolbar = forwardRef(({ children, className, ...rest }, ref)
     ...rest,
     children
   }
-));
+);
 PrimarySourceToolbar.displayName = "PrimarySourceToolbar";
-const ToolbarButton = forwardRef(
-  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        className
-      ),
-      onClick: onActivate,
-      ref,
-      type: "button",
-      ...rest,
-      children: glyph
-    }
-  )
+const ToolbarButton = ({
+  ariaLabel,
+  className,
+  glyph,
+  onActivate,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-label": ariaLabel,
+    className: cn(
+      "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-sm font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className
+    ),
+    onClick: onActivate,
+    ref,
+    type: "button",
+    ...rest,
+    children: glyph
+  }
 );
 ToolbarButton.displayName = "ToolbarButton";
-const PrimarySourceZoomIn = forwardRef(({ ...rest }, ref) => {
+const PrimarySourceZoomIn = ({
+  ref,
+  ...rest
+}) => {
   const { labels, zoomIn } = useViewerContext();
   return /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -131,9 +143,12 @@ const PrimarySourceZoomIn = forwardRef(({ ...rest }, ref) => {
       ...rest
     }
   );
-});
+};
 PrimarySourceZoomIn.displayName = "PrimarySourceZoomIn";
-const PrimarySourceZoomOut = forwardRef(({ ...rest }, ref) => {
+const PrimarySourceZoomOut = ({
+  ref,
+  ...rest
+}) => {
   const { labels, zoomOut } = useViewerContext();
   return /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -145,9 +160,12 @@ const PrimarySourceZoomOut = forwardRef(({ ...rest }, ref) => {
       ...rest
     }
   );
-});
+};
 PrimarySourceZoomOut.displayName = "PrimarySourceZoomOut";
-const PrimarySourceRotate = forwardRef(({ ...rest }, ref) => {
+const PrimarySourceRotate = ({
+  ref,
+  ...rest
+}) => {
   const { labels, rotate } = useViewerContext();
   return /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -159,9 +177,14 @@ const PrimarySourceRotate = forwardRef(({ ...rest }, ref) => {
       ...rest
     }
   );
-});
+};
 PrimarySourceRotate.displayName = "PrimarySourceRotate";
-const PrimarySourceAnnotations = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const PrimarySourceAnnotations = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     "aria-label": "Annotations",
@@ -170,7 +193,7 @@ const PrimarySourceAnnotations = forwardRef(({ children, className, ...rest }, r
     ...rest,
     children
   }
-));
+);
 PrimarySourceAnnotations.displayName = "PrimarySourceAnnotations";
 function AnnotationTooltip({
   category,
@@ -201,7 +224,10 @@ function AnnotationTooltip({
     }
   );
 }
-const PrimarySourceAnnotation = forwardRef((props, ref) => {
+const PrimarySourceAnnotation = ({
+  ref,
+  ...props
+}) => {
   const {
     category,
     className,
@@ -248,9 +274,14 @@ const PrimarySourceAnnotation = forwardRef((props, ref) => {
       )
     }
   );
-});
+};
 PrimarySourceAnnotation.displayName = "PrimarySourceAnnotation";
-const PrimarySourceTranscription = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+const PrimarySourceTranscription = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
   "aside",
   {
     "aria-label": "Transcription",
@@ -265,9 +296,14 @@ const PrimarySourceTranscription = forwardRef(({ children, className, ...rest },
       /* @__PURE__ */ jsx("div", { className: "space-y-2 text-foreground", children })
     ]
   }
-));
+);
 PrimarySourceTranscription.displayName = "PrimarySourceTranscription";
-const PrimarySourceContext = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const PrimarySourceContext = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "footer",
   {
     className: cn(
@@ -278,9 +314,14 @@ const PrimarySourceContext = forwardRef(({ children, className, ...rest }, ref)
     ...rest,
     children
   }
-));
+);
 PrimarySourceContext.displayName = "PrimarySourceContext";
-const PrimarySourceMetadata = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+const PrimarySourceMetadata = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
   "dl",
   {
     "aria-label": "Metadata",
@@ -292,9 +333,14 @@ const PrimarySourceMetadata = forwardRef(({ children, className, ...rest }, ref)
     ...rest,
     children
   }
-));
+);
 PrimarySourceMetadata.displayName = "PrimarySourceMetadata";
-const PrimarySourceQuestions = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
+const PrimarySourceQuestions = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
   "div",
   {
     "aria-label": "Discussion questions",
@@ -306,7 +352,7 @@ const PrimarySourceQuestions = forwardRef(({ children, className, ...rest }, ref
       /* @__PURE__ */ jsx("div", { className: "space-y-1 text-foreground", children })
     ]
   }
-));
+);
 PrimarySourceQuestions.displayName = "PrimarySourceQuestions";
 const SLOT_DISPLAY_NAMES = {
   annotations: PrimarySourceAnnotations.displayName,
@@ -376,7 +422,10 @@ function Stage({ annotations, source }) {
     }
   );
 }
-const PrimarySourceViewer = forwardRef((props, ref) => {
+const PrimarySourceViewer = ({
+  ref,
+  ...props
+}) => {
   const {
     children,
     className,
@@ -422,7 +471,7 @@ const PrimarySourceViewer = forwardRef((props, ref) => {
       ]
     }
   ) });
-});
+};
 PrimarySourceViewer.displayName = "PrimarySourceViewer";
 export {
   PrimarySourceAnnotation,

package/dist/components/progress-tracker/progress-tracker.js

@@ -119,7 +119,7 @@ function useChecklistProgress(checklistItems = [], persistKey) {
   };
 }
 function useProgressTrackerContext() {
-  const context = React.useContext(ProgressTrackerContext);
+  const context = React.use(ProgressTrackerContext);
   if (!context) {
     throw new Error(
       "ProgressTracker compound components must be used within <ProgressTracker />."

package/dist/components/progressive-blur/index.js

@@ -0,0 +1,6 @@
+import {
+  ProgressiveBlur
+} from "./progressive-blur";
+export {
+  ProgressiveBlur
+};

package/dist/components/progressive-blur/progressive-blur.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function layerMask(direction, index) {
+  const start = index / 5 * 100;
+  const mid = (index + 1) / 5 * 100;
+  return `linear-gradient(to ${direction}, transparent ${String(start)}%, black ${String(mid)}%)`;
+}
+const ProgressiveBlur = ({
+  blur = 8,
+  className,
+  direction = "bottom",
+  layers = 5,
+  ref,
+  ...props
+}) => {
+  const bands = Array.from({ length: layers }, (_, index) => index);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 overflow-hidden",
+        className
+      ),
+      ref,
+      ...props,
+      children: bands.map((index) => {
+        const mask = layerMask(direction, index);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              backdropFilter: `blur(${(index + 1) / layers * blur}px)`,
+              maskImage: mask,
+              WebkitMaskImage: mask
+            }
+          },
+          index
+        );
+      })
+    }
+  );
+};
+ProgressiveBlur.displayName = "ProgressiveBlur";
+export {
+  ProgressiveBlur
+};

package/dist/components/prompt-input/index.js

@@ -0,0 +1,4 @@
+import { PromptInput } from "./prompt-input";
+export {
+  PromptInput
+};

package/dist/components/prompt-input/prompt-input.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LoaderCircle, SendHorizontal } from "lucide-react";
+import { cn } from "../../lib/utils";
+const SUBMIT_KEY = "Enter";
+const REM_PER_ROW = 1.5;
+function autoResize(element) {
+  if (element === null) {
+    return;
+  }
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+}
+function applyRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+}
+function useMergedRef(ref) {
+  const innerRef = useRef(null);
+  const assignRef = useCallback(
+    (node) => {
+      innerRef.current = node;
+      applyRef(ref, node);
+    },
+    [ref]
+  );
+  return { assignRef, innerRef };
+}
+function usePromptInput({
+  defaultValue,
+  isControlled,
+  onSubmit,
+  onValueChange,
+  ref,
+  value
+}) {
+  const { assignRef, innerRef } = useMergedRef(ref);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  useEffect(() => {
+    autoResize(innerRef.current);
+  }, [currentValue, innerRef]);
+  const handleChange = useCallback(
+    (event) => {
+      if (!isControlled) {
+        setInternalValue(event.target.value);
+      }
+      onValueChange?.(event.target.value);
+    },
+    [isControlled, onValueChange]
+  );
+  const submit = useCallback(() => {
+    if (currentValue.trim().length === 0) {
+      return;
+    }
+    onSubmit?.(currentValue);
+    if (!isControlled) {
+      setInternalValue("");
+    }
+  }, [currentValue, isControlled, onSubmit]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === SUBMIT_KEY && !event.shiftKey) {
+        event.preventDefault();
+        submit();
+      }
+    },
+    [submit]
+  );
+  const handleFormSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      submit();
+    },
+    [submit]
+  );
+  return {
+    assignRef,
+    currentValue,
+    handleChange,
+    handleFormSubmit,
+    handleKeyDown
+  };
+}
+function PromptInputActions({
+  canSubmit,
+  isLoading,
+  submitLabel,
+  toolbar
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: toolbar }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": submitLabel,
+        className: "inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+        disabled: !canSubmit,
+        type: "submit",
+        children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
+      }
+    )
+  ] });
+}
+const PromptInput = ({
+  className,
+  defaultValue = "",
+  disabled = false,
+  isLoading = false,
+  maxRows = 8,
+  minRows = 1,
+  onSubmit,
+  onValueChange,
+  placeholder = "Send a message\u2026",
+  ref,
+  submitLabel = "Send",
+  toolbar,
+  value
+}) => {
+  const isControlled = value !== void 0;
+  const {
+    assignRef,
+    currentValue,
+    handleChange,
+    handleFormSubmit,
+    handleKeyDown
+  } = usePromptInput({
+    defaultValue,
+    isControlled,
+    onSubmit,
+    onValueChange,
+    ref,
+    value
+  });
+  const canSubmit = !disabled && !isLoading && currentValue.trim().length > 0;
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: cn(
+        "flex flex-col gap-2 rounded-2xl border border-border bg-background p-2 shadow-sm transition-colors focus-within:ring-1 focus-within:ring-ring",
+        className
+      ),
+      onSubmit: handleFormSubmit,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "aria-label": placeholder,
+            className: "w-full resize-none bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            disabled,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            ref: assignRef,
+            style: {
+              maxHeight: `${maxRows * REM_PER_ROW}rem`,
+              minHeight: `${minRows * REM_PER_ROW}rem`,
+              overflowY: "auto"
+            },
+            value: currentValue
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PromptInputActions,
+          {
+            canSubmit,
+            isLoading,
+            submitLabel,
+            toolbar
+          }
+        )
+      ]
+    }
+  );
+};
+PromptInput.displayName = "PromptInput";
+export {
+  PromptInput
+};