@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/overview-board/overview-board.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const toneClassNames = {
+  danger: "border-red-500/30 bg-red-500/8",
+  default: "border-border/70 bg-background/80",
+  warning: "border-amber-500/30 bg-amber-500/8"
+};
+const toneAccentClassNames = {
+  danger: "text-red-600 dark:text-red-300",
+  default: "text-primary",
+  warning: "text-amber-600 dark:text-amber-300"
+};
+const OverviewCard = forwardRef(
+  ({
+    className,
+    ctaLabel,
+    description,
+    handleCtaClick,
+    heading,
+    icon,
+    metric,
+    tone = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
+        toneClassNames[tone],
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: heading }),
+            /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight text-foreground", children: metric })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex size-10 items-center justify-center rounded-xl bg-background/80",
+                toneAccentClassNames[tone]
+              ),
+              children: icon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }),
+        ctaLabel ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleCtaClick,
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: [
+              ctaLabel,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  )
+);
+OverviewCard.displayName = "OverviewCard";
+function getDefaultIcon(heading) {
+  if (typeof heading !== "string") {
+    return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("error")) {
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("action")) {
+    return /* @__PURE__ */ jsx(ListTodo, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("run")) {
+    return /* @__PURE__ */ jsx(Siren, { className: "size-5" });
+  }
+  return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+}
+const OverviewBoard = forwardRef(
+  ({ className, eyebrow, heading, items, subtitle, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-foreground", children: heading }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-6 text-muted-foreground", children: subtitle }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: items.map((item) => {
+          const handleCtaClick = item.handleCtaClick;
+          return /* @__PURE__ */ jsx(
+            OverviewCard,
+            {
+              ctaLabel: item.ctaLabel,
+              description: item.description,
+              handleCtaClick,
+              heading: item.heading,
+              icon: item.icon ?? getDefaultIcon(item.heading),
+              metric: item.metric,
+              tone: item.tone
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  )
+);
+OverviewBoard.displayName = "OverviewBoard";
+export {
+  OverviewBoard,
+  OverviewCard
+};

package/dist/components/panel/index.js

@@ -0,0 +1,16 @@
+import {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+} from "./panel";
+export {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+};

package/dist/components/panel/panel.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const Panel = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+Panel.displayName = "Panel";
+const PanelHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1.5 border-b border-border px-4 py-3",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+PanelHeader.displayName = "PanelHeader";
+const PanelTitle = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(
+        "text-sm font-semibold leading-none tracking-tight",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+PanelTitle.displayName = "PanelTitle";
+const PanelDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("text-sm text-muted-foreground", className),
+    ref,
+    ...props
+  }
+));
+PanelDescription.displayName = "PanelDescription";
+const PanelBody = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3", className), ref, ...props })
+);
+PanelBody.displayName = "PanelBody";
+const PanelFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center border-t border-border px-4 py-3",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+PanelFooter.displayName = "PanelFooter";
+export {
+  Panel,
+  PanelBody,
+  PanelDescription,
+  PanelFooter,
+  PanelHeader,
+  PanelTitle
+};

package/dist/components/parallel-timeline/index.js

@@ -0,0 +1,6 @@
+import {
+  ParallelTimeline
+} from "./parallel-timeline";
+export {
+  ParallelTimeline
+};

package/dist/components/parallel-timeline/parallel-timeline.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_TICK_COUNT = 8;
+const COLOR_CLASSES = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    marker: "border-amber-500 bg-amber-500"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    marker: "border-blue-500 bg-blue-500"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    marker: "border-emerald-500 bg-emerald-500"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground",
+    marker: "border-muted-foreground bg-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    marker: "border-purple-500 bg-purple-500"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300",
+    marker: "border-red-500 bg-red-500"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+    marker: "border-rose-500 bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Parallel timeline"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function yearToPercent(year, start, end) {
+  const span = end - start;
+  if (span <= 0) return 0;
+  return clamp((year - start) / span * 100, 0, 100);
+}
+function buildTicks(start, end, count) {
+  const safeCount = Math.max(2, count);
+  const span = end - start;
+  if (span <= 0) return [];
+  const step = span / (safeCount - 1);
+  return Array.from({ length: safeCount }).map((_, index) => {
+    const year = Math.round(start + step * index);
+    return {
+      label: formatYear(year),
+      offset: yearToPercent(year, start, end)
+    };
+  });
+}
+function Axis({ ticks }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-7 border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+      children: ticks.map((tick, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-1 -translate-x-1/2",
+          style: { left: `${tick.offset.toString()}%` },
+          children: tick.label
+        },
+        `${tick.label}-${index.toString()}`
+      ))
+    }
+  );
+}
+function EraBands({ endYear, eras, startYear }) {
+  if (eras.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: eras.map((era) => {
+    const left = yearToPercent(era.start, startYear, endYear);
+    const right = yearToPercent(era.end, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const palette = COLOR_CLASSES[era.color ?? "neutral"];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-y-0", palette.chip),
+        "data-era-id": era.id,
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        }
+      },
+      era.id
+    );
+  }) });
+}
+function EventMarker({
+  color,
+  endYear,
+  event,
+  startYear
+}) {
+  if (event.year < startYear || event.year > endYear) return null;
+  const left = yearToPercent(event.year, startYear, endYear);
+  const palette = COLOR_CLASSES[color];
+  const titleText = typeof event.title === "string" ? event.title : "";
+  const ariaLabel = titleText ? `${titleText}, ${formatYear(event.year)}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: "absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+      "data-event-id": event.id,
+      "data-event-year": event.year,
+      style: { left: `${left.toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-3 rounded-full border-2 ring-2 ring-background",
+              palette.marker
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-4 w-40 -translate-x-1/2 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-foreground", children: event.title }),
+          /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-muted-foreground", children: [
+            formatYear(event.year),
+            event.meta ? /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              event.meta
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TrackRow({ endYear, startYear, track }) {
+  const color = track.color ?? "neutral";
+  const palette = COLOR_CLASSES[color];
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch gap-3 border-t border-border first:border-t-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-32 shrink-0 flex-col gap-1 border-r border-border bg-muted/20 p-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("h-1 w-8 rounded-full", palette.accent)
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-foreground", children: track.name }),
+      track.region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: track.region }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof track.name === "string" ? track.name : void 0,
+        className: "relative h-16 min-w-0 flex-1",
+        "data-track-id": track.id,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border" }),
+          track.events.map((event) => /* @__PURE__ */ jsx(
+            EventMarker,
+            {
+              color,
+              endYear,
+              event,
+              startYear
+            },
+            event.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+const ParallelTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      endYear,
+      eras = [],
+      labels,
+      startYear,
+      tickCount = DEFAULT_TICK_COUNT,
+      tracks,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const ticks = useMemo(
+      () => buildTicks(startYear, endYear, tickCount),
+      [endYear, startYear, tickCount]
+    );
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-32 shrink-0" }),
+            /* @__PURE__ */ jsx(Axis, { ticks })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
+            tracks.map((track) => /* @__PURE__ */ jsx(
+              TrackRow,
+              {
+                endYear,
+                startYear,
+                track
+              },
+              track.id
+            ))
+          ] })
+        ]
+      }
+    );
+  }
+);
+ParallelTimeline.displayName = "ParallelTimeline";
+export {
+  ParallelTimeline
+};

