@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/PhoneInput/phone.js

@@ -0,0 +1,80 @@
+import { AsYouType, getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString } from "libphonenumber-js";
+// src/components/PhoneInput/phone.ts
+/**
+* Emoji flag for an ISO 3166-1 alpha-2 code, built from Unicode regional-
+* indicator symbols. Note: emoji flags do NOT render on Windows Chrome/Edge —
+* those show the letters (e.g. "US") instead.
+*/
+function isoToFlag(iso) {
+	return iso.toUpperCase().replace(/[^A-Z]/g, "").replace(/./g, (c) => String.fromCodePoint(127462 + c.charCodeAt(0) - 65));
+}
+/** The compact trigger label for `country` under the chosen `display` mode. */
+function countryDisplayLabel(country, display) {
+	const code = `+${country.callingCode}`;
+	switch (display) {
+		case "flag": return `${isoToFlag(country.iso)} ${code}`;
+		case "iso": return `${country.iso} ${code}`;
+		case "code": return code;
+		default: return `${country.name} ${code}`;
+	}
+}
+function displayNames(locale) {
+	try {
+		return new Intl.DisplayNames([locale], { type: "region" });
+	} catch {
+		return new Intl.DisplayNames(["en"], { type: "region" });
+	}
+}
+/**
+* Every supported country (or the `only` subset) as `{ iso, name, callingCode }`,
+* names localized to `locale` via `Intl.DisplayNames`, sorted by name.
+*/
+function getCountryOptions(locale, only) {
+	const display = displayNames(locale);
+	const all = getCountries();
+	return (only && only.length ? only.filter((c) => all.includes(c)) : all).map((iso) => ({
+		iso,
+		name: display.of(iso) ?? iso,
+		callingCode: getCountryCallingCode(iso)
+	})).sort((a, b) => a.name.localeCompare(b.name, locale));
+}
+/** Parse an E.164 string into its country + national display, or null if unparseable. */
+function parseE164(value) {
+	const parsed = parsePhoneNumberFromString(value);
+	if (!parsed) return null;
+	return {
+		country: parsed.country ?? parsed.getPossibleCountries()[0],
+		national: parsed.formatNational()
+	};
+}
+/** Format a raw national input for `country` as the user types (idempotent on a formatted string). */
+function formatNational(input, country) {
+	return new AsYouType(country).input(input);
+}
+/**
+* Canonical E.164 once the input is a *possible* complete number for `country`;
+* `null` while still partial or empty.
+*/
+function toE164(input, country) {
+	const ayt = new AsYouType(country);
+	ayt.input(input);
+	const num = ayt.getNumber();
+	return num && num.isPossible() ? num.number : null;
+}
+/**
+* True iff `e164` is a valid phone number. Exported so a host can drive Field `invalid` chrome.
+*
+* @example
+* <Field error={isValidPhone(value) ? undefined : 'Enter a valid number'}>
+*   <PhoneInput value={value} onChange={setValue} />
+* </Field>
+*/
+function isValidPhone(e164) {
+	if (!e164) return false;
+	try {
+		return isValidPhoneNumber(e164);
+	} catch {
+		return false;
+	}
+}
+export { countryDisplayLabel, formatNational, getCountryOptions, isValidPhone, isoToFlag, parseE164, toE164 };

package/dist/components/PillMenu/PillMenu.css

