@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/era-comparison/era-comparison.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const ERA_PALETTE = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300"
+  }
+};
+const EraColumnContext = createContext({
+  color: "neutral"
+});
+function useEraColumnColor() {
+  return useContext(EraColumnContext).color;
+}
+const EraComparison = forwardRef(
+  ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  )
+);
+EraComparison.displayName = "EraComparison";
+function ColumnHeader({
+  color,
+  name,
+  period,
+  region
+}) {
+  const palette = ERA_PALETTE[color];
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1 w-12 rounded-full", palette.accent)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: name }),
+      period ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full px-2 py-0.5 text-xs font-mono",
+            palette.chip
+          ),
+          children: period
+        }
+      ) : null
+    ] }),
+    region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: region }) : null
+  ] });
+}
+const EraColumn = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "neutral",
+      name,
+      period,
+      region,
+      ...rest
+    } = props;
+    const contextValue = useMemo(
+      () => ({ color }),
+      [color]
+    );
+    return /* @__PURE__ */ jsx(EraColumnContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+          className
+        ),
+        "data-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ColumnHeader,
+            {
+              color,
+              name,
+              period,
+              region
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children })
+        ]
+      }
+    ) });
+  }
+);
+EraColumn.displayName = "EraColumn";
+const EraDomain = forwardRef(
+  ({ children, className, name, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("flex flex-col gap-2", className),
+      "data-domain": typeof name === "string" ? name : void 0,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: name }),
+        children
+      ]
+    }
+  )
+);
+EraDomain.displayName = "EraDomain";
+const EraHighlight = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("rounded-md px-2 py-1 text-sm", palette.chip, className),
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+EraHighlight.displayName = "EraHighlight";
+const EraFigure = forwardRef(
+  (props, ref) => {
+    const { anchorProps, className, href, name, ...rest } = props;
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    const baseClass = cn(
+      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+      palette.chip,
+      className
+    );
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: cn(baseClass, "underline-offset-4 hover:underline"),
+          href,
+          ...anchorProps,
+          children: name
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: baseClass, ref, ...rest, children: name });
+  }
+);
+EraFigure.displayName = "EraFigure";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/era-comparison/index.js

@@ -0,0 +1,16 @@
+import {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+} from "./era-comparison";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/floating-toolbar/floating-toolbar.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const VARIANT_CLASSES = {
+  destructive: "border-red-300 bg-red-500/10 text-red-700 hover:bg-red-500/20 dark:text-red-300",
+  ghost: "border-border bg-background text-foreground hover:bg-accent",
+  primary: "border-primary bg-primary text-primary-foreground hover:bg-primary/90"
+};
+const DEFAULT_LABELS = {
+  region: "Selection actions"
+};
+const FloatingToolbar = forwardRef(
+  (props, ref) => {
+    const { actions, className, labels, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+          className
+        ),
+        "data-floating-toolbar": true,
+        ref,
+        role: "toolbar",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: actions.map((action) => {
+          const variant = action.variant ?? "ghost";
+          const handleClick = () => {
+            action.onActivate();
+          };
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-label": action.ariaLabel ?? void 0,
+              className: cn(
+                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                VARIANT_CLASSES[variant],
+                action.disabled ? "cursor-not-allowed opacity-50" : ""
+              ),
+              "data-action-id": action.id,
+              "data-variant": variant,
+              disabled: action.disabled,
+              onClick: handleClick,
+              type: "button",
+              children: [
+                action.glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-3 w-3", children: action.glyph }) : null,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          );
+        })
+      }
+    );
+  }
+);
+FloatingToolbar.displayName = "FloatingToolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/floating-toolbar/index.js

@@ -0,0 +1,6 @@
+import {
+  FloatingToolbar
+} from "./floating-toolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/follow-mode/follow-mode.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const PALETTE = {
+  amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
+  blue: { chip: "bg-blue-500 text-white", ring: "ring-blue-500" },
+  emerald: { chip: "bg-emerald-500 text-white", ring: "ring-emerald-500" },
+  purple: { chip: "bg-purple-500 text-white", ring: "ring-purple-500" },
+  red: { chip: "bg-red-500 text-white", ring: "ring-red-500" },
+  rose: { chip: "bg-rose-500 text-white", ring: "ring-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Follow mode",
+  stop: "Stop"
+};
+const FollowMode = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "blue",
+      labels,
+      name,
+      onStop,
+      ...rest
+    } = props;
+    const palette = PALETTE[color];
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full rounded-2xl ring-2 ring-inset",
+          palette.ring,
+          className
+        ),
+        "data-follow-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+              "data-follow-chip": true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                      palette.chip
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Following ",
+                        name
+                      ] })
+                    ]
+                  }
+                ),
+                onStop ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": resolvedLabels.stop,
+                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: onStop,
+                    type: "button",
+                    children: resolvedLabels.stop
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FollowMode.displayName = "FollowMode";
+export {
+  FollowMode
+};

package/dist/components/follow-mode/index.js

@@ -0,0 +1,6 @@
+import {
+  FollowMode
+} from "./follow-mode";
+export {
+  FollowMode
+};