@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/accordion/accordion.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const AccordionContext = createContext(null);
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("AccordionItem must be used within an Accordion");
+  }
+  return context;
+}
+function Accordion({
+  children,
+  className,
+  defaultValue,
+  type = "single"
+}) {
+  const [openItems, setOpenItems] = useState(() => {
+    if (!defaultValue) return /* @__PURE__ */ new Set();
+    if (Array.isArray(defaultValue)) return new Set(defaultValue);
+    return /* @__PURE__ */ new Set([defaultValue]);
+  });
+  const toggleItem = useCallback(
+    (value) => {
+      setOpenItems((previous) => {
+        const newSet = new Set(previous);
+        if (newSet.has(value)) {
+          newSet.delete(value);
+        } else {
+          if (type === "single") {
+            newSet.clear();
+          }
+          newSet.add(value);
+        }
+        return newSet;
+      });
+    },
+    [type]
+  );
+  const contextValue = useMemo(
+    () => ({ openItems, toggleItem, type }),
+    [openItems, toggleItem, type]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "my-6 divide-y divide-border rounded-lg border",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  children,
+  className,
+  value
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "first:rounded-t-lg last:rounded-b-lg overflow-hidden",
+        className
+      ),
+      "data-value": value,
+      children
+    }
+  );
+}
+function AccordionTrigger({
+  children,
+  className,
+  icon,
+  value
+}) {
+  const { openItems, toggleItem } = useAccordionContext();
+  const isOpen = openItems.has(value);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-expanded": isOpen,
+      className: cn(
+        "w-full flex items-center justify-between p-4 text-left font-medium transition-colors",
+        "hover:bg-muted/50",
+        isOpen && "bg-muted/30",
+        className
+      ),
+      onClick: () => {
+        toggleItem(value);
+      },
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children }),
+        icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+              isOpen && "rotate-180"
+            ),
+            children: icon
+          }
+        ) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+              isOpen && "rotate-180"
+            ),
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "m6 9 6 6 6-6",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({
+  children,
+  className,
+  value
+}) {
+  const { openItems } = useAccordionContext();
+  const isOpen = openItems.has(value);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden transition-all duration-200",
+        isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "p-4 pt-0 text-sm text-muted-foreground [&>p]:mb-2 [&>pre]:my-2",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};

package/dist/components/accordion/index.js

@@ -0,0 +1,12 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "./accordion";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};

package/dist/components/alert/alert.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+      }
+    }
+  }
+);
+const Alert = forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(alertVariants({ variant }), className),
+    ref,
+    role: "alert",
+    ...props
+  }
+));
+Alert.displayName = "Alert";
+const AlertTitle = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h5",
+  {
+    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    ref,
+    ...props,
+    children
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-sm [&_p]:leading-relaxed", className),
+    ref,
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  alertVariants
+};

package/dist/components/alert/index.js

@@ -0,0 +1,7 @@
+import { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert";
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  alertVariants
+};

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

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../button/button";
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.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,
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Title,
+  {
+    className: cn("text-lg font-semibold", className),
+    ref,
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Description,
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Action,
+  {
+    className: cn(buttonVariants(), className),
+    ref,
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,26 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "./alert-dialog";
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,6 @@
+"use client";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+const AspectRatio = AspectRatioPrimitive.Root;
+export {
+  AspectRatio
+};

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1,4 @@
+import { AspectRatio } from "./aspect-ratio";
+export {
+  AspectRatio
+};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/utils";
+const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    className: cn("aspect-square h-full w-full", className),
+    ref,
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/dist/components/avatar/index.js

@@ -0,0 +1,6 @@
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/dist/components/badge/badge.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+      }
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export {
+  Badge,
+  badgeVariants
+};

package/dist/components/badge/index.js

@@ -0,0 +1,5 @@
+import { Badge, badgeVariants } from "./badge";
+export {
+  Badge,
+  badgeVariants
+};

package/dist/components/blog-card/blog-card.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+function ContentCard({
+  formatDate,
+  href,
+  lang,
+  post,
+  readMoreLabel,
+  showBadge = true,
+  showDate = true,
+  showReadMore = true,
+  updatedLabel
+}) {
+  const shouldShowBadge = showBadge && post.tags && post.tags.length > 0;
+  const shouldShowDate = showDate && post.date && formatDate && lang;
+  const shouldShowUpdatedDate = showDate && post.updatedDate && formatDate && lang;
+  const shouldShowHeaderMeta = shouldShowBadge || shouldShowDate || shouldShowUpdatedDate;
+  return /* @__PURE__ */ jsx(Link, { className: "block h-full", href, children: /* @__PURE__ */ jsxs(Card, { className: "h-full flex flex-col hover:shadow-lg transition-shadow cursor-pointer", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      shouldShowHeaderMeta ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        shouldShowBadge ? /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "secondary", children: post.tags?.[0] }) : null,
+        shouldShowDate && post.date && lang ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(post.date, lang) }) : null,
+        shouldShowUpdatedDate && post.updatedDate && lang ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          updatedLabel ? `${updatedLabel} ` : "",
+          formatDate(post.updatedDate, lang)
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-lg line-clamp-2", children: post.title }),
+      /* @__PURE__ */ jsx(CardDescription, { className: "line-clamp-3", children: post.description })
+    ] }),
+    showReadMore && readMoreLabel ? /* @__PURE__ */ jsx(CardContent, { className: "mt-auto", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", children: [
+      readMoreLabel,
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u2192" })
+    ] }) }) : null
+  ] }) });
+}
+const BlogCard = ContentCard;
+export {
+  BlogCard,
+  ContentCard
+};

package/dist/components/blog-card/index.js

@@ -0,0 +1,5 @@
+import { BlogCard, ContentCard } from "./blog-card";
+export {
+  BlogCard,
+  ContentCard
+};

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { cn } from "../../lib/utils";
+const SEPARATOR_CHARS = {
+  arrow: "\u2192",
+  chevron: "\u203A",
+  slash: "/"
+};
+function SeparatorIcon({ type }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: SEPARATOR_CHARS[type] ?? "\u203A" });
+}
+function Breadcrumb({
+  className,
+  items,
+  separator = "chevron",
+  variant = "default"
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: cn("flex items-center space-x-1 text-sm", className),
+      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
+        item.href ? /* @__PURE__ */ jsxs(
+          Link,
+          {
+            className: "flex items-center gap-1 hover:text-foreground transition-colors",
+            href: item.href,
+            children: [
+              item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    // Truncate plain string labels; custom React elements handle their own overflow
+                    typeof item.label === "string" && "truncate",
+                    variant === "minimal" ? "text-muted-foreground" : "text-foreground"
+                  ),
+                  children: item.label
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(typeof item.label === "string" && "truncate"),
+              children: item.label
+            }
+          )
+        ] })
+      ] }, index))
+    }
+  );
+}
+export {
+  Breadcrumb
+};

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,4 @@
+import { Breadcrumb } from "./breadcrumb";
+export {
+  Breadcrumb
+};

package/dist/components/button/button.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
+    variants: {
+      size: {
+        default: "h-10 px-4 py-2",
+        icon: "h-10 w-10",
+        lg: "h-11 rounded-md px-8",
+        sm: "h-9 rounded-md px-3"
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+      }
+    }
+  }
+);
+const Button = forwardRef(
+  ({ asChild = false, className, size, variant, ...props }, reference) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ className, size, variant })),
+        ref: reference,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};

package/dist/components/button/index.js

@@ -0,0 +1,5 @@
+import { Button, buttonVariants } from "./button";
+export {
+  Button,
+  buttonVariants
+};