@blurrow/ui 0.1.0 → 0.2.1

package/dist/registry/Separator.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+interface SeparatorProps {
+  orientation?: "horizontal" | "vertical";
+  /** A few words set into the middle of the line, like "or" */
+  label?: React.ReactNode;
+  /** Only draws a line; screen readers skip it */
+  decorative?: boolean;
+  className?: string;
+}
+
+/* A groove scored into the surface: a dark line with a lit lip just
+   under it, the way a cut catches light from above.                */
+function Groove({ vertical }: { vertical: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className={vertical ? "block w-px self-stretch" : "block h-px flex-1"}
+      style={{
+        background: "var(--groove)",
+        boxShadow: vertical ? "var(--groove-lip)" : "var(--groove-lip-below)",
+      }}
+    />
+  );
+}
+
+export function Separator({ orientation = "horizontal", label, decorative = false, className = "" }: SeparatorProps) {
+  const vertical = orientation === "vertical";
+  const a11y = decorative
+    ? { "aria-hidden": true as const }
+    : { role: "separator", "aria-orientation": orientation };
+
+  if (vertical) {
+    return (
+      <span {...a11y} className={["inline-flex self-stretch", className].join(" ")}>
+        <Groove vertical />
+      </span>
+    );
+  }
+
+  return (
+    <div {...a11y} className={["flex w-full items-center gap-3", className].join(" ")}>
+      <Groove vertical={false} />
+      {label && (
+        <>
+          <span className="shrink-0 text-[11.5px] font-medium text-ink-faint">{label}</span>
+          <Groove vertical={false} />
+        </>
+      )}
+    </div>
+  );
+}

