@borisj74/bv-ds 0.1.0

package/src/components/TreeViewItem/TreeViewItem.tsx

@@ -0,0 +1,111 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+import { TreeViewConnector, type TreeViewConnectorSize } from "../TreeViewConnector";
+
+export type TreeViewItemSize = TreeViewConnectorSize;
+
+export interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  size?: TreeViewItemSize;
+  /** Nesting depth — renders this many leading connector guides. */
+  level?: number;
+  selected?: boolean;
+  /** Has children → renders an expand/collapse chevron. */
+  expandable?: boolean;
+  open?: boolean;
+  onToggle?: () => void;
+  /** Leading checkbox. */
+  checkbox?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** Leading icon slot (e.g. a folder). */
+  icon?: ReactNode;
+  /** Show a drag handle on hover. */
+  dragHandle?: boolean;
+  children?: ReactNode;
+}
+
+/**
+ * One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
+ * guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
+ * → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
+ */
+export function TreeViewItem({
+  size = "sm",
+  level = 0,
+  selected = false,
+  expandable = false,
+  open = false,
+  onToggle,
+  checkbox = false,
+  checked = false,
+  onCheckedChange,
+  icon,
+  dragHandle = false,
+  children,
+  className,
+  ...rest
+}: TreeViewItemProps) {
+  return (
+    <div
+      className={clsx(
+        "group/tvi flex items-center gap-md rounded-sm",
+        size === "md" ? "p-md" : "px-md py-sm",
+        selected ? "bg-bg-secondary hover:bg-bg-secondary-hover" : "hover:bg-bg-primary-hover",
+        className,
+      )}
+      {...rest}
+    >
+      {Array.from({ length: level }).map((_, i) => (
+        <TreeViewConnector key={i} size={size} />
+      ))}
+
+      {expandable ? (
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-label={open ? "Collapse" : "Expand"}
+          aria-expanded={open}
+          className="flex size-4 shrink-0 items-center justify-center text-fg-quaternary"
+        >
+          <svg viewBox="0 0 16 16" fill="none" className={clsx("size-4 transition-transform", open && "rotate-90")} aria-hidden>
+            <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : (
+        <span className="size-4 shrink-0" />
+      )}
+
+      {checkbox && (
+        <button
+          type="button"
+          role="checkbox"
+          aria-checked={checked}
+          onClick={() => onCheckedChange?.(!checked)}
+          className={clsx(
+            "flex size-4 shrink-0 items-center justify-center rounded-xs border",
+            checked ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary",
+          )}
+        >
+          {checked && (
+            <svg viewBox="0 0 16 16" fill="none" className="size-3 text-fg-white" aria-hidden>
+              <path d="M13.33 4 6 11.33 2.67 8" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          )}
+        </button>
+      )}
+
+      {icon && <span className="flex shrink-0 items-center text-fg-quaternary">{icon}</span>}
+      <span className="min-w-0 flex-1 truncate text-sm font-semibold text-text-tertiary">{children}</span>
+
+      {dragHandle && (
+        <span className="shrink-0 text-fg-quaternary opacity-0 transition-opacity group-hover/tvi:opacity-100" aria-hidden>
+          <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
+            <circle cx="6" cy="4" r="1" /><circle cx="10" cy="4" r="1" />
+            <circle cx="6" cy="8" r="1" /><circle cx="10" cy="8" r="1" />
+            <circle cx="6" cy="12" r="1" /><circle cx="10" cy="12" r="1" />
+          </svg>
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/TreeViewItem/index.ts

@@ -0,0 +1,2 @@
+export { TreeViewItem } from "./TreeViewItem";
+export type { TreeViewItemProps, TreeViewItemSize } from "./TreeViewItem";

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -0,0 +1,114 @@
+import { useRef, type ReactNode, type ClipboardEvent, type KeyboardEvent } from "react";
+import clsx from "clsx";
+
+export type VerificationCodeDigits = 4 | 6;
+export type VerificationCodeSize = "sm" | "md" | "lg";
+
+export interface VerificationCodeInputProps {
+  digits?: VerificationCodeDigits;
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: VerificationCodeSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+  className?: string;
+  "aria-label"?: string;
+}
+
+const CELL: Record<VerificationCodeSize, string> = {
+  sm: "size-16 rounded-lg text-display-lg",
+  md: "size-20 rounded-xl text-display-lg",
+  lg: "size-24 rounded-xl text-display-xl",
+};
+
+/**
+ * OTP-style verification code input. `digits` 4 or 6 separate single-character
+ * cells (6 shows a centre "-" separator); large display typography
+ * (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
+ * focus on entry and steps back on backspace. Cell borders use `border-primary`
+ * (= `utility-neutral-300` #d4d4d4, same value).
+ */
+export function VerificationCodeInput({
+  digits = 4,
+  value = "",
+  onChange,
+  size = "md",
+  label,
+  hint,
+  destructive = false,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel,
+}: VerificationCodeInputProps) {
+  const refs = useRef<(HTMLInputElement | null)[]>([]);
+  const chars = Array.from({ length: digits }, (_, i) => value[i] ?? "");
+
+  const setChar = (i: number, ch: string) => {
+    const next = chars.slice();
+    next[i] = ch;
+    onChange?.(next.join("").slice(0, digits));
+  };
+
+  const handleInput = (i: number, raw: string) => {
+    const ch = raw.replace(/\D/g, "").slice(-1);
+    setChar(i, ch);
+    if (ch && i < digits - 1) refs.current[i + 1]?.focus();
+  };
+
+  const handleKeyDown = (i: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && !chars[i] && i > 0) refs.current[i - 1]?.focus();
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, digits);
+    if (pasted) {
+      onChange?.(pasted);
+      refs.current[Math.min(pasted.length, digits - 1)]?.focus();
+    }
+  };
+
+  const cells = chars.map((ch, i) => (
+    <input
+      key={i}
+      ref={(el) => (refs.current[i] = el)}
+      inputMode="numeric"
+      maxLength={1}
+      value={ch}
+      disabled={disabled}
+      aria-label={`Digit ${i + 1}`}
+      onChange={(e) => handleInput(i, e.target.value)}
+      onKeyDown={(e) => handleKeyDown(i, e)}
+      onPaste={handlePaste}
+      className={clsx(
+        "border bg-bg-primary text-center font-display font-medium text-text-primary shadow-xs outline-none",
+        "focus:border-border-brand focus:ring-2 focus:ring-border-brand focus:ring-offset-0",
+        CELL[size],
+        destructive ? "border-border-error" : "border-border-primary",
+        disabled && "cursor-not-allowed opacity-60",
+      )}
+    />
+  ));
+
+  const mid = digits / 2;
+
+  return (
+    <div className={clsx("flex flex-col gap-sm font-body", className)} aria-label={ariaLabel} role="group">
+      {label && <span className="text-sm font-medium text-text-secondary">{label}</span>}
+      <div className="flex items-center gap-lg">
+        {digits === 6 ? (
+          <>
+            {cells.slice(0, mid)}
+            <span className="text-display-xl font-medium text-utility-neutral-300">-</span>
+            {cells.slice(mid)}
+          </>
+        ) : (
+          cells
+        )}
+      </div>
+      {hint && <span className={clsx("text-sm", destructive ? "text-text-error-primary" : "text-text-tertiary")}>{hint}</span>}
+    </div>
+  );
+}

package/src/components/VerificationCodeInput/index.ts

@@ -0,0 +1,2 @@
+export { VerificationCodeInput } from "./VerificationCodeInput";
+export type { VerificationCodeInputProps, VerificationCodeDigits, VerificationCodeSize } from "./VerificationCodeInput";

package/src/illustrations/BoxIllustration.tsx

@@ -0,0 +1,13 @@
+import { type SVGProps } from "react";
+
+/** Line-art open-box illustration (empty / archived states). */
+export function BoxIllustration({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 152 120" fill="none" className={className} aria-hidden {...props}>
+      <circle cx="76" cy="60" r="48" className="fill-bg-secondary" />
+      <path d="M44 56l32-16 32 16-32 16-32-16Z" className="fill-bg-primary" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
+      <path d="M44 56v24l32 16 32-16V56" stroke="currentColor" strokeWidth="3" strokeLinejoin="round" />
+      <path d="M76 72v24" stroke="currentColor" strokeWidth="3" />
+    </svg>
+  );
+}

package/src/illustrations/CloudIllustration.tsx

@@ -0,0 +1,18 @@
+import { type SVGProps } from "react";
+
+/** Line-art cloud illustration (empty-state / upload). Color via `currentColor`. */
+export function CloudIllustration({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 152 120" fill="none" className={className} aria-hidden {...props}>
+      <circle cx="76" cy="56" r="48" className="fill-bg-secondary" />
+      <path
+        d="M52 76a16 16 0 0 1-1-32 24 24 0 0 1 46-6 18 18 0 0 1 3 36H56"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M68 70l8-8 8 8M76 62v22" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/src/illustrations/CreditCardIllustration.tsx

@@ -0,0 +1,13 @@
+import { type SVGProps } from "react";
+
+/** Line-art credit-card illustration (billing / payment empty states). */
+export function CreditCardIllustration({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 152 120" fill="none" className={className} aria-hidden {...props}>
+      <circle cx="76" cy="60" r="48" className="fill-bg-secondary" />
+      <rect x="40" y="44" width="72" height="48" rx="6" stroke="currentColor" strokeWidth="3" />
+      <path d="M40 58h72" stroke="currentColor" strokeWidth="3" />
+      <path d="M50 78h16M86 78h16" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}

package/src/illustrations/DocumentsIllustration.tsx

@@ -0,0 +1,13 @@
+import { type SVGProps } from "react";
+
+/** Line-art stacked-documents illustration (no files / empty list states). */
+export function DocumentsIllustration({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 152 120" fill="none" className={className} aria-hidden {...props}>
+      <circle cx="76" cy="60" r="48" className="fill-bg-secondary" />
+      <rect x="52" y="38" width="40" height="52" rx="4" className="fill-bg-primary" stroke="currentColor" strokeWidth="3" />
+      <rect x="62" y="46" width="40" height="52" rx="4" className="fill-bg-primary" stroke="currentColor" strokeWidth="3" />
+      <path d="M70 60h24M70 70h24M70 80h14" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}

package/src/illustrations/index.ts

@@ -0,0 +1,4 @@
+export { CloudIllustration } from "./CloudIllustration";
+export { CreditCardIllustration } from "./CreditCardIllustration";
+export { DocumentsIllustration } from "./DocumentsIllustration";
+export { BoxIllustration } from "./BoxIllustration";

package/src/index.ts

@@ -0,0 +1,147 @@
+export * from "./components/ActivityFeed";
+export * from "./components/ActivityGauge";
+export * from "./components/AdvancedFilterBar";
+export * from "./components/Alert";
+export * from "./components/Avatar";
+export * from "./components/AvatarAddButton";
+export * from "./components/AvatarGroup";
+export * from "./components/AvatarLabelGroup";
+export * from "./components/AvatarProfilePhoto";
+export * from "./components/Badge";
+export * from "./components/BadgeCloseX";
+export * from "./components/BadgeGroup";
+export * from "./components/BreadcrumbButtonBase";
+export * from "./components/Breadcrumbs";
+export * from "./components/Button";
+export * from "./components/ButtonCloseX";
+export * from "./components/ButtonDestructive";
+export * from "./components/ButtonGroup";
+export * from "./components/ButtonGroupSegment";
+export * from "./components/ButtonUtility";
+export * from "./components/CalendarCell";
+export * from "./components/CalendarCellDayWeekView";
+export * from "./components/CalendarColumnHeader";
+export * from "./components/CalendarDateIcon";
+export * from "./components/CalendarEvent";
+export * from "./components/CalendarEventDayWeekView";
+export * from "./components/CalendarHeader";
+export * from "./components/CalendarRowLabel";
+export * from "./components/CalendarTimemarker";
+export * from "./components/CalendarViewDropdown";
+export * from "./components/CardHeader";
+export * from "./components/CarouselArrow";
+export * from "./components/CarouselImage";
+export * from "./components/Change";
+export * from "./components/ChartLegend";
+export * from "./components/ChartMarker";
+export * from "./components/ChartMini";
+export * from "./components/ChartTooltip";
+export * from "./components/Checkbox";
+export * from "./components/CodeSnippet";
+export * from "./components/CodeSnippetTabs";
+export * from "./components/CommandBar";
+export * from "./components/CommandBarFooter";
+export * from "./components/CommandBarMenuSection";
+export * from "./components/CommandBarNavigationIcon";
+export * from "./components/CommandDropdownMenuItem";
+export * from "./components/CommandInput";
+export * from "./components/CommandShortcut";
+export * from "./components/ContentDivider";
+export * from "./components/ContentFeatureText";
+export * from "./components/ContentHeading";
+export * from "./components/ContentParagraph";
+export * from "./components/ContentQuote";
+export * from "./components/ContentRule";
+export * from "./components/ContextMenu";
+export * from "./components/DatePickerCell";
+export * from "./components/DatePickerListItem";
+export * from "./components/DatePickerMenu";
+export * from "./components/DropdownAccountListItem";
+export * from "./components/DropdownMenuFooter";
+export * from "./components/DropdownMenuHeader";
+export * from "./components/DropdownMenuItemInsetIcon";
+export * from "./components/DropdownMenuListItem";
+export * from "./components/EmptyState";
+export * from "./components/FeedItemBase";
+export * from "./components/FileUpload";
+export * from "./components/FileUploadBase";
+export * from "./components/FileUploadItemBase";
+export * from "./components/FilterBar";
+export * from "./components/FilterTabs";
+export * from "./components/FiltersDropdownMenu";
+export * from "./components/FiltersSlideoutMenu";
+export * from "./components/HeaderNavigation";
+export * from "./components/HelpIcon";
+export * from "./components/InputField";
+export * from "./components/LeadingInputField";
+export * from "./components/LineAndBarChart";
+export * from "./components/LinkMessage";
+export * from "./components/LoadingIndicator";
+export * from "./components/MediaMessage";
+export * from "./components/MegaInputFieldBase";
+export * from "./components/Message";
+export * from "./components/MessageAction";
+export * from "./components/MessageActionButton";
+export * from "./components/MessageActionPanel";
+export * from "./components/MessageReaction";
+export * from "./components/MessageStatusIcon";
+export * from "./components/MetricItem";
+export * from "./components/ModalActions";
+export * from "./components/ModalHeader";
+export * from "./components/MultiSelect";
+export * from "./components/NavAccountCard";
+export * from "./components/NavAccountCardMenuItem";
+export * from "./components/NavButton";
+export * from "./components/NavFeaturedCard";
+export * from "./components/NavItemBase";
+export * from "./components/NavItemDropdownBase";
+export * from "./components/NavMenuButton";
+export * from "./components/Notification";
+export * from "./components/NumberInput";
+export * from "./components/PageHeader";
+export * from "./components/Pagination";
+export * from "./components/PaginationButtonGroupBase";
+export * from "./components/PaginationCards";
+export * from "./components/PaginationDotGroup";
+export * from "./components/PaginationDotIndicator";
+export * from "./components/PaginationNumberBase";
+export * from "./components/PieChart";
+export * from "./components/ProgressBar";
+export * from "./components/ProgressCircle";
+export * from "./components/RadarChart";
+export * from "./components/TagsInputField";
+export * from "./components/TrailingInputField";
+export * from "./components/Radio";
+export * from "./components/RadioGroup";
+export * from "./components/RadioGroupItem";
+export * from "./components/SectionFooter";
+export * from "./components/SectionHeader";
+export * from "./components/SectionLabel";
+export * from "./components/Select";
+export * from "./components/SelectMenuItem";
+export * from "./components/SidebarNavigation";
+export * from "./components/SlideOutMenuHeader";
+export * from "./components/Slider";
+export * from "./components/SocialButton";
+export * from "./components/StatusIcon";
+export * from "./components/StepBase";
+export * from "./components/StepIconBase";
+export * from "./components/TabButtonBase";
+export * from "./components/TableCell";
+export * from "./components/TableHeaderCell";
+export * from "./components/TableHeaderLabel";
+export * from "./components/Tabs";
+export * from "./components/Tag";
+export * from "./components/TextEditorToolbar";
+export * from "./components/TextEditorTooltip";
+export * from "./components/TextareaInputField";
+export * from "./components/Toggle";
+export * from "./components/Tooltip";
+export * from "./components/TreeView";
+export * from "./components/TreeViewConnector";
+export * from "./components/TreeViewItem";
+export * from "./components/VerificationCodeInput";
+// Illustration set — namespaced group (not individual barrel exports).
+export * as illustrations from "./illustrations";
+// figma-to-react appends one line here per new component, e.g.:
+// export * from "./components/Input";

package/src/internal/chartTheme.ts

@@ -0,0 +1,30 @@
+// Shared theming for the Recharts-backed chart wrappers (LineAndBarChart /
+// PieChart / RadarChart). PRIVATE — not exported from the barrel. Recharts needs
+// real color strings (not Tailwind class names), so the design-token hexes are
+// mirrored here from tailwind-preset.js. Keep in sync with the preset.
+
+/** Categorical series palette — the `utility-brand` ramp + accents. */
+export const CHART_COLORS = [
+  "#7f56d9", // utility-brand-600
+  "#9e77ed", // utility-brand-500
+  "#b692f6", // utility-brand-400
+  "#e9d7fe", // utility-brand-200
+  "#22c55e", // utility-success-500
+  "#0ea5e9", // utility-sky-500
+  "#eab308", // utility-yellow-500
+  "#f04438", // utility-error-500-ish
+] as const;
+
+export const chartColor = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
+
+/** Axis grid line color (Figma `border-tertiary`). */
+export const CHART_GRID = "#f5f5f5";
+/** Axis tick label color (Figma `text-tertiary`). */
+export const CHART_TICK = "#525252";
+
+/** Default axis tick style for Recharts XAxis/YAxis. */
+export const tickStyle = {
+  fill: CHART_TICK,
+  fontSize: 12,
+  fontFamily: "Inter, sans-serif",
+} as const;

package/src/internal/ringBase.tsx

@@ -0,0 +1,82 @@
+import clsx from "clsx";
+
+/**
+ * PRIVATE shared ring-geometry helper for SVG progress rings. Used by both
+ * `ActivityGauge` (multi concentric rings) and `ProgressCircle` (single ring /
+ * half-circle gauge). Not exported from the package barrel.
+ */
+export interface RingGeometry {
+  center: number;
+  radius: number;
+  circumference: number;
+  /** Length of the visible arc (= circumference × arcFraction). */
+  arc: number;
+  /** Filled length within the arc (= value/100 × arc). */
+  filled: number;
+}
+
+export function ringGeometry(
+  diameter: number,
+  stroke: number,
+  value: number,
+  opts: { ringIndex?: number; ringGap?: number; arcFraction?: number } = {},
+): RingGeometry {
+  const { ringIndex = 0, ringGap = 0, arcFraction = 1 } = opts;
+  const center = diameter / 2;
+  const radius = center - stroke / 2 - ringIndex * (stroke + ringGap);
+  const circumference = 2 * Math.PI * radius;
+  const arc = circumference * arcFraction;
+  const filled = (Math.max(0, Math.min(100, value)) / 100) * arc;
+  return { center, radius, circumference, arc, filled };
+}
+
+export interface RingPairProps {
+  geo: RingGeometry;
+  stroke: number;
+  /** Track (unfilled) stroke utility class, e.g. "stroke-utility-neutral-100". */
+  trackClass?: string;
+  /** Progress stroke utility class (omit when using `progressColor`). */
+  progressClass?: string;
+  /** Raw hex for the progress stroke (overrides `progressClass`). */
+  progressColor?: string;
+  linecap?: "round" | "butt";
+}
+
+/**
+ * Track + progress `<circle>` pair for one ring. Render inside an `<svg>` whose
+ * `<g>` is rotated so the arc starts where you want (gauges rotate the group).
+ */
+export function RingPair({
+  geo,
+  stroke,
+  trackClass = "stroke-utility-neutral-100",
+  progressClass,
+  progressColor,
+  linecap = "round",
+}: RingPairProps) {
+  const { center, radius, circumference, arc, filled } = geo;
+  return (
+    <>
+      <circle
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        className={trackClass}
+        strokeWidth={stroke}
+        strokeDasharray={`${arc} ${circumference}`}
+      />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        className={clsx(!progressColor && progressClass)}
+        stroke={progressColor}
+        strokeWidth={stroke}
+        strokeLinecap={linecap}
+        strokeDasharray={`${filled} ${circumference}`}
+      />
+    </>
+  );
+}

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;