@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/WidgetPreview/WidgetShape.module.js

@@ -0,0 +1,53 @@
+import "./WidgetShape.css";
+// src/components/WidgetPreview/WidgetShape.module.scss
+var root = "WidgetShape__root__IE8Vy";
+var piece = "WidgetShape__piece__2DSwc";
+var hero = "WidgetShape__hero__RkEd4";
+var heroStrong = "WidgetShape__heroStrong__Lg2aM";
+var kpi = "WidgetShape__kpi__fRDdp";
+var kpiLabel = "WidgetShape__kpiLabel__7FK9Y";
+var kpiValue = "WidgetShape__kpiValue__WUHE4";
+var kpiTrend = "WidgetShape__kpiTrend__jbsWP";
+var rows = "WidgetShape__rows__dgmgk";
+var row = "WidgetShape__row__RVyy3";
+var avatar = "WidgetShape__avatar__ti336";
+var dot = "WidgetShape__dot__yOLSK";
+var line = "WidgetShape__line__i96V6";
+var lineShort = "WidgetShape__lineShort__4KuF-";
+var chart = "WidgetShape__chart__w8EH3";
+var barSlot = "WidgetShape__barSlot___NB4K";
+var bar = "WidgetShape__bar__GVdP4";
+var pipeline = "WidgetShape__pipeline__DWc07";
+var column = "WidgetShape__column__p4fcX";
+var stage = "WidgetShape__stage__ZXJt1";
+var dealCard = "WidgetShape__dealCard__ABNd2";
+var lineChart = "WidgetShape__lineChart__XjRmU";
+var lineArea = "WidgetShape__lineArea__WPzTB";
+var linePath = "WidgetShape__linePath__H5ssX";
+var WidgetShape_module_default = {
+	root,
+	piece,
+	hero,
+	heroStrong,
+	kpi,
+	kpiLabel,
+	kpiValue,
+	kpiTrend,
+	rows,
+	row,
+	avatar,
+	dot,
+	line,
+	lineShort,
+	chart,
+	barSlot,
+	bar,
+	pipeline,
+	column,
+	stage,
+	dealCard,
+	lineChart,
+	lineArea,
+	linePath
+};
+export { avatar, bar, barSlot, chart, column, dealCard, WidgetShape_module_default as default, dot, hero, heroStrong, kpi, kpiLabel, kpiTrend, kpiValue, line, lineArea, lineChart, linePath, lineShort, piece, pipeline, root, row, rows, stage };

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

@@ -0,0 +1,2 @@
+export { WidgetPreview } from './WidgetPreview.js';
+export type { WidgetPreviewProps, WidgetPreviewVariant } from './WidgetPreview.js';

package/dist/components/_internal/Trend.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardWidgetTrend } from '../DashboardWidget/DashboardWidget.js';
+/**
+ * Internal: KPI trend line shared by DashboardWidget (kpi) and StatTile. Markup only;
+ * the caller's `className` sets size and colours (style `[data-sentiment]` per component).
+ */
+export declare function Trend({ trend, className }: {
+    trend: DashboardWidgetTrend;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/_internal/Trend.js

@@ -0,0 +1,42 @@
+'use client';
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+// src/components/_internal/Trend.tsx
+var DEFAULT_SENTIMENT = {
+	up: "positive",
+	down: "negative",
+	flat: "neutral"
+};
+var TREND_ICON = {
+	up: TrendingUp,
+	down: TrendingDown,
+	flat: Minus
+};
+var TREND_WORD = {
+	up: "trendUp",
+	down: "trendDown",
+	flat: "trendFlat"
+};
+/**
+* Internal: KPI trend line shared by DashboardWidget (kpi) and StatTile. Markup only;
+* the caller's `className` sets size and colours (style `[data-sentiment]` per component).
+*/
+function Trend({ trend, className }) {
+	const t = useTranslation();
+	const Icon = TREND_ICON[trend.direction];
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-sentiment": trend.sentiment ?? DEFAULT_SENTIMENT[trend.direction],
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				size: 16,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsxs(VisuallyHidden, { children: [t(`dashboardWidget.${TREND_WORD[trend.direction]}`), " "] }),
+			/* @__PURE__ */ jsx("span", { children: trend.label })
+		]
+	});
+}
+export { Trend };

