@borisj74/bv-ds 0.1.0

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,91 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TagSize = "sm" | "md" | "lg";
+
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: TagSize;
+  children?: ReactNode;
+  /** Leading visual — dot / country flag / avatar (ReactNode slot). */
+  icon?: ReactNode;
+  /** Render a leading checkbox (bare bordered box, distinct from `Checkbox`). */
+  checkbox?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** Trailing count value (renders a divider + number). */
+  count?: ReactNode;
+  /** Trailing X-close button callback. */
+  onClose?: () => void;
+}
+
+/**
+ * Compact tag/chip. One component over the Figma matrix: `icon` (dot/country/
+ * avatar) slot, optional leading `checkbox`, trailing `count`, and an `onClose`
+ * X button. The checkbox/count/close sub-parts are inline (not separate exported
+ * components); `checkbox` is a bare bordered box, intentionally distinct from the
+ * full `Checkbox`/`Radio` controls.
+ */
+export function Tag({
+  size = "md",
+  children,
+  icon,
+  checkbox = false,
+  checked = false,
+  onCheckedChange,
+  count,
+  onClose,
+  className,
+  ...rest
+}: TagProps) {
+  const text = size === "sm" ? "text-xs" : "text-sm";
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center gap-[5px] rounded-sm border border-border-primary bg-bg-primary font-medium text-text-secondary",
+        size === "lg" ? "px-md py-xs" : "px-xs py-xxs",
+        text,
+        className,
+      )}
+      {...rest}
+    >
+      {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">{icon}</span>}
+      <span className="whitespace-nowrap">{children}</span>
+      {count != null && (
+        <>
+          <span className="h-3 w-px bg-border-secondary" aria-hidden />
+          <span className="text-text-tertiary">{count}</span>
+        </>
+      )}
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Remove"
+          className="-mr-0.5 flex shrink-0 items-center justify-center rounded-[3px] p-xxs text-fg-quaternary hover:bg-bg-primary-hover hover:text-fg-secondary"
+        >
+          <svg viewBox="0 0 12 12" fill="none" className="size-3" aria-hidden>
+            <path d="M9 3 3 9M3 3l6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      )}
+    </span>
+  );
+}

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export type { TagProps, TagSize } from "./Tag";

package/src/components/TagsInputField/TagsInputField.tsx

