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

package/dist/components/form/index.js

@@ -0,0 +1,20 @@
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+} from "./form";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};

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

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+const DEFAULT_LOCALE = "en-US";
+const COLOR_CLASSES = {
+  amber: {
+    bar: "bg-amber-500/30",
+    progress: "bg-amber-600 dark:bg-amber-500"
+  },
+  blue: {
+    bar: "bg-blue-500/30",
+    progress: "bg-blue-600 dark:bg-blue-500"
+  },
+  emerald: {
+    bar: "bg-emerald-500/30",
+    progress: "bg-emerald-600 dark:bg-emerald-500"
+  },
+  neutral: {
+    bar: "bg-muted",
+    progress: "bg-muted-foreground"
+  },
+  purple: {
+    bar: "bg-purple-500/30",
+    progress: "bg-purple-600 dark:bg-purple-500"
+  },
+  red: {
+    bar: "bg-red-500/30",
+    progress: "bg-red-600 dark:bg-red-500"
+  },
+  rose: {
+    bar: "bg-rose-500/30",
+    progress: "bg-rose-600 dark:bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  milestone: "Milestone",
+  today: "Today"
+};
+function toDate(value) {
+  return value instanceof Date ? new Date(value.getTime()) : new Date(value);
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function diffInDays(later, earlier) {
+  return (later.getTime() - earlier.getTime()) / MS_PER_DAY;
+}
+const TICK_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTickDateTimeFormatter(locale, scale) {
+  const key = `${locale}|${scale}`;
+  let formatter = TICK_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    const options = scale === "month" ? { month: "short", year: "numeric" } : { day: "2-digit", month: "short" };
+    formatter = Intl.DateTimeFormat(locale, options);
+    TICK_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+function buildTickFormatter(scale, locale) {
+  switch (scale) {
+    case "day":
+      return getTickDateTimeFormatter(locale, "day").format;
+    case "week":
+      return getTickDateTimeFormatter(locale, "week").format;
+    case "month":
+      return getTickDateTimeFormatter(locale, "month").format;
+    case "quarter":
+      return (date) => {
+        const quarter = Math.floor(date.getMonth() / 3) + 1;
+        return `Q${quarter.toString()} ${date.getFullYear().toString()}`;
+      };
+  }
+}
+function getTickStep(scale) {
+  switch (scale) {
+    case "day":
+      return 1;
+    case "week":
+      return 7;
+    case "month":
+      return 30;
+    case "quarter":
+      return 91;
+  }
+}
+function buildTicks(input) {
+  const { end, locale, scale, start, totalDays } = input;
+  const formatter = buildTickFormatter(scale, locale);
+  const stepDays = getTickStep(scale);
+  const tickCount = Math.floor(totalDays / stepDays);
+  return Array.from({ length: tickCount + 1 }).reduce((ticks, _, index) => {
+    const day = index * stepDays;
+    const date = new Date(start.getTime() + day * MS_PER_DAY);
+    if (date.getTime() <= end.getTime()) {
+      ticks.push({ label: formatter(date), offset: day });
+    }
+    return ticks;
+  }, []);
+}
+function useChartGeometry(options) {
+  const { endDate, locale, scale, startDate } = options;
+  return useMemo(() => {
+    const start = toDate(startDate);
+    const end = toDate(endDate);
+    const totalDays = Math.max(1, diffInDays(end, start));
+    const ticks = buildTicks({ end, locale, scale, start, totalDays });
+    return {
+      end,
+      pxPerDay: 1 / totalDays,
+      start,
+      ticks,
+      totalDays
+    };
+  }, [endDate, locale, scale, startDate]);
+}
+function TaskBar({ geometry, task }) {
+  const start = toDate(task.start);
+  const end = toDate(task.end);
+  const offsetDays = diffInDays(start, geometry.start);
+  const durationDays = Math.max(0.5, diffInDays(end, start));
+  const leftRatio = clamp(offsetDays / geometry.totalDays, 0, 1);
+  const widthRatio = clamp(durationDays / geometry.totalDays, 0, 1 - leftRatio);
+  const palette = COLOR_CLASSES[task.color ?? "blue"];
+  const progress = clamp(task.progress ?? 0, 0, 100);
+  const ariaLabel = typeof task.title === "string" ? `${task.title} from ${start.toISOString().slice(0, 10)} to ${end.toISOString().slice(0, 10)}, ${progress.toString()} percent complete` : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": progress,
+      className: cn(
+        "absolute top-1.5 flex h-5 items-center overflow-hidden rounded-md ring-1 ring-border",
+        palette.bar
+      ),
+      "data-task-id": task.id,
+      role: "progressbar",
+      style: {
+        left: `${(leftRatio * 100).toString()}%`,
+        width: `${(widthRatio * 100).toString()}%`
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("h-full rounded-md", palette.progress),
+          style: { width: `${progress.toString()}%` }
+        }
+      )
+    }
+  );
+}
+function MilestoneMarker({
+  geometry,
+  label,
+  milestone
+}) {
+  const date = toDate(milestone.date);
+  const offsetDays = diffInDays(date, geometry.start);
+  if (offsetDays < 0 || offsetDays > geometry.totalDays) return null;
+  const leftRatio = offsetDays / geometry.totalDays;
+  const titleText = typeof milestone.title === "string" ? milestone.title : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${label}: ${titleText}`,
+      className: "absolute top-0 z-10 -ml-1.5 flex flex-col items-center",
+      "data-milestone-id": milestone.id,
+      style: { left: `${(leftRatio * 100).toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "size-3 rotate-45 bg-amber-500 ring-2 ring-background"
+          }
+        ),
+        titleText ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 whitespace-nowrap rounded bg-amber-500/20 px-1 text-[10px] font-medium text-amber-900 dark:text-amber-200", children: titleText }) : null
+      ]
+    }
+  );
+}
+function TodayLine({ geometry, label, now }) {
+  const offsetDays = diffInDays(now, geometry.start);
+  if (offsetDays < 0 || offsetDays > geometry.totalDays) return null;
+  const leftRatio = offsetDays / geometry.totalDays;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": label,
+      className: "pointer-events-none absolute inset-y-0 z-10",
+      style: { left: `${(leftRatio * 100).toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-destructive"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute -top-5 -translate-x-1/2 whitespace-nowrap rounded bg-destructive/15 px-1 text-[10px] font-semibold uppercase tracking-wide text-destructive", children: label })
+      ]
+    }
+  );
+}
+function Axis({ geometry }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-7 items-end border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: geometry.ticks.map((tick) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "absolute -translate-x-1/2 px-1",
+      style: {
+        left: `${(tick.offset / geometry.totalDays * 100).toString()}%`
+      },
+      children: tick.label
+    },
+    tick.offset
+  )) });
+}
+function TaskRow({ geometry, task }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-8 items-center border-b border-border/40", children: /* @__PURE__ */ jsx(TaskBar, { geometry, task }) });
+}
+function LeftColumn({ groups, taskColumnWidth }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col border-r border-border bg-background",
+      style: {
+        minWidth: `${taskColumnWidth.toString()}px`,
+        width: `${taskColumnWidth.toString()}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-7 border-b border-border" }),
+        groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-7 items-center border-b border-border/60 px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: group.name }),
+          group.tasks.map((task) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex h-8 items-center justify-between gap-2 border-b border-border/40 px-3 text-sm text-foreground",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: task.title }),
+                task.assignee ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: task.assignee }) : null
+              ]
+            },
+            task.id
+          ))
+        ] }, group.id))
+      ]
+    }
+  );
+}
+function TimelineColumn({
+  geometry,
+  groups,
+  labels,
+  milestones,
+  now
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsx(Axis, { geometry }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-7 border-b border-border/60 bg-muted/20" }),
+        group.tasks.map((task) => /* @__PURE__ */ jsx(TaskRow, { geometry, task }, task.id))
+      ] }, group.id)),
+      milestones.map((milestone) => /* @__PURE__ */ jsx(
+        MilestoneMarker,
+        {
+          geometry,
+          label: labels.milestone,
+          milestone
+        },
+        milestone.id
+      )),
+      /* @__PURE__ */ jsx(TodayLine, { geometry, label: labels.today, now })
+    ] })
+  ] });
+}
+const GanttChart = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      endDate,
+      groups,
+      labels,
+      locale = DEFAULT_LOCALE,
+      milestones = [],
+      now,
+      scale = "month",
+      startDate,
+      taskColumnWidth = 200,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const geometry = useChartGeometry({ endDate, locale, scale, startDate });
+    const nowDate = useMemo(() => now ? toDate(now) : /* @__PURE__ */ new Date(), [now]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full overflow-x-auto rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(LeftColumn, { groups, taskColumnWidth }),
+          /* @__PURE__ */ jsx(
+            TimelineColumn,
+            {
+              geometry,
+              groups,
+              labels: resolvedLabels,
+              milestones,
+              now: nowDate
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GanttChart.displayName = "GanttChart";
+export {
+  GanttChart
+};

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

@@ -0,0 +1,6 @@
+import {
+  GanttChart
+} from "./gantt-chart";
+export {
+  GanttChart
+};

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

@@ -0,0 +1,134 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_SIZE = 200;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_THICKNESS = 16;
+function clamp(value, low, high) {
+  return Math.min(Math.max(value, low), high);
+}
+function polar(center, radius, degrees) {
+  const radians = degrees * Math.PI / 180;
+  return {
+    x: center.x + radius * Math.cos(radians),
+    y: center.y + radius * Math.sin(radians)
+  };
+}
+function arc(geom) {
+  const from = polar(geom.center, geom.radius, geom.start);
+  const to = polar(geom.center, geom.radius, geom.end);
+  const largeArc = geom.end - geom.start > 180 ? 1 : 0;
+  return `M ${from.x.toFixed(2)} ${from.y.toFixed(2)} A ${geom.radius} ${geom.radius} 0 ${largeArc} 1 ${to.x.toFixed(2)} ${to.y.toFixed(2)}`;
+}
+function GaugeText({
+  center,
+  label,
+  showValue,
+  size,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showValue ? /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: "fill-foreground font-semibold",
+        dominantBaseline: "middle",
+        fontSize: size * 0.16,
+        textAnchor: "middle",
+        x: center.x,
+        y: center.y - size * 0.06,
+        children: Math.round(value).toLocaleString()
+      }
+    ) : null,
+    label ? /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: "fill-muted-foreground text-xs",
+        dominantBaseline: "middle",
+        textAnchor: "middle",
+        x: center.x,
+        y: center.y + size * 0.1,
+        children: label
+      }
+    ) : null
+  ] });
+}
+const GaugeChart = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    label,
+    max = DEFAULT_MAX,
+    min = DEFAULT_MIN,
+    showValue = true,
+    size = DEFAULT_SIZE,
+    thickness = DEFAULT_THICKNESS,
+    value,
+    ...props
+  }, ref) => {
+    const span = max - min;
+    const fraction = span > 0 ? clamp((value - min) / span, 0, 1) : 0;
+    const center = { x: size / 2, y: size / 2 };
+    const radius = size / 2 - thickness / 2;
+    const viewHeight = size / 2 + thickness + 28;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border bg-background/40 p-3",
+          className
+        ),
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-label": "Gauge chart",
+            className: "h-full w-full",
+            height: viewHeight,
+            role: "img",
+            viewBox: `0 0 ${size} ${viewHeight}`,
+            width: size,
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "stroke-muted",
+                  d: arc({ center, end: 360, radius, start: 180 }),
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeWidth: thickness
+                }
+              ),
+              fraction > 0 ? /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: arc({ center, end: 180 + fraction * 180, radius, start: 180 }),
+                  fill: "none",
+                  stroke: color,
+                  strokeLinecap: "round",
+                  strokeWidth: thickness
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                GaugeText,
+                {
+                  center,
+                  label,
+                  showValue,
+                  size,
+                  value
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+GaugeChart.displayName = "GaugeChart";
+export {
+  GaugeChart
+};

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

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