@borisj74/bv-ds 0.1.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@borisj74/bv-ds",
+  "version": "0.1.0",
+  "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "!dist/*.map",
+    "src",
+    "!src/**/*.stories.tsx",
+    "tailwind-preset.js",
+    "LICENSE"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "clsx": "^2.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-a11y": "^8.0.0",
+    "storybook": "^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borisj74/DS_BV.git"
+  },
+  "bugs": {
+    "url": "https://github.com/borisj74/DS_BV/issues"
+  },
+  "homepage": "https://github.com/borisj74/DS_BV#readme"
+}

package/src/components/ActivityFeed/ActivityFeed.tsx

@@ -0,0 +1,48 @@
+import { Children, Fragment, isValidElement } from "react";
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
+
+export interface ActivityFeedProps {
+  /**
+   * How feed items are separated (Figma `Divider` variant):
+   * - `connector` — items butt together; each child `FeedItemBase` should set
+   *   `connector` so the avatar lines join into a continuous thread.
+   * - `line` — a hairline rule between items.
+   * - `divider` — no rule added by the feed; interleave your own labelled date
+   *   dividers between children.
+   * - `none` — plain spacing only.
+   */
+  divider?: ActivityFeedDivider;
+  /** Feed rows — typically `FeedItemBase` instances. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function ActivityFeed({
+  divider = "none",
+  children,
+  className,
+}: ActivityFeedProps) {
+  const items = Children.toArray(children).filter(isValidElement);
+  return (
+    <div
+      role="feed"
+      className={clsx(
+        "flex w-full flex-col",
+        divider === "connector" ? "gap-none" : "gap-xl",
+        className,
+      )}
+    >
+      {items.map((child, index) => (
+        <Fragment key={child.key ?? index}>
+          {divider === "line" && index > 0 ? (
+            <div className="h-px w-full bg-border-secondary" aria-hidden />
+          ) : null}
+          {child}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/components/ActivityFeed/index.ts

@@ -0,0 +1,2 @@
+export { ActivityFeed } from "./ActivityFeed";
+export type { ActivityFeedProps, ActivityFeedDivider } from "./ActivityFeed";

package/src/components/ActivityGauge/ActivityGauge.tsx

@@ -0,0 +1,155 @@
+import clsx from "clsx";
+import { ringGeometry } from "../../internal/ringBase";
+
+export type ActivityGaugeSize = "xs" | "sm" | "md" | "lg";
+export type ActivityGaugeLegend = "none" | "bottom" | "right";
+
+export interface ActivityGaugeSeries {
+  /** Series name shown in the legend. */
+  label: string;
+  /** Fill amount for this ring, 0–100. */
+  value: number;
+  /** Ring/legend color. Defaults to the brand ramp (see DEFAULT_SERIES_COLORS). */
+  color?: string;
+}
+
+export interface ActivityGaugeProps {
+  /** Big centered numeral, e.g. "1,000". Pre-formatted by the caller. */
+  value: string;
+  /** Small centered label above/below the value, e.g. "Active users". */
+  label?: string;
+  /** One concentric ring per series, outermost first. */
+  series: ActivityGaugeSeries[];
+  size?: ActivityGaugeSize;
+  legend?: ActivityGaugeLegend;
+  className?: string;
+}
+
+// Default ring ramp + legend dots use real Tailwind stroke-*/bg-* utilities
+// backed by the utility-* tokens now in tailwind-preset.js. A per-series
+// `color` (hex) still overrides via the stroke attribute / inline style.
+const DEFAULT_STROKE_CLASSES = [
+  "stroke-utility-brand-600",
+  "stroke-utility-brand-400",
+  "stroke-utility-brand-700",
+];
+const DEFAULT_DOT_CLASSES = [
+  "bg-utility-brand-600",
+  "bg-utility-brand-400",
+  "bg-utility-brand-700",
+];
+const TRACK_STROKE_CLASS = "stroke-utility-neutral-100";
+
+interface SizeSpec {
+  diameter: number;
+  stroke: number;
+  gap: number;
+  valueClass: string;
+}
+
+const sizeSpecs: Record<ActivityGaugeSize, SizeSpec> = {
+  xs: { diameter: 120, stroke: 10, gap: 4, valueClass: "text-display-sm" },
+  sm: { diameter: 160, stroke: 12, gap: 5, valueClass: "text-display-sm" },
+  md: { diameter: 208, stroke: 14, gap: 6, valueClass: "text-display-md" },
+  lg: { diameter: 240, stroke: 16, gap: 6, valueClass: "text-display-md" },
+};
+
+export function ActivityGauge({
+  value,
+  label,
+  series,
+  size = "md",
+  legend = "none",
+  className,
+}: ActivityGaugeProps) {
+  const { diameter, stroke, gap, valueClass } = sizeSpecs[size];
+  const center = diameter / 2;
+
+  const rings = series.map((s, i) => {
+    const geo = ringGeometry(diameter, stroke, s.value, { ringIndex: i, ringGap: gap });
+    const strokeClass = DEFAULT_STROKE_CLASSES[i % DEFAULT_STROKE_CLASSES.length];
+    return { radius: geo.radius, circumference: geo.circumference, filled: geo.filled, strokeClass, custom: s.color };
+  });
+
+  const gauge = (
+    <div className="relative shrink-0" style={{ width: diameter, height: diameter }}>
+      <svg
+        width={diameter}
+        height={diameter}
+        viewBox={`0 0 ${diameter} ${diameter}`}
+        role="img"
+        aria-label={label ? `${label}: ${value}` : value}
+      >
+        <g transform={`rotate(-90 ${center} ${center})`}>
+          {rings.map((r, i) => (
+            <g key={i}>
+              <circle
+                cx={center}
+                cy={center}
+                r={r.radius}
+                fill="none"
+                className={TRACK_STROKE_CLASS}
+                strokeWidth={stroke}
+              />
+              <circle
+                cx={center}
+                cy={center}
+                r={r.radius}
+                fill="none"
+                className={clsx(!r.custom && r.strokeClass)}
+                stroke={r.custom}
+                strokeWidth={stroke}
+                strokeLinecap="round"
+                strokeDasharray={`${r.filled} ${r.circumference - r.filled}`}
+              />
+            </g>
+          ))}
+        </g>
+      </svg>
+      <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
+        {label ? (
+          <span className="text-sm font-medium text-text-tertiary">{label}</span>
+        ) : null}
+        <span className={clsx("font-display font-semibold text-text-primary", valueClass)}>
+          {value}
+        </span>
+      </div>
+    </div>
+  );
+
+  const legendEl =
+    legend === "none" ? null : (
+      <ul
+        className={clsx(
+          "flex gap-md",
+          legend === "right" ? "flex-col" : "flex-wrap justify-center",
+        )}
+      >
+        {series.map((s, i) => (
+          <li key={s.label} className="flex items-center gap-sm">
+            <span
+              className={clsx(
+                "size-2 shrink-0 rounded-full",
+                !s.color && DEFAULT_DOT_CLASSES[i % DEFAULT_DOT_CLASSES.length],
+              )}
+              style={s.color ? { backgroundColor: s.color } : undefined}
+            />
+            <span className="text-sm font-medium text-text-tertiary">{s.label}</span>
+          </li>
+        ))}
+      </ul>
+    );
+
+  return (
+    <div
+      className={clsx(
+        "flex font-body",
+        legend === "right" ? "flex-row items-center gap-xl" : "flex-col items-center gap-xl",
+        className,
+      )}
+    >
+      {gauge}
+      {legendEl}
+    </div>
+  );
+}

