@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/Text/Text.js

@@ -0,0 +1,55 @@
+'use client';
+import Text_module_default from "./Text.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Text/Text.tsx
+var SIZE_CLASS = {
+	xs: Text_module_default.sizeXs,
+	sm: Text_module_default.sizeSm,
+	md: Text_module_default.sizeMd,
+	lg: Text_module_default.sizeLg,
+	xl: Text_module_default.sizeXl,
+	inherit: Text_module_default.sizeInherit
+};
+var TONE_CLASS = {
+	default: Text_module_default.toneDefault,
+	muted: Text_module_default.toneMuted,
+	subtle: Text_module_default.toneSubtle,
+	accent: Text_module_default.toneAccent,
+	danger: Text_module_default.toneDanger,
+	success: Text_module_default.toneSuccess,
+	warning: Text_module_default.toneWarning
+};
+var WEIGHT_CLASS = {
+	regular: Text_module_default.weightRegular,
+	medium: Text_module_default.weightMedium,
+	semibold: Text_module_default.weightSemibold,
+	bold: Text_module_default.weightBold
+};
+var ALIGN_CLASS = {
+	left: Text_module_default.alignLeft,
+	center: Text_module_default.alignCenter,
+	right: Text_module_default.alignRight
+};
+/**
+* Body / inline text primitive for all non-heading text (`p`, `span`, `div` or `label`).
+* @see docs/components/Text.md
+*/
+var Text = forwardRef(function Text({ as = "p", size = "md", tone = "default", weight = "regular", align = "left", truncate = false, lineClamp, className, style, children, ...rest }, ref) {
+	const Component = as;
+	const useLineClamp = typeof lineClamp === "number" && lineClamp > 0;
+	const useTruncate = !useLineClamp && truncate;
+	const mergedStyle = useLineClamp ? {
+		...style,
+		WebkitLineClamp: lineClamp
+	} : style;
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: clsx(Text_module_default.text, SIZE_CLASS[size], TONE_CLASS[tone], WEIGHT_CLASS[weight], ALIGN_CLASS[align], useTruncate && Text_module_default.truncate, useLineClamp && Text_module_default.lineClamp, className),
+		style: mergedStyle,
+		...rest,
+		children
+	});
+});
+export { Text };

package/dist/components/Text/Text.module.js

