@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/presence-stack/presence-stack.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_DOT = {
+  active: "bg-emerald-500",
+  away: "bg-amber-500",
+  idle: "bg-muted-foreground",
+  offline: "bg-muted-foreground/40"
+};
+const DEFAULT_LABELS = {
+  overflowSuffix: "more",
+  region: "Live presence"
+};
+const Avatar = (props) => {
+  const { user } = props;
+  const status = user.status ?? "active";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative -ml-2 inline-flex size-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
+      "data-presence-stack-status": status,
+      "data-presence-stack-user": user.id,
+      style: { backgroundColor: user.color ?? "var(--foreground)" },
+      title: user.name,
+      children: [
+        user.initial,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -bottom-0.5 -right-0.5 size-2 rounded-full border border-background",
+              STATUS_DOT[status]
+            ),
+            "data-presence-stack-dot": true
+          }
+        )
+      ]
+    }
+  );
+};
+const PresenceStack = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      max = 5,
+      onOverflowActivate,
+      users,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const visible = max >= users.length ? users : users.slice(0, max);
+    const hidden = users.length - visible.length;
+    const handleOverflow = () => {
+      onOverflowActivate?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-flex items-center pl-2", className),
+        "data-presence-stack": true,
+        ref,
+        role: "group",
+        ...rest,
+        children: [
+          visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
+          hidden > 0 ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels
+          }) : null
+        ]
+      }
+    );
+  }
+);
+PresenceStack.displayName = "PresenceStack";
+const renderOverflow = (input) => {
+  const text = `+${input.count}`;
+  const aria = `${input.count} ${input.labels.overflowSuffix}`;
+  const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
+  if (input.handlerProvided) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": aria,
+        className: cn(
+          className,
+          "transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-presence-stack-overflow": true,
+        onClick: input.handleClick,
+        type: "button",
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
+};
+export {
+  PresenceStack
+};

package/dist/components/presence-sync-indicator/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/presence-sync-indicator/presence-sync-indicator.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  error: "Sync error",
+  live: "Live",
+  offline: "Offline",
+  reconnecting: "Reconnecting",
+  syncing: "Syncing"
+};
+const STATE_DOT = {
+  error: "bg-red-500",
+  live: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  reconnecting: "bg-amber-500 animate-pulse",
+  syncing: "bg-blue-500 animate-pulse"
+};
+const STATE_TEXT = {
+  error: "text-red-700 dark:text-red-300",
+  live: "text-emerald-700 dark:text-emerald-300",
+  offline: "text-muted-foreground",
+  reconnecting: "text-amber-700 dark:text-amber-300",
+  syncing: "text-blue-700 dark:text-blue-300"
+};
+const DEFAULT_LABELS = {
+  region: "Presence sync"
+};
+const PresenceSyncIndicator = forwardRef((props, ref) => {
+  const { className, label, labels, state, status, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const text = label ?? STATE_LABEL[state];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${resolvedLabels.region}: ${STATE_LABEL[state]}`,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-1 text-[11px] shadow-sm",
+        className
+      ),
+      "data-presence-state": state,
+      "data-presence-sync": true,
+      ref,
+      role: "status",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.5 rounded-full", STATE_DOT[state]),
+            "data-presence-sync-dot": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("font-medium", STATE_TEXT[state]), children: text }),
+        status ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[10px] text-muted-foreground",
+            "data-presence-sync-status": true,
+            children: status
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/pricing-table/index.js

@@ -0,0 +1,8 @@
+import {
+  PricingPlan,
+  PricingTable
+} from "./pricing-table";
+export {
+  PricingPlan,
+  PricingTable
+};

package/dist/components/pricing-table/pricing-table.js

@@ -0,0 +1,247 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useState
+} from "react";
+import { Check, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+function FeatureIndicator({
+  included
+}) {
+  if (typeof included === "string") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-primary/15 text-[10px] font-semibold text-primary",
+        children: "\u2713"
+      }
+    );
+  }
+  if (included) {
+    return /* @__PURE__ */ jsx(
+      Check,
+      {
+        "aria-hidden": "true",
+        className: "mt-0.5 size-4 shrink-0 text-primary"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    X,
+    {
+      "aria-hidden": "true",
+      className: "mt-0.5 size-4 shrink-0 text-muted-foreground/60"
+    }
+  );
+}
+function FeatureRow({ feature }) {
+  const { included, label } = feature;
+  const isLimit = typeof included === "string";
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+    /* @__PURE__ */ jsx(FeatureIndicator, { included }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "flex-1",
+          included === false && "text-muted-foreground line-through"
+        ),
+        children: [
+          label,
+          isLimit ? /* @__PURE__ */ jsxs("span", { className: "ml-1 text-muted-foreground", children: [
+            "(",
+            included,
+            ")"
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function PlanBadgePill({
+  badge,
+  highlighted
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        highlighted ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+      ),
+      children: badge
+    }
+  );
+}
+function PlanHeader({
+  description,
+  name
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: name }),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+  ] });
+}
+function PlanPrice({
+  period,
+  price
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight text-foreground", children: price }),
+    period ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: period }) : null
+  ] });
+}
+function PlanFeatures({ features }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: features.map((feature, index) => /* @__PURE__ */ jsx(
+    FeatureRow,
+    {
+      feature
+    },
+    `${typeof feature.label === "string" ? feature.label : index.toString()}-${index.toString()}`
+  )) });
+}
+function PlanCta({ cta, highlighted }) {
+  const { label, onClick: handleCtaClick, variant } = cta;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "mt-auto w-full",
+      onClick: handleCtaClick,
+      type: "button",
+      variant: variant ?? (highlighted ? "default" : "outline"),
+      children: label
+    }
+  );
+}
+const PricingPlan = forwardRef(
+  (props, ref) => {
+    const {
+      badge,
+      className,
+      cta,
+      description,
+      features,
+      highlighted = false,
+      name,
+      period,
+      price,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-col gap-6 rounded-2xl border bg-background p-6 shadow-sm transition-colors",
+          highlighted ? "border-primary shadow-md ring-1 ring-primary/20" : "border-border",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          badge ? /* @__PURE__ */ jsx(PlanBadgePill, { badge, highlighted }) : null,
+          /* @__PURE__ */ jsx(PlanHeader, { description, name }),
+          /* @__PURE__ */ jsx(PlanPrice, { period, price }),
+          features && features.length > 0 ? /* @__PURE__ */ jsx(PlanFeatures, { features }) : null,
+          cta ? /* @__PURE__ */ jsx(PlanCta, { cta, highlighted }) : null
+        ]
+      }
+    );
+  }
+);
+PricingPlan.displayName = "PricingPlan";
+function PeriodToggle({
+  labels,
+  onChange,
+  period
+}) {
+  const handleSelectMonthly = useCallback(() => {
+    onChange("monthly");
+  }, [onChange]);
+  const handleSelectAnnual = useCallback(() => {
+    onChange("annual");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Billing period",
+      className: "mx-auto inline-flex items-center gap-2 rounded-full border bg-muted/40 p-1 text-sm",
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": period === "monthly",
+            className: cn(
+              "rounded-full px-3 py-1 transition-colors",
+              period === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            onClick: handleSelectMonthly,
+            role: "radio",
+            type: "button",
+            children: labels.monthly ?? "Monthly"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-checked": period === "annual",
+            className: cn(
+              "inline-flex items-center gap-2 rounded-full px-3 py-1 transition-colors",
+              period === "annual" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            onClick: handleSelectAnnual,
+            role: "radio",
+            type: "button",
+            children: [
+              labels.annual ?? "Annual",
+              labels.savings ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary", children: labels.savings }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const PricingTable = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      defaultPeriod = "monthly",
+      onPeriodChange,
+      period: controlledPeriod,
+      periodLabels,
+      showPeriodToggle = false,
+      ...rest
+    } = props;
+    const [uncontrolledPeriod, setUncontrolledPeriod] = useState(defaultPeriod);
+    const period = controlledPeriod ?? uncontrolledPeriod;
+    const handlePeriodChange = useCallback(
+      (next) => {
+        if (controlledPeriod === void 0) setUncontrolledPeriod(next);
+        onPeriodChange?.(next);
+      },
+      [controlledPeriod, onPeriodChange]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), ref, ...rest, children: [
+      showPeriodToggle ? /* @__PURE__ */ jsx(
+        PeriodToggle,
+        {
+          labels: periodLabels ?? {},
+          onChange: handlePeriodChange,
+          period
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children })
+    ] });
+  }
+);
+PricingTable.displayName = "PricingTable";
+export {
+  PricingPlan,
+  PricingTable
+};

package/dist/components/primary-source-viewer/index.js

@@ -0,0 +1,26 @@
+import {
+  PrimarySourceAnnotation,
+  PrimarySourceAnnotations,
+  PrimarySourceContext,
+  PrimarySourceMetadata,
+  PrimarySourceQuestions,
+  PrimarySourceRotate,
+  PrimarySourceToolbar,
+  PrimarySourceTranscription,
+  PrimarySourceViewer,
+  PrimarySourceZoomIn,
+  PrimarySourceZoomOut
+} from "./primary-source-viewer";
+export {
+  PrimarySourceAnnotation,
+  PrimarySourceAnnotations,
+  PrimarySourceContext,
+  PrimarySourceMetadata,
+  PrimarySourceQuestions,
+  PrimarySourceRotate,
+  PrimarySourceToolbar,
+  PrimarySourceTranscription,
+  PrimarySourceViewer,
+  PrimarySourceZoomIn,
+  PrimarySourceZoomOut
+};