@eocrm/design-system 0.6.23 → 0.7.0

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export interface PopoverProps {
+    /**
+     * Must contain exactly one `<Popover.Trigger>` (or `<Popover.Anchor>` for a
+     * controlled popover whose anchor owns its own toggle + ARIA) and one
+     * `<Popover.Content>`. `<Popover.Heading>` and `<Popover.Close>` are optional
+     * and may appear anywhere inside `<Popover.Content>`.
+     */
+    children: ReactNode;
+    /**
+     * Controlled open state. Provide alongside `onOpenChange` to drive open
+     * externally. Omit both to let Popover own its state (the common case).
+     */
+    open?: boolean;
+    /** Fired whenever Popover wants to change open state. Required when `open` is provided. */
+    onOpenChange?: (open: boolean) => void;
+    /** Default open state for uncontrolled usage. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /**
+     * Reserved future hint. v1 ignores the value and always renders non-modal.
+     * Will gate focus-trap + inert-background once `<Modal>` lands.
+     */
+    modal?: boolean;
+}
+/**
+ * Non-modal floating panel opened from a trigger, holding arbitrary interactive content (WAI-ARIA non-modal dialog); compound `Popover.Trigger`, `Content`, `Heading`, `Close`, `Anchor`.
+ * @see docs/components/Popover.md
+ */
+export declare function PopoverRoot({ children, open: controlledOpen, onOpenChange, defaultOpen, modal: _modal, }: PopoverProps): import("react").JSX.Element;

package/dist/components/Popover/PopoverRoot.js

@@ -0,0 +1,42 @@
+'use client';
+import { PopoverContext } from "./context.js";
+import { sanitizeId } from "../_internal/refs.js";
+import { useCallback, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/Popover/PopoverRoot.tsx
+/**
+* Non-modal floating panel opened from a trigger, holding arbitrary interactive content (WAI-ARIA non-modal dialog); compound `Popover.Trigger`, `Content`, `Heading`, `Close`, `Anchor`.
+* @see docs/components/Popover.md
+*/
+function PopoverRoot({ children, open: controlledOpen, onOpenChange, defaultOpen = false, modal: _modal = false }) {
+	const isControlled = controlledOpen !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = isControlled ? controlledOpen : uncontrolled;
+	const setOpen = useCallback((next) => {
+		onOpenChange?.(next);
+		if (!isControlled) setUncontrolled(next);
+	}, [isControlled, onOpenChange]);
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const reactId = useId();
+	const contentId = `popover-${sanitizeId(reactId)}`;
+	const [headingId, setHeadingId] = useState(null);
+	const value = {
+		open,
+		setOpen,
+		triggerRef,
+		contentRef,
+		contentId,
+		headingId,
+		setHeadingId,
+		closeAll: useCallback(() => {
+			setOpen(false);
+			triggerRef.current?.focus({ preventScroll: true });
+		}, [setOpen])
+	};
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value,
+		children
+	});
+}
+export { PopoverRoot };

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