@@ -0,0 +1,51 @@
+import "./Text.css";
+// src/components/Text/Text.module.scss
+var text = "Text__text__byLxe";
+var sizeXs = "Text__sizeXs__FBRmw";
+var sizeSm = "Text__sizeSm__CgdUo";
+var sizeMd = "Text__sizeMd__LxWdT";
+var sizeLg = "Text__sizeLg__g_Bt9";
+var sizeXl = "Text__sizeXl__F2AEd";
+var sizeInherit = "Text__sizeInherit__QtpnM";
+var weightRegular = "Text__weightRegular__vqUU8";
+var weightMedium = "Text__weightMedium__-xD01";
+var weightSemibold = "Text__weightSemibold__2E5g0";
+var weightBold = "Text__weightBold__wxUEi";
+var toneDefault = "Text__toneDefault__wahop";
+var toneMuted = "Text__toneMuted__Om6Qa";
+var toneSubtle = "Text__toneSubtle__kmwFi";
+var toneAccent = "Text__toneAccent__MhCvt";
+var toneDanger = "Text__toneDanger___Z5Uc";
+var toneSuccess = "Text__toneSuccess__hgcOm";
+var toneWarning = "Text__toneWarning___Qj9v";
+var alignLeft = "Text__alignLeft__RyNbJ";
+var alignCenter = "Text__alignCenter__hKaav";
+var alignRight = "Text__alignRight__Cx6EZ";
+var truncate = "Text__truncate__6zaIl";
+var lineClamp = "Text__lineClamp__C384V";
+var Text_module_default = {
+	text,
+	sizeXs,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	sizeXl,
+	sizeInherit,
+	weightRegular,
+	weightMedium,
+	weightSemibold,
+	weightBold,
+	toneDefault,
+	toneMuted,
+	toneSubtle,
+	toneAccent,
+	toneDanger,
+	toneSuccess,
+	toneWarning,
+	alignLeft,
+	alignCenter,
+	alignRight,
+	truncate,
+	lineClamp
+};
+export { alignCenter, alignLeft, alignRight, Text_module_default as default, lineClamp, sizeInherit, sizeLg, sizeMd, sizeSm, sizeXl, sizeXs, text, toneAccent, toneDanger, toneDefault, toneMuted, toneSubtle, toneSuccess, toneWarning, truncate, weightBold, weightMedium, weightRegular, weightSemibold };

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text.js';
+export type { TextProps, TextAs, TextSize, TextTone, TextWeight, TextAlign } from './Text.js';

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,107 @@
+:root {
+  --textarea-bg: var(--color-bg);
+  --textarea-fg: var(--color-fg);
+  --textarea-border-color: var(--color-border-strong);
+  --textarea-radius: var(--radius-md);
+  --textarea-line-height: var(--line-height-normal);
+  --textarea-placeholder-fg: var(--color-fg-subtle);
+  --textarea-border-color-focus: var(--color-accent);
+  --textarea-ring-focus: var(--ring-accent);
+  --textarea-bg-disabled: var(--color-bg-subtle);
+  --textarea-border-color-disabled: var(--color-border);
+  --textarea-fg-disabled: var(--color-fg-subtle);
+  --textarea-bg-read-only: var(--color-bg-subtle);
+  --textarea-border-color-invalid: var(--color-danger);
+  --textarea-ring-invalid: var(--ring-danger);
+  --textarea-padding-y-sm: var(--space-1);
+  --textarea-padding-y-md: var(--space-2);
+  --textarea-padding-y-lg: var(--space-2);
+  --textarea-padding-x-sm: var(--space-2);
+  --textarea-padding-x-md: var(--space-3);
+  --textarea-padding-x-lg: var(--space-3);
+  --textarea-font-size-sm: var(--font-size-sm);
+  --textarea-font-size-md: var(--font-size-md);
+  --textarea-font-size-lg: var(--font-size-lg);
+  --textarea-counter-margin-top: var(--space-1);
+  --textarea-counter-font-size: var(--font-size-sm);
+  --textarea-counter-fg: var(--color-fg-muted);
+}
+
+.Textarea__wrapper__zl2Ts {
+  width: 100%;
+  display: block;
+}
+
+.Textarea__textarea__8_KuM {
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--textarea-border-color);
+  border-radius: var(--textarea-radius);
+  background: var(--textarea-bg);
+  color: var(--textarea-fg);
+  font-family: inherit;
+  line-height: var(--textarea-line-height);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.Textarea__textarea__8_KuM::placeholder {
+  color: var(--textarea-placeholder-fg);
+}
+.Textarea__textarea__8_KuM:focus-visible {
+  border-color: var(--textarea-border-color-focus);
+  outline: var(--ring-width) solid var(--textarea-ring-focus);
+  outline-offset: var(--ring-offset);
+}
+.Textarea__textarea__8_KuM:disabled {
+  background: var(--textarea-bg-disabled);
+  border-color: var(--textarea-border-color-disabled);
+  color: var(--textarea-fg-disabled);
+  cursor: not-allowed;
+}
+.Textarea__textarea__8_KuM[readonly] {
+  background: var(--textarea-bg-read-only);
+}
+
+.Textarea__sizeSm__uvDfZ {
+  padding: var(--textarea-padding-y-sm) var(--textarea-padding-x-sm);
+  font-size: var(--textarea-font-size-sm);
+}
+
+.Textarea__sizeMd__IBCeC {
+  padding: var(--textarea-padding-y-md) var(--textarea-padding-x-md);
+  font-size: var(--textarea-font-size-md);
+}
+
+.Textarea__sizeLg__VrtnT {
+  padding: var(--textarea-padding-y-lg) var(--textarea-padding-x-lg);
+  font-size: var(--textarea-font-size-lg);
+}
+
+.Textarea__resizeNone__u2SSO {
+  resize: none;
+}
+
+.Textarea__resizeVertical__LWCxc {
+  resize: vertical;
+}
+
+.Textarea__resizeBoth__UcmA2 {
+  resize: both;
+}
+
+.Textarea__invalid__z_j47 {
+  border-color: var(--textarea-border-color-invalid);
+}
+.Textarea__invalid__z_j47:focus-visible {
+  border-color: var(--textarea-border-color-invalid);
+  outline: var(--ring-width) solid var(--textarea-ring-invalid);
+  outline-offset: var(--ring-offset);
+}
+
+.Textarea__counter__o9BAD {
+  display: block;
+  text-align: right;
+  margin-top: var(--textarea-counter-margin-top);
+  font-size: var(--textarea-counter-font-size);
+  color: var(--textarea-counter-fg);
+  line-height: 1;
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,81 @@
+import { type TextareaHTMLAttributes } from 'react';
+/**
+ * Field typography + padding scale. Pairs with Input's `size`.
+ *
+ * Unlike Input, size does NOT affect the textarea's height — height is
+ * driven by `minRows` (and capped by `maxRows` if auto-grow is on).
+ */
+export type TextareaSize = 'sm' | 'md' | 'lg';
+/** User-drag resize handle direction. Maps to CSS `resize`. */
+export type TextareaResize = 'none' | 'vertical' | 'both';
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows'> {
+    /**
+     * Toggles the error visual (red border + danger focus ring) and sets
+     * `aria-invalid="true"`. Pair with a visible error message and an
+     * `aria-describedby` pointer at the message id.
+     */
+    invalid?: boolean;
+    /**
+     * Visual size. Defaults to `'md'`. Affects typography + padding only, not
+     * height — that comes from `minRows`.
+     * - `'sm'` — tighter padding + `--font-size-sm`. Used in dense forms.
+     * - `'md'` — default padding + `--font-size-md`. Most form contexts.
+     * - `'lg'` — same padding as md but `--font-size-lg`. Hero / focus textareas.
+     *
+     * Note: this collapses the native HTML `<textarea size>` attribute. Use
+     * `style={{ width }}` or a parent container for explicit width.
+     */
+    size?: TextareaSize;
+    /**
+     * Block browser autofill AND password managers from offering to fill
+     * this textarea. Same heuristic as Input — see Input's JSDoc for the
+     * full set of opt-out attributes applied.
+     *
+     * Smart default: when omitted, block iff `autoComplete` is also omitted
+     * (or `'off'`). Explicit autocomplete hints opt back IN to autofill.
+     * Pass `true` to force-block, `false` to force-allow.
+     */
+    disableAutofill?: boolean;
+    /**
+     * Minimum visible rows. The textarea never renders shorter than this,
+     * regardless of content. Default: `3`. Also seeds the native `rows`
+     * attribute for SSR / no-JS rendering.
+     */
+    minRows?: number;
+    /**
+     * Maximum visible rows. Beyond this, content scrolls inside the field
+     * instead of expanding further. Only meaningful when `autoGrow` is true.
+     * Default: `undefined` (unbounded growth).
+     */
+    maxRows?: number;
+    /**
+     * When true, height adapts to content between `minRows` and `maxRows`.
+     * Default: `true`. When false, height locks at `minRows` and a scrollbar
+     * appears past it.
+     */
+    autoGrow?: boolean;
+    /**
+     * User-drag resize handle direction. Default: `'vertical'`.
+     *
+     * **Forced to `'none'`** when `autoGrow` is `true` — user-drag fights
+     * the auto-grow measurement and produces erratic behavior. To enable
+     * a resize handle, opt out of auto-grow with `autoGrow={false}`.
+     */
+    resize?: TextareaResize;
+    /**
+     * Show the character counter (`${value.length}` or
+     * `${value.length} / ${maxLength}` when both are set).
+     *
+     * Default: `true` when `maxLength` is set, `false` otherwise.
+     *
+     * The counter renders as a `<span aria-live="polite" aria-atomic="true">`
+     * inside the wrapper, below the textarea. It updates on every input —
+     * works for both controlled and uncontrolled textareas.
+     */
+    showCount?: boolean;
+}
+/**
+ * Multi-line text input with auto-grow, resize direction and an optional character counter.
+ * @see docs/components/Textarea.md
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,95 @@
+'use client';
+import Textarea_module_default from "./Textarea.module.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Textarea/Textarea.tsx
+var AUTOFILL_DISABLED_PROPS = {
+	autoComplete: "off",
+	"data-1p-ignore": "",
+	"data-lpignore": "true",
+	"data-form-type": "other"
+};
+var SIZE_CLASS = {
+	sm: Textarea_module_default.sizeSm,
+	md: Textarea_module_default.sizeMd,
+	lg: Textarea_module_default.sizeLg
+};
+var RESIZE_CLASS = {
+	none: Textarea_module_default.resizeNone,
+	vertical: Textarea_module_default.resizeVertical,
+	both: Textarea_module_default.resizeBoth
+};
+/**
+* Multi-line text input with auto-grow, resize direction and an optional character counter.
+* @see docs/components/Textarea.md
+*/
+var Textarea = forwardRef(function Textarea({ invalid, size = "md", disableAutofill, minRows = 3, maxRows, autoGrow = true, resize = "vertical", showCount, className, value, defaultValue, onChange, maxLength, ...props }, ref) {
+	const textareaRef = useRef(null);
+	const setRefs = useCallback((node) => {
+		textareaRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const [internalValue, setInternalValue] = useState(() => {
+		if (defaultValue == null) return "";
+		return String(defaultValue);
+	});
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? String(value) : internalValue;
+	const handleChange = (e) => {
+		if (!isControlled) setInternalValue(e.target.value);
+		onChange?.(e);
+	};
+	useLayoutEffect(() => {
+		const el = textareaRef.current;
+		if (!el) return;
+		if (!autoGrow) {
+			el.style.height = "";
+			el.style.overflowY = "";
+			return;
+		}
+		el.style.height = "auto";
+		const computed = window.getComputedStyle(el);
+		const lineHeight = parseFloat(computed.lineHeight) || 0;
+		const paddingY = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.paddingBottom) || 0);
+		const borderY = (parseFloat(computed.borderTopWidth) || 0) + (parseFloat(computed.borderBottomWidth) || 0);
+		const minHeight = lineHeight * minRows + paddingY + borderY;
+		const maxHeight = maxRows !== void 0 ? lineHeight * maxRows + paddingY + borderY : Infinity;
+		const desired = el.scrollHeight + borderY;
+		const target = Math.min(Math.max(desired, minHeight), maxHeight);
+		el.style.height = `${target}px`;
+		el.style.overflowY = desired > maxHeight ? "auto" : "hidden";
+	}, [
+		currentValue,
+		autoGrow,
+		minRows,
+		maxRows,
+		size
+	]);
+	const hasAutocompleteHint = typeof props.autoComplete === "string" && props.autoComplete !== "off";
+	const blockAutofill = disableAutofill ?? !hasAutocompleteHint;
+	const effectiveResize = autoGrow ? "none" : resize;
+	const shouldShowCount = showCount ?? maxLength !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: Textarea_module_default.wrapper,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: setRefs,
+			rows: minRows,
+			"aria-invalid": invalid || void 0,
+			...blockAutofill ? AUTOFILL_DISABLED_PROPS : {},
+			value,
+			defaultValue,
+			maxLength,
+			...props,
+			onChange: handleChange,
+			className: clsx(Textarea_module_default.textarea, SIZE_CLASS[size], RESIZE_CLASS[effectiveResize], invalid && Textarea_module_default.invalid, className)
+		}), shouldShowCount && /* @__PURE__ */ jsxs("span", {
+			className: Textarea_module_default.counter,
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: [currentValue.length, maxLength !== void 0 && ` / ${maxLength}`]
+		})]
+	});
+});
+export { Textarea };

