@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/selection-presence/selection-presence.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const DEFAULT_LABELS = {
   region: "Selection presence"
 };
-const SelectionPresence = forwardRef((props, ref) => {
+const SelectionPresence = ({
+  ref,
+  ...props
+}) => {
   const { className, color, height, labels, name, width, x, y, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const accent = color ?? "var(--foreground)";
@@ -43,7 +43,7 @@ const SelectionPresence = forwardRef((props, ref) => {
       )
     }
   );
-});
+};
 SelectionPresence.displayName = "SelectionPresence";
 export {
   SelectionPresence

package/dist/components/separator/separator.js

@@ -1,23 +1,26 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../lib/utils";
-const Separator = forwardRef(
-  ({ className, decorative = true, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      ),
-      decorative,
-      orientation,
-      ref,
-      ...props
-    }
-  )
+const Separator = ({
+  className,
+  decorative = true,
+  orientation = "horizontal",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
+  {
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    decorative,
+    orientation,
+    ref,
+    ...props
+  }
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 export {

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

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
+import { useCopyToClipboard } from "../copy-button/copy-button";
 import {
   Dialog,
   DialogContent,
@@ -37,17 +38,14 @@ function CopyButton({
   labels,
   onCopy
 }) {
-  const [copied, setCopied] = React.useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const handleCopy = React.useCallback(async () => {
     const url = buildCopyUrl ? buildCopyUrl(window.location.href) : window.location.href;
     const text = `${document.title} - ${url}`;
-    await navigator.clipboard.writeText(text);
-    setCopied(true);
-    onCopy?.();
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
-  }, [buildCopyUrl, onCopy]);
+    if (await copy(text)) {
+      onCopy?.();
+    }
+  }, [buildCopyUrl, copy, onCopy]);
   return /* @__PURE__ */ jsx(
     "button",
     {

package/dist/components/sheet/sheet.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
@@ -9,7 +8,11 @@ const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
 const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
-const SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SheetOverlay = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -19,7 +22,7 @@ const SheetOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     ref
   }
-));
+);
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -37,7 +40,13 @@ const sheetVariants = cva(
     }
   }
 );
-const SheetContent = forwardRef(({ children, className, side = "right", ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+const SheetContent = ({
+  children,
+  className,
+  ref,
+  side = "right",
+  ...props
+}) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxs(
     SheetPrimitive.Content,
@@ -54,7 +63,7 @@ const SheetContent = forwardRef(({ children, className, side = "right", ...props
       ]
     }
   )
-] }));
+] });
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 const SheetHeader = ({
   className,
@@ -84,23 +93,31 @@ const SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-const SheetTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SheetTitle = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SheetPrimitive.Title,
   {
     className: cn("text-lg font-semibold text-foreground", className),
     ref,
     ...props
   }
-));
+);
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-const SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SheetDescription = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   SheetPrimitive.Description,
   {
     className: cn("text-sm text-muted-foreground", className),
     ref,
     ...props
   }
-));
+);
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 export {
   Sheet,

package/dist/components/shimmer-button/index.js

@@ -0,0 +1,4 @@
+import { ShimmerButton } from "./shimmer-button";
+export {
+  ShimmerButton
+};

package/dist/components/shimmer-button/shimmer-button.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const ShimmerButton = ({
+  children,
+  className,
+  ref,
+  shimmerDuration = 2,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "relative inline-flex items-center justify-center overflow-hidden rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ref,
+      type: "button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 -translate-x-full animate-shimmer motion-reduce:animate-none",
+            style: {
+              animationDuration: `${shimmerDuration}s`,
+              background: "linear-gradient(90deg, transparent, oklch(var(--primary-foreground) / 0.4), transparent)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center gap-2", children })
+      ]
+    }
+  );
+};
+ShimmerButton.displayName = "ShimmerButton";
+export {
+  ShimmerButton
+};

package/dist/components/shimmer-text/index.js

@@ -0,0 +1,4 @@
+import { ShimmerText } from "./shimmer-text";
+export {
+  ShimmerText
+};

package/dist/components/shimmer-text/shimmer-text.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const ShimmerText = ({
+  children,
+  className,
+  duration = 3,
+  ref,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("relative inline-block text-muted-foreground", className),
+      ref,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-[vllnt-text-shimmer_linear_infinite] bg-clip-text text-transparent motion-reduce:animate-none",
+            style: {
+              animationDuration: `${duration}s`,
+              background: "linear-gradient(90deg, transparent 0%, oklch(var(--foreground)) 50%, transparent 100%)",
+              backgroundSize: "200% auto",
+              ...style
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+ShimmerText.displayName = "ShimmerText";
+export {
+  ShimmerText
+};

package/dist/components/shine-border/index.js

@@ -0,0 +1,4 @@
+import { ShineBorder } from "./shine-border";
+export {
+  ShineBorder
+};

package/dist/components/shine-border/shine-border.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const ShineBorder = ({
+  borderWidth = 1,
+  children,
+  className,
+  duration = 8,
+  ref,
+  ...props
+}) => {
+  const borderStyle = {
+    animationDuration: `${duration}s`,
+    animationIterationCount: "infinite",
+    animationName: "vllnt-border-beam-angle",
+    animationTimingFunction: "linear",
+    background: "conic-gradient(from var(--vllnt-border-beam-angle, 90deg), oklch(var(--primary) / 0.8), oklch(var(--ring) / 0.3), oklch(var(--primary) / 0.8))",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    padding: `${borderWidth}px`,
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-0 rounded-[inherit] motion-reduce:animate-none",
+        style: borderStyle
+      }
+    ),
+    children
+  ] });
+};
+ShineBorder.displayName = "ShineBorder";
+export {
+  ShineBorder
+};

package/dist/components/shiny-button/index.js

@@ -0,0 +1,4 @@
+import { ShinyButton } from "./shiny-button";
+export {
+  ShinyButton
+};

package/dist/components/shiny-button/shiny-button.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const ShinyButton = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "relative inline-flex items-center justify-center overflow-hidden rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ref,
+      type: "button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 -translate-x-full animate-shimmer motion-reduce:animate-none",
+            style: {
+              animationDuration: "3s",
+              background: "linear-gradient(90deg, transparent, oklch(var(--foreground) / 0.15), transparent)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center gap-2", children })
+      ]
+    }
+  );
+};
+ShinyButton.displayName = "ShinyButton";
+export {
+  ShinyButton
+};

package/dist/components/sidebar-provider/sidebar-provider.js

@@ -1,14 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import {
-  createContext,
-  useContext,
-  useMemo,
-  useState
-} from "react";
+import { createContext, use, useMemo, useState } from "react";
 const SidebarContext = createContext(void 0);
 function useSidebar() {
-  const context = useContext(SidebarContext);
+  const context = use(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within SidebarProvider");
   }

package/dist/components/slider/slider.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils";
-const Slider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const Slider = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     className: cn(
@@ -17,7 +20,7 @@ const Slider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs
       /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
-));
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 export {
   Slider