package/dist/components/_internal/collapse.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared `collapseBelow` threshold scale: `sm` 480px / `md` 640px / `lg` 768px.
+ *
+ * The scale is shared; **the measurement basis is per-component**:
+ *
+ * - **Container** (`@container (max-width: …)`) for Grid / Sortable (grid
+ *   arrangement) / Split / DashboardCanvas / DataTable. Collapsing re-templates
+ *   content *inside* a box whose width the collapse doesn't change, so querying
+ *   the box's own width is stable and needs no JS.
+ * - **Viewport** (`matchMedia`, via the `useBelowBreakpoint` hook in
+ *   `src/hooks/`) for Rail and AppLayout's overlay sidebar. A container query
+ *   there would be circular — the thing being measured IS what the collapse
+ *   changes (Rail's own width 240px → 56px; the sidebar's presence in
+ *   AppLayout's row). Rail's collapsed state also drives React behavior (Item
+ *   tooltips, Group flyouts, section titles), which CSS can't express, so the
+ *   threshold has to exist in JS regardless.
+ */
+export type CollapseBreakpoint = 'sm' | 'md' | 'lg';
+/**
+ * Pixel value of each breakpoint, for components that evaluate the threshold in
+ * JS (`matchMedia`) rather than in CSS.
+ *
+ * **Keep in sync with `collapse.scss`** (`$collapse-sm` / `-md` / `-lg`) — the
+ * SCSS constants are the CSS-side copy of these same numbers. Both are
+ * inclusive upper bounds: `max-width: 480px` matches AT 480px.
+ */
+export declare const COLLAPSE_BREAKPOINT_PX: Record<CollapseBreakpoint, number>;
+/**
+ * Graduated collapse: breakpoint → column count. Below each breakpoint the
+ * grid re-templates to that many equal columns and every item's span is
+ * clamped to fit. E.g. `{ md: 6, sm: 1 }` = 12-col grid above 640px, 6-col
+ * between 480–640px, single column below 480px. When several breakpoints
+ * match, the smallest wins.
+ */
+export type CollapseColumnsMap = Partial<Record<CollapseBreakpoint, number>>;
+/** Largest → smallest; step CSS is declared in this order so the smallest matching breakpoint wins by source order. */
+export declare const COLLAPSE_BREAKPOINTS: readonly CollapseBreakpoint[];
+/**
+ * The container's graduated-collapse map, provided by Grid / Sortable (grid
+ * arrangement) to their Items so each can stamp per-breakpoint clamped span
+ * custom properties. `null` when the container has no map-form collapse.
+ */
+export declare const CollapseColumnsContext: import("react").Context<Partial<Record<CollapseBreakpoint, number>> | null>;
+/** Track template for a collapse step — mirrors Grid's fixed-column template. */
+export declare function collapseTrackTemplate(columns: number): string;

package/dist/components/_internal/collapse.js

@@ -0,0 +1,33 @@
+'use client';
+import { createContext } from "react";
+// src/components/_internal/collapse.ts
+/**
+* Pixel value of each breakpoint, for components that evaluate the threshold in
+* JS (`matchMedia`) rather than in CSS.
+*
+* **Keep in sync with `collapse.scss`** (`$collapse-sm` / `-md` / `-lg`) — the
+* SCSS constants are the CSS-side copy of these same numbers. Both are
+* inclusive upper bounds: `max-width: 480px` matches AT 480px.
+*/
+var COLLAPSE_BREAKPOINT_PX = {
+	sm: 480,
+	md: 640,
+	lg: 768
+};
+/** Largest → smallest; step CSS is declared in this order so the smallest matching breakpoint wins by source order. */
+var COLLAPSE_BREAKPOINTS = [
+	"lg",
+	"md",
+	"sm"
+];
+/**
+* The container's graduated-collapse map, provided by Grid / Sortable (grid
+* arrangement) to their Items so each can stamp per-breakpoint clamped span
+* custom properties. `null` when the container has no map-form collapse.
+*/
+var CollapseColumnsContext = createContext(null);
+/** Track template for a collapse step — mirrors Grid's fixed-column template. */
+function collapseTrackTemplate(columns) {
+	return `repeat(${columns}, minmax(0, 1fr))`;
+}
+export { COLLAPSE_BREAKPOINTS, COLLAPSE_BREAKPOINT_PX, CollapseColumnsContext, collapseTrackTemplate };

package/dist/components/_internal/currency.d.ts

@@ -0,0 +1,46 @@
+/** Shared currency parse/format helpers for MoneyInput / CurrencySelect. Amounts stay strings (never JS numbers). */
+export type CurrencyDisplay = 'code' | 'symbol' | 'both';
+/** Parsed, in-progress amount. `frac === null` → no decimal point typed; `''` → trailing point. */
+export interface AmountDraft {
+    negative: boolean;
+    int: string;
+    frac: string | null;
+}
+export declare function currencyPrecision(code: string): number;
+export declare function currencySymbol(code: string, locale: string): string;
+export declare function currencyName(code: string, locale: string): string;
+export declare function currencyDisplayText(code: string, display: CurrencyDisplay, locale: string): string;
+export declare function isValidCurrency(code: string): boolean;
+export declare function localeSeparators(locale: string): {
+    group: string;
+    decimal: string;
+};
+/**
+ * Lenient parse of a PASTED segment: exactly one number, with optional currency symbols / one word
+ * per side, a sign ('-', '−', '+', trailing '-') or accounting parentheses. Grouping must be
+ * unambiguous (first group 1–3 digits, then exactly 3, one group char kind); the cross-locale rules
+ * pick the decimal. Anything doubtful → `'invalid'`; no digits at all → `null`.
+ */
+export declare function parseAmount(text: string, opts: {
+    locale: string;
+    precision: number;
+    allowNegative: boolean;
+}): AmountDraft | null | 'invalid';
+/**
+ * Strict parse of the field's OWN text: only the locale group char is stripped and only the
+ * locale decimal is a decimal. No cross-locale or numpad guessing.
+ */
+export declare function parseLocalAmount(text: string, opts: {
+    locale: string;
+    precision: number;
+    allowNegative: boolean;
+}): AmountDraft | null;
+export declare function draftToCanonical(d: AmountDraft): string | null;
+export declare function canonicalToDraft(s: string | null): AmountDraft | null;
+export declare function formatDraft(d: AmountDraft, opts: {
+    locale: string;
+    precision: number;
+    pad: boolean;
+}): string;
+/** String half-up (away from zero) rounding; never pads. */
+export declare function roundAmount(canonical: string, precision: number): string;

package/dist/components/_internal/currency.js

@@ -0,0 +1,198 @@
+// src/components/_internal/currency.ts
+function currencyPrecision(code) {
+	return new Intl.NumberFormat("en", {
+		style: "currency",
+		currency: code
+	}).resolvedOptions().maximumFractionDigits;
+}
+function currencySymbol(code, locale) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency: code,
+		currencyDisplay: "symbol"
+	}).formatToParts(0).find((p) => p.type === "currency")?.value ?? code;
+}
+function currencyName(code, locale) {
+	try {
+		return new Intl.DisplayNames(locale, { type: "currency" }).of(code) ?? code;
+	} catch {
+		return code;
+	}
+}
+function currencyDisplayText(code, display, locale) {
+	if (display === "code") return code;
+	const symbol = currencySymbol(code, locale);
+	return display === "symbol" ? symbol : `${code} ${symbol}`;
+}
+function isValidCurrency(code) {
+	try {
+		new Intl.NumberFormat("en", {
+			style: "currency",
+			currency: code
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}
+function localeSeparators(locale) {
+	const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+	return {
+		group: parts.find((p) => p.type === "group")?.value ?? ",",
+		decimal: parts.find((p) => p.type === "decimal")?.value ?? "."
+	};
+}
+/** Space-like grouping chars allowed inside a pasted number (one kind per number). */
+var SPACE_GROUP = /[   '’]/g;
+var PREFIX_TOKEN = /^(?:\p{Sc}*\p{L}+[.:]?\p{Sc}*|\p{Sc}+)$/u;
+var SUFFIX_TOKEN = /^(?:\p{Sc}*\p{L}+\.?\p{Sc}*|\p{Sc}+)$/u;
+var SUFFIX_WORDS = /* @__PURE__ */ new Set(["руб", "р"]);
+var isoCodes;
+/** A real ISO 4217 code (not merely well-formed), so magnitude words ('K', 'bn', 'млн') never pass. */
+var isIsoCode = (w) => (isoCodes ??= new Set(typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("currency") : [])).has(w.toUpperCase());
+/**
+* Splits one affix side into sign marks; null when anything but symbols / ONE word / sign remains.
+* A prefix word is a free label ('Total', 'Итого:'); a suffix word must be a currency
+* (ISO code or 'руб'/'р') — anything else may be a magnitude ('5 тыс.', '$2 million').
+*/
+function readAffix(side, open, signs, suffix) {
+	const marks = {
+		open: 0,
+		minus: 0,
+		plus: 0
+	};
+	for (const c of side) if (c === open) marks.open++;
+	else if (c === "-" && signs.includes("-")) marks.minus++;
+	else if (c === "+" && signs.includes("+")) marks.plus++;
+	const tokens = side.replace(new RegExp(`[\\${open}${signs.replace("-", "\\-")}]`, "g"), " ").split(/[   ]+/).filter(Boolean);
+	if (!tokens.every((tk) => (suffix ? SUFFIX_TOKEN : PREFIX_TOKEN).test(tk))) return null;
+	const words = tokens.map((tk) => tk.replace(/[^\p{L}]/gu, "")).filter(Boolean);
+	if (words.length > 1) return null;
+	if (suffix && words.length && !SUFFIX_WORDS.has(words[0].toLowerCase()) && !isIsoCode(words[0])) return null;
+	return marks;
+}
+/**
+* Lenient parse of a PASTED segment: exactly one number, with optional currency symbols / one word
+* per side, a sign ('-', '−', '+', trailing '-') or accounting parentheses. Grouping must be
+* unambiguous (first group 1–3 digits, then exactly 3, one group char kind); the cross-locale rules
+* pick the decimal. Anything doubtful → `'invalid'`; no digits at all → `null`.
+*/
+function parseAmount(text, opts) {
+	const t = text.replace(/−/g, "-").trim().replace(/\.$/, "");
+	const first = t.search(/\d/);
+	if (first < 0) return null;
+	let last = t.length - 1;
+	while (!/\d/.test(t[last])) last--;
+	const from = /[.,]/.test(t[first - 1] ?? "") && !/\p{L}/u.test(t[first - 2] ?? "") ? first - 1 : first;
+	if (/\p{L}/u.test(t[from - 1] ?? "") || /\p{L}/u.test(t[last + 1] ?? "")) return "invalid";
+	const core = t.slice(from, last + 1);
+	const pre = readAffix(t.slice(0, from), "(", "-+", false);
+	const post = readAffix(t.slice(last + 1), ")", "-", true);
+	if (!pre || !post) return "invalid";
+	const parens = pre.open + post.open;
+	const signs = pre.minus + pre.plus + post.minus;
+	if (pre.open > 1 || post.open > 1 || parens === 1 || signs > 1 || parens && signs) return "invalid";
+	const negative = opts.allowNegative && (parens === 2 || pre.minus + post.minus === 1);
+	if (!/^[\d.,]+$/.test(core.replace(SPACE_GROUP, ""))) return "invalid";
+	const { group: lg, decimal: ld } = localeSeparators(opts.locale);
+	const count = (c) => core.split(c).length - 1;
+	const dots = count(".");
+	const commas = count(",");
+	let dec = null;
+	let grp = null;
+	if (dots && commas) {
+		dec = core.lastIndexOf(".") > core.lastIndexOf(",") ? "." : ",";
+		grp = dec === "." ? "," : ".";
+		if (count(dec) > 1) return "invalid";
+	} else if (dots > 1 || commas > 1) grp = dots ? "." : ",";
+	else if (dots || commas) {
+		const c = dots ? "." : ",";
+		const fracLen = core.length - core.indexOf(c) - 1;
+		if (c === ld) dec = c;
+		else if (c === "." && ld === "," && opts.precision <= 2 && fracLen >= 1 && fracLen <= opts.precision) dec = c;
+		else if (c !== lg && fracLen === 3) return "invalid";
+		else if (c === lg || c === ".") grp = c;
+		else dec = c;
+		if (dec && fracLen === 3 && opts.precision < 3) return "invalid";
+	}
+	const spaces = new Set(core.match(SPACE_GROUP) ?? []);
+	if (spaces.size) {
+		if (grp || spaces.size > 1) return "invalid";
+		grp = [...spaces][0];
+	}
+	const at = dec ? core.indexOf(dec) : -1;
+	const intPart = at < 0 ? core : core.slice(0, at);
+	const fracPart = at < 0 ? null : core.slice(at + 1);
+	if (fracPart !== null && !/^\d*$/.test(fracPart)) return "invalid";
+	if (grp) {
+		const groups = intPart.split(grp);
+		if (!/^\d{1,3}$/.test(groups[0]) || !groups.slice(1).every((g) => /^\d{3}$/.test(g))) return "invalid";
+	} else if (!/^\d*$/.test(intPart)) return "invalid";
+	return {
+		negative,
+		int: grp ? intPart.split(grp).join("") : intPart,
+		frac: fracPart
+	};
+}
+/**
+* Strict parse of the field's OWN text: only the locale group char is stripped and only the
+* locale decimal is a decimal. No cross-locale or numpad guessing.
+*/
+function parseLocalAmount(text, opts) {
+	const { group, decimal } = localeSeparators(opts.locale);
+	const s = [...text.split(group).join("")].filter((c) => c >= "0" && c <= "9" || c === decimal || c === "-").join("");
+	if (!s) return null;
+	const negative = opts.allowNegative && s.startsWith("-");
+	return toDraft(s.replace(/-/g, ""), decimal, opts.precision, negative);
+}
+function toDraft(s, decimal, precision, negative) {
+	const at = s.indexOf(decimal);
+	const digits = (v) => v.replace(/\D/g, "");
+	const int = digits(at < 0 ? s : s.slice(0, at));
+	const frac = at < 0 ? null : digits(s.slice(at + 1)).slice(0, precision);
+	if (!int && frac === null && !negative) return null;
+	return {
+		negative,
+		int,
+		frac
+	};
+}
+/** Prefix '-' only for a negative with a non-zero digit (never '-0' / '-0.00'). */
+var signed = (negative, body) => (negative && /[1-9]/.test(body) ? "-" : "") + body;
+function draftToCanonical(d) {
+	if (!d.int && !d.frac) return null;
+	const body = `${d.int.replace(/^0+(?=\d)/, "") || "0"}${d.frac ? `.${d.frac}` : ""}`;
+	return signed(d.negative, body);
+}
+function canonicalToDraft(s) {
+	if (s === null || s === "") return null;
+	const negative = s.startsWith("-");
+	const [int, frac] = (negative ? s.slice(1) : s).split(".");
+	return {
+		negative,
+		int: int.replace(/^0+(?=\d)/, ""),
+		frac: frac ?? null
+	};
+}
+function formatDraft(d, opts) {
+	const { group, decimal } = localeSeparators(opts.locale);
+	const sign = d.negative ? "-" : "";
+	if (!d.int && !d.frac) return d.frac === null || opts.precision === 0 ? sign : sign + decimal;
+	const int = (d.int || "0").replace(/\B(?=(\d{3})+$)/g, group);
+	if (opts.precision === 0) return sign + int;
+	let frac = d.frac === null ? null : d.frac.slice(0, opts.precision);
+	if (opts.pad) frac = (frac ?? "").padEnd(opts.precision, "0");
+	return sign + int + (frac === null ? "" : decimal + frac);
+}
+/** String half-up (away from zero) rounding; never pads. */
+function roundAmount(canonical, precision) {
+	const negative = canonical.startsWith("-");
+	const [int, frac = ""] = (negative ? canonical.slice(1) : canonical).split(".");
+	if (frac.length <= precision) return signed(negative, canonical.slice(negative ? 1 : 0));
+	let n = BigInt(int + frac.slice(0, precision));
+	if (frac[precision] >= "5") n += 1n;
+	const s = n.toString().padStart(precision + 1, "0");
+	const cut = s.length - precision;
+	return signed(negative, precision ? `${s.slice(0, cut)}.${s.slice(cut)}` : s);
+}
+export { canonicalToDraft, currencyDisplayText, currencyName, currencyPrecision, currencySymbol, draftToCanonical, formatDraft, isValidCurrency, localeSeparators, parseAmount, parseLocalAmount, roundAmount };

package/dist/components/_internal/dragAnnouncements.d.ts

@@ -0,0 +1,83 @@
+import { type RefObject } from 'react';
+import type { Active, Announcements, ScreenReaderInstructions } from '@dnd-kit/core';
+/** Collapse whitespace and cap the length so an announcement stays listenable. */
+export declare function tidy(text: string): string;
+/**
+ * What a draggable publishes on its dnd-kit `data` so the announcements can
+ * name it. Read with `dragLabelOf`.
+ */
+export interface DragLabelData {
+    /** Consumer's explicit `aria-label`. Wins outright when set. */
+    dragLabel?: string;
+    /** The rendered node to read text from when there is no explicit label. */
+    dragNode?: RefObject<HTMLElement | null>;
+}
+/**
+ * The name to announce for a draggable: the consumer's `aria-label` if there is
+ * one, else the node's rendered text.
+ *
+ * Reading the DOM rather than walking the React children is deliberate. A card
+ * with a `<DropdownMenu>` / `<Tooltip>` / `<ConfirmationPopover>` in it has the
+ * closed panel's contents in its children tree but NOT in the document, so a
+ * children walk announces "Draft Q3 OKRs View Archive" while the DOM announces
+ * "Draft Q3 OKRs". Collapsed and portalled subtrees drop out by construction.
+ */
+export declare function dragLabelOf(data: Record<string, unknown> | undefined): string | undefined;
+/**
+ * The accessible name a consumer gave a container (a Kanban column, a
+ * SortableGroup list) — `aria-label`, or the text of whatever `aria-labelledby`
+ * points at, since naming a column by its visible `<Title>` is the natural
+ * choice. Returns undefined when neither is set; the caller falls back to a
+ * positional stand-in.
+ */
+export declare function containerName(props: {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}): string | undefined;
+/** The `active` / `over` shape dnd-kit hands to an announcement callback. */
+export type DragEntry = Pick<Active, 'id' | 'data'>;
+/** What a component knows about the slot an id occupies (or would land in). */
+export interface DragTarget {
+    /** Human name. Empty / omitted → the message says "the item" instead. */
+    label?: string;
+    /** 1-based slot within `container`. */
+    index: number;
+    /** Number of slots in `container`, counting the incoming item. */
+    total: number;
+    /** Human name of the list the slot belongs to. Omit in single-list components. */
+    container?: string;
+}
+/**
+ * Default `describe`: the name from `dragLabelOf`, plus the index / items
+ * `useSortable` already publishes under `data.sortable`. Returns `null` for
+ * anything that is not a sortable item (including a missing entry).
+ */
+export declare function sortableTarget(entry: DragEntry | null): DragTarget | null;
+/**
+ * Describes the slot an `active` / `over` entry names. `activeId` is passed so
+ * a container droppable can answer "where would THIS card land in me" — the
+ * multi-list components need it to position a drop onto an empty column.
+ *
+ * `entry` is null when dnd-kit resolved no `over` at all. Most components
+ * return null straight back; a component whose drop has its OWN fallback for
+ * that case (DataTable's last-resolved band slot, #383) must answer with that
+ * slot here too, or it announces "nothing moved" about a real reorder.
+ */
+export type DescribeDragTarget = (entry: DragEntry | null, activeId: Active['id']) => DragTarget | null;
+/**
+ * Build the `accessibility` prop for a `<DndContext>`: localized announcements
+ * for the whole drag lifecycle plus localized keyboard instructions.
+ *
+ * @param describe   Resolves an entry (or `null` when there is no `over`) to a
+ *                   human slot. Return `null` when nothing would land anywhere
+ *                   — that announces "not over a drop target" / "nothing
+ *                   moved".
+ * @param isRejectedDrop Optional. Consulted on drag end BEFORE `over`: return
+ *                   `true` when the component refuses to commit the release, so
+ *                   it announces a cancel rather than a drop that never
+ *                   happened (Kanban's outside-the-board release, #390).
+ */
+export declare function useDragAccessibility(describe: DescribeDragTarget, isRejectedDrop?: () => boolean): {
+    announcements: Announcements;
+    screenReaderInstructions: ScreenReaderInstructions;
+};

package/dist/components/_internal/dragAnnouncements.js

@@ -0,0 +1,123 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { useMemo, useRef } from "react";
+// src/components/_internal/dragAnnouncements.ts
+/** Collapse whitespace and cap the length so an announcement stays listenable. */
+function tidy(text) {
+	const flat = text.replace(/\s+/g, " ").trim();
+	return flat.length > 80 ? `${flat.slice(0, 79)}…` : flat;
+}
+/**
+* The name to announce for a draggable: the consumer's `aria-label` if there is
+* one, else the node's rendered text.
+*
+* Reading the DOM rather than walking the React children is deliberate. A card
+* with a `<DropdownMenu>` / `<Tooltip>` / `<ConfirmationPopover>` in it has the
+* closed panel's contents in its children tree but NOT in the document, so a
+* children walk announces "Draft Q3 OKRs View Archive" while the DOM announces
+* "Draft Q3 OKRs". Collapsed and portalled subtrees drop out by construction.
+*/
+function dragLabelOf(data) {
+	const { dragLabel, dragNode } = data ?? {};
+	if (typeof dragLabel === "string" && dragLabel.trim()) return tidy(dragLabel);
+	const node = dragNode?.current;
+	if (!node) return void 0;
+	return tidy(domText(node)) || void 0;
+}
+/**
+* `textContent` for announcements: separates element boundaries with a space
+* (raw `textContent` glues siblings — "Acme Corp$50,000") and skips
+* `aria-hidden` subtrees, which are decoration a screen reader is already told
+* to ignore.
+*/
+function domText(el) {
+	let out = "";
+	for (const child of el.childNodes) if (child.nodeType === 3) out += child.nodeValue ?? "";
+	else if (child.nodeType === 1 && child.getAttribute("aria-hidden") !== "true") out += ` ${domText(child)}`;
+	return out;
+}
+/**
+* The accessible name a consumer gave a container (a Kanban column, a
+* SortableGroup list) — `aria-label`, or the text of whatever `aria-labelledby`
+* points at, since naming a column by its visible `<Title>` is the natural
+* choice. Returns undefined when neither is set; the caller falls back to a
+* positional stand-in.
+*/
+function containerName(props) {
+	const label = props["aria-label"];
+	if (typeof label === "string" && label.trim()) return tidy(label);
+	const ids = props["aria-labelledby"];
+	if (!ids || typeof document === "undefined") return void 0;
+	const text = ids.split(/\s+/).map((id) => document.getElementById(id)?.textContent ?? "").join(" ");
+	return text.trim() ? tidy(text) : void 0;
+}
+/**
+* Default `describe`: the name from `dragLabelOf`, plus the index / items
+* `useSortable` already publishes under `data.sortable`. Returns `null` for
+* anything that is not a sortable item (including a missing entry).
+*/
+function sortableTarget(entry) {
+	const data = entry?.data.current;
+	const sortable = data?.sortable;
+	if (!sortable || sortable.index < 0) return null;
+	return {
+		label: dragLabelOf(data),
+		index: sortable.index + 1,
+		total: sortable.items.length
+	};
+}
+/**
+* Build the `accessibility` prop for a `<DndContext>`: localized announcements
+* for the whole drag lifecycle plus localized keyboard instructions.
+*
+* @param describe   Resolves an entry (or `null` when there is no `over`) to a
+*                   human slot. Return `null` when nothing would land anywhere
+*                   — that announces "not over a drop target" / "nothing
+*                   moved".
+* @param isRejectedDrop Optional. Consulted on drag end BEFORE `over`: return
+*                   `true` when the component refuses to commit the release, so
+*                   it announces a cancel rather than a drop that never
+*                   happened (Kanban's outside-the-board release, #390).
+*/
+function useDragAccessibility(describe, isRejectedDrop) {
+	const t = useTranslation();
+	const describeRef = useRef(describe);
+	describeRef.current = describe;
+	const rejectedRef = useRef(isRejectedDrop);
+	rejectedRef.current = isRejectedDrop;
+	return useMemo(() => {
+		const nameOf = (entry, activeId) => describeRef.current(entry, activeId)?.label || t("drag.unnamed");
+		const at = (key, item, target) => {
+			const { index, total, container } = target;
+			return container == null ? t(`drag.${key}`, {
+				item,
+				index,
+				total
+			}) : t(key === "movedOver" ? "drag.movedOverIn" : "drag.droppedIn", {
+				item,
+				index,
+				total,
+				container
+			});
+		};
+		return {
+			announcements: {
+				onDragStart: ({ active }) => t("drag.pickedUp", { item: nameOf(active, active.id) }),
+				onDragOver: ({ active, over }) => {
+					const item = nameOf(active, active.id);
+					const target = describeRef.current(over, active.id);
+					return target ? at("movedOver", item, target) : t("drag.movedOutside", { item });
+				},
+				onDragEnd: ({ active, over }) => {
+					const item = nameOf(active, active.id);
+					if (rejectedRef.current?.()) return t("drag.cancelled", { item });
+					const target = describeRef.current(over, active.id);
+					return target ? at("dropped", item, target) : t("drag.droppedNowhere", { item });
+				},
+				onDragCancel: ({ active }) => t("drag.cancelled", { item: nameOf(active, active.id) })
+			},
+			screenReaderInstructions: { draggable: t("drag.instructions") }
+		};
+	}, [t]);
+}
+export { containerName, dragLabelOf, sortableTarget, tidy, useDragAccessibility };