@@ -0,0 +1,25 @@
+import { type ReactElement } from 'react';
+export interface PopoverTriggerProps {
+    /**
+     * Exactly one React element that accepts a ref. The Trigger clones this
+     * element to inject `aria-haspopup`, `aria-expanded`, `aria-controls`, a
+     * click handler that toggles the popover, and a keydown handler that opens
+     * on Enter/Space. `<Button>` and raw `<button>` both qualify; a custom
+     * component without `forwardRef` does not.
+     */
+    children: ReactElement;
+    /**
+     * Override the `aria-haspopup` value injected onto the trigger child.
+     * Defaults to `'dialog'` (matching the role of `Popover.Content`). Pass
+     * `'listbox'` for picker-style compound usages where the popover surfaces
+     * a listbox rather than a generic dialog.
+     *
+     * @default 'dialog'
+     */
+    'aria-haspopup'?: 'dialog' | 'listbox' | 'menu' | 'tree' | 'grid' | 'true' | 'false';
+}
+/**
+ * Clones its single ref-accepting child to inject the ref, ARIA and the click toggle (`Popover.Trigger`).
+ * @see docs/components/Popover.md
+ */
+export declare function Trigger({ children, 'aria-haspopup': ariaHaspopup, }: PopoverTriggerProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Popover/Trigger.js

@@ -0,0 +1,35 @@
+'use client';
+import { usePopoverContext } from "./context.js";
+import { chain, mergeRefs } from "../_internal/refs.js";
+import { cloneElement, isValidElement, useCallback } from "react";
+// src/components/Popover/Trigger.tsx
+/**
+* Clones its single ref-accepting child to inject the ref, ARIA and the click toggle (`Popover.Trigger`).
+* @see docs/components/Popover.md
+*/
+function Trigger({ children, "aria-haspopup": ariaHaspopup = "dialog" }) {
+	const ctx = usePopoverContext("Trigger");
+	if (!isValidElement(children)) throw new Error("<Popover.Trigger> requires exactly one React element child.");
+	const childProps = children.props;
+	const handleClick = useCallback((e) => {
+		e.stopPropagation();
+		ctx.setOpen(!ctx.open);
+	}, [ctx]);
+	const handleKeyDown = useCallback((e) => {
+		if (ctx.open) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.stopPropagation();
+			ctx.setOpen(true);
+		}
+	}, [ctx]);
+	return cloneElement(children, {
+		ref: mergeRefs(ctx.triggerRef, childProps.ref),
+		"aria-haspopup": ariaHaspopup,
+		"aria-expanded": ctx.open,
+		"aria-controls": ctx.open ? ctx.contentId : void 0,
+		onClick: chain(childProps.onClick, handleClick),
+		onKeyDown: chain(childProps.onKeyDown, handleKeyDown)
+	});
+}
+export { Trigger };

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

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+export interface PopoverContextValue {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    triggerRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+    contentId: string;
+    headingId: string | null;
+    setHeadingId: (id: string | null) => void;
+    closeAll: () => void;
+}
+export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
+export declare function usePopoverContext(componentName: string): PopoverContextValue;

package/dist/components/Popover/context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext, useContext } from "react";
+// src/components/Popover/context.ts
+var PopoverContext = createContext(null);
+function usePopoverContext(componentName) {
+	const ctx = useContext(PopoverContext);
+	if (!ctx) throw new Error(`<Popover.${componentName}> must be used inside <Popover>.`);
+	return ctx;
+}
+export { PopoverContext, usePopoverContext };

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

@@ -0,0 +1,7 @@
+export { Popover } from './Popover.js';
+export type { PopoverProps } from './PopoverRoot.js';
+export type { PopoverTriggerProps } from './Trigger.js';
+export type { PopoverAnchorProps } from './Anchor.js';
+export type { PopoverContentProps, PopoverSide, PopoverAlign } from './Content.js';
+export type { PopoverHeadingProps } from './Heading.js';
+export type { PopoverCloseProps } from './Close.js';

package/dist/components/Progress/Progress.css