@@ -0,0 +1,210 @@
+:root {
+  --badge-bg-danger: var(--color-tone-danger-bg);
+  --badge-bg-info: var(--color-tone-info-bg);
+  --badge-bg-neutral: var(--color-tone-neutral-bg);
+  --badge-bg-purple: var(--color-tone-purple-bg);
+  --badge-bg-success: var(--color-tone-success-bg);
+  --badge-bg-warning: var(--color-tone-warning-bg);
+  --badge-fg-danger: var(--color-tone-danger-fg);
+  --badge-fg-info: var(--color-tone-info-fg);
+  --badge-fg-neutral: var(--color-tone-neutral-fg);
+  --badge-fg-purple: var(--color-tone-purple-fg);
+  --badge-fg-success: var(--color-tone-success-fg);
+  --badge-fg-warning: var(--color-tone-warning-fg);
+  --badge-radius: var(--radius-sm);
+  --badge-font-size: var(--font-size-xs);
+  --badge-font-weight: var(--font-weight-semibold);
+  --badge-letter-spacing: var(--letter-spacing-caps);
+  --badge-line-height: var(--line-height-none);
+  --badge-gap: var(--space-1);
+  --badge-height-sm: var(--size-badge-sm);
+  --badge-height-md: var(--size-badge);
+  --badge-padding-x-sm: var(--space-1);
+  --badge-padding-x-md: var(--space-2);
+  --badge-optical-offset-bottom: 1px;
+  --badge-stripe-border-width: var(--border-width-strong);
+  --badge-stripe-font-weight: var(--font-weight-medium);
+  --badge-stripe-padding-left: var(--space-2);
+  --badge-stripe-bg-neutral: var(--color-bg-muted);
+  --badge-stripe-fg-neutral: var(--color-fg);
+  --badge-stripe-border-color-neutral: var(--color-fg-muted);
+  --badge-stripe-bg-info: var(--color-info-bg-subtle);
+  --badge-stripe-fg-info: var(--color-info);
+  --badge-stripe-border-color-info: var(--color-info);
+  --badge-stripe-bg-success: var(--color-success-bg-subtle);
+  --badge-stripe-fg-success: var(--color-success);
+  --badge-stripe-border-color-success: var(--color-success);
+  --badge-stripe-bg-warning: var(--color-warning-bg-subtle);
+  --badge-stripe-fg-warning: var(--color-warning-strong);
+  --badge-stripe-border-color-warning: var(--color-warning-strong);
+  --badge-stripe-bg-danger: var(--color-danger-bg-subtle);
+  --badge-stripe-fg-danger: var(--color-danger);
+  --badge-stripe-border-color-danger: var(--color-danger);
+  --badge-stripe-bg-purple: var(--badge-bg-purple);
+  --badge-stripe-fg-purple: var(--badge-fg-purple);
+  --badge-stripe-border-color-purple: var(--badge-fg-purple);
+  --color-badge-danger-bg: var(--badge-bg-danger);
+  --color-badge-danger-fg: var(--badge-fg-danger);
+  --color-badge-info-bg: var(--badge-bg-info);
+  --color-badge-info-fg: var(--badge-fg-info);
+  --color-badge-neutral-bg: var(--badge-bg-neutral);
+  --color-badge-neutral-fg: var(--badge-fg-neutral);
+  --color-badge-purple-bg: var(--badge-bg-purple);
+  --color-badge-purple-fg: var(--badge-fg-purple);
+  --color-badge-success-bg: var(--badge-bg-success);
+  --color-badge-success-fg: var(--badge-fg-success);
+  --color-badge-warning-bg: var(--badge-bg-warning);
+  --color-badge-warning-fg: var(--badge-fg-warning);
+}
+
+:root {
+  --dropdown-menu-bg: var(--color-bg);
+  --dropdown-menu-border-color: var(--color-border);
+  --dropdown-menu-radius: var(--radius-md);
+  --dropdown-menu-shadow: var(--shadow-md);
+  --dropdown-menu-padding: var(--space-1);
+  --dropdown-menu-gap: var(--space-0);
+  --dropdown-menu-min-width: var(--size-dropdown-min-width);
+  --dropdown-menu-z: var(--z-dropdown);
+  --dropdown-menu-transition: var(--transition-base);
+  --dropdown-menu-item-gap: var(--space-2);
+  --dropdown-menu-item-padding-y: var(--space-1);
+  --dropdown-menu-item-padding-x: var(--space-2);
+  --dropdown-menu-item-radius: var(--radius-sm);
+  --dropdown-menu-item-font-size: var(--font-size-md);
+  --dropdown-menu-item-line-height: var(--line-height-normal);
+  --dropdown-menu-item-fg: var(--color-fg);
+  --dropdown-menu-item-bg-hover: var(--color-bg-muted);
+  --dropdown-menu-item-fg-disabled: var(--color-fg-disabled);
+  --dropdown-menu-item-fg-danger: var(--color-danger);
+  --dropdown-menu-item-bg-danger-hover: var(--color-bg-danger-subtle);
+  --dropdown-menu-item-bg-checked: var(--color-accent-subtle-bg);
+  --dropdown-menu-item-fg-checked: var(--color-fg);
+  --dropdown-menu-item-accent-checked: var(--color-accent);
+  --dropdown-menu-item-accent-width-checked: var(--border-width-emphasis);
+  --dropdown-menu-icon-size: var(--space-4);
+  --dropdown-menu-icon-fg: var(--color-fg-subtle);
+  --dropdown-menu-shortcut-fg: var(--color-fg-muted);
+  --dropdown-menu-shortcut-font-size: var(--font-size-sm);
+  --dropdown-menu-shortcut-padding-left: var(--space-3);
+  --dropdown-menu-meta-fg: var(--color-fg-muted);
+  --dropdown-menu-meta-font-size: var(--font-size-xs);
+  --dropdown-menu-meta-padding-left: var(--space-2);
+  --dropdown-menu-separator-height: var(--space-2);
+  --dropdown-menu-separator-color: var(--color-border);
+  --dropdown-menu-group-padding-block: var(--space-1);
+  --dropdown-menu-label-padding-y: var(--space-1);
+  --dropdown-menu-label-padding-x: var(--space-2);
+  --dropdown-menu-label-font-size: var(--font-size-xs);
+  --dropdown-menu-label-font-weight: var(--font-weight-semibold);
+  --dropdown-menu-label-letter-spacing: var(--letter-spacing-caps);
+  --dropdown-menu-label-fg: var(--color-fg-subtle);
+  --dropdown-menu-indicator-size: var(--size-dropdown-indicator);
+  --dropdown-menu-sub-chevron-font-size: var(--font-size-md);
+  --dropdown-menu-sub-chevron-line-height: var(--line-height-none);
+  --dropdown-menu-sub-chevron-fg: var(--color-fg-subtle);
+  --dropdown-menu-sub-chevron-padding-left: var(--space-2);
+  --dropdown-menu-sub-trigger-bg-open: var(--color-bg-muted);
+}
+
+:root {
+  --pill-menu-radius: var(--radius-md);
+  --pill-menu-padding-y: var(--space-1);
+  --pill-menu-padding-x: var(--space-3);
+  --pill-menu-font-size: var(--font-size-sm);
+  --pill-menu-font-weight: var(--font-weight-medium);
+  --pill-menu-gap: var(--space-2);
+  --pill-menu-option-gap: var(--dropdown-menu-padding);
+  --pill-menu-caption-font-weight: var(--font-weight-regular);
+  --pill-menu-disabled-opacity: var(--opacity-disabled);
+  --pill-menu-ring-focus: var(--ring-accent);
+}
+
+.PillMenu__trigger__4G5Ui,
+.PillMenu__chip__xobFl {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pill-menu-gap);
+  border-radius: var(--pill-menu-radius);
+  padding: var(--pill-menu-padding-y) var(--pill-menu-padding-x);
+  font-family: inherit;
+  font-size: var(--pill-menu-font-size);
+  font-weight: var(--pill-menu-font-weight);
+  background: var(--pill-menu-bg, transparent);
+  color: var(--pill-menu-fg, currentColor);
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.PillMenu__trigger__4G5Ui {
+  border: none;
+  cursor: pointer;
+}
+.PillMenu__trigger__4G5Ui:hover:not(:disabled) {
+  filter: brightness(0.96);
+}
+.PillMenu__trigger__4G5Ui:focus-visible {
+  outline: var(--ring-width) solid var(--pill-menu-ring-focus);
+  outline-offset: var(--ring-offset);
+}
+.PillMenu__trigger__4G5Ui:disabled {
+  opacity: var(--pill-menu-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.PillMenu__chevron__PrMak {
+  flex-shrink: 0;
+}
+
+.PillMenu__fullWidth__hR1hC {
+  display: flex;
+  width: 100%;
+}
+.PillMenu__fullWidth__hR1hC > .PillMenu__chevron__PrMak {
+  margin-inline-start: auto;
+}
+
+.PillMenu__menu__Ab-7E {
+  --dropdown-menu-gap: var(--pill-menu-option-gap);
+}
+
+.PillMenu__option__c0j6b.PillMenu__option__c0j6b {
+  --dropdown-menu-icon-fg: var(--pill-menu-fg, currentColor);
+  background: var(--pill-menu-bg, transparent);
+  color: var(--pill-menu-fg, currentColor);
+}
+
+.PillMenu__option__c0j6b.PillMenu__option__c0j6b:hover:not([aria-disabled=true]) {
+  background: var(--pill-menu-bg, transparent);
+  color: var(--pill-menu-fg, currentColor);
+  filter: brightness(0.94);
+}
+
+.PillMenu__option__c0j6b.PillMenu__option__c0j6b:focus-visible:not([aria-disabled=true]) {
+  background: var(--pill-menu-bg, transparent);
+  color: var(--pill-menu-fg, currentColor);
+  filter: brightness(0.94);
+}
+
+.PillMenu__srOnly__CPCWo {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.PillMenu__icon__mqh83 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.PillMenu__caption__373qY {
+  flex-shrink: 0;
+  font-weight: var(--pill-menu-caption-font-weight);
+}

package/dist/components/PillMenu/PillMenu.d.ts

@@ -0,0 +1,116 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type PaletteColor } from '../../palette/index.js';
+import { type StatusCategory } from '../_internal/statusColor.js';
+/** Workflow category — maps to a default palette color. */
+export type PillMenuCategory = StatusCategory;
+/** One value (a status, a task type, a priority…): the current one or a menu option. */
+export interface PillMenuOption {
+    /** Stable id — passed to `onSelect` when this option is chosen. */
+    id: string | number;
+    /** Visible name. */
+    name: string;
+    /**
+     * Optional glyph rendered before the name — in the pill and in its menu
+     * row (e.g. a task-type or priority icon). Decorative: wrapped
+     * `aria-hidden`, so the name alone is announced. Size it to the text
+     * (~14px lucide icon), at most 16px: menu rows place it in DropdownMenu's
+     * fixed 16px icon slot.
+     */
+    icon?: ReactNode;
+    /** Semantic category → default color: to_do slate / in_progress blue / open violet / done green / won green / lost red. */
+    category?: PillMenuCategory;
+    /** Explicit palette color — wins over `category` (per-state custom colors). */
+    color?: PaletteColor;
+    /**
+     * Extra `data-*` attributes spread onto this value's interactive element:
+     * the trigger button (or the read-only chip) when it is `current`, its menu
+     * row when it is one of `options` (e.g. `{ 'data-tour': 'status-pill' }` to
+     * target it from a `Tour`, or a test/analytics id). Spread first, so a key
+     * here can't override the `id` / `role` / `aria-*` / handlers the component
+     * owns; on a menu row it also can't override the row's own `data-tone`.
+     * A `data-*` passed on `<PillMenu>` itself (via `{...rest}`) beats
+     * `current.attrs`.
+     *
+     * Anti-pattern: when `current` is the same object as an entry in `options`
+     * (`current={options.find(...)}`), its attrs land on BOTH the pill and that
+     * menu row (duplicate `data-tour` / `data-testid` while open). Give
+     * `current` its own attrs: `current={{ ...opt, attrs: { 'data-tour': 'stage-pill' } }}`.
+     */
+    attrs?: Record<`data-${string}`, string>;
+}
+export interface PillMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect' | 'aria-labelledby'> {
+    /** The value currently shown on the trigger (or the read-only chip). */
+    current: PillMenuOption;
+    /**
+     * What the value IS, for the trigger's accessible name: `label="type"` →
+     * "Change type: Bug". Default: a string `caption` ("Change Pipeline: …"),
+     * else the localized "status" ("Change status: …").
+     * Pass it as it reads right after "Change" / "Изменить", lower-case, in the
+     * UI's language — it is data, not a translatable string. In ru that is the
+     * accusative: `label="категорию"`, not "категория".
+     *
+     * Inside a `<Field>`, pass the field's label here (`label="priority"` under
+     * "Priority"): the trigger keeps its own name, so the visible field label
+     * reaches AT only through this (WCAG 2.5.3). A dev warning fires if it's
+     * missing there.
+     */
+    label?: string;
+    /**
+     * Visible caption rendered inside the pill before the value, separated by a
+     * middle dot: `caption="Pipeline"` → "Pipeline · Faeton". For a trigger
+     * that must say both what it picks and the current value.
+     *
+     * Names the trigger only as a fallback: `label` wins ("Change pipeline:
+     * Faeton"); with no `label`, a non-blank string caption is used ("Change Pipeline:
+     * Faeton") so the visible words stay in the accessible name (WCAG 2.5.3
+     * label-in-name). A non-string caption never names it — pass `label` then,
+     * containing the caption's words. In the read-only chip (no accessible
+     * name override) the caption text is read along with the value; the dot is
+     * `aria-hidden` in both. Muted by weight (regular vs the value's medium),
+     * not colour: the palette fills leave no contrast headroom for a dimmer
+     * foreground. Omitted or blank → no caption, no dot.
+     */
+    caption?: ReactNode;
+    /**
+     * Transition targets, offered in the dropdown. Omitted or empty renders
+     * read-only mode: a static colored chip with no button, no menu, no
+     * aria-haspopup.
+     */
+    options?: PillMenuOption[];
+    /** Fired with the chosen option's `id` when a transition target is picked. */
+    onSelect?: (id: string | number) => void;
+    /** Disables the trigger. Stays colored, dims via opacity. */
+    disabled?: boolean;
+    /**
+     * Transition in flight: the trigger is non-interactive and keeps its color.
+     * Announced from a polite live region the component owns — `aria-busy` is
+     * also set but reaches no screen reader on its own. The trigger's accessible
+     * name does not change (contrast `EntityChip`): you activated this control,
+     * so the change is announced rather than folded into the name.
+     *
+     * No effect in read-only mode (no `options`), which renders no trigger and
+     * so has nothing to mark busy.
+     */
+    busy?: boolean;
+    /**
+     * Stretch the trigger (or read-only chip) to its container's width, for a
+     * form column of full-width controls (`Input`, `Select`, `DatePicker` in
+     * vertical `Field`s). Icon + name stay at the start, the chevron moves to
+     * the end edge like a `Select` trigger, and the menu is at least as wide as
+     * the trigger. Keeps the full-colour fill. Defaults to `false`
+     * (content-width pill).
+     */
+    fullWidth?: boolean;
+    /**
+     * Error state — sets `aria-invalid` on the trigger. `<Field error>` injects
+     * it for you. No visual change: the fill IS the value's colour, and the
+     * Field's error text carries the error. The read-only chip ignores it (a
+     * non-focusable chip isn't a control AT can report invalid).
+     */
+    invalid?: boolean;
+}
+/**
+ * Coloured value menu: a coloured pill trigger opening a menu of values (status, type, priority); read-only chip when `options` is omitted.
+ * @see docs/components/PillMenu.md
+ */
+export declare const PillMenu: import("react").ForwardRefExoticComponent<PillMenuProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/PillMenu/PillMenu.js

@@ -0,0 +1,135 @@
+'use client';
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { paletteTokens } from "../../palette/palette.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { resolveStatusColor } from "../_internal/statusColor.js";
+import PillMenu_module_default from "./PillMenu.module.js";
+import { forwardRef, useEffect, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/PillMenu/PillMenu.tsx
+/** Injectable custom-property pair for a value's resolved color. */
+function statusColorStyle(status) {
+	const { bg, fg } = paletteTokens(resolveStatusColor(status));
+	return {
+		"--pill-menu-bg": bg,
+		"--pill-menu-fg": fg
+	};
+}
+/** Renders the optional caption + icon + name, shared by the pill and the read-only chip (rows use Item's icon slot). */
+function OptionContent({ option, caption }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		caption != null && caption !== false && !(typeof caption === "string" && !caption.trim()) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: PillMenu_module_default.caption,
+			children: caption
+		}), /* @__PURE__ */ jsx("span", {
+			className: PillMenu_module_default.caption,
+			"aria-hidden": "true",
+			children: "·"
+		})] }),
+		option.icon != null && /* @__PURE__ */ jsx("span", {
+			className: PillMenu_module_default.icon,
+			"aria-hidden": "true",
+			children: option.icon
+		}),
+		option.name
+	] });
+}
+/**
+* Coloured value menu: a coloured pill trigger opening a menu of values (status, type, priority); read-only chip when `options` is omitted.
+* @see docs/components/PillMenu.md
+*/
+var PillMenu = forwardRef(function PillMenu({ current, options, onSelect, label, caption, disabled = false, busy = false, fullWidth = false, invalid = false, className, style, ...props }, ref) {
+	const { required: _required, "aria-labelledby": fieldLabelledBy, ...rest } = props;
+	const t = useTranslation();
+	const hasTrigger = options != null && options.length > 0;
+	useEffect(() => {
+		if (process.env.NODE_ENV !== "production" && hasTrigger && fieldLabelledBy && !label) console.warn("<PillMenu> received `aria-labelledby` (e.g. inside a <Field>) but no `label`. `aria-labelledby` is ignored — the trigger keeps its own name (\"Change <string caption, or status>: …\") — so the field label doesn't reach assistive tech unless it matches. Pass `label` (e.g. label=\"priority\").");
+	}, [
+		fieldLabelledBy,
+		label,
+		hasTrigger
+	]);
+	const [busyText, setBusyText] = useState("");
+	useEffect(() => {
+		setBusyText(busy ? t("pillMenu.busy") : "");
+	}, [busy, t]);
+	const mergedStyle = {
+		...style,
+		...statusColorStyle(current)
+	};
+	const isBlocked = disabled || busy;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	if (isBlocked && uncontrolledOpen) setUncontrolledOpen(false);
+	if (!hasTrigger) return /* @__PURE__ */ jsx("span", {
+		...current.attrs,
+		...rest,
+		ref,
+		className: clsx(PillMenu_module_default.chip, fullWidth && PillMenu_module_default.fullWidth, className),
+		style: mergedStyle,
+		children: /* @__PURE__ */ jsx(OptionContent, {
+			option: current,
+			caption
+		})
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open: isBlocked ? false : uncontrolledOpen,
+		onOpenChange: (next) => {
+			if (!isBlocked) setUncontrolledOpen(next);
+		},
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs("button", {
+				...current.attrs,
+				...rest,
+				ref,
+				type: "button",
+				className: clsx(PillMenu_module_default.trigger, fullWidth && PillMenu_module_default.fullWidth, className),
+				style: mergedStyle,
+				disabled: isBlocked,
+				"aria-busy": busy || void 0,
+				"aria-invalid": invalid || void 0,
+				"aria-label": t("pillMenu.change", {
+					label: label || (typeof caption === "string" && caption.trim() ? caption : void 0) || t("pillMenu.defaultLabel"),
+					name: current.name
+				}),
+				children: [/* @__PURE__ */ jsx(OptionContent, {
+					option: current,
+					caption
+				}), /* @__PURE__ */ jsx("svg", {
+					width: "10",
+					height: "6",
+					viewBox: "0 0 10 6",
+					"aria-hidden": "true",
+					className: PillMenu_module_default.chevron,
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M1 1 L5 5 L9 1",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						fill: "none"
+					})
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: PillMenu_module_default.srOnly,
+				children: busyText
+			}),
+			/* @__PURE__ */ jsx(DropdownMenu.Content, {
+				className: PillMenu_module_default.menu,
+				children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+					...option.attrs,
+					onSelect: () => onSelect?.(option.id),
+					className: PillMenu_module_default.option,
+					style: statusColorStyle(option),
+					icon: option.icon != null ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: option.icon
+					}) : void 0,
+					children: option.name
+				}, option.id))
+			})
+		]
+	});
+});
+export { PillMenu };

