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

package/dist/components/calendar/calendar.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../button/button";
+function IconLeft() {
+  return /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" });
+}
+function IconRight() {
+  return /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" });
+}
+function ChevronComponent({
+  orientation = "right"
+}) {
+  return orientation === "left" ? /* @__PURE__ */ jsx(IconLeft, {}) : /* @__PURE__ */ jsx(IconRight, {});
+}
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      className: cn("p-3", className),
+      classNames: {
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
+        ),
+        caption_label: "text-sm font-medium",
+        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        month: "space-y-4",
+        month_caption: "flex justify-center pt-1 relative items-center",
+        month_grid: "w-full border-collapse space-y-1",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        nav: "space-x-1 flex items-center",
+        outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        range_end: "day-range-end",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        week: "flex w-full mt-2",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        weekdays: "flex",
+        ...classNames
+      },
+      components: {
+        Chevron: ChevronComponent
+      },
+      showOutsideDays,
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+export {
+  Calendar
+};

package/dist/components/calendar/index.js

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

package/dist/components/callout/callout.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const variantStyles = {
+  danger: {
+    className: "border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300",
+    defaultTitle: "Danger"
+  },
+  info: {
+    className: "border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+    defaultTitle: "Info"
+  },
+  note: {
+    className: "border-gray-500/50 bg-gray-500/10 text-gray-700 dark:text-gray-300",
+    defaultTitle: "Note"
+  },
+  success: {
+    className: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300",
+    defaultTitle: "Success"
+  },
+  tip: {
+    className: "border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    defaultTitle: "Tip"
+  },
+  warning: {
+    className: "border-orange-500/50 bg-orange-500/10 text-orange-700 dark:text-orange-300",
+    defaultTitle: "Warning"
+  }
+};
+function Callout({
+  children,
+  className,
+  icon,
+  title,
+  variant = "info"
+}) {
+  const config = variantStyles[variant];
+  const displayTitle = title ?? config.defaultTitle;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "my-6 rounded-lg border-l-4 p-4",
+        config.className,
+        className
+      ),
+      role: "alert",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 flex-shrink-0 mt-0.5", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          displayTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: displayTitle }) : null,
+          /* @__PURE__ */ jsx("div", { className: "text-sm [&>p]:mb-0 [&>p:last-child]:mb-0", children })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Callout
+};

package/dist/components/callout/index.js

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

package/dist/components/card/card.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Card = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ref: reference,
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ref: reference,
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref: reference,
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref: reference, ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center p-6 pt-0", className),
+    ref: reference,
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/components/card/index.js

@@ -0,0 +1,16 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "./card";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/components/carousel/carousel.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const CarouselContext = createContext(null);
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function useCarouselLogic({
+  options,
+  orientation,
+  plugins,
+  setApi
+}) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...options,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const onSelect = useCallback((api2) => {
+    if (!api2) {
+      return;
+    }
+    setCanScrollPrevious(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrevious = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrevious();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrevious, scrollNext]
+  );
+  useEffect(() => {
+    if (!api || !setApi) {
+      return;
+    }
+    setApi(api);
+  }, [api, setApi]);
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    const rafId = requestAnimationFrame(() => {
+      onSelect(api);
+    });
+    return () => {
+      api?.off("select", onSelect);
+      api?.off("reInit", onSelect);
+      cancelAnimationFrame(rafId);
+    };
+  }, [api, onSelect]);
+  return {
+    api,
+    canScrollNext,
+    canScrollPrevious,
+    carouselRef,
+    handleKeyDown,
+    scrollNext,
+    scrollPrevious
+  };
+}
+const Carousel = forwardRef(
+  ({
+    children,
+    className,
+    opts,
+    orientation = "horizontal",
+    plugins,
+    setApi,
+    ...props
+  }, ref) => {
+    const {
+      api,
+      canScrollNext,
+      canScrollPrevious,
+      carouselRef,
+      handleKeyDown,
+      scrollNext,
+      scrollPrevious
+    } = useCarouselLogic({ options: opts, orientation, plugins, setApi });
+    const contextValue = useMemo(
+      () => ({
+        api,
+        canScrollNext,
+        canScrollPrev: canScrollPrevious,
+        carouselRef,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollNext,
+        scrollPrev: scrollPrevious
+      }),
+      [
+        api,
+        canScrollNext,
+        canScrollPrevious,
+        carouselRef,
+        opts,
+        orientation,
+        scrollNext,
+        scrollPrevious
+      ]
+    );
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-roledescription": "carousel",
+        className: cn("relative", className),
+        onKeyDownCapture: handleKeyDown,
+        ref,
+        role: "region",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Carousel.displayName = "Carousel";
+const CarouselContent = forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden", ref: carouselRef, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex",
+        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        className
+      ),
+      ref,
+      ...props
+    }
+  ) });
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-roledescription": "slide",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ref,
+      role: "group",
+      ...props
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+  const { canScrollPrev, orientation, scrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ref,
+      size,
+      variant,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline", ...props }, ref) => {
+  const { canScrollNext, orientation, scrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ref,
+      size,
+      variant,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+};

package/dist/components/carousel/index.js

@@ -0,0 +1,14 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+} from "./carousel";
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+};

