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

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

@@ -0,0 +1,377 @@
+"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);
+}
+const CURRENCY_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getCurrencyFormatter(locale, currency) {
+  const key = `${locale}|${currency}`;
+  let formatter = CURRENCY_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, {
+      currency,
+      style: "currency"
+    });
+    CURRENCY_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+function getCurrencySymbol(locale, currency) {
+  const formatted = getCurrencyFormatter(locale, 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/avatar/avatar.js

@@ -7,7 +7,7 @@ const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     className: cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex size-10 shrink-0 overflow-hidden rounded-full",
       className
     ),
     ref,

package/dist/components/avatar-group/avatar-group.js

@@ -23,9 +23,9 @@ const avatarItemVariants = cva(
     },
     variants: {
       size: {
-        lg: "h-12 w-12 text-sm",
-        md: "h-10 w-10 text-xs",
-        sm: "h-8 w-8 text-[11px]"
+        lg: "size-12 text-sm",
+        md: "size-10 text-xs",
+        sm: "size-8 text-[11px]"
       }
     }
   }
@@ -66,7 +66,7 @@ const AvatarGroup = React.forwardRef(
                 /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
               ]
             },
-            `${item.alt}-${index}`
+            item.src ?? item.alt
           )),
           hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
         ]

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 size-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 size-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: "size-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
+};

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  empty: "No recent activity",
+  region: "Recent activity"
+};
+const ChipBody = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("size-1.5 rounded-full", TONE_DOT[tone])
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", "data-strip-event-ts": true, children: event.ts })
+  ] });
+};
+const Chip = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  if (event.onActivate) {
+    const handleClick = () => {
+      event.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-strip-event": event.id,
+        "data-strip-event-tone": tone,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(ChipBody, { event })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px]",
+      "data-strip-event": event.id,
+      "data-strip-event-tone": tone,
+      children: /* @__PURE__ */ jsx(ChipBody, { event })
+    }
+  );
+};
+const BottomActivityStrip = forwardRef((props, ref) => {
+  const { className, events, labels, maxEvents, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full items-center gap-2 overflow-x-auto rounded-md border border-border bg-background/90 px-2 py-1 text-foreground",
+        className
+      ),
+      "data-bottom-activity-strip": true,
+      ref,
+      ...rest,
+      children: visible.length === 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "px-2 text-[11px] text-muted-foreground",
+          "data-strip-state": "empty",
+          children: resolvedLabels.empty
+        }
+      ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
+    }
+  );
+});
+BottomActivityStrip.displayName = "BottomActivityStrip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-activity-strip/index.js

@@ -0,0 +1,6 @@
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-bar/bottom-bar.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const BottomBar = forwardRef(
+  ({ center, className, leading, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+        center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center gap-2", children: center }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+BottomBar.displayName = "BottomBar";
+export {
+  BottomBar
+};