@@ -0,0 +1,103 @@
+:root {
+  --progress-gap: var(--space-2);
+  --progress-track-bg: var(--color-border);
+  --progress-track-radius: var(--radius-full);
+  --progress-fill-bg: var(--color-accent);
+  --progress-fill-radius: var(--radius-full);
+  --progress-fill-bg-success: var(--color-success);
+  --progress-fill-bg-warning: var(--color-warning-strong);
+  --progress-fill-bg-danger: var(--color-danger);
+  --progress-fill-bg-indeterminate: var(--color-accent);
+  --progress-label-font-size: var(--font-size-sm);
+  --progress-label-fg: var(--color-fg-muted);
+  --progress-label-font-weight: var(--font-weight-medium);
+}
+
+.Progress__progress__3_9fm {
+  display: flex;
+  align-items: center;
+  gap: var(--progress-gap);
+  width: 100%;
+}
+
+.Progress__track__CegS9 {
+  flex: 1;
+  background: var(--progress-track-bg);
+  border-radius: var(--progress-track-radius);
+  overflow: hidden;
+}
+
+.Progress__fill__4iybO {
+  height: 100%;
+  background: var(--progress-fill-bg);
+  border-radius: var(--progress-fill-radius);
+  transition: width var(--transition-base);
+}
+
+.Progress__sizeSm__KWUqg .Progress__track__CegS9,
+.Progress__sizeSm__KWUqg .Progress__fill__4iybO {
+  height: 4px;
+}
+
+.Progress__sizeMd__ksGvN .Progress__track__CegS9,
+.Progress__sizeMd__ksGvN .Progress__fill__4iybO {
+  height: 8px;
+}
+
+.Progress__sizeLg__mJ8NT .Progress__track__CegS9,
+.Progress__sizeLg__mJ8NT .Progress__fill__4iybO {
+  height: 12px;
+}
+
+.Progress__toneDefault__qM9xL .Progress__fill__4iybO {
+  background: var(--progress-fill-bg);
+}
+
+.Progress__toneSuccess__tqqRu .Progress__fill__4iybO {
+  background: var(--progress-fill-bg-success);
+}
+
+.Progress__toneWarning__7MR-V .Progress__fill__4iybO {
+  background: var(--progress-fill-bg-warning);
+}
+
+.Progress__toneDanger__Edob0 .Progress__fill__4iybO {
+  background: var(--progress-fill-bg-danger);
+}
+
+.Progress__indeterminate__P7Q1O {
+  width: 30% !important;
+  animation: Progress__progress-slide__8kc8g 1.2s linear infinite;
+  background: var(--progress-fill-bg-indeterminate) !important;
+  transition: none;
+}
+
+@keyframes Progress__progress-slide__8kc8g {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+.Progress__label__fKq_j {
+  font-size: var(--progress-label-font-size);
+  color: var(--progress-label-fg);
+  font-weight: var(--progress-label-font-weight);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Progress__indeterminate__P7Q1O {
+    animation: none;
+    width: 100% !important;
+  }
+  .Progress__fill__4iybO {
+    transition: none;
+  }
+}

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Visual size — controls the track height. */
+export type ProgressSize = 'sm' | 'md' | 'lg';
+/** Color tone for the fill. Default `'default'` uses the accent color. */
+export type ProgressTone = 'default' | 'success' | 'warning' | 'danger';
+/** Label render mode. */
+export type ProgressLabel = boolean | ReactNode;
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * Current progress value. Omit (or pass `undefined`) to render the
+     * indeterminate animation.
+     *
+     * Two-channel behavior for out-of-range and degenerate values:
+     * - **Visual fill** is clamped to [0%, 100%]. Values outside [0, max]
+     *   render at the nearest valid bound.
+     * - **ARIA `aria-valuenow`** reports the raw number — this is the right
+     *   screen-reader behavior so consumer bugs (a value drifting past max)
+     *   surface in audits and SR announcements.
+     *
+     * Degenerate inputs fall back to the indeterminate animation: `NaN`,
+     * `Infinity`, `-Infinity`, and the case where `max <= 0`. This is the
+     * common file-upload race condition (`bytes_uploaded / total_bytes`
+     * before `total_bytes` is known produces NaN).
+     */
+    value?: number;
+    /**
+     * Upper bound. Defaults to `100`. Consumers using fraction values
+     * (0.0–1.0) pass `max={1}`. Consumers tracking a count ("3 of 10")
+     * pass `max={10}`.
+     */
+    max?: number;
+    /**
+     * Track height.
+     * - `sm` — 4px (compact / inside form rows)
+     * - `md` — 8px (default)
+     * - `lg` — 12px (page-level emphasis)
+     */
+    size?: ProgressSize;
+    /**
+     * Fill color tone. Defaults to `'default'` (accent blue). Tone applies
+     * ONLY to determinate mode; indeterminate always uses the accent tone
+     * because state-color semantics don't apply to an unknown total.
+     * - `default` — `--color-accent`
+     * - `success` — `--color-success`
+     * - `warning` — `--color-warning-strong`
+     * - `danger` — `--color-danger`
+     */
+    tone?: ProgressTone;
+    /**
+     * Optional label rendered to the RIGHT of the bar.
+     * - `false` (default) — no label
+     * - `true` — render `{Math.round((value / max) * 100)}%` when determinate.
+     *   Auto-suppressed when indeterminate (there's no percentage to show).
+     * - `ReactNode` — render the node as-is, in BOTH determinate and
+     *   indeterminate modes. Consumers wanting "Loading…" text next to an
+     *   indeterminate bar pass `label="Loading…"`.
+     */
+    label?: ProgressLabel;
+}
+/**
+ * Linear progress bar: determinate against `max`, or an indeterminate slide when `value` is omitted; `role="progressbar"` is locked.
+ * @see docs/components/Progress.md
+ */
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,51 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import Progress_module_default from "./Progress.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Progress/Progress.tsx
+var SIZE_CLASS = {
+	sm: Progress_module_default.sizeSm,
+	md: Progress_module_default.sizeMd,
+	lg: Progress_module_default.sizeLg
+};
+var TONE_CLASS = {
+	default: Progress_module_default.toneDefault,
+	success: Progress_module_default.toneSuccess,
+	warning: Progress_module_default.toneWarning,
+	danger: Progress_module_default.toneDanger
+};
+/**
+* Linear progress bar: determinate against `max`, or an indeterminate slide when `value` is omitted; `role="progressbar"` is locked.
+* @see docs/components/Progress.md
+*/
+var Progress = forwardRef(function Progress({ value, max = 100, size = "md", tone = "default", label = false, className, ...rest }, ref) {
+	const determinate = typeof value === "number" && Number.isFinite(value) && max > 0;
+	const indeterminate = !determinate;
+	const percent = determinate ? Math.max(0, Math.min(100, value / max * 100)) : 0;
+	const t = useTranslation();
+	const ariaLabel = rest["aria-label"];
+	const valuetext = indeterminate ? ariaLabel || t("progress.indeterminate") : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "progressbar",
+		className: clsx(Progress_module_default.progress, SIZE_CLASS[size], TONE_CLASS[tone], className),
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": determinate ? value : void 0,
+		"aria-valuetext": valuetext,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Progress_module_default.track,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx(Progress_module_default.fill, indeterminate && Progress_module_default.indeterminate),
+				style: determinate ? { width: `${percent}%` } : void 0
+			})
+		}), label !== false && !(label === true && indeterminate) && /* @__PURE__ */ jsx("span", {
+			className: Progress_module_default.label,
+			children: label === true ? `${Math.round(percent)}%` : label
+		})]
+	});
+});
+export { Progress };

