@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Input/Input.css

@@ -0,0 +1,120 @@
+:root {
+  --input-bg: var(--color-bg);
+  --input-fg: var(--color-fg);
+  --input-border-color: var(--color-border-strong);
+  --input-radius: var(--radius-md);
+  --input-line-height: var(--line-height-normal);
+  --input-placeholder-fg: var(--color-fg-subtle);
+  --input-border-color-focus: var(--color-accent);
+  --input-ring-focus: var(--ring-accent);
+  --input-bg-disabled: var(--color-bg-subtle);
+  --input-border-color-disabled: var(--color-border);
+  --input-fg-disabled: var(--color-fg-subtle);
+  --input-border-color-invalid: var(--color-danger);
+  --input-ring-invalid: var(--ring-danger);
+  --input-height-sm: var(--size-sm);
+  --input-height-md: var(--size-md);
+  --input-height-lg: var(--size-lg);
+  --input-padding-x-sm: var(--space-2);
+  --input-padding-x-md: var(--space-3);
+  --input-padding-x-lg: var(--space-3);
+  --input-font-size-sm: var(--font-size-sm);
+  --input-font-size-md: var(--font-size-md);
+  --input-font-size-lg: var(--font-size-lg);
+  --input-suggestions-bg: var(--color-bg);
+  --input-suggestions-border-color: var(--color-border);
+  --input-suggestions-radius: var(--radius-md);
+  --input-suggestions-shadow: var(--shadow-md);
+  --input-suggestions-padding: var(--space-1);
+  --input-suggestions-max-height: 320px;
+  --input-suggestion-padding-y: var(--space-2);
+  --input-suggestion-padding-x: var(--space-3);
+  --input-suggestion-font-size: var(--font-size-md);
+  --input-suggestion-fg: var(--color-fg);
+  --input-suggestion-radius: var(--radius-sm);
+  --input-suggestion-bg-active: var(--color-bg-muted);
+}
+
+.Input__input__1SmQf {
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--input-border-color);
+  border-radius: var(--input-radius);
+  background: var(--input-bg);
+  color: var(--input-fg);
+  font-family: inherit;
+  line-height: var(--input-line-height);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.Input__input__1SmQf::placeholder {
+  color: var(--input-placeholder-fg);
+}
+.Input__input__1SmQf:focus-visible {
+  border-color: var(--input-border-color-focus);
+  outline: var(--ring-width) solid var(--input-ring-focus);
+  outline-offset: var(--ring-offset);
+}
+.Input__input__1SmQf:disabled {
+  background: var(--input-bg-disabled);
+  border-color: var(--input-border-color-disabled);
+  color: var(--input-fg-disabled);
+  cursor: not-allowed;
+}
+
+.Input__size-sm__5zDat {
+  height: var(--input-height-sm);
+  padding: 0 var(--input-padding-x-sm);
+  font-size: var(--input-font-size-sm);
+}
+
+.Input__size-md__T-PXD {
+  height: var(--input-height-md);
+  padding: 0 var(--input-padding-x-md);
+  font-size: var(--input-font-size-md);
+}
+
+.Input__size-lg__xNVvs {
+  height: var(--input-height-lg);
+  padding: 0 var(--input-padding-x-lg);
+  font-size: var(--input-font-size-lg);
+}
+
+.Input__invalid__9MviM {
+  border-color: var(--input-border-color-invalid);
+}
+.Input__invalid__9MviM:focus-visible {
+  border-color: var(--input-border-color-invalid);
+  outline: var(--ring-width) solid var(--input-ring-invalid);
+  outline-offset: var(--ring-offset);
+}
+
+.Input__suggestions__sHoKH {
+  z-index: var(--z-popover);
+  box-sizing: border-box;
+  max-height: min(var(--input-suggestions-max-height), var(--input-suggestions-available-height, 100vh));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--input-suggestions-padding);
+  list-style: none;
+  background: var(--input-suggestions-bg);
+  border: var(--border-width) solid var(--input-suggestions-border-color);
+  border-radius: var(--input-suggestions-radius);
+  box-shadow: var(--input-suggestions-shadow);
+}
+
+.Input__suggestions__sHoKH[data-in-overlay] {
+  z-index: var(--z-overlay-floating);
+}
+
+.Input__suggestion__SOuFI {
+  padding: var(--input-suggestion-padding-y) var(--input-suggestion-padding-x);
+  font-size: var(--input-suggestion-font-size);
+  color: var(--input-suggestion-fg);
+  cursor: pointer;
+  border-radius: var(--input-suggestion-radius);
+  overflow-wrap: anywhere;
+}
+
+.Input__suggestionActive__zpXJT {
+  background: var(--input-suggestion-bg-active);
+}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,59 @@
+import { type InputHTMLAttributes } from 'react';
+/**
+ * Field height + type scale. Pairs with `<Button>` and `<Select>` sizes.
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Toggles the error visual (red border + focus ring) and sets `aria-invalid="true"`.
+     * Pair with a visible error message and `aria-describedby` pointing at the message id.
+     */
+    invalid?: boolean;
+    /**
+     * Visual size. Defaults to `'md'`.
+     * - `'sm'` — 24px tall; toolbars, secondary forms.
+     * - `'md'` — 32px tall (default); most form contexts.
+     * - `'lg'` — 40px tall; hero search, mobile-friendly forms.
+     *
+     * Same scale as `<Select>`; fields have no `xs` (unlike `<Button>`).
+     *
+     * Note: this shadows the native HTML `<input size>` attribute (visible
+     * character count). If you need that legacy attribute, set width via
+     * `style` or a parent container.
+     */
+    size?: InputSize;
+    /**
+     * Block browser autofill AND password managers from offering to fill
+     * this input. Applies the standard set of opt-out hints:
+     * - `autoComplete="off"`
+     * - `data-1p-ignore` (1Password)
+     * - `data-lpignore="true"` (LastPass)
+     * - `data-form-type="other"` (generic "not a login field")
+     *
+     * **Smart default**: when omitted, the input blocks autofill iff `autoComplete`
+     * is also omitted (or `'off'`). Explicit autocomplete hints
+     * (`autoComplete="email"`, `"current-password"`, `"username"`, etc.) opt back
+     * IN to autofill — the assumption is that a consumer specifying autoComplete
+     * actually wants password-manager interaction. Pass `disableAutofill={true}`
+     * to force-block even with an autocomplete hint, or `false` to force-allow
+     * (except while `suggestions` is active, which always blocks).
+     */
+    disableAutofill?: boolean;
+    /**
+     * Values to suggest while the value stays free text (e.g. the user's other
+     * workspace slugs). Makes the input an ARIA combobox with a suggestion list:
+     * it opens on focus, click or ↓ showing every suggestion, then filters by
+     * case-insensitive substring once the user types. ↑/↓ + Enter or a click
+     * fills the value and fires `onChange` exactly as typing would. Ignored when
+     * empty or `readOnly`. Browser autofill is forced off while active (even with
+     * an `autoComplete` hint) so its dropdown can't stack on this one. Default:
+     * none (a plain textbox). For a fixed set of allowed values use `<Select>`
+     * instead.
+     */
+    suggestions?: readonly string[];
+}
+/**
+ * Single-line text input that forwards all native `<input>` attributes.
+ * @see docs/components/Input.md
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,34 @@
+'use client';
+import { mergeRefs } from "../_internal/refs.js";
+import { useSuggestions } from "./Suggestions.js";
+import Input_module_default from "./Input.module.js";
+import { forwardRef, useMemo } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/Input/Input.tsx
+var AUTOFILL_DISABLED_PROPS = {
+	autoComplete: "off",
+	"data-1p-ignore": "",
+	"data-lpignore": "true",
+	"data-form-type": "other"
+};
+/**
+* Single-line text input that forwards all native `<input>` attributes.
+* @see docs/components/Input.md
+*/
+var Input = forwardRef(function Input({ invalid, size = "md", disableAutofill, suggestions, className, ...props }, ref) {
+	const combobox = useSuggestions(suggestions, props.readOnly, props);
+	const mergedRef = useMemo(() => mergeRefs(ref, combobox.inputRef), [ref, combobox.inputRef]);
+	const hasAutocompleteHint = typeof props.autoComplete === "string" && props.autoComplete !== "off";
+	const blockAutofill = disableAutofill ?? !hasAutocompleteHint;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+		ref: combobox.enabled ? mergedRef : ref,
+		"aria-invalid": invalid || void 0,
+		...blockAutofill ? AUTOFILL_DISABLED_PROPS : {},
+		...props,
+		...combobox.enabled ? AUTOFILL_DISABLED_PROPS : {},
+		...combobox.inputProps,
+		className: clsx(Input_module_default.input, Input_module_default[`size-${size}`], invalid && Input_module_default.invalid, className)
+	}), combobox.popup] });
+});
+export { Input };

