@borisj74/bv-ds 0.1.0

package/src/components/FileUploadBase/FileUploadBase.tsx

@@ -0,0 +1,69 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface FileUploadBaseProps extends HTMLAttributes<HTMLDivElement> {
+  /** Emphasised action text. */
+  actionText?: ReactNode;
+  /** Trailing prompt after the action text. */
+  promptText?: ReactNode;
+  /** Constraints hint (e.g. "SVG, PNG, JPG or GIF (max. 800x400px)"). */
+  hint?: ReactNode;
+  /** Active drag-over styling (brand border). */
+  dragActive?: boolean;
+  /** Disabled styling + interaction. */
+  disabled?: boolean;
+}
+
+function UploadCloud() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5 text-fg-quaternary" aria-hidden>
+      <path
+        d="M6.667 13.333 10 10m0 0 3.333 3.333M10 10v7.5m6.667-3.548A4.583 4.583 0 0 0 14.167 5.5h-1.05A6.667 6.667 0 1 0 3.333 12.66"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * The drop-zone region of a file upload — featured upload icon, click/drag
+ * prompt, and a constraints hint. Wire up the actual file input / drag events
+ * on the consumer side (pass handlers via the standard div props).
+ */
+export function FileUploadBase({
+  actionText = "Click to upload",
+  promptText = "or drag and drop",
+  hint = "SVG, PNG, JPG or GIF (max. 800x400px)",
+  dragActive = false,
+  disabled = false,
+  className,
+  ...rest
+}: FileUploadBaseProps) {
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col items-center gap-lg rounded-xl px-3xl py-xl text-center font-body",
+        dragActive
+          ? "border-2 border-border-brand bg-bg-primary"
+          : "border border-border-secondary bg-bg-primary",
+        disabled && "pointer-events-none bg-bg-secondary opacity-60",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="flex size-10 items-center justify-center rounded-md border border-border-primary bg-bg-primary shadow-xs">
+        <UploadCloud />
+      </span>
+      <div className="flex flex-col gap-xs">
+        <p className="text-sm">
+          <span className="font-semibold text-text-brand-secondary">{actionText}</span>{" "}
+          <span className="font-normal text-text-tertiary">{promptText}</span>
+        </p>
+        <p className="text-xs font-normal text-text-tertiary">{hint}</p>
+      </div>
+    </div>
+  );
+}

package/src/components/FileUploadBase/index.ts

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

package/src/components/FileUploadItemBase/FileUploadItemBase.tsx