package/dist/components/Progress/Progress.module.js

@@ -0,0 +1,30 @@
+import "./Progress.css";
+// src/components/Progress/Progress.module.scss
+var progress = "Progress__progress__3_9fm";
+var track = "Progress__track__CegS9";
+var fill = "Progress__fill__4iybO";
+var sizeSm = "Progress__sizeSm__KWUqg";
+var sizeMd = "Progress__sizeMd__ksGvN";
+var sizeLg = "Progress__sizeLg__mJ8NT";
+var toneDefault = "Progress__toneDefault__qM9xL";
+var toneSuccess = "Progress__toneSuccess__tqqRu";
+var toneWarning = "Progress__toneWarning__7MR-V";
+var toneDanger = "Progress__toneDanger__Edob0";
+var indeterminate = "Progress__indeterminate__P7Q1O";
+var label = "Progress__label__fKq_j";
+var Progress_module_default = {
+	progress,
+	track,
+	fill,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	toneDefault,
+	toneSuccess,
+	toneWarning,
+	toneDanger,
+	indeterminate,
+	"progress-slide": "Progress__progress-slide__8kc8g",
+	label
+};
+export { Progress_module_default as default, fill, indeterminate, label, progress, sizeLg, sizeMd, sizeSm, toneDanger, toneDefault, toneSuccess, toneWarning, track };

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

@@ -0,0 +1,2 @@
+export { Progress } from './Progress.js';
+export type { ProgressProps, ProgressSize, ProgressTone, ProgressLabel } from './Progress.js';

package/dist/components/QrCode/QrCode.css