package/dist/components/Textarea/Textarea.module.js

@@ -0,0 +1,25 @@
+import "./Textarea.css";
+// src/components/Textarea/Textarea.module.scss
+var wrapper = "Textarea__wrapper__zl2Ts";
+var textarea = "Textarea__textarea__8_KuM";
+var sizeSm = "Textarea__sizeSm__uvDfZ";
+var sizeMd = "Textarea__sizeMd__IBCeC";
+var sizeLg = "Textarea__sizeLg__VrtnT";
+var resizeNone = "Textarea__resizeNone__u2SSO";
+var resizeVertical = "Textarea__resizeVertical__LWCxc";
+var resizeBoth = "Textarea__resizeBoth__UcmA2";
+var invalid = "Textarea__invalid__z_j47";
+var counter = "Textarea__counter__o9BAD";
+var Textarea_module_default = {
+	wrapper,
+	textarea,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	resizeNone,
+	resizeVertical,
+	resizeBoth,
+	invalid,
+	counter
+};
+export { counter, Textarea_module_default as default, invalid, resizeBoth, resizeNone, resizeVertical, sizeLg, sizeMd, sizeSm, textarea, wrapper };

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea.js';
+export type { TextareaProps, TextareaSize, TextareaResize } from './Textarea.js';

package/dist/components/Thread/Thread.css