package/dist/components/PillMenu/PillMenu.module.js

@@ -0,0 +1,23 @@
+import "./PillMenu.css";
+// src/components/PillMenu/PillMenu.module.scss
+var trigger = "PillMenu__trigger__4G5Ui";
+var chip = "PillMenu__chip__xobFl";
+var chevron = "PillMenu__chevron__PrMak";
+var fullWidth = "PillMenu__fullWidth__hR1hC";
+var menu = "PillMenu__menu__Ab-7E";
+var option = "PillMenu__option__c0j6b";
+var srOnly = "PillMenu__srOnly__CPCWo";
+var icon = "PillMenu__icon__mqh83";
+var caption = "PillMenu__caption__373qY";
+var PillMenu_module_default = {
+	trigger,
+	chip,
+	chevron,
+	fullWidth,
+	menu,
+	option,
+	srOnly,
+	icon,
+	caption
+};
+export { caption, chevron, chip, PillMenu_module_default as default, fullWidth, icon, menu, option, srOnly, trigger };

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

@@ -0,0 +1,2 @@
+export { PillMenu } from './PillMenu.js';
+export type { PillMenuProps, PillMenuOption, PillMenuCategory } from './PillMenu.js';

package/dist/components/Popover/Anchor.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement } from 'react';
+export interface PopoverAnchorProps {
+    /**
+     * Exactly one React element that accepts a ref. Unlike `Popover.Trigger`,
+     * Anchor injects ONLY the floating-positioning ref — no `onClick`, no keyboard
+     * handler, and no `aria-haspopup` / `aria-expanded` / `aria-controls`. Use it
+     * when the anchor element already owns its open-toggle and ARIA (e.g. an
+     * interactive `FilterChip` whose body `<button>` self-manages
+     * `aria-haspopup`/`aria-expanded`), and you drive the popover's open state
+     * yourself (controlled `open` + `onOpenChange`). The child must accept a ref
+     * (`forwardRef`); raw DOM elements and this library's components qualify, and
+     * it should be focusable (a `<button>` or `tabIndex` host) so Escape can
+     * return focus to it on close. Wrapping such a chip in `Popover.Trigger`
+     * instead would stamp that ARIA onto its `role="group"` root, not the body
+     * button.
+     */
+    children: ReactElement;
+}
+/**
+ * Positions `Popover.Content` against its child, injecting only the floating ref and no interaction or ARIA (`Popover.Anchor`).
+ * @see docs/components/Popover.md
+ */
+export declare function Anchor({ children }: PopoverAnchorProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Popover/Anchor.js

@@ -0,0 +1,16 @@
+'use client';
+import { usePopoverContext } from "./context.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { cloneElement, isValidElement } from "react";
+// src/components/Popover/Anchor.tsx
+/**
+* Positions `Popover.Content` against its child, injecting only the floating ref and no interaction or ARIA (`Popover.Anchor`).
+* @see docs/components/Popover.md
+*/
+function Anchor({ children }) {
+	const ctx = usePopoverContext("Anchor");
+	if (!isValidElement(children)) throw new Error("<Popover.Anchor> requires exactly one React element child.");
+	const childProps = children.props;
+	return cloneElement(children, { ref: mergeRefs(ctx.triggerRef, childProps.ref) });
+}
+export { Anchor };

package/dist/components/Popover/Close.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from 'react';
+export interface PopoverCloseProps {
+    /**
+     * Exactly one React element. The Close clones this element to inject an
+     * `onClick` that closes the popover, chained with the child's existing
+     * `onClick` (consumer runs first).
+     */
+    children: ReactElement;
+}
+/**
+ * Wraps a single element so activating it closes the popover (`Popover.Close`).
+ * @see docs/components/Popover.md
+ */
+export declare function Close({ children }: PopoverCloseProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Popover/Close.js

@@ -0,0 +1,19 @@
+'use client';
+import { usePopoverContext } from "./context.js";
+import { chain } from "../_internal/refs.js";
+import { cloneElement, isValidElement, useCallback } from "react";
+// src/components/Popover/Close.tsx
+/**
+* Wraps a single element so activating it closes the popover (`Popover.Close`).
+* @see docs/components/Popover.md
+*/
+function Close({ children }) {
+	const ctx = usePopoverContext("Close");
+	if (!isValidElement(children)) throw new Error("<Popover.Close> requires exactly one React element child.");
+	const childProps = children.props;
+	const handleClick = useCallback((_e) => {
+		ctx.closeAll();
+	}, [ctx]);
+	return cloneElement(children, { onClick: chain(childProps.onClick, handleClick) });
+}
+export { Close };

package/dist/components/Popover/Content.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react';
+/** Which side of the trigger the popover prefers. Floating UI auto-flips if it doesn't fit. */
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+/** Which edge of the popover aligns to the corresponding trigger edge. */
+export type PopoverAlign = 'start' | 'center' | 'end';
+export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Preferred side. Default `'bottom'`. Auto-flips on collision via Floating UI. */
+    side?: PopoverSide;
+    /** Edge alignment. Default `'center'`. */
+    align?: PopoverAlign;
+    /** Gap in px between trigger and panel. Default `10` (room for the arrow). */
+    sideOffset?: number;
+    /**
+     * Minimum width in px or any CSS length. Defaults to the token
+     * `--size-popover-min-width` (220px) applied via SCSS.
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum width in px or any CSS length, overriding the default cap
+     * (`--popover-max-width`, 360px). Use for wide content — calendars, tables —
+     * that would otherwise overflow the panel. Accepts a number (px),
+     * `'fit-content'`, `'none'` to remove the cap, or any CSS length.
+     */
+    maxWidth?: number | string;
+}
+/**
+ * The floating panel: portaled, auto-flipping, `role="dialog"` with an aria-hidden arrow (`Popover.Content`).
+ * @see docs/components/Popover.md
+ */
+export declare const Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;