@@ -0,0 +1,79 @@
+:root {
+  --qr-ink: var(--color-fg);
+  --qr-paper: var(--color-bg);
+  --qr-radius: var(--radius-sm);
+  --qr-error-bg: var(--color-bg-muted);
+  --qr-error-fg: var(--color-fg);
+  --qr-error-font-size: var(--font-size-sm);
+  --qr-error-padding: var(--space-3);
+}
+
+.QrCode__root__cZmIf {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--qr-radius);
+  background: var(--qr-paper);
+  cursor: pointer;
+}
+.QrCode__root__cZmIf:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+
+.QrCode__root__cZmIf.QrCode__inverted__g19tG {
+  --qr-ink: var(--color-bg);
+  --qr-paper: var(--color-fg);
+}
+
+.QrCode__frame__1OlEw {
+  position: relative;
+  display: block;
+  max-width: 100%;
+}
+
+.QrCode__svg__WYOB0 {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+  forced-color-adjust: none;
+}
+
+.QrCode__paper__QYML1 {
+  fill: var(--qr-paper);
+}
+
+.QrCode__ink__8V_kz {
+  fill: var(--qr-ink);
+}
+
+.QrCode__logo__1spjK {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--qr-logo-size, 0);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background: var(--qr-ink);
+  mask-image: var(--qr-logo-src, none);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.QrCode__root__cZmIf.QrCode__error__VkW3n {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  padding: var(--qr-error-padding);
+  background: var(--qr-error-bg);
+  color: var(--qr-error-fg);
+  font-size: var(--qr-error-font-size);
+  text-align: center;
+  overflow-wrap: anywhere;
+  cursor: default;
+}

package/dist/components/QrCode/QrCode.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type QrCodeLevel } from './qr.js';
+export type { QrCodeLevel };
+export interface QrCodeProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'type'> {
+    /**
+     * The string to encode — a URL, an ID, a vCard. Encoded as UTF-8, so any
+     * script works.
+     *
+     * An empty string, or one past the largest symbol's capacity at the chosen
+     * `level` (~1273 bytes at `'H'`, ~2953 at `'L'`), renders a **disabled**
+     * button carrying a localized "unavailable" message instead of a code. It
+     * never throws — a long CRM field cannot white-screen a page.
+     */
+    value: string;
+    /**
+     * URL of a **single-colour** SVG to place in the centre. It is used as a CSS
+     * alpha mask and filled with the code's current ink, so it recolours itself
+     * in both themes and in the inverted state — the file's own colours are
+     * discarded. Full-colour artwork and photographs are not supported.
+     *
+     * Setting this also raises the default `level` to `'H'`, because the
+     * punch-out destroys modules outright.
+     */
+    logo?: string;
+    /**
+     * Error-correction level — how much damage the symbol survives. `'L'` ~7%,
+     * `'M'` ~15%, `'Q'` ~25%, `'H'` ~30%. Higher levels need a larger symbol for
+     * the same data. Defaults to `'H'` when `logo` is set, `'M'` otherwise.
+     */
+    level?: QrCodeLevel;
+}
+/**
+ * A scannable, theme-following QR code that fills its container; clicking swaps ink and paper.
+ * @see docs/components/QrCode.md
+ */
+export declare const QrCode: import("react").ForwardRefExoticComponent<QrCodeProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/QrCode/QrCode.js