@@ -0,0 +1,124 @@
+:root {
+  --thread-node-size: var(--size-sm);
+  --thread-content-gap: var(
+    --space-2
+  );
+  --thread-row-gap: var(--space-4);
+  --thread-rail-width: var(--border-width);
+  --thread-rail-color: var(--color-border);
+  --thread-node-gap: 1px;
+  --thread-header-line-height: calc(var(--font-size-sm) * var(--line-height-normal));
+  --thread-node-center: calc(var(--thread-header-line-height) / 2);
+  --thread-nodebox-height: var(--thread-header-line-height);
+  --thread-node-size-compact: var(--size-sm);
+  --thread-content-gap-compact: var(--space-1);
+  --thread-row-gap-compact: var(--space-2);
+}
+
+.Thread__root__3_hq6 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--thread-row-gap);
+}
+
+.Thread__item__px51f {
+  display: grid;
+  grid-template-columns: var(--thread-node-size) 1fr;
+  column-gap: var(--thread-content-gap);
+  row-gap: var(--thread-row-gap);
+}
+
+.Thread__nodeBox__yDsW_ {
+  height: var(--thread-nodebox-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Thread__alignTop__FI4-K {
+  --thread-node-center: calc(var(--thread-node-size) / 2);
+  --thread-nodebox-height: var(--thread-node-size);
+}
+
+.Thread__content__HR6Y5 {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--thread-row-gap);
+}
+
+.Thread__body__RqaJw {
+  position: relative;
+  min-width: 0;
+}
+
+.Thread__rail__CYK-Z {
+  position: absolute;
+  inset-inline-start: calc(-1 * (var(--thread-node-size) / 2 + var(--thread-content-gap)));
+  transform: translateX(-50%);
+  inset-block-start: calc(var(--thread-node-center) + var(--thread-node-size) / 2 + var(--thread-node-gap));
+  inset-block-end: calc(-1 * var(--thread-row-gap));
+  width: var(--thread-rail-width);
+  background: var(--thread-rail-color);
+}
+
+.Thread__replies__apKFP {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--thread-row-gap);
+}
+
+.Thread__replies__apKFP > .Thread__item__px51f {
+  position: relative;
+}
+
+.Thread__replies__apKFP > .Thread__item__px51f::before {
+  content: "";
+  position: absolute;
+  inset-block-start: var(--thread-node-center);
+  inset-inline-start: calc(-1 * (var(--thread-node-size) / 2 + var(--thread-content-gap)));
+  width: calc(var(--thread-node-size) / 2 + var(--thread-content-gap) - var(--thread-node-gap));
+  height: var(--thread-rail-width);
+  background: var(--thread-rail-color);
+  transform: translateY(-50%);
+}
+
+.Thread__replies__apKFP > .Thread__item__px51f::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc(-1 * var(--thread-row-gap));
+  inset-inline-start: calc(-1 * (var(--thread-node-size) / 2 + var(--thread-content-gap)));
+  transform: translateX(-50%);
+  width: var(--thread-rail-width);
+  background: var(--thread-rail-color);
+}
+
+.Thread__replies__apKFP > .Thread__item__px51f:not(:last-child)::after {
+  inset-block-end: 0;
+}
+
+.Thread__replies__apKFP > .Thread__item__px51f:last-child::after {
+  height: calc(var(--thread-row-gap) + var(--thread-node-center));
+}
+
+.Thread__repliesFlat__RY8TA {
+  grid-column: 1/-1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--thread-row-gap);
+}
+
+.Thread__compact__XI3C2 {
+  --thread-node-size: var(--thread-node-size-compact);
+  --thread-content-gap: var(--thread-content-gap-compact);
+  --thread-row-gap: var(--thread-row-gap-compact);
+}

