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

package/dist/components/alert-pulse/alert-pulse.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const SEVERITY_STROKE = {
+  error: "stroke-red-500",
+  info: "stroke-blue-500",
+  warn: "stroke-amber-500"
+};
+const SEVERITY_FILL = {
+  error: "fill-red-500/20",
+  info: "fill-blue-500/20",
+  warn: "fill-amber-500/20"
+};
+const SEVERITY_LABEL = {
+  error: "Error",
+  info: "Info",
+  warn: "Warning"
+};
+const safeRadius = (value) => value < 6 ? 6 : value;
+const AlertPulse = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cx,
+      cy,
+      labels,
+      radius = 36,
+      reducedMotion = false,
+      severity = "warn",
+      ...rest
+    } = props;
+    const r = safeRadius(radius);
+    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+    const size = r * 2 + 24;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-20 overflow-visible",
+          className
+        ),
+        "data-alert-pulse": true,
+        "data-alert-severity": severity,
+        height: size,
+        ref,
+        role: "img",
+        style: {
+          left: cx - size / 2,
+          top: cy - size / 2
+        },
+        width: size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("origin-center", SEVERITY_STROKE[severity]),
+              cx: size / 2,
+              cy: size / 2,
+              fill: "none",
+              r,
+              strokeOpacity: 0.7,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn(
+                "origin-center",
+                SEVERITY_STROKE[severity],
+                SEVERITY_FILL[severity],
+                reducedMotion ? null : "animate-ping"
+              ),
+              cx: size / 2,
+              cy: size / 2,
+              "data-alert-pulse-ring": true,
+              r,
+              strokeOpacity: 0.4,
+              strokeWidth: 2
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertPulse.displayName = "AlertPulse";
+export {
+  AlertPulse
+};

package/dist/components/alert-pulse/index.js

@@ -0,0 +1,6 @@
+import {
+  AlertPulse
+} from "./alert-pulse";
+export {
+  AlertPulse
+};

package/dist/components/anchor-port/anchor-port.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const toneClasses = {
+  bidirectional: "border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
+  input: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  output: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+};
+const stateClasses = {
+  active: "scale-100 opacity-100",
+  blocked: "opacity-60 saturate-50",
+  idle: "opacity-80"
+};
+const sideClasses = {
+  bottom: "self-end",
+  left: "self-start",
+  right: "self-end",
+  top: "self-start"
+};
+const AnchorPort = forwardRef(
+  ({
+    className,
+    side = "right",
+    state = "idle",
+    tone = "bidirectional",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+        toneClasses[tone],
+        stateClasses[state],
+        sideClasses[side],
+        className
+      ),
+      "data-side": side,
+      "data-state": state,
+      "data-tone": tone,
+      ref,
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
+    }
+  )
+);
+AnchorPort.displayName = "AnchorPort";
+export {
+  AnchorPort
+};

package/dist/components/anchor-port/index.js

@@ -0,0 +1,4 @@
+import { AnchorPort } from "./anchor-port";
+export {
+  AnchorPort
+};

package/dist/components/animated-text/animated-text.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/auto-reload/auto-reload.js