package/dist/components/Input/Input.module.js

@@ -0,0 +1,18 @@
+import "./Input.css";
+// src/components/Input/Input.module.scss
+var input = "Input__input__1SmQf";
+var invalid = "Input__invalid__9MviM";
+var suggestions = "Input__suggestions__sHoKH";
+var suggestion = "Input__suggestion__SOuFI";
+var suggestionActive = "Input__suggestionActive__zpXJT";
+var Input_module_default = {
+	input,
+	"size-sm": "Input__size-sm__5zDat",
+	"size-md": "Input__size-md__T-PXD",
+	"size-lg": "Input__size-lg__xNVvs",
+	invalid,
+	suggestions,
+	suggestion,
+	suggestionActive
+};
+export { Input_module_default as default, input, invalid, suggestion, suggestionActive, suggestions };

package/dist/components/Input/Suggestions.d.ts

@@ -0,0 +1,17 @@
+import { type InputHTMLAttributes, type ReactNode, type RefObject } from 'react';
+type Handlers = Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onClick' | 'onChange' | 'onKeyDown' | 'onBlur'>;
+/**
+ * Internal: `<Input suggestions>` — an ARIA 1.2 list-autocomplete combobox.
+ * Returns props to spread on the `<input>` (consumer handlers chained first),
+ * a ref the input must carry while `enabled`, and the portalled listbox. With
+ * no suggestions it returns nothing and the input stays a plain textbox. The
+ * popup machinery (Floating UI, overlay stack) lives in `<SuggestionsPopup>`,
+ * mounted only while the list is shown, so a closed or plain Input renders once.
+ */
+export declare function useSuggestions(suggestions: readonly string[] | undefined, readOnly: boolean | undefined, handlers: Handlers): {
+    enabled: boolean;
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    popup: ReactNode;
+};
+export {};