package/dist/components/category-filter/category-filter.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Badge } from "../badge";
+function slugify(text) {
+  return text.toLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\s\w-]/g, "").trim().replaceAll(/\s+/g, "-").replaceAll(/-+/g, "-").replaceAll(/^-+|-+$/g, "");
+}
+function CategoryFilter({ categories, lang }) {
+  const pathname = usePathname();
+  const allCategories = Array.from(new Set(categories)).sort();
+  if (allCategories.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: allCategories.map((category) => {
+    const categorySlug = slugify(category);
+    const isSelected = pathname.includes(`/${categorySlug}`);
+    const href = `/${lang}/${categorySlug}`;
+    if (isSelected) {
+      return /* @__PURE__ */ jsx(Badge, { className: "cursor-default", variant: "default", children: category.charAt(0).toUpperCase() + category.slice(1) }, category);
+    }
+    return /* @__PURE__ */ jsx(Link, { href, children: /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: "cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors",
+        variant: "secondary",
+        children: category.charAt(0).toUpperCase() + category.slice(1)
+      }
+    ) }, category);
+  }) });
+}
+export {
+  CategoryFilter
+};

package/dist/components/category-filter/index.js

@@ -0,0 +1,4 @@
+import { CategoryFilter } from "./category-filter";
+export {
+  CategoryFilter
+};

package/dist/components/chart/area-chart.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_WIDTH = 340;
+const DEFAULT_HEIGHT = 150;
+const DEFAULT_STROKE_WIDTH = 2;
+function computePoints(data, dimensions) {
+  const { height, strokeWidth, width } = dimensions;
+  const values = data.map((point) => point.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue || 1;
+  const safeWidth = Math.max(width - strokeWidth * 2, 0);
+  const safeHeight = Math.max(height - strokeWidth * 2, 0);
+  return data.map((point, index) => {
+    const x = data.length === 1 ? strokeWidth + safeWidth / 2 : strokeWidth + index / (data.length - 1) * safeWidth;
+    const ratio = (point.value - minValue) / range;
+    const y = safeHeight - ratio * safeHeight + strokeWidth;
+    return { x, y };
+  });
+}
+function getPathCoordinates(data, dimensions) {
+  if (data.length === 0) return { area: "", line: "" };
+  const points = computePoints(data, dimensions);
+  const line = points.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
+  const area = points.length === 0 ? "" : `M${points[0]?.x ?? 0},${dimensions.height} ${line} L${points.at(-1)?.x ?? 0},${dimensions.height}Z`;
+  return { area, line };
+}
+const AreaChart = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    data,
+    gradientId = "area-chart-gradient",
+    height = DEFAULT_HEIGHT,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    width = DEFAULT_WIDTH,
+    ...props
+  }, reference) => {
+    const { area, line } = React.useMemo(
+      () => getPathCoordinates(data, { height, strokeWidth, width }),
+      [data, width, height, strokeWidth]
+    );
+    if (!line) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border bg-background/40 p-3",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-label": "Area chart",
+            className: "h-full w-full",
+            height,
+            role: "img",
+            viewBox: `0 0 ${width} ${height}`,
+            width,
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.5" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: area,
+                  fill: `url(#${gradientId})`,
+                  stroke: "none",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: line,
+                  fill: "none",
+                  stroke: color,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AreaChart.displayName = "AreaChart";
+export {
+  AreaChart
+};