@@ -0,0 +1,141 @@
+'use client';
+import { mergeRefs } from "../_internal/refs.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { cssUrl, encodeQr, snapWidth } from "./qr.js";
+import QrCode_module_default from "./QrCode.module.js";
+import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/QrCode/QrCode.tsx
+/** Share of the punch-out the mark fills, leaving paper around it. */
+var LOGO_FILL = .72;
+/**
+* Snap the painted width down to a whole number of DEVICE pixels per module.
+*
+* A QR symbol only looks sharp when one module maps to an integer number of
+* device pixels. It otherwise loses either way: `shape-rendering: crispEdges`
+* snaps alternate modules to different widths (measured 4.878px/module
+* rendering as a mix of 4px and 5px — a 20% jitter across the grid), while
+* default antialiasing keeps the geometry even but spends most of a pixel
+* blending every edge. Both read as a blurry code.
+*
+* So the component measures the box the parent gave it and paints the largest
+* exact multiple that fits, centred, with the shortfall showing as a slightly
+* wider quiet zone. The shortfall is up to ONE MODULE — `side / dpr` CSS px,
+* not a fraction of a pixel — which is why `snapWidth` refuses the trade past
+* a bounded share of the box.
+*
+* Returns `null` when it cannot measure (SSR, jsdom, a zero-width container,
+* a box too small for even 1px per module) or when snapping would cost more
+* than `snapWidth`'s budget; callers fall back to fluid `width: 100%` without
+* `crispEdges`, which is the correct behaviour when the premise does not hold.
+*/
+function useSnappedWidth(side) {
+	const hostRef = useRef(null);
+	const [width, setWidth] = useState(null);
+	const [dpr, setDpr] = useState(() => globalThis.devicePixelRatio || 1);
+	useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (!host || side <= 0) return;
+		const recompute = () => {
+			const ratio = window.devicePixelRatio || 1;
+			setDpr(ratio);
+			setWidth(snapWidth(host.getBoundingClientRect().width, side, ratio));
+		};
+		recompute();
+		const cleanups = [];
+		if (typeof ResizeObserver !== "undefined") {
+			const observer = new ResizeObserver(recompute);
+			observer.observe(host);
+			cleanups.push(() => observer.disconnect());
+		}
+		if (typeof window.matchMedia === "function") {
+			const query = window.matchMedia(`(resolution: ${dpr}dppx)`);
+			query.addEventListener("change", recompute);
+			cleanups.push(() => query.removeEventListener("change", recompute));
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	}, [side, dpr]);
+	return [hostRef, width];
+}
+/**
+* A scannable, theme-following QR code that fills its container; clicking swaps ink and paper.
+* @see docs/components/QrCode.md
+*/
+var QrCode = forwardRef(function QrCode({ value, logo, level, className, style, onClick, title, "aria-label": ariaLabel, ...props }, ref) {
+	const t = useTranslation();
+	const [inverted, setInverted] = useState(false);
+	const hasLogo = Boolean(logo);
+	const resolvedLevel = level ?? (hasLogo ? "H" : "M");
+	const matrix = useMemo(() => encodeQr(value, resolvedLevel), [value, resolvedLevel]);
+	const [hostRef, snappedWidth] = useSnappedWidth(matrix?.side ?? 0);
+	const rootRef = useMemo(() => mergeRefs(ref, hostRef), [ref, hostRef]);
+	if (matrix === null) return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref: rootRef,
+		type: "button",
+		disabled: true,
+		className: clsx(QrCode_module_default.root, QrCode_module_default.error, className),
+		style,
+		title,
+		children: ariaLabel ? `${ariaLabel} — ${t("qrCode.error")}` : t("qrCode.error")
+	});
+	const { side, path, punch } = matrix;
+	const offset = (side - punch) / 2;
+	const logoVars = logo ? {
+		"--qr-logo-src": cssUrl(logo),
+		"--qr-logo-size": `${punch * LOGO_FILL / side * 100}%`
+	} : void 0;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref: rootRef,
+		type: "button",
+		"aria-pressed": inverted,
+		"aria-label": ariaLabel || t("qrCode.label"),
+		title: title || t("qrCode.invertHint"),
+		className: clsx(QrCode_module_default.root, inverted && QrCode_module_default.inverted, className),
+		style: {
+			...logoVars,
+			...style
+		},
+		onClick: (event) => {
+			setInverted((current) => !current);
+			onClick?.(event);
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			className: QrCode_module_default.frame,
+			style: { width: snappedWidth ?? "100%" },
+			children: [/* @__PURE__ */ jsxs("svg", {
+				className: QrCode_module_default.svg,
+				viewBox: `0 0 ${side} ${side}`,
+				shapeRendering: snappedWidth === null ? void 0 : "crispEdges",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						className: QrCode_module_default.paper,
+						width: side,
+						height: side
+					}),
+					/* @__PURE__ */ jsx("path", {
+						className: QrCode_module_default.ink,
+						d: path
+					}),
+					hasLogo && /* @__PURE__ */ jsx("rect", {
+						className: QrCode_module_default.paper,
+						x: offset,
+						y: offset,
+						width: punch,
+						height: punch
+					})
+				]
+			}), hasLogo && /* @__PURE__ */ jsx("span", {
+				className: QrCode_module_default.logo,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+});
+export { QrCode };