package/dist/components/Input/Suggestions.js

@@ -0,0 +1,180 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { chain } from "../_internal/refs.js";
+import { overlayStack, useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { useInOverlay } from "../_internal/overlay/useInOverlay.js";
+import Input_module_default from "./Input.module.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { autoUpdate, flip, offset, size, useFloating } from "@floating-ui/react-dom";
+// src/components/Input/Suggestions.tsx
+/**
+* Write a value the way typing does: the native setter bypasses React's value
+* tracker, and the bubbling `input` event fires the consumer's `onChange` in
+* both controlled and uncontrolled use.
+*/
+function setNativeValue(input, value) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+* Internal: `<Input suggestions>` — an ARIA 1.2 list-autocomplete combobox.
+* Returns props to spread on the `<input>` (consumer handlers chained first),
+* a ref the input must carry while `enabled`, and the portalled listbox. With
+* no suggestions it returns nothing and the input stays a plain textbox. The
+* popup machinery (Floating UI, overlay stack) lives in `<SuggestionsPopup>`,
+* mounted only while the list is shown, so a closed or plain Input renders once.
+*/
+function useSuggestions(suggestions, readOnly, handlers) {
+	const listboxId = useId();
+	const inputRef = useRef(null);
+	const floatingIdRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState(null);
+	const [active, setActive] = useState(-1);
+	const enabled = !!suggestions?.length && !readOnly;
+	const all = enabled ? [...new Set(suggestions)] : [];
+	const listKey = JSON.stringify(all);
+	const [seenKey, setSeenKey] = useState(listKey);
+	if (seenKey !== listKey) {
+		setSeenKey(listKey);
+		setActive(-1);
+	}
+	if (!enabled) return {
+		enabled,
+		inputProps: {},
+		inputRef,
+		popup: null
+	};
+	const needle = query?.toLowerCase();
+	const visible = needle == null ? all : all.filter((s) => s.toLowerCase().includes(needle));
+	const shown = open && visible.length > 0;
+	const activeIdx = active < visible.length ? active : -1;
+	const optionId = (i) => `${listboxId}-${i}`;
+	const openAll = () => {
+		setOpen(true);
+		setQuery(null);
+		setActive(-1);
+	};
+	const close = () => {
+		setOpen(false);
+		setActive(-1);
+	};
+	const choose = (value) => {
+		if (value === void 0) return;
+		if (inputRef.current) setNativeValue(inputRef.current, value);
+		close();
+	};
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented || e.nativeEvent.isComposing) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			const delta = e.key === "ArrowDown" ? 1 : -1;
+			const n = shown ? visible.length : all.length;
+			const from = shown ? activeIdx : -1;
+			if (!shown) openAll();
+			setActive(from < 0 ? delta > 0 ? 0 : n - 1 : (from + delta + n) % n);
+		} else if (e.key === "Enter" && shown && activeIdx >= 0) {
+			e.preventDefault();
+			choose(visible[activeIdx]);
+		} else if (e.key === "Escape" && shown && floatingIdRef.current && overlayStack.isTopFloating(floatingIdRef.current)) {
+			e.preventDefault();
+			overlayStack.consumeEscape(e.nativeEvent);
+			close();
+		}
+	};
+	return {
+		enabled,
+		inputProps: {
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": shown,
+			"aria-controls": shown ? listboxId : void 0,
+			"aria-activedescendant": shown && activeIdx >= 0 ? optionId(activeIdx) : void 0,
+			onFocus: chain(handlers.onFocus, openAll),
+			onClick: chain(handlers.onClick, () => {
+				if (!open) openAll();
+			}),
+			onChange: chain(handlers.onChange, (e) => {
+				setQuery(e.target.value);
+				setOpen(true);
+				setActive(-1);
+			}),
+			onKeyDown: chain(handlers.onKeyDown, onKeyDown),
+			onBlur: chain(handlers.onBlur, close)
+		},
+		inputRef,
+		popup: shown && /* @__PURE__ */ jsx(SuggestionsPopup, {
+			inputRef,
+			floatingIdRef,
+			listboxId,
+			visible,
+			active: activeIdx,
+			optionId,
+			onActivate: setActive,
+			onChoose: choose
+		})
+	};
+}
+function SuggestionsPopup({ inputRef, floatingIdRef, listboxId, visible, active, optionId, onActivate, onChoose }) {
+	const t = useTranslation();
+	const floatingId = useFloatingSurface(true);
+	const inOverlay = useInOverlay(inputRef, true);
+	useLayoutEffect(() => {
+		floatingIdRef.current = floatingId;
+		return () => {
+			floatingIdRef.current = null;
+		};
+	}, [floatingIdRef, floatingId]);
+	const { refs, floatingStyles, isPositioned } = useFloating({
+		open: true,
+		placement: "bottom-start",
+		transform: false,
+		middleware: [
+			offset(4),
+			flip(),
+			size({
+				padding: 8,
+				apply({ rects, availableHeight, elements }) {
+					elements.floating.style.width = `${rects.reference.width}px`;
+					elements.floating.style.setProperty("--input-suggestions-available-height", `${Math.max(0, availableHeight)}px`);
+				}
+			})
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { setReference } = refs;
+	useLayoutEffect(() => setReference(inputRef.current), [setReference, inputRef]);
+	const listRef = useRef(null);
+	useEffect(() => {
+		if (!isPositioned || active < 0) return;
+		listRef.current?.children[active]?.scrollIntoView?.({ block: "nearest" });
+	}, [isPositioned, active]);
+	return createPortal(/* @__PURE__ */ jsx("ul", {
+		ref: (node) => {
+			listRef.current = node;
+			refs.setFloating(node);
+		},
+		id: listboxId,
+		role: "listbox",
+		"aria-label": t("input.suggestions"),
+		style: floatingStyles,
+		"data-in-overlay": inOverlay ? "" : void 0,
+		className: Input_module_default.suggestions,
+		onMouseDown: (e) => e.preventDefault(),
+		children: visible.map((s, i) => /* @__PURE__ */ jsx("li", {
+			id: optionId(i),
+			role: "option",
+			"aria-selected": i === active,
+			className: clsx(Input_module_default.suggestion, i === active && Input_module_default.suggestionActive),
+			onMouseMove: () => {
+				if (i !== active) onActivate(i);
+			},
+			onClick: () => onChoose(s),
+			children: s
+		}, s))
+	}), document.body);
+}
+export { useSuggestions };

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

@@ -0,0 +1,2 @@
+export { Input } from './Input.js';
+export type { InputProps, InputSize } from './Input.js';

package/dist/components/Kanban/Kanban.css

@@ -0,0 +1,47 @@
+:root {
+  --kanban-board-gap: var(--space-3);
+  --kanban-board-padding-block: var(--space-1);
+  --kanban-column-bg: var(--color-bg-muted);
+  --kanban-column-radius: var(--radius-md);
+  --kanban-column-padding: var(--space-3);
+  --kanban-column-gap: var(--space-2);
+  --kanban-card-shadow-dragging: var(--shadow-lg);
+}
+
+.Kanban__board__zaU2B {
+  display: flex;
+  flex-direction: row;
+  gap: var(--kanban-board-gap);
+  overflow-x: auto;
+  padding-block: var(--kanban-board-padding-block);
+}
+
+.Kanban__column__rmTB4 {
+  background: var(--kanban-column-bg);
+  border-radius: var(--kanban-column-radius);
+  padding: var(--kanban-column-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--kanban-column-gap);
+  min-width: 260px;
+  flex-shrink: 0;
+  min-height: 80px;
+}
+
+.Kanban__card__OCYQi {
+  position: relative;
+  cursor: grab;
+  touch-action: none;
+}
+
+.Kanban__card__OCYQi[data-dragging=true] {
+  cursor: grabbing;
+  box-shadow: var(--kanban-card-shadow-dragging);
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Kanban__card__OCYQi {
+    transition: none !important;
+  }
+}

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,157 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Transform } from '@dnd-kit/utilities';
+/**
+ * Payload fired by `onMove` after a successful drag-drop across or within
+ * a column. Consumer applies the move by updating their items state.
+ */
+export interface KanbanMoveEvent {
+    /** Source position — where the card was before the drag. */
+    from: {
+        columnId: string | number;
+        index: number;
+    };
+    /** Destination position — where the card landed after the drop. */
+    to: {
+        columnId: string | number;
+        index: number;
+    };
+    /** The id of the card that was dragged. */
+    cardId: string | number;
+}
+export interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Fires once per drag (on drop) with the from/to positions and the cardId.
+     * NOT fired on drag cancel. NOT fired when from === to (no-op drop).
+     *
+     * Consumer should update their items state immutably, e.g.:
+     * ```ts
+     * const [cols, setCols] = useState({ todo: ['a', 'b'], done: ['c'] });
+     * const handleMove = ({ from, to, cardId }) => {
+     *   setCols((prev) => {
+     *     const next = { ...prev };
+     *     next[from.columnId] = [...prev[from.columnId]];
+     *     next[from.columnId].splice(from.index, 1);
+     *     next[to.columnId] = [...prev[to.columnId]];
+     *     next[to.columnId].splice(to.index, 0, cardId);
+     *     return next;
+     *   });
+     * };
+     * ```
+     */
+    onMove?: (event: KanbanMoveEvent) => void;
+}
+export interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    /**
+     * Stable identifier for this column. Must be unique within a `<Kanban>`.
+     * Used internally to track which cards belong to which column.
+     */
+    id: string | number;
+    children?: ReactNode;
+}
+export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    /**
+     * Stable identifier for this card. Must be unique across ALL columns in
+     * the `<Kanban>`. Used by dnd-kit to track the card during drag.
+     */
+    id: string | number;
+    children: ReactNode;
+}
+/**
+ * Where the dragged card sits inside its scroll container, and how big that
+ * container's content is. Everything is expressed in the container's CONTENT
+ * space (origin = scroll offset 0), which is scroll-invariant: the numbers stay
+ * valid while auto-scroll moves the board under the card.
+ *
+ * @internal exported for unit tests; not part of the public API.
+ */
+export interface KanbanDragBounds {
+    /** Card centre, x, in content space. */
+    centerX: number;
+    /** Card centre, y, in content space. */
+    centerY: number;
+    /** Card layout width (untransformed). */
+    width: number;
+    /** Card layout height (untransformed). */
+    height: number;
+    /** `scrollWidth` of the container, measured with the card untransformed. */
+    contentWidth: number;
+    /** `scrollHeight` of the container, measured with the card untransformed. */
+    contentHeight: number;
+}
+/**
+ * Measure `node` against its nearest scrollable ancestor.
+ *
+ * The card's own transform (and transition) are stripped for the duration of
+ * the measurement — both readings would otherwise be poisoned by the transform:
+ * `getBoundingClientRect()` returns the TRANSFORMED box, and a card already
+ * hanging past the content edge inflates the very `scrollWidth` we are about to
+ * use as the bound. Stripping makes the measurement a fixed point, so repeated
+ * measurements during one drag cannot ratchet the bound outwards. The
+ * transition goes too: a keyboard drag leaves a real `transition` on the drag
+ * source (a pointer drag does not), and strip-then-restore would otherwise read
+ * as a computed-value change and animate the card back from identity. Both are
+ * restored before the browser paints (this runs in a layout effect), so nothing
+ * is visible.
+ *
+ * Which container: only the NEAREST scrollable ancestor matters — it clips
+ * everything below it, so no ancestor further up ever sees the overhang. Inside
+ * a `<Kanban>` that is always the board. It is whatever else the consumer made
+ * scrollable, though: a `<Kanban.Column>` given `overflow-y: auto` becomes the
+ * nearest scroller for its own cards.
+ *
+ * Returns null when nothing is measurable — no node, or a zero-sized scroll
+ * area, which is every element under jsdom (it lays nothing out). A null bound
+ * means "don't clamp", i.e. the pre-#373 behaviour. Note there is no
+ * "unscrollable" case to bail out of in a real browser:
+ * `getScrollableAncestors` falls back to `document.scrollingElement`, so a card
+ * with no scrollable ancestor is bounded by the page instead.
+ *
+ * @internal exported for unit tests; not part of the public API.
+ */
+export declare function measureKanbanDragBounds(node: HTMLElement | null): KanbanDragBounds | null;
+/**
+ * Bound `transform` so the transformed card stays inside the scroll
+ * container's content box. Pass-through when either argument is null.
+ *
+ * This is what stops horizontal auto-scroll from running away (#373). The card
+ * is rendered IN FLOW (there is no `DragOverlay`), so a transform that carries
+ * it past the content edge extends the container's `scrollWidth`; dnd-kit's
+ * auto-scroll then chases the edge it just created, which moves the card
+ * further out, which extends the edge again — measured at 8910px of `scrollLeft`
+ * against a real maximum of 597. Clamping the APPLIED transform breaks the loop
+ * at its source: `scrollWidth` never changes, so `scrollLeft` plateaus at the
+ * real maximum and the last column becomes reachable.
+ *
+ * It has to happen here, where the transform is written to the DOM — a
+ * `DndContext` modifier is not enough, because dnd-kit computes
+ * `scrollAdjustedTranslate = modifiedTranslate + scrollAdjustment` and adds the
+ * scroll adjustment AFTER modifiers run (same reason `DataTable` clamps
+ * `event.delta` rather than only its modifier — see `useColumnDragShift`).
+ *
+ * `scaleX` / `scaleY` are honoured because dnd-kit scales the drag source to
+ * the `over` rect; the scaled half-extent, not the layout half-extent, is what
+ * reaches the edge.
+ *
+ * @internal exported for unit tests; not part of the public API.
+ */
+export declare function clampKanbanTransform(transform: Transform | null, bounds: KanbanDragBounds | null): Transform | null;
+/**
+ * One draggable card inside a `<Kanban.Column>`; needs a stable `id`.
+ * @see docs/components/Kanban.md
+ */
+export declare const KanbanCard: import("react").ForwardRefExoticComponent<KanbanCardProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * One swimlane in a `<Kanban>`; needs a stable `id`.
+ * @see docs/components/Kanban.md
+ */
+export declare const KanbanColumn: import("react").ForwardRefExoticComponent<KanbanColumnProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Kanban: import("react").ForwardRefExoticComponent<KanbanProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Column: import("react").ForwardRefExoticComponent<KanbanColumnProps & import("react").RefAttributes<HTMLDivElement>>;
+    Card: import("react").ForwardRefExoticComponent<KanbanCardProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Re-exported from `<Sortable.Handle>`. Attaches drag listeners when placed
+     * inside a `<Kanban.Card>`. When present, only the Handle initiates drag
+     * (the Card div gets `role="article"`).
+     */
+    Handle: import("react").ForwardRefExoticComponent<import("../Sortable/index.js").SortableHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
+};