@@ -0,0 +1,367 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+import { Switch } from "../switch/switch";
+const CENTS_PER_UNIT = 100;
+const DEFAULT_LOCALE = "en-US";
+const DEFAULT_CURRENCY = "USD";
+const DEFAULT_STEP_CENTS = 100;
+const DEFAULT_LABELS = {
+  disabledFallback: "Auto-reload is unavailable for this account.",
+  heading: "Auto-reload",
+  helper: "Automatically reload credits when balance is low.",
+  reloadHelper: "Amount to add when the threshold is hit.",
+  reloadLabel: "Reload amount",
+  save: "Save settings",
+  saving: "Saving\u2026",
+  thresholdHelper: "Reload when the balance drops below this.",
+  thresholdLabel: "Threshold"
+};
+function centsToValue(cents) {
+  return (cents / CENTS_PER_UNIT).toFixed(2);
+}
+function valueToCents(value) {
+  const parsed = Number.parseFloat(value);
+  if (Number.isNaN(parsed)) return 0;
+  return Math.round(parsed * CENTS_PER_UNIT);
+}
+function getCurrencySymbol(locale, currency) {
+  const formatted = new Intl.NumberFormat(locale, {
+    currency,
+    style: "currency"
+  }).format(0);
+  const symbol = formatted.replaceAll(/[\d\s,.]/g, "");
+  return symbol.length > 0 ? symbol : currency;
+}
+function ReloadFormFields({
+  currencyDisplay,
+  isSaving,
+  labels,
+  maxAmountCents,
+  minAmountCents,
+  onSave,
+  reloadAmount,
+  reloadAmountId,
+  setReloadAmount,
+  setThreshold,
+  stepCents,
+  threshold,
+  thresholdId
+}) {
+  const handleThreshold = useCallback(
+    (event) => {
+      setThreshold(valueToCents(event.target.value));
+    },
+    [setThreshold]
+  );
+  const handleReload = useCallback(
+    (event) => {
+      setReloadAmount(valueToCents(event.target.value));
+    },
+    [setReloadAmount]
+  );
+  const step = (stepCents / CENTS_PER_UNIT).toFixed(2);
+  const min = (minAmountCents / CENTS_PER_UNIT).toFixed(2);
+  const max = maxAmountCents === void 0 ? void 0 : (maxAmountCents / CENTS_PER_UNIT).toFixed(2);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        NumericField,
+        {
+          currencyDisplay,
+          helper: labels.thresholdHelper,
+          id: thresholdId,
+          label: labels.thresholdLabel,
+          max,
+          min,
+          onChange: handleThreshold,
+          step,
+          value: centsToValue(threshold)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NumericField,
+        {
+          currencyDisplay,
+          helper: labels.reloadHelper,
+          id: reloadAmountId,
+          label: labels.reloadLabel,
+          max,
+          min,
+          onChange: handleReload,
+          step,
+          value: centsToValue(reloadAmount)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { disabled: isSaving, onClick: onSave, type: "button", children: isSaving ? labels.saving : labels.save }) })
+  ] });
+}
+function NumericField({
+  currencyDisplay,
+  helper,
+  id,
+  label,
+  max,
+  min,
+  onChange,
+  step,
+  value
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-foreground", htmlFor: id, children: [
+      label,
+      " (",
+      currencyDisplay,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        inputMode: "decimal",
+        max,
+        min,
+        onChange,
+        step,
+        type: "number",
+        value
+      }
+    ),
+    helper ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helper }) : null
+  ] });
+}
+function ToggleHeader({
+  enabled,
+  heading,
+  helper,
+  id,
+  onCheckedChange
+}) {
+  const helperId = `${id}-helper`;
+  return /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", id, children: heading }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", id: helperId, children: helper })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        "aria-describedby": helperId,
+        "aria-labelledby": id,
+        checked: enabled,
+        onCheckedChange
+      }
+    )
+  ] });
+}
+function useAutoReloadController(options) {
+  const {
+    defaultEnabled,
+    defaultReloadAmountCents,
+    defaultThresholdCents,
+    enabled: controlledEnabled,
+    onToggle,
+    reloadAmountCents: controlledReload,
+    thresholdCents: controlledThreshold
+  } = options;
+  const [uncontrolledEnabled, setUncontrolledEnabled] = useState(defaultEnabled);
+  const [threshold, setThreshold] = useState(defaultThresholdCents);
+  const [reloadAmount, setReloadAmount] = useState(defaultReloadAmountCents);
+  const enabled = controlledEnabled ?? uncontrolledEnabled;
+  const handleToggle = useCallback(
+    (next) => {
+      if (controlledEnabled === void 0) setUncontrolledEnabled(next);
+      onToggle?.(next);
+    },
+    [controlledEnabled, onToggle]
+  );
+  return {
+    enabled,
+    handleToggle,
+    reloadAmount: controlledReload ?? reloadAmount,
+    setReloadAmount,
+    setThreshold,
+    threshold: controlledThreshold ?? threshold
+  };
+}
+const DisabledBanner = forwardRef(
+  ({ className, message, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-disabled": "true",
+      className: cn(
+        "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: message
+    }
+  )
+);
+DisabledBanner.displayName = "AutoReload.DisabledBanner";
+const ActivePanel = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      controller,
+      currencyDisplay,
+      isSaving,
+      labels,
+      maxAmountCents,
+      minAmountCents,
+      onSave,
+      reloadAmountId,
+      stepCents,
+      thresholdId,
+      toggleId,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleHeader,
+            {
+              enabled: controller.enabled,
+              heading: labels.heading,
+              helper: labels.helper,
+              id: toggleId,
+              onCheckedChange: controller.handleToggle
+            }
+          ),
+          controller.enabled ? /* @__PURE__ */ jsx(
+            ReloadFormFields,
+            {
+              currencyDisplay,
+              isSaving,
+              labels,
+              maxAmountCents,
+              minAmountCents,
+              onSave,
+              reloadAmount: controller.reloadAmount,
+              reloadAmountId,
+              setReloadAmount: controller.setReloadAmount,
+              setThreshold: controller.setThreshold,
+              stepCents,
+              threshold: controller.threshold,
+              thresholdId
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ActivePanel.displayName = "AutoReload.ActivePanel";
+function useAutoReloadInternals(props) {
+  const {
+    currency = DEFAULT_CURRENCY,
+    currencySymbol,
+    defaultEnabled = false,
+    defaultReloadAmountCents = 2e3,
+    defaultThresholdCents = 1e3,
+    enabled: controlledEnabled,
+    labels,
+    locale = DEFAULT_LOCALE,
+    onSave,
+    onToggle,
+    reloadAmountCents: controlledReload,
+    thresholdCents: controlledThreshold
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const toggleId = useId();
+  const thresholdId = useId();
+  const reloadAmountId = useId();
+  const controller = useAutoReloadController({
+    defaultEnabled,
+    defaultReloadAmountCents,
+    defaultThresholdCents,
+    enabled: controlledEnabled,
+    onToggle,
+    reloadAmountCents: controlledReload,
+    thresholdCents: controlledThreshold
+  });
+  const currencyDisplay = currencySymbol ?? getCurrencySymbol(locale, currency);
+  const handleSave = useCallback(() => {
+    onSave?.({
+      reloadAmountCents: controller.reloadAmount,
+      thresholdCents: controller.threshold
+    });
+  }, [controller.reloadAmount, controller.threshold, onSave]);
+  return {
+    controller,
+    currencyDisplay,
+    handleSave,
+    reloadAmountId,
+    resolvedLabels,
+    thresholdId,
+    toggleId
+  };
+}
+const AutoReload = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      disabled = false,
+      disabledMessage,
+      isSaving = false,
+      maxAmountCents,
+      minAmountCents = 100,
+      stepCents = DEFAULT_STEP_CENTS
+    } = props;
+    const internals = useAutoReloadInternals(props);
+    if (disabled) {
+      return /* @__PURE__ */ jsx(
+        DisabledBanner,
+        {
+          className,
+          message: disabledMessage ?? internals.resolvedLabels.disabledFallback,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ActivePanel,
+      {
+        className,
+        controller: internals.controller,
+        currencyDisplay: internals.currencyDisplay,
+        isSaving,
+        labels: internals.resolvedLabels,
+        maxAmountCents,
+        minAmountCents,
+        onSave: internals.handleSave,
+        ref,
+        reloadAmountId: internals.reloadAmountId,
+        stepCents,
+        thresholdId: internals.thresholdId,
+        toggleId: internals.toggleId
+      }
+    );
+  }
+);
+AutoReload.displayName = "AutoReload";
+export {
+  AutoReload
+};

package/dist/components/auto-reload/index.js

@@ -0,0 +1,6 @@
+import {
+  AutoReload
+} from "./auto-reload";
+export {
+  AutoReload
+};

package/dist/components/banner/banner.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const bannerVariants = cva(
+  "flex w-full items-start gap-3 border-b px-4 py-3 text-sm transition-all motion-safe:animate-in motion-safe:slide-in-from-top-1",
+  {
+    defaultVariants: {
+      variant: "info"
+    },
+    variants: {
+      variant: {
+        destructive: "border-destructive/50 bg-destructive/10 text-destructive dark:border-destructive [&_svg]:text-destructive",
+        info: "border-border bg-muted text-foreground [&_svg]:text-muted-foreground",
+        success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 [&_svg]:text-emerald-600 dark:[&_svg]:text-emerald-300",
+        warning: "border-amber-500/40 bg-amber-500/10 text-amber-900 dark:text-amber-200 [&_svg]:text-amber-600 dark:[&_svg]:text-amber-300"
+      }
+    }
+  }
+);
+const URGENT_VARIANTS = /* @__PURE__ */ new Set([
+  "destructive",
+  "warning"
+]);
+const STORAGE_PREFIX = "vllnt-ui:banner-dismissed:";
+function safeStorageGet(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function safeStorageSet(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    return;
+  }
+}
+function subscribeToStorage(callback) {
+  if (typeof window === "undefined") {
+    return () => {
+      return;
+    };
+  }
+  window.addEventListener("storage", callback);
+  return () => {
+    window.removeEventListener("storage", callback);
+  };
+}
+function usePersistedDismissed(storageKey) {
+  const getClientSnapshot = useCallback(() => {
+    if (!storageKey) return false;
+    return safeStorageGet(storageKey) === "1";
+  }, [storageKey]);
+  const getServerSnapshot = useCallback(() => false, []);
+  return useSyncExternalStore(
+    subscribeToStorage,
+    getClientSnapshot,
+    getServerSnapshot
+  );
+}
+const Banner = forwardRef(
+  ({
+    children,
+    className,
+    dismissible = false,
+    dismissLabel = "Dismiss",
+    icon,
+    id,
+    onDismiss,
+    persistDismissal = false,
+    role: roleOverride,
+    variant,
+    ...rest
+  }, ref) => {
+    const storageKey = persistDismissal && id ? `${STORAGE_PREFIX}${id}` : void 0;
+    const persistedDismissed = usePersistedDismissed(storageKey);
+    const [locallyDismissed, setLocallyDismissed] = useState(false);
+    const handleDismiss = useCallback(() => {
+      setLocallyDismissed(true);
+      if (storageKey) safeStorageSet(storageKey, "1");
+      onDismiss?.();
+    }, [onDismiss, storageKey]);
+    if (locallyDismissed || persistedDismissed) return null;
+    const resolvedVariant = variant ?? "info";
+    const role = roleOverride ?? (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(bannerVariants({ variant }), className),
+        id,
+        ref,
+        role,
+        ...rest,
+        children: [
+          icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1", children }),
+          dismissible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": dismissLabel,
+              className: "ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              onClick: handleDismiss,
+              type: "button",
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-4 w-4" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+const BannerAction = forwardRef(
+  ({ asChild = false, children, className, type, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const buttonProps = asChild ? rest : { type: type ?? "button", ...rest };
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(
+          "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        ),
+        ref,
+        ...buttonProps,
+        children
+      }
+    );
+  }
+);
+BannerAction.displayName = "BannerAction";
+export {
+  Banner,
+  BannerAction,
+  bannerVariants
+};

package/dist/components/banner/index.js

@@ -0,0 +1,10 @@
+import {
+  Banner,
+  BannerAction,
+  bannerVariants
+} from "./banner";
+export {
+  Banner,
+  BannerAction,
+  bannerVariants
+};