package/dist/components/Thread/Thread.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Where the leading `node` sits relative to the comment body. See `ThreadProps#nodeAlign`. */
+export type ThreadNodeAlign = 'header' | 'top';
+export interface ThreadProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Max visual nesting depth before replies render flat (no further indent). Once the
+     * cap is reached, deeper replies keep the same indent level so the thread stops
+     * marching right. Default `4`.
+     */
+    maxDepth?: number;
+    /**
+     * Tighter gaps for dense surfaces (sidebars, panels). The remapped tokens cascade to
+     * every nested item via CSS custom properties. Default `false`.
+     */
+    compact?: boolean;
+    /**
+     * Where the leading `node` sits relative to the comment body.
+     * - `header` (default) — vertically centered on the **first body line** (the author /
+     *   timestamp header), Jira/GitHub style, so a node taller than one line (e.g. a 24px
+     *   `<Avatar>`) reads as centered against the name rather than top-aligned. Assumes the
+     *   header line-box matches `--thread-header-line-height` (defaults to `<Text size="sm">`);
+     *   override that token if your header line differs. Remove any old header
+     *   `lineHeight` override (e.g. `var(--size-sm)`) — it now double-compensates.
+     * - `top` — top-aligned with the body (the node's top meets the body's top). Use when the
+     *   node is about one line tall, or when you deliberately want top alignment.
+     */
+    nodeAlign?: ThreadNodeAlign;
+    /** The `<Thread.Item>`s. */
+    children: ReactNode;
+}
+export interface ThreadItemProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * The leading marker the rail connects to — an `<Avatar>`, icon, or `<Dot>`. Centered
+     * in its node box so the rail/elbow connectors meet it cleanly regardless of node
+     * content; by default the box centers on the first body line so a taller node aligns to
+     * the header (see `Thread`'s `nodeAlign`). It's a slot: there is no built-in avatar.
+     * Size the node to `--thread-node-size` (default `sm` / 24px) — e.g. `<Avatar size="sm">`;
+     * for a larger node, override `--thread-node-size` to match.
+     */
+    node: ReactNode;
+    /**
+     * The comment body/actions, plus optional nested `<Thread.Item>` replies. Plain children
+     * render as the comment body; any direct `<Thread.Item>` child renders as a reply under
+     * the rail.
+     */
+    children: ReactNode;
+}
+export declare const Thread: import("react").ForwardRefExoticComponent<ThreadProps & import("react").RefAttributes<HTMLUListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<ThreadItemProps & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/components/Thread/Thread.js