package/dist/components/particles/index.js

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

package/dist/components/particles/particles.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function createParticles(count) {
+  return Array.from({ length: count }, () => ({
+    delay: Math.random() * 4,
+    duration: 4 + Math.random() * 6,
+    left: Math.random() * 100,
+    size: 2 + Math.random() * 3,
+    top: Math.random() * 100
+  }));
+}
+const Particles = React.forwardRef(
+  ({ className, count = 30, ...props }, ref) => {
+    const [particles] = React.useState(() => createParticles(count));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute inset-0 overflow-hidden",
+          className
+        ),
+        ref,
+        ...props,
+        children: particles.map((particle, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute rounded-full bg-foreground/30 motion-reduce:animate-none",
+            style: {
+              animation: `vllnt-particle-float ${particle.duration}s linear infinite`,
+              animationDelay: `${particle.delay}s`,
+              height: `${particle.size}px`,
+              left: `${particle.left}%`,
+              top: `${particle.top}%`,
+              width: `${particle.size}px`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Particles.displayName = "Particles";
+export {
+  Particles
+};

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

@@ -33,7 +33,7 @@ const PasswordInput = React.forwardRef(
             setVisible((previous) => !previous);
           },
           type: "button",
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
         }
       )
     ] });

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

@@ -0,0 +1,6 @@
+import {
+  PhoneInput
+} from "./phone-input";
+export {
+  PhoneInput
+};

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const defaultCountries = [
+  { code: "US", dialCode: "+1", label: "United States" },
+  { code: "GB", dialCode: "+44", label: "United Kingdom" },
+  { code: "CA", dialCode: "+1", label: "Canada" },
+  { code: "AU", dialCode: "+61", label: "Australia" },
+  { code: "DE", dialCode: "+49", label: "Germany" },
+  { code: "FR", dialCode: "+33", label: "France" },
+  { code: "IN", dialCode: "+91", label: "India" },
+  { code: "JP", dialCode: "+81", label: "Japan" }
+];
+const PhoneInput = React.forwardRef(
+  ({
+    className,
+    countries = defaultCountries,
+    defaultCountry,
+    onCountryChange,
+    ...props
+  }, ref) => {
+    const [country, setCountry] = React.useState(
+      defaultCountry ?? countries[0]?.code ?? ""
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              "aria-label": "Country dialing code",
+              className: "h-full rounded-l-md border-0 border-r border-input bg-transparent py-2 pl-3 pr-2 text-sm focus-visible:outline-none disabled:cursor-not-allowed",
+              onChange: (event) => {
+                setCountry(event.target.value);
+                onCountryChange?.(event.target.value);
+              },
+              value: country,
+              children: countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.dialCode }, item.code))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              className: "h-full w-full flex-1 rounded-r-md bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+              ref,
+              type: "tel"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+export {
+  PhoneInput
+};

package/dist/components/pie-chart/index.js

@@ -0,0 +1,4 @@
+import { PieChart } from "./pie-chart";
+export {
+  PieChart
+};