@@ -0,0 +1,90 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { FieldWrapper, type InputFieldSize } from "../InputField/inputFieldShared";
+
+export type TagsInputVariant = "inner" | "outer";
+
+export interface TagsInputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Current tags. */
+  tags?: string[];
+  /** Remove handler (receives the tag index). Renders a close button per chip. */
+  onRemoveTag?: (index: number) => void;
+  /** `inner` keeps chips inside the field; `outer` shows them below it. */
+  variant?: TagsInputVariant;
+  size?: InputFieldSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  destructive?: boolean;
+}
+
+function TagChip({ label, onRemove }: { label: string; onRemove?: () => void }) {
+  return (
+    <span className="flex shrink-0 items-center gap-[3px] rounded-sm border border-border-primary bg-bg-primary py-xxs pl-[9px] pr-xs text-sm font-medium text-text-secondary">
+      {label}
+      {onRemove ? (
+        <button type="button" onClick={onRemove} aria-label={`Remove ${label}`} className="rounded-[3px] p-xxs text-fg-quaternary hover:text-fg-quaternary-hover">
+          <svg viewBox="0 0 12 12" fill="none" className="size-3" aria-hidden>
+            <path d="M9 3 3 9M3 3l6 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+/**
+ * Tag/chip input. `inner` renders the chips inside the field (wrapping with the
+ * text input); `outer` renders the field on top with the chips below it.
+ * Tag state is controlled by the consumer (`tags` + `onRemoveTag`).
+ */
+export function TagsInputField({
+  tags = [],
+  onRemoveTag,
+  variant = "inner",
+  size = "md",
+  label,
+  hint,
+  required,
+  destructive,
+  className,
+  placeholder = "Add tag",
+  ...rest
+}: TagsInputFieldProps) {
+  const chips = tags.map((t, i) => (
+    <TagChip key={i} label={t} onRemove={onRemoveTag ? () => onRemoveTag(i) : undefined} />
+  ));
+
+  const box = (inner: ReactNode) => (
+    <div
+      className={clsx(
+        "flex w-full flex-wrap items-center gap-md rounded-md border bg-bg-primary px-lg py-md shadow-xs",
+        "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+        destructive
+          ? "border-border-error focus-within:ring-border-error"
+          : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand",
+      )}
+    >
+      {inner}
+      <input
+        placeholder={placeholder}
+        className="min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+        {...rest}
+      />
+    </div>
+  );
+
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={destructive} className={className}>
+      {variant === "inner" ? (
+        box(chips)
+      ) : (
+        <div className="flex w-full flex-col gap-md">
+          {box(null)}
+          {chips.length ? <div className="flex flex-wrap gap-sm">{chips}</div> : null}
+        </div>
+      )}
+    </FieldWrapper>
+  );
+}

package/src/components/TagsInputField/index.ts

@@ -0,0 +1,2 @@
+export { TagsInputField } from "./TagsInputField";
+export type { TagsInputFieldProps, TagsInputVariant } from "./TagsInputField";

package/src/components/TextEditorToolbar/TextEditorToolbar.tsx

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface TextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Toolbar controls — typically `ButtonUtility` groups. */
+  children?: ReactNode;
+}
+
+/**
+ * Formatting-toolbar **chrome shell** for a rich-text editor (layout + tokens
+ * only, no editing logic). Horizontal bar; drop your formatting buttons in as
+ * `children` (use `TextEditorToolbarDivider` between groups). Pair with a real
+ * editor engine (TipTap/Quill) — the deferred `Text editor` row.
+ */
+export function TextEditorToolbar({ children, className, ...rest }: TextEditorToolbarProps) {
+  return (
+    <div
+      className={clsx(
+        "flex flex-wrap items-center gap-xs rounded-lg border border-border-secondary bg-bg-primary p-xs shadow-xs",
+        className,
+      )}
+      role="toolbar"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Vertical divider between toolbar groups. */
+export function TextEditorToolbarDivider({ className }: { className?: string }) {
+  return <span className={clsx("mx-xs h-5 w-px shrink-0 bg-border-secondary", className)} aria-hidden />;
+}

package/src/components/TextEditorToolbar/index.ts

@@ -0,0 +1,2 @@
+export { TextEditorToolbar, TextEditorToolbarDivider } from "./TextEditorToolbar";
+export type { TextEditorToolbarProps } from "./TextEditorToolbar";

package/src/components/TextEditorTooltip/TextEditorTooltip.tsx

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface TextEditorTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /** Inline formatting controls shown for the current selection. */
+  children?: ReactNode;
+}
+
+/**
+ * Floating selection-toolbar **chrome shell** for a rich-text editor (layout +
+ * tokens only, no editing logic). A small elevated card meant to be positioned
+ * over a text selection; drop inline-format buttons in as `children`. Pair with a
+ * real editor engine — the deferred `Text editor` row.
+ */
+export function TextEditorTooltip({ children, className, ...rest }: TextEditorTooltipProps) {
+  return (
+    <div
+      className={clsx(
+        "inline-flex items-center gap-xxs rounded-lg border border-border-secondary-alt bg-bg-primary p-xxs shadow-lg",
+        className,
+      )}
+      role="toolbar"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/TextEditorTooltip/index.ts

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

package/src/components/TextareaInputField/TextareaInputField.tsx

@@ -0,0 +1,45 @@
+import type { TextareaHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import {
+  FieldWrapper,
+  boxClasses,
+  inputSizeClasses,
+  type InputFieldSize,
+} from "../InputField/inputFieldShared";
+
+export interface TextareaInputFieldProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+  size?: InputFieldSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  destructive?: boolean;
+}
+
+/**
+ * Multiline text input. Reuses the Input field family's shared `FieldWrapper`
+ * (label/required/hint/destructive) and `boxClasses`/`inputSizeClasses` — the
+ * wrapper is NOT reimplemented. `rows` controls height (default 4).
+ */
+export function TextareaInputField({
+  size = "md",
+  label,
+  hint,
+  required,
+  destructive,
+  rows = 4,
+  className,
+  ...rest
+}: TextareaInputFieldProps) {
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={destructive} className={className}>
+      <div className={clsx(boxClasses(destructive), "items-stretch", inputSizeClasses[size])}>
+        <textarea
+          rows={rows}
+          className="min-w-0 flex-1 resize-y bg-transparent text-text-primary outline-none placeholder:text-text-placeholder"
+          {...rest}
+        />
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/TextareaInputField/index.ts

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

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,87 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+
+export type ToggleType = "default" | "slim";
+export type ToggleSize = "sm" | "md";
+
+export interface ToggleProps {
+  type?: ToggleType;
+  size?: ToggleSize;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: ReactNode;
+  supportingText?: ReactNode;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+const TRACK: Record<ToggleSize, string> = { sm: "h-5 w-9", md: "h-6 w-11" };
+const KNOB: Record<ToggleSize, string> = { sm: "size-4", md: "size-5" };
+const TRAVEL: Record<ToggleSize, string> = { sm: "translate-x-4", md: "translate-x-5" };
+
+/**
+ * Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
+ * thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
+ * tokens when on). The `_Toggle base` control is inline (not a separate export).
+ * Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.
+ */
+export function Toggle({
+  type = "default",
+  size = "sm",
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  supportingText,
+  className,
+  id,
+  "aria-label": ariaLabel,
+}: ToggleProps) {
+  const slim = type === "slim";
+
+  const control = (
+    <button
+      type="button"
+      role="switch"
+      id={id}
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      className={clsx(
+        "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        slim ? "h-2 w-9 border" : TRACK[size],
+        slim
+          ? checked
+            ? "border-toggle-slim-border-pressed bg-bg-brand-solid hover:border-toggle-slim-border-pressed-hover"
+            : "border-transparent bg-bg-quaternary"
+          : checked
+            ? "bg-bg-brand-solid hover:bg-bg-brand-solid-hover"
+            : "bg-bg-quaternary",
+        disabled && "cursor-not-allowed opacity-60",
+      )}
+    >
+      <span
+        className={clsx(
+          "pointer-events-none inline-block rounded-full bg-fg-white shadow-sm transition-transform",
+          slim ? "size-4 border border-border-primary" : KNOB[size],
+          checked ? (slim ? "translate-x-5" : TRAVEL[size]) : slim ? "-translate-x-px" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  );
+
+  if (!label && !supportingText) return <span className={className}>{control}</span>;
+
+  return (
+    <div className={clsx("flex items-start gap-md", className)}>
+      {control}
+      <label htmlFor={id} className="flex flex-col">
+        {label && <span className="text-sm font-medium text-text-secondary">{label}</span>}
+        {supportingText && <span className="text-sm text-text-tertiary">{supportingText}</span>}
+      </label>
+    </div>
+  );
+}

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle";
+export type { ToggleProps, ToggleType, ToggleSize } from "./Toggle";

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TooltipArrow =
+  | "none"
+  | "topCenter"
+  | "bottomCenter"
+  | "bottomLeft"
+  | "bottomRight"
+  | "left"
+  | "right";
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tooltip heading text. */
+  text?: ReactNode;
+  children?: ReactNode;
+  /** Secondary line below the heading. */
+  supportingText?: ReactNode;
+  /** Arrow position relative to the bubble. */
+  arrow?: TooltipArrow;
+}
+
+const ARROW_POS: Record<Exclude<TooltipArrow, "none">, string> = {
+  topCenter: "left-1/2 top-0 -translate-x-1/2 -translate-y-1/2",
+  bottomCenter: "left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2",
+  bottomLeft: "left-3 bottom-0 translate-y-1/2",
+  bottomRight: "right-3 bottom-0 translate-y-1/2",
+  left: "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2",
+  right: "right-0 top-1/2 translate-x-1/2 -translate-y-1/2",
+};
+
+/**
+ * Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
+ * the heading; `supportingText` adds a second `utility-neutral-300` line (max
+ * 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
+ * rotated square). Positioning relative to a trigger is the caller's job.
+ */
+export function Tooltip({ text, children, supportingText, arrow = "none", className, ...rest }: TooltipProps) {
+  const hasSupporting = supportingText != null;
+  return (
+    <div
+      role="tooltip"
+      className={clsx(
+        "relative inline-flex flex-col rounded-md bg-bg-primary-solid shadow-lg",
+        hasSupporting ? "max-w-[320px] gap-xxs p-lg" : "px-lg py-md",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="text-xs font-semibold text-text-white">{text ?? children}</span>
+      {hasSupporting && (
+        <span className="max-w-[296px] text-xs font-medium text-utility-neutral-300">{supportingText}</span>
+      )}
+      {arrow !== "none" && (
+        <span className={clsx("absolute size-2 rotate-45 bg-bg-primary-solid", ARROW_POS[arrow])} aria-hidden />
+      )}
+    </div>
+  );
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from "./Tooltip";
+export type { TooltipProps, TooltipArrow } from "./Tooltip";

package/src/components/TrailingInputField/TrailingInputField.tsx

@@ -0,0 +1,62 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { FieldWrapper, type InputFieldSize } from "../InputField/inputFieldShared";
+
+export interface TrailingInputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Right add-on — a trailing button or dropdown. Covers the Trailing button /
+   * Trailing dropdown types.
+   */
+  suffix?: ReactNode;
+  size?: InputFieldSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  destructive?: boolean;
+}
+
+const pad: Record<InputFieldSize, string> = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md",
+};
+
+/** Input with a right add-on (trailing button or dropdown). */
+export function TrailingInputField({
+  suffix,
+  size = "md",
+  label,
+  hint,
+  required,
+  destructive,
+  className,
+  ...rest
+}: TrailingInputFieldProps) {
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={destructive} className={className}>
+      <div
+        className={clsx(
+          "flex w-full items-stretch overflow-hidden rounded-md border bg-bg-primary shadow-xs",
+          "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+          destructive
+            ? "border-border-error focus-within:ring-border-error"
+            : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand",
+        )}
+      >
+        <input
+          className={clsx(
+            "min-w-0 flex-1 bg-transparent text-text-primary outline-none placeholder:text-text-placeholder",
+            pad[size],
+          )}
+          {...rest}
+        />
+        {suffix ? (
+          <span className="flex shrink-0 items-center border-l border-border-primary">
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/TrailingInputField/index.ts

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

package/src/components/TreeView/TreeView.tsx

@@ -0,0 +1,86 @@
+import { useState, type ReactNode } from "react";
+import clsx from "clsx";
+import { TreeViewItem, type TreeViewItemSize } from "../TreeViewItem";
+
+export interface TreeNode {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  children?: TreeNode[];
+}
+
+export interface TreeViewProps {
+  data: TreeNode[];
+  size?: TreeViewItemSize;
+  /** Currently selected node id (controlled). */
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  /** Node ids expanded by default (uncontrolled expand state). */
+  defaultExpandedIds?: string[];
+  /** Show a checkbox on every row. */
+  checkboxes?: boolean;
+  /** Max nesting depth rendered — guards against runaway/cyclic data. */
+  maxDepth?: number;
+  className?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * Tree view composite — renders nested `TreeNode` data recursively as
+ * `TreeViewItem`s (which compose `TreeViewConnector` for indent guides). Expand
+ * state is internal (seeded by `defaultExpandedIds`); selection is controlled via
+ * `selectedId`/`onSelect`.
+ */
+export function TreeView({
+  data,
+  size = "sm",
+  selectedId,
+  onSelect,
+  defaultExpandedIds = [],
+  checkboxes = false,
+  maxDepth = 10,
+  className,
+  "aria-label": ariaLabel,
+}: TreeViewProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(new Set(defaultExpandedIds));
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  const renderNodes = (nodes: TreeNode[], level: number): ReactNode => {
+    if (level >= maxDepth) return null;
+    return nodes.map((node) => {
+      const hasChildren = !!node.children?.length;
+      const isOpen = expanded.has(node.id);
+      return (
+        <li key={node.id} role="treeitem" aria-expanded={hasChildren ? isOpen : undefined} aria-selected={node.id === selectedId}>
+          <TreeViewItem
+            size={size}
+            level={level}
+            icon={node.icon}
+            expandable={hasChildren}
+            open={isOpen}
+            selected={node.id === selectedId}
+            checkbox={checkboxes}
+            onToggle={() => toggle(node.id)}
+            onClick={() => onSelect?.(node.id)}
+          >
+            {node.label}
+          </TreeViewItem>
+          {hasChildren && isOpen && (
+            <ul role="group">{renderNodes(node.children!, level + 1)}</ul>
+          )}
+        </li>
+      );
+    });
+  };
+
+  return (
+    <ul role="tree" aria-label={ariaLabel} className={clsx("flex flex-col", className)}>
+      {renderNodes(data, 0)}
+    </ul>
+  );
+}

package/src/components/TreeView/index.ts

@@ -0,0 +1,2 @@
+export { TreeView } from "./TreeView";
+export type { TreeViewProps, TreeNode } from "./TreeView";

package/src/components/TreeViewConnector/TreeViewConnector.tsx

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type TreeViewConnectorType = "default" | "endConnector" | "none";
+export type TreeViewConnectorSize = "sm" | "md";
+
+export interface TreeViewConnectorProps extends HTMLAttributes<HTMLSpanElement> {
+  type?: TreeViewConnectorType;
+  size?: TreeViewConnectorSize;
+}
+
+/**
+ * Indent guide for `TreeViewItem`/`TreeView`. `default` = a full-height vertical
+ * line (a passing-through branch); `endConnector` = an L-shape (vertical down to
+ * centre, then a stub to the right) for the last child; `none` = empty spacer.
+ * Drawn with borders rather than the Figma image asset.
+ */
+export function TreeViewConnector({ type = "default", size = "sm", className, ...rest }: TreeViewConnectorProps) {
+  return (
+    <span
+      className={clsx("relative inline-block shrink-0", size === "md" ? "size-5" : "size-4", className)}
+      aria-hidden
+      {...rest}
+    >
+      {type === "default" && (
+        <span className="absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border-secondary" />
+      )}
+      {type === "endConnector" && (
+        <>
+          <span className="absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-border-secondary" />
+          <span className="absolute left-1/2 top-1/2 right-0 h-px bg-border-secondary" />
+        </>
+      )}
+    </span>
+  );
+}

package/src/components/TreeViewConnector/index.ts

@@ -0,0 +1,2 @@
+export { TreeViewConnector } from "./TreeViewConnector";
+export type { TreeViewConnectorProps, TreeViewConnectorType, TreeViewConnectorSize } from "./TreeViewConnector";