@@ -0,0 +1,90 @@
+'use client';
+import Thread_module_default from "./Thread.module.js";
+import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/Thread/Thread.tsx
+var DEFAULT_MAX_DEPTH = 4;
+var ThreadContext = createContext(null);
+/**
+* Reads the surrounding thread depth/cap. Falls back to a depth-0 default so a
+* `<Thread.Item>` can render standalone (e.g. in a test) without a provider.
+*/
+var useThread = () => useContext(ThreadContext) ?? {
+	depth: 0,
+	maxDepth: DEFAULT_MAX_DEPTH
+};
+var ThreadItem = forwardRef(function ThreadItemImpl({ node, className, children, ...rest }, ref) {
+	const { depth, maxDepth } = useThread();
+	const replies = [];
+	const body = [];
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type === ThreadItem) replies.push(child);
+		else body.push(child);
+	});
+	const hasReplies = replies.length > 0;
+	const indented = depth < maxDepth;
+	return /* @__PURE__ */ jsxs("li", {
+		className: clsx(Thread_module_default.item, className),
+		...rest,
+		ref,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Thread_module_default.nodeBox,
+			children: node
+		}), hasReplies && indented ? /* @__PURE__ */ jsxs("div", {
+			className: Thread_module_default.content,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: Thread_module_default.body,
+				children: [body, /* @__PURE__ */ jsx("div", {
+					className: Thread_module_default.rail,
+					"aria-hidden": "true"
+				})]
+			}), /* @__PURE__ */ jsx(ThreadContext.Provider, {
+				value: {
+					depth: depth + 1,
+					maxDepth
+				},
+				children: /* @__PURE__ */ jsx("ul", {
+					className: Thread_module_default.replies,
+					children: replies
+				})
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			className: Thread_module_default.content,
+			children: /* @__PURE__ */ jsx("div", {
+				className: Thread_module_default.body,
+				children: body
+			})
+		}), hasReplies && /* @__PURE__ */ jsx(ThreadContext.Provider, {
+			value: {
+				depth,
+				maxDepth
+			},
+			children: /* @__PURE__ */ jsx("ul", {
+				className: Thread_module_default.repliesFlat,
+				children: replies
+			})
+		})] })]
+	});
+});
+ThreadItem.displayName = "Thread.Item";
+/**
+* Nested-reply threading primitive: a left rail per nesting level connecting a parent comment to its replies.
+* @see docs/components/Thread.md
+*/
+var ThreadRoot = forwardRef(function Thread({ maxDepth = DEFAULT_MAX_DEPTH, compact = false, nodeAlign = "header", className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: clsx(Thread_module_default.root, compact && Thread_module_default.compact, nodeAlign === "top" && Thread_module_default.alignTop, className),
+		...rest,
+		children: /* @__PURE__ */ jsx(ThreadContext.Provider, {
+			value: {
+				depth: 0,
+				maxDepth
+			},
+			children
+		})
+	});
+});
+var Thread = Object.assign(ThreadRoot, { Item: ThreadItem });
+export { Thread };