@@ -0,0 +1,190 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type FileUploadItemStatus = "in-progress" | "complete" | "error";
+export type FileUploadItemType = "bar" | "fill";
+export type FileUploadItemIconType = "file-type" | "simple";
+
+export interface FileUploadItemBaseProps {
+  /** File name. */
+  fileName: ReactNode;
+  /** Size / supporting line (e.g. "20 KB of 200 KB"). */
+  meta?: ReactNode;
+  /** Upload status. */
+  status?: FileUploadItemStatus;
+  /** Progress 0–100 (used when `type="bar"` and not errored). */
+  progress?: number;
+  /** "bar" shows a progress bar row; "fill" fills the row background. */
+  type?: FileUploadItemType;
+  /** File-type badge icon vs a simple file glyph. */
+  iconType?: FileUploadItemIconType;
+  /** Short extension label for the file-type icon (e.g. "PDF"). */
+  fileExt?: string;
+  /** Error message (status="error"). */
+  errorText?: ReactNode;
+  onDelete?: () => void;
+  onRetry?: () => void;
+  className?: string;
+}
+
+function StatusBits({
+  status,
+  errorText,
+}: {
+  status: FileUploadItemStatus;
+  errorText?: ReactNode;
+}) {
+  if (status === "complete") {
+    return (
+      <span className="flex items-center gap-xs text-sm font-medium text-text-success-primary">
+        <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
+          <path d="M14.667 8A6.667 6.667 0 1 1 8 1.333 6.667 6.667 0 0 1 14.667 8Zm-3.84-2.16L6.9 9.767 5.173 8.04" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        Complete
+      </span>
+    );
+  }
+  if (status === "error") {
+    return (
+      <span className="flex items-center gap-xs text-sm font-medium text-text-error-primary">
+        <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
+          <path d="M8 5.333V8m0 2.667h.007M14.667 8A6.667 6.667 0 1 1 8 1.333 6.667 6.667 0 0 1 14.667 8Z" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        {errorText ?? "Failed"}
+      </span>
+    );
+  }
+  return (
+    <span className="flex items-center gap-xs text-sm font-medium text-text-quaternary">
+      <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
+        <path d="M5.333 10.667 8 8m0 0 2.667 2.667M8 8v6M13.333 11.16A3.667 3.667 0 0 0 11.333 4.4h-.84A5.333 5.333 0 1 0 2.667 10.13" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      Uploading...
+    </span>
+  );
+}
+
+function FileIcon({
+  iconType,
+  fileExt,
+}: {
+  iconType: FileUploadItemIconType;
+  fileExt: string;
+}) {
+  if (iconType === "simple") {
+    return (
+      <svg viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 text-fg-quaternary" aria-hidden>
+        <path d="M11.667 1.667H5A1.667 1.667 0 0 0 3.333 3.333v13.334A1.667 1.667 0 0 0 5 18.333h10a1.667 1.667 0 0 0 1.667-1.666V6.667m-5-5 5 5m-5-5v5h5" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  return (
+    <span className="relative flex h-10 w-8 shrink-0 items-end justify-center rounded-[2px] border border-border-secondary bg-bg-primary">
+      <span className="mb-1 rounded-[2px] bg-utility-red-600 px-1 py-[2px] text-[10px] font-bold text-text-white">
+        {fileExt}
+      </span>
+    </span>
+  );
+}
+
+/**
+ * A single file row in an upload list — file icon, name, status line, progress,
+ * and delete/retry actions. Covers the Figma matrix (bar/fill × file-type/simple
+ * × in-progress/complete/error) via props. The `fill` type renders progress as
+ * a background fill (simplified vs the exact Figma overlay).
+ */
+export function FileUploadItemBase({
+  fileName,
+  meta,
+  status = "in-progress",
+  progress = 0,
+  type = "bar",
+  iconType = "file-type",
+  fileExt = "PDF",
+  errorText,
+  onDelete,
+  onRetry,
+  className,
+}: FileUploadItemBaseProps) {
+  const isError = status === "error";
+  const showBar = type === "bar" && !isError;
+
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full items-start gap-lg overflow-hidden rounded-xl bg-bg-primary p-xl font-body",
+        isError ? "border-2 border-border-error" : "border border-border-secondary",
+        className,
+      )}
+    >
+      {type === "fill" && !isError ? (
+        <span
+          className="absolute inset-y-0 left-0 bg-bg-secondary"
+          style={{ width: `${progress}%` }}
+          aria-hidden
+        />
+      ) : null}
+
+      <div className="relative flex min-w-0 flex-1 items-start gap-lg">
+        <FileIcon iconType={iconType} fileExt={fileExt} />
+        <div className="flex min-w-0 flex-1 flex-col gap-xxs pr-7">
+          <p className="truncate text-sm font-medium text-text-secondary">
+            {fileName}
+          </p>
+          {isError && (type === "fill" || iconType === "simple") ? (
+            <p className="text-sm font-normal text-text-tertiary">
+              {errorText ?? "Upload failed, please try again."}
+            </p>
+          ) : (
+            <div className="flex items-center gap-md">
+              {meta ? (
+                <span className="truncate text-sm font-normal text-text-tertiary">
+                  {meta}
+                </span>
+              ) : null}
+              {meta ? <span className="h-3 w-px bg-border-secondary" /> : null}
+              <StatusBits status={status} />
+            </div>
+          )}
+
+          {showBar ? (
+            <div className="mt-xs flex items-center gap-lg">
+              <span className="relative h-2 flex-1 rounded-full bg-bg-quaternary">
+                <span
+                  className="absolute inset-y-0 left-0 rounded-full bg-fg-brand-primary"
+                  style={{ width: `${progress}%` }}
+                />
+              </span>
+              <span className="text-sm font-medium text-text-secondary">
+                {progress}%
+              </span>
+            </div>
+          ) : null}
+
+          {isError && onRetry ? (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-xs self-start text-sm font-semibold text-text-error-primary"
+            >
+              Try again
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {onDelete ? (
+        <button
+          type="button"
+          onClick={onDelete}
+          aria-label="Delete file"
+          className="relative shrink-0 rounded-sm p-sm text-fg-quaternary outline-none transition-colors hover:text-fg-quaternary-hover focus-visible:ring-2 focus-visible:ring-border-brand"
+        >
+          <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
+            <path d="M10.667 4v-.533c0-.747 0-1.12-.146-1.405a1.333 1.333 0 0 0-.583-.583c-.286-.146-.659-.146-1.405-.146H7.467c-.747 0-1.12 0-1.406.146a1.333 1.333 0 0 0-.582.583C5.333 2.347 5.333 2.72 5.333 3.467V4M2 4h12M12.667 4v7.467c0 1.12 0 1.68-.219 2.108a2 2 0 0 1-.873.874c-.428.218-.988.218-2.108.218H6.533c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874c-.218-.428-.218-.988-.218-2.108V4" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FileUploadItemBase/index.ts

@@ -0,0 +1,7 @@
+export { FileUploadItemBase } from "./FileUploadItemBase";
+export type {
+  FileUploadItemBaseProps,
+  FileUploadItemStatus,
+  FileUploadItemType,
+  FileUploadItemIconType,
+} from "./FileUploadItemBase";

package/src/components/FilterBar/FilterBar.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface FilterBarProps {
+  /**
+   * Filter controls on the left (compose Select / MultiSelect / etc.).
+   * Covers the Dropdowns and Date filters types.
+   */
+  filters?: ReactNode;
+  /** Show the date-picker slot in the trailing actions. */
+  withDatePicker?: boolean;
+  /** Date-picker trigger node, rendered when `withDatePicker`. */
+  datePicker?: ReactNode;
+  /** Extra trailing actions (e.g. a "More filters" button, search icon). */
+  actions?: ReactNode;
+  /** When set, renders the "Clear all" button. */
+  onClearAll?: () => void;
+  clearLabel?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Dropdown-driven filter bar — a row of filter controls with optional trailing
+ * date picker and actions. A layout shell: compose the actual Select/MultiSelect
+ * controls as `filters` and any trigger buttons as `datePicker`/`actions`.
+ * Covers the Figma "Dropdowns", "Dropdowns and date picker" and "Date filters"
+ * types. (The "Simple" type is just a SearchInput — use that directly.)
+ */
+export function FilterBar({
+  filters,
+  withDatePicker = false,
+  datePicker,
+  actions,
+  onClearAll,
+  clearLabel = "Clear all",
+  className,
+}: FilterBarProps) {
+  return (
+    <div
+      className={clsx("flex w-full flex-wrap items-end gap-lg font-body", className)}
+    >
+      <div className="flex min-w-[280px] flex-1 items-end gap-lg">
+        {filters}
+        {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>
+      {withDatePicker || actions ? (
+        <div className="flex shrink-0 items-center gap-lg">
+          {withDatePicker ? datePicker : null}
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FilterBar/index.ts

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

package/src/components/FilterTabs/FilterTabs.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface FilterTabsProps {
+  /** Tab strip on the left (compose your tab buttons / segmented control). */
+  tabs?: ReactNode;
+  /** Search input slot (the "Tabs and search" type). */
+  search?: ReactNode;
+  /** Date-picker trigger slot (the "Tabs and date picker" type). */
+  datePicker?: ReactNode;
+  /** When true, show `datePicker` in the trailing area instead of `search`. */
+  withDatePicker?: boolean;
+  /** Extra trailing actions (e.g. a Filters button). */
+  actions?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Tab-based filter navigation — a tab strip on the left with a trailing search
+ * (or date picker) and optional actions. Layout shell: compose the tab control,
+ * search input, and date picker as slots. Covers the Figma "Tabs and search"
+ * and "Tabs and date picker" types.
+ */
+export function FilterTabs({
+  tabs,
+  search,
+  datePicker,
+  withDatePicker = false,
+  actions,
+  className,
+}: FilterTabsProps) {
+  return (
+    <div className={clsx("flex w-full flex-wrap items-end gap-lg font-body", className)}>
+      <div className="flex min-w-0 flex-1 items-end">{tabs}</div>
+      <div className="flex shrink-0 items-center gap-lg">
+        {withDatePicker ? datePicker : search}
+        {actions}
+      </div>
+    </div>
+  );
+}

package/src/components/FilterTabs/index.ts

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

package/src/components/FiltersDropdownMenu/FiltersDropdownMenu.tsx

@@ -0,0 +1,104 @@
+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>
+  );
+}
+
+function ChevronDown() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
+      <path d="m4 6 4 4 4-4" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export interface FiltersDropdownMenuProps {
+  /** Trigger label. */
+  label?: ReactNode;
+  /** Active-filter count — when > 0 the trigger gets the active styling + badge. */
+  count?: number;
+  /** Show the trailing chevron. */
+  chevron?: boolean;
+  disabled?: boolean;
+  /** Whether the panel is open. */
+  open?: boolean;
+  onToggle?: () => void;
+  /** Panel alignment relative to the trigger. */
+  align?: "left" | "right";
+  /** Panel content (the filter list) — compose your own rows. */
+  children?: ReactNode;
+  /** Panel footer (e.g. Reset / Apply). */
+  footer?: ReactNode;
+  className?: string;
+}
+
+/**
+ * A "Filters" dropdown trigger button plus its panel. The trigger covers the
+ * default/hover/focus/disabled/active states (active when `count > 0`); the
+ * open panel content is a slot — compose the filter rows yourself.
+ */
+export function FiltersDropdownMenu({
+  label = "Filters",
+  count = 0,
+  chevron = true,
+  disabled = false,
+  open = false,
+  onToggle,
+  align = "left",
+  children,
+  footer,
+  className,
+}: FiltersDropdownMenuProps) {
+  const active = count > 0;
+  return (
+    <div className={clsx("relative inline-flex flex-col font-body", className)}>
+      <button
+        type="button"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-expanded={open}
+        className={clsx(
+          "flex items-center gap-xs rounded-md border px-lg py-md text-sm font-semibold shadow-xs outline-none",
+          active
+            ? "border-border-brand bg-bg-brand-primary text-text-brand-secondary"
+            : "border-border-primary bg-bg-primary text-text-secondary",
+          "focus-visible:ring-2 focus-visible:ring-border-brand",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        <FilterLines />
+        <span>{label}</span>
+        {active ? (
+          <span className="rounded-full bg-bg-brand-solid px-1.5 text-xs font-medium text-text-white">
+            {count}
+          </span>
+        ) : null}
+        {chevron ? <ChevronDown /> : null}
+      </button>
+      {open && children ? (
+        <div
+          className={clsx(
+            "absolute top-full z-40 mt-xs flex min-w-[280px] flex-col rounded-md border border-border-secondary-alt bg-bg-primary shadow-lg",
+            align === "right" ? "right-0" : "left-0",
+          )}
+        >
+          <div className="flex flex-col py-xs">{children}</div>
+          {footer ? (
+            <div className="border-t border-border-secondary-alt p-lg">{footer}</div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FiltersDropdownMenu/index.ts

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

package/src/components/FiltersSlideoutMenu/FiltersSlideoutMenu.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface FiltersSlideoutMenuProps {
+  /** Panel title. */
+  title?: ReactNode;
+  /** Supporting text under the title. */
+  supportingText?: ReactNode;
+  /** Close handler → renders the header close button. */
+  onClose?: () => void;
+  /** Filter body — compose the filter groups (Empty/Inactive/Active states). */
+  children?: ReactNode;
+  /** Footer actions (e.g. Reset / Apply). */
+  footer?: ReactNode;
+  className?: string;
+}
+
+function XClose() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path d="M15 5 5 15M5 5l10 10" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+/**
+ * A slide-out filter drawer — header (title + close), a scrollable filter body,
+ * and a footer for actions. The body is a slot: compose the empty / inactive /
+ * active filter content yourself. Structural shell (mobile/desktop differ only
+ * in width on the consumer side).
+ */
+export function FiltersSlideoutMenu({
+  title = "Filters",
+  supportingText,
+  onClose,
+  children,
+  footer,
+  className,
+}: FiltersSlideoutMenuProps) {
+  return (
+    <aside
+      className={clsx(
+        "flex h-full w-[440px] max-w-full flex-col border-l border-border-secondary bg-bg-primary font-body shadow-xl",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between border-b border-border-secondary px-xl py-lg">
+        <div className="flex min-w-0 flex-col">
+          <p className="text-lg font-semibold text-text-primary">{title}</p>
+          {supportingText ? (
+            <p className="text-sm font-normal text-text-tertiary">{supportingText}</p>
+          ) : null}
+        </div>
+        {onClose ? (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="-mr-2 shrink-0 rounded-md p-md text-fg-quaternary outline-none transition-colors hover:text-fg-quaternary-hover focus-visible:ring-2 focus-visible:ring-border-brand"
+          >
+            <XClose />
+          </button>
+        ) : null}
+      </div>
+      <div className="flex-1 overflow-y-auto p-xl">{children}</div>
+      {footer ? (
+        <div className="border-t border-border-secondary p-xl">{footer}</div>
+      ) : null}
+    </aside>
+  );
+}

package/src/components/FiltersSlideoutMenu/index.ts

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