package/src/components/ActivityGauge/index.ts

@@ -0,0 +1,7 @@
+export { ActivityGauge } from "./ActivityGauge";
+export type {
+  ActivityGaugeProps,
+  ActivityGaugeSize,
+  ActivityGaugeLegend,
+  ActivityGaugeSeries,
+} from "./ActivityGauge";

package/src/components/AdvancedFilterBar/AdvancedFilterBar.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+function FilterLines() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path
+        d="M5 10h10M2.5 5h15M7.5 15h5"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export interface AdvancedFilterBarProps {
+  /**
+   * `false` → collapsed filter trigger only. `true` → trigger plus the active
+   * filter rows and a Clear all action.
+   */
+  active?: boolean;
+  /** Active filter rows (compose Select/Select/Input + a close button each). */
+  rows?: ReactNode;
+  /** Trigger click handler. */
+  onToggle?: () => void;
+  /** Clear-all handler (active state). */
+  onClearAll?: () => void;
+  clearLabel?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The advanced (query-builder style) filter pattern. Collapsed it shows just a
+ * filter trigger; active it shows the filter rows plus Clear all. The rows are
+ * a slot — compose `Select` + `Select` + `Input` + a close button per row.
+ */
+export function AdvancedFilterBar({
+  active = false,
+  rows,
+  onToggle,
+  onClearAll,
+  clearLabel = "Clear all",
+  className,
+}: AdvancedFilterBarProps) {
+  const trigger = (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-label="Filters"
+      aria-expanded={active}
+      className="flex size-9 shrink-0 items-center justify-center rounded-md border border-border-primary bg-bg-primary text-text-secondary shadow-xs"
+    >
+      <FilterLines />
+    </button>
+  );
+
+  if (!active) {
+    return <div className={clsx("font-body", className)}>{trigger}</div>;
+  }
+
+  return (
+    <div className={clsx("flex w-full flex-wrap items-start gap-lg font-body", className)}>
+      <div className="flex min-w-[280px] flex-1 flex-wrap items-start gap-lg">
+        {trigger}
+        {rows}
+      </div>
+      {onClearAll ? (
+        <button
+          type="button"
+          onClick={onClearAll}
+          className="shrink-0 rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-xs"
+        >
+          {clearLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AdvancedFilterBar/index.ts

@@ -0,0 +1,2 @@
+export { AdvancedFilterBar } from "./AdvancedFilterBar";
+export type { AdvancedFilterBarProps } from "./AdvancedFilterBar";

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,210 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { Button } from "../Button";
+
+export type AlertColor =
+  | "Default"
+  | "Brand"
+  | "Gray"
+  | "Error"
+  | "Warning"
+  | "Success";
+export type AlertSize = "Floating" | "FullWidth";
+
+export interface AlertAction {
+  label: string;
+  onClick?: () => void;
+}
+
+export interface AlertProps {
+  /** Bold heading line. */
+  title: string;
+  /** Supporting text under the title. */
+  description?: ReactNode;
+  color?: AlertColor;
+  /** Floating = padded card with link actions; FullWidth = banner with buttons. */
+  size?: AlertSize;
+  /** Glyph rendered inside the leading icon ring. Defaults to an info circle. */
+  icon?: ReactNode;
+  /** Primary action — "View changes" / "Learn more". */
+  primaryAction?: AlertAction;
+  /** Secondary action — typically "Dismiss". */
+  secondaryAction?: AlertAction;
+  /** Renders the top-right close button when provided. */
+  onClose?: () => void;
+  className?: string;
+}
+
+// Per-color icon foreground (preset tokens).
+const iconColor: Record<AlertColor, string> = {
+  Default: "text-fg-tertiary",
+  Gray: "text-fg-quaternary",
+  Brand: "text-fg-brand-primary",
+  Error: "text-fg-error-primary",
+  Warning: "text-fg-warning-primary",
+  Success: "text-fg-success-primary",
+};
+
+function InfoCircle() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path
+        d="M10 13.333V10m0-3.333h.008M17.5 10a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path
+        d="m15 5-10 10M5 5l10 10"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function Alert({
+  title,
+  description,
+  color = "Default",
+  size = "Floating",
+  icon,
+  primaryAction,
+  secondaryAction,
+  onClose,
+  className,
+}: AlertProps) {
+  // Featured-icon-style ring (the dedicated Featured icons component is still
+  // missing from the Figma file — see figma-map.md — so the outline ring is
+  // implemented inline here).
+  const iconRing = (
+    <span
+      className={clsx(
+        "flex size-9 shrink-0 items-center justify-center rounded-full border border-border-primary bg-bg-primary shadow-xs",
+        iconColor[color],
+      )}
+    >
+      {icon ?? <InfoCircle />}
+    </span>
+  );
+
+  const closeButton = onClose ? (
+    <button
+      type="button"
+      onClick={onClose}
+      aria-label="Close"
+      className="shrink-0 text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+    >
+      <CloseIcon />
+    </button>
+  ) : null;
+
+  const heading = (
+    <p className="text-sm font-semibold text-text-secondary">{title}</p>
+  );
+  const body = description ? (
+    <p className="text-sm font-normal text-text-tertiary">{description}</p>
+  ) : null;
+
+  if (size === "FullWidth") {
+    return (
+      <div
+        role="alert"
+        className={clsx(
+          "w-full border-b border-border-secondary bg-bg-primary-alt font-body",
+          className,
+        )}
+      >
+        <div className="mx-auto flex max-w-container-max-width-desktop items-start gap-xl px-container-padding-desktop py-2xl">
+          {iconRing}
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-md gap-y-xs pt-xs">
+            {heading}
+            {body}
+          </div>
+          <div className="flex shrink-0 items-center gap-lg">
+            {secondaryAction ? (
+              <Button
+                hierarchy="Secondary"
+                size="sm"
+                onClick={secondaryAction.onClick}
+              >
+                {secondaryAction.label}
+              </Button>
+            ) : null}
+            {primaryAction ? (
+              <Button
+                hierarchy="Primary"
+                size="sm"
+                onClick={primaryAction.onClick}
+              >
+                {primaryAction.label}
+              </Button>
+            ) : null}
+            {closeButton}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Floating
+  return (
+    <div
+      role="alert"
+      className={clsx(
+        "relative flex w-full items-start gap-xl rounded-xl border border-border-primary bg-bg-primary-alt p-xl font-body shadow-skeuomorphic",
+        className,
+      )}
+    >
+      {iconRing}
+      <div className="flex min-w-0 flex-1 flex-col gap-lg pr-xl">
+        <div className="flex flex-col gap-xs">
+          {heading}
+          {body}
+        </div>
+        {primaryAction || secondaryAction ? (
+          <div className="flex items-center gap-xl">
+            {secondaryAction ? (
+              <Button
+                hierarchy="Link gray"
+                size="sm"
+                onClick={secondaryAction.onClick}
+              >
+                {secondaryAction.label}
+              </Button>
+            ) : null}
+            {primaryAction ? (
+              <Button
+                hierarchy="Link color"
+                size="sm"
+                onClick={primaryAction.onClick}
+              >
+                {primaryAction.label}
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {onClose ? (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute right-xl top-xl text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <CloseIcon />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from "./Alert";
+export type { AlertProps, AlertColor, AlertSize, AlertAction } from "./Alert";

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,111 @@
+import clsx from "clsx";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface AvatarProps {
+  size?: AvatarSize;
+  /** Image URL. Takes precedence over initials and the placeholder icon. */
+  src?: string;
+  alt?: string;
+  /** Placeholder text (initials, e.g. "OR") shown when no image is supplied. */
+  initials?: string;
+  /** Render the outer border ring (Figma `Border=True`). */
+  hasBorder?: boolean;
+  /** Show the online status dot (bottom-right). */
+  hasStatus?: boolean;
+  className?: string;
+}
+
+const sizeClass: Record<AvatarSize, string> = {
+  xs: "size-6", // 24px
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+  lg: "size-12", // 48px
+  xl: "size-14", // 56px
+  "2xl": "size-16", // 64px
+};
+
+// Initials typography per size (text-xs → display-xs scale, Semibold).
+const initialsClass: Record<AvatarSize, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-display-xs",
+};
+
+const statusClass: Record<AvatarSize, string> = {
+  xs: "size-1.5", // 6px
+  sm: "size-2", // 8px
+  md: "size-2.5", // 10px
+  lg: "size-3", // 12px
+  xl: "size-3.5", // 14px
+  "2xl": "size-4", // 16px
+};
+
+function UserIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-1/2 w-1/2" aria-hidden>
+      <path
+        d="M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function Avatar({
+  size = "md",
+  src,
+  alt = "",
+  initials,
+  hasBorder = false,
+  hasStatus = false,
+  className,
+}: AvatarProps) {
+  return (
+    <span className={clsx("relative inline-flex shrink-0", className)}>
+      <span
+        className={clsx(
+          "flex items-center justify-center overflow-hidden rounded-full bg-bg-tertiary shadow-sm",
+          src
+            ? "border-[0.5px] border-border-secondary-alt"
+            : "text-text-quaternary",
+          hasBorder &&
+            "ring-1 ring-border-secondary ring-offset-2 ring-offset-bg-primary",
+          sizeClass[size],
+        )}
+      >
+        {src ? (
+          <img src={src} alt={alt} className="size-full object-cover" />
+        ) : initials ? (
+          <span
+            className={clsx(
+              "font-display font-semibold",
+              initialsClass[size],
+            )}
+          >
+            {initials}
+          </span>
+        ) : (
+          <span className="flex size-full items-center justify-center text-fg-quaternary">
+            <UserIcon />
+          </span>
+        )}
+      </span>
+      {hasStatus ? (
+        <span
+          className={clsx(
+            "absolute bottom-0 right-0 rounded-full border-[1.5px] border-bg-primary bg-fg-success-secondary",
+            statusClass[size],
+          )}
+          aria-label="Online"
+        />
+      ) : null}
+    </span>
+  );
+}

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarSize } from "./Avatar";