package/dist/registry/ShareButtons.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { ButtonGroup } from "./ButtonGroup";
+
+interface ShareButtonsProps {
+  url?: string;
+  title?: string;
+  className?: string;
+}
+
+
+function LinkIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+function LinkedInIcon() {
+  return (
+    <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+}
+
+export function ShareButtons({
+  url,
+  title,
+  className = "",
+}: ShareButtonsProps) {
+  const [copied, setCopied] = useState(false);
+
+  const shareUrl = url ?? (typeof window !== "undefined" ? window.location.href : "");
+  const shareTitle = title ?? "";
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback silently
+    }
+  }, [shareUrl]);
+
+  const handleTwitter = useCallback(() => {
+    const params = new URLSearchParams({
+      text: shareTitle,
+      url: shareUrl,
+    });
+    window.open(
+      `https://x.com/intent/tweet?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl, shareTitle]);
+
+  const handleLinkedIn = useCallback(() => {
+    const params = new URLSearchParams({
+      url: shareUrl,
+    });
+    window.open(
+      `https://www.linkedin.com/sharing/share-offsite/?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl]);
+
+  const keys = [
+    {
+      label: copied ? "Link copied" : "Copy link",
+      onClick: handleCopy as () => void,
+      content: (
+        <>
+          <span key={String(copied)} className={["animate-checkbox-in", copied ? "text-success-soft" : ""].join(" ")}>
+            {copied ? <CheckIcon /> : <LinkIcon />}
+          </span>
+          <span className="w-[62px] text-left">{copied ? "copied" : "copy link"}</span>
+        </>
+      ),
+      wide: true,
+    },
+    { label: "Share on X", onClick: handleTwitter, content: <XIcon />, wide: false },
+    { label: "Share on LinkedIn", onClick: handleLinkedIn, content: <LinkedInIcon />, wide: false },
+  ];
+
+  return (
+    <div className={className}>
+      <p className="text-[12px] font-medium text-ink-muted lowercase mb-3">
+        Share
+      </p>
+      <ButtonGroup label="Share" items={keys} />
+      <span aria-live="polite" className="sr-only">{copied ? "Link copied to clipboard" : ""}</span>
+    </div>
+  );
+}

package/dist/registry/Sidebar.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
+
+interface SidebarItem {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+interface SidebarSection {
+  title?: string;
+  items: SidebarItem[];
+}
+
+interface SidebarHeader {
+  logo?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+}
+
+interface SidebarProps {
+  sections: SidebarSection[];
+  header?: SidebarHeader;
+  defaultActive?: string;
+  active?: string;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+export function Sidebar({
+  sections,
+  header,
+  defaultActive = "",
+  active,
+  onSelect,
+  className = "",
+}: SidebarProps) {
+  const [internal, setInternal] = useState(defaultActive);
+  const current = active !== undefined ? active : internal;
+  const [pill, setPill] = useState({ top: 0, height: 0, ready: false });
+  const navRef = useRef<HTMLElement>(null);
+  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+  const measurePill = (key: string) => {
+    const btn = btnRefs.current[key];
+    const nav = navRef.current;
+    if (!btn || !nav) return;
+    const nr = nav.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ top: br.top - nr.top, height: br.height, ready: true });
+  };
+
+  // Before paint, so the pill is never seen out of place
+  useLayoutEffect(() => { measurePill(current); }, [current]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(current));
+    if (navRef.current) ro.observe(navRef.current);
+    return () => ro.disconnect();
+  }, [current]);
+
+  const handleSelect = (key: string, disabled?: boolean) => {
+    if (disabled) return;
+    setInternal(key);
+    onSelect?.(key);
+  };
+
+  return (
+    <div
+      className={["rounded-[20px] p-1.5", className].join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <div className="bg-panel-face rounded-[15px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+      {header && (
+        <div className="px-3 py-3 border-b border-line flex items-center gap-2.5">
+          {header.logo && (
+            <div
+              className="w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-ink-inverse"
+              style={{ background: "var(--face-inverse)", boxShadow: "var(--face-inverse-shadow)" }}
+            >
+              {header.logo}
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <p className="text-[13px] font-semibold text-ink leading-none truncate">{header.title}</p>
+            {header.subtitle && (
+              <p className="text-[11px] text-ink-faint mt-0.5 leading-none truncate">{header.subtitle}</p>
+            )}
+          </div>
+          <button
+            type="button"
+            aria-label="Switch workspace"
+            className="shrink-0 w-6 h-6 flex items-center justify-center text-ink-faint hover:text-ink transition-colors cursor-pointer rounded-[7px] hover:bg-surface-active"
+          >
+            <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
+            </svg>
+          </button>
+        </div>
+      )}
+
+      <nav ref={navRef} aria-label={header?.title ?? "Sidebar"} className="relative p-2 flex flex-col gap-4">
+        {pill.ready && (
+          <span
+            aria-hidden
+            className="absolute left-2 right-2 rounded-[11px] pointer-events-none z-0"
+            style={{
+              top: pill.top,
+              height: pill.height,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--face-inverse-shadow)",
+              transition: "top 300ms var(--ease-spring), height 300ms var(--ease-spring)",
+            }}
+          />
+        )}
+
+        {sections.map((section, si) => (
+          <div key={si} className="flex flex-col gap-0.5">
+            {section.title && (
+              <p className="relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-ink-faint lowercase">
+                {section.title}
+              </p>
+            )}
+            {section.items.map((item) => {
+              const isActive = current === item.key;
+              return (
+                <button
+                  key={item.key}
+                  ref={(el) => { btnRefs.current[item.key] = el; }}
+                  type="button"
+                  onClick={() => handleSelect(item.key, item.disabled)}
+                  disabled={item.disabled}
+                  aria-current={isActive ? "page" : undefined}
+                  className={[
+                    "relative z-10 w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[11px] text-[13px] font-medium text-left",
+                    "transition-colors duration-200 cursor-pointer",
+                    "disabled:opacity-35 disabled:pointer-events-none",
+                    isActive
+                      ? "text-ink-inverse"
+                      : "text-ink-body hover:text-ink hover:bg-surface-active/80",
+                  ].join(" ")}
+                >
+                  {item.icon && (
+                    <span
+                      className={[
+                        "shrink-0 w-[22px] h-[22px] rounded-md flex items-center justify-center transition-colors duration-200",
+                        isActive
+                          ? "bg-ink-inverse/12 shadow-[inset_0_1px_0_var(--inverse-lip)]"
+                          : "text-ink-muted [background:var(--face)] [box-shadow:var(--face-shadow)]",
+                      ].join(" ")}
+                    >
+                      {item.icon}
+                    </span>
+                  )}
+
+                  <span className="flex-1 truncate">{item.label}</span>
+
+                  {item.badge !== undefined && (
+                    <span
+                      className={[
+                        "shrink-0 text-[11px] font-medium px-1.5 py-0.5 rounded-md tabular-nums leading-none transition-colors duration-200",
+                        isActive
+                          ? "bg-ink-inverse/20 text-ink-inverse/80"
+                          : "bg-surface-active text-ink-muted",
+                      ].join(" ")}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+      </div>
+    </div>
+  );
+}

package/dist/registry/Skeleton.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+type SkeletonVariant = "text" | "circle" | "rect" | "card";
+
+interface SkeletonProps {
+  variant?: SkeletonVariant;
+  width?: string | number;
+  height?: string | number;
+  lines?: number;
+  className?: string;
+  /** What is loading, for screen readers */
+  label?: string;
+}
+
+/* Placeholders are empty sunken wells — the shape of what will fill them —
+   with a light sweep travelling across, rather than a blink.            */
+const base = "skeleton-sheen relative overflow-hidden rounded-[8px]";
+const well: React.CSSProperties = { background: "var(--well)", boxShadow: "var(--well-shadow)" };
+
+export function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = "",
+  label = "Loading",
+}: SkeletonProps) {
+  const a11y = { role: "status", "aria-busy": true, "aria-label": label } as const;
+
+  if (variant === "circle") {
+    return (
+      <div
+        {...a11y}
+        className={[base, "rounded-full", className].join(" ")}
+        style={{ ...well, width: width ?? 40, height: height ?? 40 }}
+      />
+    );
+  }
+
+  if (variant === "card") {
+    return (
+      <div
+        {...a11y}
+        className={["rounded-[20px] p-1.5", className].join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+      >
+        <div className="bg-panel-face rounded-[15px] p-1.5" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+          <div className={[base, "w-full rounded-[11px]"].join(" ")} style={{ ...well, height: height ?? 160 }} />
+          <div className="px-3.5 pt-4 pb-3.5 flex flex-col gap-2.5">
+            <div className={[base, "h-3.5 w-3/5"].join(" ")} style={well} />
+            <div className={[base, "h-2.5 w-full"].join(" ")} style={well} />
+            <div className={[base, "h-2.5 w-4/5"].join(" ")} style={well} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "rect") {
+    return (
+      <div
+        {...a11y}
+        className={[base, "rounded-[12px]", className].join(" ")}
+        style={{ ...well, width: width ?? "100%", height: height ?? 80 }}
+      />
+    );
+  }
+
+  return (
+    <div {...a11y} className={["flex flex-col gap-2", className].join(" ")}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={[base, "h-2.5 rounded-full"].join(" ")}
+          style={{
+            ...well,
+            width: width ?? (i === lines - 1 && lines > 1 ? "60%" : "100%"),
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/dist/registry/Slider.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { FieldLabel } from "./FieldMessage";
+
+type SliderValue = number | [number, number];
+
+interface SliderProps<V extends SliderValue> {
+  /** One number for a slider, two for a range */
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  /** Fires once the knob is let go, for work too heavy to do while dragging */
+  onCommit?: (value: V) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  /** Show the value beside the label; pass a function to format it */
+  showValue?: boolean | ((value: V) => React.ReactNode);
+  /** Small labels under the track, at these values */
+  marks?: number[];
+  disabled?: boolean;
+  /** Name of a hidden input (two for a range: name[0], name[1]) */
+  name?: string;
+  className?: string;
+}
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+const decimals = (n: number) => (String(n).split(".")[1] ?? "").length;
+
+/* A sunken track with the filled part in the inverse material, and a
+   raised knob (or two, for a range) that you drag along it. The knob
+   swells while held; arrows step, shift steps by ten, page keys by a
+   tenth of the range, home and end jump to the ends.               */
+export function Slider<V extends SliderValue = number>({
+  value,
+  defaultValue,
+  onChange,
+  onCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  marks,
+  disabled = false,
+  name,
+  className = "",
+}: SliderProps<V>) {
+  const uid = useId();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const knobs = useRef<(HTMLSpanElement | null)[]>([]);
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState<V>(() => (defaultValue ?? value ?? (min as V)) as V);
+  const current = (value !== undefined ? value : internal) as V;
+  const values: number[] = Array.isArray(current) ? [...current] : [current as number];
+  const [dragging, setDragging] = useState<number | null>(null);
+  const digits = decimals(step);
+
+  const snap = (n: number) => Number(clamp(Math.round((n - min) / step) * step + min, min, max).toFixed(digits));
+  const pct = (n: number) => ((n - min) / (max - min)) * 100;
+
+  const emit = (next: number[], commit = false) => {
+    const v = (isRange ? [next[0], next[1]] : next[0]) as V;
+    setInternal(v);
+    if (next.some((n, i) => n !== values[i])) onChange?.(v);
+    if (commit) onCommit?.(v);
+  };
+
+  /* Each knob is kept on its own side of the other */
+  const setAt = (i: number, n: number, commit = false) => {
+    const next = [...values];
+    next[i] = snap(n);
+    if (isRange) next[i] = i === 0 ? Math.min(next[0], values[1]) : Math.max(next[1], values[0]);
+    emit(next, commit);
+  };
+
+  const fromPointer = (clientX: number) => {
+    const r = trackRef.current!.getBoundingClientRect();
+    return min + clamp((clientX - r.left) / r.width, 0, 1) * (max - min);
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (disabled || e.button !== 0) return;
+    e.preventDefault();
+    const n = fromPointer(e.clientX);
+    // Grab whichever knob is nearer; on a tie, the one that can move that way
+    let i = 0;
+    if (isRange) {
+      const d0 = Math.abs(n - values[0]);
+      const d1 = Math.abs(n - values[1]);
+      i = d1 < d0 || (d0 === d1 && n > values[1]) ? 1 : 0;
+    }
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    setDragging(i);
+    knobs.current[i]?.focus();
+    setAt(i, n);
+  };
+
+  const onKeyDown = (i: number) => (e: React.KeyboardEvent) => {
+    const big = Math.max(step, (max - min) / 10);
+    const moves: Record<string, number> = {
+      ArrowRight: step * (e.shiftKey ? 10 : 1),
+      ArrowUp: step * (e.shiftKey ? 10 : 1),
+      ArrowLeft: -step * (e.shiftKey ? 10 : 1),
+      ArrowDown: -step * (e.shiftKey ? 10 : 1),
+      PageUp: big,
+      PageDown: -big,
+    };
+    if (e.key in moves) {
+      e.preventDefault();
+      setAt(i, values[i] + moves[e.key], true);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setAt(i, min, true);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setAt(i, max, true);
+    }
+  };
+
+  const shown =
+    typeof showValue === "function"
+      ? showValue(current)
+      : showValue
+        ? values.join(" – ")
+        : null;
+
+  const lo = isRange ? pct(values[0]) : 0;
+  const hi = pct(values[isRange ? 1 : 0]);
+
+  return (
+    <div className={["flex w-full flex-col gap-2.5", disabled ? "opacity-40" : "", className].join(" ")}>
+      {(label || shown !== null) && (
+        <div className="flex items-center justify-between gap-4">
+          {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}
+          {shown !== null && <span className="text-[12.5px] tabular-nums text-ink-muted">{shown}</span>}
+        </div>
+      )}
+
+      <div
+        className={["relative flex h-6 touch-none items-center", disabled ? "pointer-events-none" : "cursor-pointer"].join(" ")}
+        onPointerDown={onPointerDown}
+        onPointerMove={(e) => dragging !== null && setAt(dragging, fromPointer(e.clientX))}
+        onPointerUp={() => {
+          if (dragging !== null) onCommit?.(current);
+          setDragging(null);
+        }}
+        onPointerCancel={() => setDragging(null)}
+      >
+        {/* The track: a groove cut into the surface */}
+        <div
+          ref={trackRef}
+          className="relative h-2 w-full rounded-full"
+          style={{ background: "var(--track)", boxShadow: "var(--track-shadow)" }}
+        >
+          <div
+            className="absolute inset-y-px rounded-full"
+            style={{
+              left: `calc(${lo}% + ${isRange ? 0 : 1}px)`,
+              width: `calc(${hi - lo}% - ${isRange ? 0 : 1}px)`,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--fill-shadow)",
+              transition: dragging === null ? "left 200ms var(--ease-out-soft), width 200ms var(--ease-out-soft)" : "none",
+            }}
+          />
+        </div>
+
+        {values.map((v, i) => (
+          <span
+            key={i}
+            ref={(el) => {
+              knobs.current[i] = el;
+            }}
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-labelledby={label ? `${uid}-label` : undefined}
+            aria-label={isRange ? (i === 0 ? "minimum" : "maximum") : label ? undefined : "value"}
+            aria-valuemin={isRange && i === 1 ? values[0] : min}
+            aria-valuemax={isRange && i === 0 ? values[1] : max}
+            aria-valuenow={v}
+            aria-disabled={disabled || undefined}
+            onKeyDown={onKeyDown(i)}
+            className="absolute top-1/2 h-5 w-5 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-page"
+            style={{
+              left: `${pct(v)}%`,
+              // the last-dragged knob of a range sits on top, so two at one spot can be pulled apart
+              zIndex: dragging === i ? 2 : 1,
+              background: "var(--face)",
+              boxShadow: "var(--knob-shadow)",
+              transform: `translate(-50%, -50%) scale(${dragging === i ? 1.15 : 1})`,
+              transition:
+                dragging === null
+                  ? "left 200ms var(--ease-out-soft), transform 220ms var(--ease-spring)"
+                  : "transform 220ms var(--ease-spring)",
+            }}
+          >
+            {/* A small dimple on the knob's crown */}
+            <span
+              aria-hidden
+              className="absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full"
+              style={{ background: "var(--track)", boxShadow: "var(--track-shadow)" }}
+            />
+          </span>
+        ))}
+      </div>
+
+      {marks && marks.length > 0 && (
+        <div aria-hidden className="relative h-4">
+          {marks.map((m) => (
+            <span
+              key={m}
+              className="absolute -translate-x-1/2 text-[11px] tabular-nums text-ink-faint"
+              style={{ left: `${pct(m)}%` }}
+            >
+              {m}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {name &&
+        values.map((v, i) => (
+          <input key={i} type="hidden" name={isRange ? `${name}[${i}]` : name} value={v} />
+        ))}
+    </div>
+  );
+}