@vllnt/ui 0.1.4 → 0.1.6

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.SubContent,
+  {
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Content,
+  {
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Item,
+  {
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    checked,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.RadioItem,
+  {
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Label,
+  {
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Separator,
+  {
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ref,
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};

package/dist/components/context-menu/index.js

@@ -0,0 +1,34 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+} from "./context-menu";
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};

package/dist/components/cookie-consent/cookie-consent.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const cookieConsentVariants = cva(
+  // Base: safe-area-inset for notched devices
+  // Desktop: compact single-line layout, height matches button
+  "fixed z-50 rounded-lg border bg-background shadow-lg transition-all duration-300 max-w-[calc(100vw-2rem)] p-4 sm:py-1.5 sm:px-3",
+  {
+    defaultVariants: {
+      position: "bottom-left"
+    },
+    variants: {
+      position: {
+        // Mobile: 16px (1rem) from edges, respects safe area
+        // Desktop: 16px from edges
+        "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 mb-safe",
+        "bottom-left": "bottom-4 left-4 right-4 sm:right-auto mb-safe ml-safe",
+        "bottom-right": "bottom-4 right-4 left-4 sm:left-auto mb-safe mr-safe"
+      }
+    }
+  }
+);
+const CookieConsent = forwardRef(
+  ({
+    acceptText = "Accept",
+    className,
+    declineText,
+    message = "This site uses cookies to improve your experience.",
+    onAccept,
+    onDecline,
+    onOpenChange,
+    open = true,
+    position,
+    settingsHref,
+    settingsText = "Learn more",
+    showCloseButton = false,
+    ...props
+  }, reference) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+    useEffect(() => {
+      if (open) {
+        const timer = setTimeout(() => {
+          setIsVisible(true);
+        }, 50);
+        return () => {
+          clearTimeout(timer);
+        };
+      } else {
+        setIsVisible(false);
+      }
+    }, [open]);
+    const handleClose = useCallback(() => {
+      setIsAnimatingOut(true);
+      setTimeout(() => {
+        setIsAnimatingOut(false);
+        onOpenChange?.(false);
+      }, 200);
+    }, [onOpenChange]);
+    const handleAccept = useCallback(() => {
+      onAccept?.();
+      handleClose();
+    }, [onAccept, handleClose]);
+    const handleDecline = useCallback(() => {
+      onDecline?.();
+      handleClose();
+    }, [onDecline, handleClose]);
+    if (!open && !isAnimatingOut) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": "Cookie consent",
+        "aria-live": "polite",
+        className: cn(
+          cookieConsentVariants({ position }),
+          // Animation states
+          isVisible && !isAnimatingOut ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0",
+          className
+        ),
+        ref: reference,
+        role: "dialog",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:hidden", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              settingsHref ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground",
+                  href: settingsHref,
+                  children: settingsText
+                }
+              ) : null,
+              declineText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: handleDecline,
+                  size: "sm",
+                  type: "button",
+                  variant: "ghost",
+                  children: declineText
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: handleAccept,
+                  size: "sm",
+                  type: "button",
+                  variant: "default",
+                  children: acceptText
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex sm:items-center sm:gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
+            settingsHref ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground whitespace-nowrap",
+                href: settingsHref,
+                children: settingsText
+              }
+            ) : null,
+            declineText ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "h-7 px-3 text-xs",
+                onClick: handleDecline,
+                type: "button",
+                variant: "ghost",
+                children: declineText
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "h-7 px-3 text-xs",
+                onClick: handleAccept,
+                type: "button",
+                variant: "default",
+                children: acceptText
+              }
+            )
+          ] }),
+          showCloseButton ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Close cookie consent",
+              className: "absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground",
+              onClick: handleClose,
+              type: "button",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+CookieConsent.displayName = "CookieConsent";
+export {
+  CookieConsent,
+  cookieConsentVariants
+};

package/dist/components/cookie-consent/index.js

@@ -0,0 +1,8 @@
+import {
+  CookieConsent,
+  cookieConsentVariants
+} from "./cookie-consent";
+export {
+  CookieConsent,
+  cookieConsentVariants
+};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ children, className, ...props }, reference) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref: reference,
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/dist/components/dialog/index.js

@@ -0,0 +1,24 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from "./dialog";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/dist/components/drawer/drawer.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../../lib/utils";
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Root,
+  {
+    shouldScaleBackground,
+    ...props
+  }
+);
+Drawer.displayName = "Drawer";
+const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerClose = DrawerPrimitive.Close;
+const DrawerOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Overlay,
+  {
+    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    ref,
+    ...props
+  }
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+const DrawerContent = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DrawerPrimitive.Content,
+    {
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Title,
+  {
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+const DrawerDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DrawerPrimitive.Description,
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+};

package/dist/components/drawer/index.js

@@ -0,0 +1,24 @@
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+} from "./drawer";
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+};