@mitcsutt/kiln-ui 0.6.0 → 0.8.0

package/dist/components/actions/CopyButton/CopyButton.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../Button/index.js';
+/** What a `CopyButton` render function receives. */
+export interface CopyButtonRenderProps {
+    /** Copy `value` now. */
+    copy: () => void;
+    /** `true` for `timeout` ms after a successful copy. */
+    copied: boolean;
+    /** Why the last copy failed, for `timeout` ms after it. */
+    error: Error | null;
+}
+export interface CopyButtonProps extends Omit<ButtonProps, 'value' | 'children' | 'onCopy' | 'onError' | 'leadingIcon' | 'trailingIcon' | 'asChild'> {
+    /** The text to copy, or a function that returns it when the button is pressed. */
+    value: string | (() => string);
+    /** The button's name, and its tooltip. Say what it copies: "Copy link". Default "Copy". */
+    label?: string;
+    /** Shown for a moment after a copy. Default "Copied". */
+    copiedLabel?: string;
+    /** Shown for a moment when a copy fails. Default "Couldn’t copy". */
+    failedLabel?: string;
+    /** Show `label` as text beside the glyph, instead of an icon-only button with a tooltip. */
+    showLabel?: boolean;
+    /** What screen readers hear after a copy. Default "Copied to clipboard". */
+    announcement?: string;
+    /** How long the copied state lasts, in ms. Default `1500`. */
+    timeout?: number;
+    /** Called with the copied text: raise a toast, log an event. */
+    onCopy?: (text: string) => void;
+    /** Called when the copy fails. */
+    onError?: (error: Error) => void;
+    /**
+     * Your own trigger instead of the button: a function that gets `copy`, `copied` and `error`.
+     * The announcement for screen readers is still rendered for you.
+     */
+    children?: (state: CopyButtonRenderProps) => ReactNode;
+}
+/**
+ * A button that copies text, says so, and swaps its glyph to a check for a moment.
+ *
+ * @remarks
+ * `CopyButton` copies a link, an ID, a command or a token. By default it's an icon-only
+ * {@link IconButton | IconButton} with a tooltip that reads "Copy", then "Copied". `showLabel`
+ * makes it a {@link Button | Button} with the words beside the glyph. `value` can be a function,
+ * to compute the text at the moment of the press (say, serialising the current state).
+ *
+ * Screen readers hear "Copied to clipboard" through a polite live region, and the button keeps its
+ * name. If the copy fails, the button and the announcement say so, and `onError` gets the reason.
+ * On a page without the Clipboard API, such as one served over plain HTTP, it falls back to the
+ * older way of copying, so it works wherever copying can.
+ *
+ * For a trigger of your own, pass a function as `children`, or use {@link useClipboard |
+ * useClipboard} directly.
+ *
+ * @privateRemarks
+ * Built on useClipboard, which CodeBlock's copy button uses too, so there's one copy path. The
+ * tooltip is held open while `copied` is set, because Radix closes it on the press itself.
+ */
+export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/actions/CopyButton/CopyButton.js

@@ -0,0 +1,63 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t, CopyIcon as n } from "../../../icons/icons.js";
+import { Button as r } from "../Button/Button.js";
+import { IconButton as i } from "../IconButton/IconButton.js";
+import { Tooltip as a } from "../../overlays/Tooltip/Tooltip.js";
+import { useClipboard as o } from "./useClipboard.js";
+import s from "./CopyButton.module.js";
+import { forwardRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/actions/CopyButton/CopyButton.tsx
+var p = c(function({ value: c, label: p = "Copy", copiedLabel: m = "Copied", failedLabel: h = "Couldn’t copy", showLabel: g = !1, announcement: _ = "Copied to clipboard", timeout: v = 1500, onCopy: y, onError: b, children: x, onClick: S, className: C, variant: w = "ghost", tone: T = "neutral", size: E, ...D }, O) {
+	let { copy: k, copied: A, error: j } = o({
+		timeout: v,
+		onCopy: y,
+		onError: b
+	}), [M, N] = l(!1), P = A ? "copied" : j ? "failed" : "idle", F = A ? m : j ? h : p, I = () => {
+		k(c);
+	}, L = /* @__PURE__ */ d("span", {
+		className: s.status,
+		role: "status",
+		children: A ? _ : j ? h : ""
+	});
+	if (x) return /* @__PURE__ */ f(u, { children: [x({
+		copy: I,
+		copied: A,
+		error: j
+	}), L] });
+	let R = (e) => {
+		S?.(e), e.defaultPrevented || I();
+	}, z = d(A ? t : n, {});
+	return /* @__PURE__ */ f(u, { children: [g ? /* @__PURE__ */ d(r, {
+		ref: O,
+		variant: w,
+		tone: T,
+		size: E,
+		className: e(s.copyButton, C),
+		leadingIcon: z,
+		"data-state": P,
+		onClick: R,
+		...D,
+		children: F
+	}) : /* @__PURE__ */ d(a, {
+		content: F,
+		open: M || P !== "idle",
+		onOpenChange: N,
+		children: /* @__PURE__ */ d(i, {
+			ref: O,
+			variant: w,
+			tone: T,
+			size: E,
+			className: e(s.copyButton, C),
+			label: p,
+			icon: z,
+			"data-state": P,
+			onClick: R,
+			...D
+		})
+	}), L] });
+});
+//#endregion
+export { p as CopyButton };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/actions/CopyButton/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":["styles","_Fragment","CopyButton_module_default","Fragment$1","CopyButton","forwardRef","rest","useClipboard","hintOpen","setHintOpen","useState","state","copied","error","shown","copiedLabel","failedLabel","label","run","value","status","announcement","children","press","onClick","event","glyph","jsx","CheckIcon","CopyIcon","showLabel","Button","cx","className","Tooltip","IconButton"],"sources":["../../../../src/components/actions/CopyButton/CopyButton.tsx"],"sourcesContent":["import { forwardRef, useState, type ReactNode } from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport { Button, type ButtonProps } from '#components/actions/Button'\nimport { IconButton } from '#components/actions/IconButton'\nimport { Tooltip } from '#components/overlays/Tooltip'\nimport { useClipboard } from './useClipboard'\nimport styles from './CopyButton.module.css'\n\n/** What a `CopyButton` render function receives. */\nexport interface CopyButtonRenderProps {\n  /** Copy `value` now. */\n  copy: () => void\n  /** `true` for `timeout` ms after a successful copy. */\n  copied: boolean\n  /** Why the last copy failed, for `timeout` ms after it. */\n  error: Error | null\n}\n\nexport interface CopyButtonProps extends Omit<\n  ButtonProps,\n  'value' | 'children' | 'onCopy' | 'onError' | 'leadingIcon' | 'trailingIcon' | 'asChild'\n> {\n  /** The text to copy, or a function that returns it when the button is pressed. */\n  value: string | (() => string)\n  /** The button's name, and its tooltip. Say what it copies: \"Copy link\". Default \"Copy\". */\n  label?: string\n  /** Shown for a moment after a copy. Default \"Copied\". */\n  copiedLabel?: string\n  /** Shown for a moment when a copy fails. Default \"Couldn’t copy\". */\n  failedLabel?: string\n  /** Show `label` as text beside the glyph, instead of an icon-only button with a tooltip. */\n  showLabel?: boolean\n  /** What screen readers hear after a copy. Default \"Copied to clipboard\". */\n  announcement?: string\n  /** How long the copied state lasts, in ms. Default `1500`. */\n  timeout?: number\n  /** Called with the copied text: raise a toast, log an event. */\n  onCopy?: (text: string) => void\n  /** Called when the copy fails. */\n  onError?: (error: Error) => void\n  /**\n   * Your own trigger instead of the button: a function that gets `copy`, `copied` and `error`.\n   * The announcement for screen readers is still rendered for you.\n   */\n  children?: (state: CopyButtonRenderProps) => ReactNode\n}\n\n/**\n * A button that copies text, says so, and swaps its glyph to a check for a moment.\n *\n * @remarks\n * `CopyButton` copies a link, an ID, a command or a token. By default it's an icon-only\n * {@link IconButton | IconButton} with a tooltip that reads \"Copy\", then \"Copied\". `showLabel`\n * makes it a {@link Button | Button} with the words beside the glyph. `value` can be a function,\n * to compute the text at the moment of the press (say, serialising the current state).\n *\n * Screen readers hear \"Copied to clipboard\" through a polite live region, and the button keeps its\n * name. If the copy fails, the button and the announcement say so, and `onError` gets the reason.\n * On a page without the Clipboard API, such as one served over plain HTTP, it falls back to the\n * older way of copying, so it works wherever copying can.\n *\n * For a trigger of your own, pass a function as `children`, or use {@link useClipboard |\n * useClipboard} directly.\n *\n * @privateRemarks\n * Built on useClipboard, which CodeBlock's copy button uses too, so there's one copy path. The\n * tooltip is held open while `copied` is set, because Radix closes it on the press itself.\n */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    label = 'Copy',\n    copiedLabel = 'Copied',\n    failedLabel = 'Couldn’t copy',\n    showLabel = false,\n    announcement = 'Copied to clipboard',\n    timeout = 1500,\n    onCopy,\n    onError,\n    children,\n    onClick,\n    className,\n    variant = 'ghost',\n    tone = 'neutral',\n    size,\n    ...rest\n  },\n  ref,\n) {\n  const { copy, copied, error } = useClipboard({ timeout, onCopy, onError })\n  const [hintOpen, setHintOpen] = useState(false)\n  const state = copied ? 'copied' : error ? 'failed' : 'idle'\n  const shown = copied ? copiedLabel : error ? failedLabel : label\n  const run = () => {\n    void copy(value)\n  }\n  const status = (\n    <span className={styles.status} role=\"status\">\n      {copied ? announcement : error ? failedLabel : ''}\n    </span>\n  )\n\n  if (children) {\n    return (\n      <>\n        {children({ copy: run, copied, error })}\n        {status}\n      </>\n    )\n  }\n\n  const press: ButtonProps['onClick'] = (event) => {\n    onClick?.(event)\n    if (!event.defaultPrevented) run()\n  }\n  const glyph = copied ? <CheckIcon /> : <CopyIcon />\n\n  return (\n    <>\n      {showLabel ? (\n        <Button\n          ref={ref}\n          variant={variant}\n          tone={tone}\n          size={size}\n          className={cx(styles.copyButton, className)}\n          leadingIcon={glyph}\n          data-state={state}\n          onClick={press}\n          {...rest}\n        >\n          {shown}\n        </Button>\n      ) : (\n        <Tooltip content={shown} open={hintOpen || state !== 'idle'} onOpenChange={setHintOpen}>\n          <IconButton\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            className={cx(styles.copyButton, className)}\n            label={label}\n            icon={glyph}\n            data-state={state}\n            onClick={press}\n            {...rest}\n          />\n        </Tooltip>\n      )}\n      {status}\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;AAqEA,IAAaI,IAAaC,EAA+C,SACvE,EACE,UACA,WAAQ,QACR,iBAAc,UACd,iBAAc,iBACd,eAAY,IACZ,kBAAe,uBACf,aAAU,MACV,WACA,YACA,aACA,YACA,cACA,aAAU,SACV,UAAO,WACP,SACA,GAAGC,KAEL,GACA;CACA,IAAM,EAAE,SAAM,WAAQ,aAAUC,EAAa;EAAE;EAAS;EAAQ;CAAQ,CAAC,GACnE,CAACC,GAAUC,KAAeC,EAAS,EAAK,GACxCC,IAAQC,IAAS,WAAWC,IAAQ,WAAW,QAC/CC,IAAQF,IAASG,IAAcF,IAAQG,IAAcC,GACrDC,UAAY;EAChB,EAAUC,CAAK;CACjB,GACMC,IACJ,kBAAC,QAAD;EAAM,WAAWpB,EAAO;EAAQ,MAAK;EAClC,UAAAY,IAASS,IAAeR,IAAQG,IAAc;CAC3C,CAAA;CAGR,IAAIM,GACF,OACE,kBAAArB,GAAA,EAAA,UAAA,CACGqB,EAAS;EAAE,MAAMJ;EAAK;EAAQ;CAAM,CAAC,GACrCE,CACD,EAAA,CAAA;CAIN,IAAMG,KAAiC,MAAU;EAE/C,AADAC,IAAUC,CAAK,GACVA,EAAM,oBAAkBP,EAAI;CACnC,GACMQ,IAAiBC,EAATf,IAAUgB,IAAgBC,GAAjB,CAAY,CAAe;CAElD,OACE,kBAAA5B,GAAA,EAAA,UAAA,CACG6B,IACC,kBAACC,GAAD;EACO;EACI;EACH;EACA;EACN,WAAWC,EAAGhC,EAAO,YAAYiC,CAAS;EAC1C,aAAaP;EACb,cAAYf;EACZ,SAASY;EACT,GAAIjB;EAEH,UAAAQ;CACK,CAAA,IAER,kBAACoB,GAAD;EAAS,SAASpB;EAAO,MAAMN,KAAYG,MAAU;EAAQ,cAAcF;EACzE,UAAA,kBAAC0B,GAAD;GACO;GACI;GACH;GACA;GACN,WAAWH,EAAGhC,EAAO,YAAYiC,CAAS;GACnC;GACP,MAAMP;GACN,cAAYf;GACZ,SAASY;GACT,GAAIjB;EACL,CAAA;CACM,CAAA,GAEVc,CACD,EAAA,CAAA;AAEN,CAAC"}

package/dist/components/actions/CopyButton/CopyButton.module.js

@@ -0,0 +1,9 @@
+//#region src/components/actions/CopyButton/CopyButton.module.css
+var e = "kiln-CopyButton__copyButton", t = "kiln-CopyButton__status", n = {
+	copyButton: e,
+	status: t
+};
+//#endregion
+export { e as copyButton, n as default, t as status };
+
+//# sourceMappingURL=CopyButton.module.js.map

package/dist/components/actions/CopyButton/CopyButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.module.js","names":["copyButton","status","CopyButton_module_default"],"sources":["../../../../src/components/actions/CopyButton/CopyButton.module.css"],"sourcesContent":["/*\n * No component tokens: the button is a Button or IconButton, themed through theirs.\n * After a copy the glyph and label of a ghost or outline button take the positive text colour,\n * and a failure the critical. A solid button keeps its ink, which those wouldn't clear.\n */\n.copyButton[data-state='copied']:not([data-variant='solid']) {\n  color: var(--tone-positive-text);\n}\n.copyButton[data-state='failed']:not([data-variant='solid']) {\n  color: var(--tone-critical-text);\n}\n\n.status {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/actions/CopyButton/index.d.ts

@@ -0,0 +1,4 @@
+export { CopyButton } from './CopyButton.js';
+export type { CopyButtonProps, CopyButtonRenderProps } from './CopyButton.js';
+export { useClipboard } from './useClipboard.js';
+export type { UseClipboardOptions, UseClipboardResult } from './useClipboard.js';

package/dist/components/actions/CopyButton/useClipboard.d.ts

@@ -0,0 +1,35 @@
+export interface UseClipboardOptions {
+    /** How long `copied` (or `error`) stays set after a copy, in ms. Default `1500`. */
+    timeout?: number;
+    /** Called with the text once it's on the clipboard: raise a toast, log an event. */
+    onCopy?: (text: string) => void;
+    /** Called when the copy fails, with the reason. */
+    onError?: (error: Error) => void;
+}
+export interface UseClipboardResult {
+    /**
+     * Copies `value`, or what `value()` returns at the moment of the call. Resolves to `true` once
+     * the text is on the clipboard, or `false` if it couldn't be copied.
+     */
+    copy: (value: string | (() => string)) => Promise<boolean>;
+    /** `true` for `timeout` ms after a successful copy. */
+    copied: boolean;
+    /** Why the last copy failed, for `timeout` ms after it. `null` otherwise. */
+    error: Error | null;
+    /** Clear `copied` and `error` now. */
+    reset: () => void;
+}
+/**
+ * Copy text to the clipboard from any trigger, with a `copied` state that clears itself and an
+ * `error` when the copy fails.
+ *
+ * @remarks
+ * `useClipboard` is what {@link CopyButton | CopyButton} is made of: use it when the trigger is
+ * your own, like a menu item or a whole row. It uses the Clipboard API, and falls back to the
+ * older `execCommand('copy')` where that's missing (a page served over plain HTTP) or refused, so
+ * a copy works wherever it can and says so when it can't.
+ *
+ * Copying is silent to screen readers. If your trigger doesn't say what happened, announce it,
+ * the way `CopyButton` does with a polite live region.
+ */
+export declare function useClipboard({ timeout, onCopy, onError, }?: UseClipboardOptions): UseClipboardResult;

package/dist/components/actions/CopyButton/useClipboard.js

@@ -0,0 +1,62 @@
+import { useLatest as e } from "../../inputs/internal/useLatest.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+//#region src/components/actions/CopyButton/useClipboard.ts
+function a(e) {
+	if (typeof document > "u" || typeof document.execCommand != "function") return !1;
+	let t = document.activeElement, n = document.getSelection(), r = n && n.rangeCount > 0 ? n.getRangeAt(0) : null, i = document.createElement("textarea");
+	i.value = e, i.setAttribute("readonly", ""), i.setAttribute("aria-hidden", "true"), i.style.position = "fixed", i.style.insetBlockStart = "0", i.style.opacity = "0", i.style.pointerEvents = "none", document.body.append(i), i.select();
+	let a;
+	try {
+		a = document.execCommand("copy");
+	} catch {
+		a = !1;
+	}
+	return i.remove(), r && n && (n.removeAllRanges(), n.addRange(r)), t instanceof HTMLElement && t.focus({ preventScroll: !0 }), a;
+}
+async function o(e) {
+	let t = typeof navigator > "u" ? void 0 : navigator.clipboard;
+	if (t?.writeText) try {
+		await t.writeText(e);
+		return;
+	} catch (t) {
+		if (a(e)) return;
+		throw t instanceof Error ? t : /* @__PURE__ */ Error("The clipboard refused the text.");
+	}
+	if (!a(e)) throw Error("This browser can’t copy to the clipboard.");
+}
+function s({ timeout: a = 1500, onCopy: s, onError: c } = {}) {
+	let [l, u] = i(!1), [d, f] = i(null), p = r(void 0), m = e({
+		onCopy: s,
+		onError: c,
+		timeout: a
+	});
+	n(() => () => {
+		clearTimeout(p.current);
+	}, []);
+	let h = t(() => {
+		clearTimeout(p.current), u(!1), f(null);
+	}, []);
+	return {
+		copy: t(async (e) => {
+			clearTimeout(p.current);
+			let { onCopy: t, onError: n, timeout: r } = m.current, i;
+			try {
+				let n = typeof e == "function" ? e() : e;
+				await o(n), u(!0), f(null), t?.(n), i = !0;
+			} catch (e) {
+				let t = e instanceof Error ? e : Error(String(e));
+				u(!1), f(t), n?.(t), i = !1;
+			}
+			return p.current = setTimeout(() => {
+				u(!1), f(null);
+			}, r), i;
+		}, [m]),
+		copied: l,
+		error: d,
+		reset: h
+	};
+}
+//#endregion
+export { s as useClipboard };
+
+//# sourceMappingURL=useClipboard.js.map

package/dist/components/actions/CopyButton/useClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.js","names":["copyWithTextarea","active","selection","range","area","text","ok","writeClipboard","clipboard","reason","useClipboard","copied","setCopied","useState","error","setError","timer","useRef","callbacks","useLatest","reset","useCallback","done","failed","wait","value","problem"],"sources":["../../../../src/components/actions/CopyButton/useClipboard.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { useLatest } from '#components/inputs/internal/useLatest'\n\nexport interface UseClipboardOptions {\n  /** How long `copied` (or `error`) stays set after a copy, in ms. Default `1500`. */\n  timeout?: number\n  /** Called with the text once it's on the clipboard: raise a toast, log an event. */\n  onCopy?: (text: string) => void\n  /** Called when the copy fails, with the reason. */\n  onError?: (error: Error) => void\n}\n\nexport interface UseClipboardResult {\n  /**\n   * Copies `value`, or what `value()` returns at the moment of the call. Resolves to `true` once\n   * the text is on the clipboard, or `false` if it couldn't be copied.\n   */\n  copy: (value: string | (() => string)) => Promise<boolean>\n  /** `true` for `timeout` ms after a successful copy. */\n  copied: boolean\n  /** Why the last copy failed, for `timeout` ms after it. `null` otherwise. */\n  error: Error | null\n  /** Clear `copied` and `error` now. */\n  reset: () => void\n}\n\n/**\n * Copies with a hidden textarea and `execCommand('copy')`: the path for pages without the\n * Clipboard API (served over plain HTTP) or where it's refused. Keeps the reader's focus and\n * selection.\n */\nfunction copyWithTextarea(text: string): boolean {\n  // execCommand is deprecated, but it's the only way to copy where the Clipboard API is missing.\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- the fallback, see above\n  if (typeof document === 'undefined' || typeof document.execCommand !== 'function') return false\n  const active = document.activeElement\n  const selection = document.getSelection()\n  const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null\n  const area = document.createElement('textarea')\n  area.value = text\n  area.setAttribute('readonly', '')\n  area.setAttribute('aria-hidden', 'true')\n  area.style.position = 'fixed'\n  area.style.insetBlockStart = '0'\n  area.style.opacity = '0'\n  area.style.pointerEvents = 'none'\n  document.body.append(area)\n  area.select()\n  let ok: boolean\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- the fallback, see above\n    ok = document.execCommand('copy')\n  } catch {\n    ok = false\n  }\n  area.remove()\n  if (range && selection) {\n    selection.removeAllRanges()\n    selection.addRange(range)\n  }\n  if (active instanceof HTMLElement) active.focus({ preventScroll: true })\n  return ok\n}\n\n/** Writes `text` to the clipboard, through the Clipboard API where it's available. */\nasync function writeClipboard(text: string): Promise<void> {\n  const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard\n  // `navigator.clipboard` is missing in insecure contexts and older browsers.\n  if (clipboard?.writeText) {\n    try {\n      await clipboard.writeText(text)\n      return\n    } catch (reason) {\n      if (copyWithTextarea(text)) return\n      throw reason instanceof Error ? reason : new Error('The clipboard refused the text.')\n    }\n  }\n  if (!copyWithTextarea(text)) throw new Error('This browser can’t copy to the clipboard.')\n}\n\n/**\n * Copy text to the clipboard from any trigger, with a `copied` state that clears itself and an\n * `error` when the copy fails.\n *\n * @remarks\n * `useClipboard` is what {@link CopyButton | CopyButton} is made of: use it when the trigger is\n * your own, like a menu item or a whole row. It uses the Clipboard API, and falls back to the\n * older `execCommand('copy')` where that's missing (a page served over plain HTTP) or refused, so\n * a copy works wherever it can and says so when it can't.\n *\n * Copying is silent to screen readers. If your trigger doesn't say what happened, announce it,\n * the way `CopyButton` does with a polite live region.\n */\nexport function useClipboard({\n  timeout = 1500,\n  onCopy,\n  onError,\n}: UseClipboardOptions = {}): UseClipboardResult {\n  const [copied, setCopied] = useState(false)\n  const [error, setError] = useState<Error | null>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const callbacks = useLatest({ onCopy, onError, timeout })\n\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  const reset = useCallback(() => {\n    clearTimeout(timer.current)\n    setCopied(false)\n    setError(null)\n  }, [])\n\n  const copy = useCallback(\n    async (value: string | (() => string)) => {\n      clearTimeout(timer.current)\n      const { onCopy: done, onError: failed, timeout: wait } = callbacks.current\n      let ok: boolean\n      try {\n        const text = typeof value === 'function' ? value() : value\n        await writeClipboard(text)\n        setCopied(true)\n        setError(null)\n        done?.(text)\n        ok = true\n      } catch (reason) {\n        const problem = reason instanceof Error ? reason : new Error(String(reason))\n        setCopied(false)\n        setError(problem)\n        failed?.(problem)\n        ok = false\n      }\n      timer.current = setTimeout(() => {\n        setCopied(false)\n        setError(null)\n      }, wait)\n      return ok\n    },\n    [callbacks],\n  )\n\n  return { copy, copied, error, reset }\n}\n"],"mappings":";;;AA+BA,SAASA,EAAiB,GAAuB;CAG/C,IAAI,OAAO,WAAa,OAAe,OAAO,SAAS,eAAgB,YAAY,OAAO;CAC1F,IAAMC,IAAS,SAAS,eAClBC,IAAY,SAAS,aAAa,GAClCC,IAAQD,KAAaA,EAAU,aAAa,IAAIA,EAAU,WAAW,CAAC,IAAI,MAC1EE,IAAO,SAAS,cAAc,UAAU;CAS9C,AARA,EAAK,QAAQC,GACbD,EAAK,aAAa,YAAY,EAAE,GAChCA,EAAK,aAAa,eAAe,MAAM,GACvC,EAAK,MAAM,WAAW,SACtB,EAAK,MAAM,kBAAkB,KAC7B,EAAK,MAAM,UAAU,KACrB,EAAK,MAAM,gBAAgB,QAC3B,SAAS,KAAK,OAAOA,CAAI,GACzBA,EAAK,OAAO;CACZ,IAAIE;CACJ,IAAI;EAEF,IAAK,SAAS,YAAY,MAAM;CAClC,QAAQ;EACN,IAAK;CACP;CAOA,OANAF,EAAK,OAAO,GACRD,KAASD,MACXA,EAAU,gBAAgB,GAC1BA,EAAU,SAASC,CAAK,IAEtBF,aAAkB,eAAaA,EAAO,MAAM,EAAE,eAAe,GAAK,CAAC,GAChEK;AACT;AAGA,eAAeC,EAAe,GAA6B;CACzD,IAAMC,IAAY,OAAO,YAAc,MAAc,KAAA,IAAY,UAAU;CAE3E,IAAIA,GAAW,WACb,IAAI;EACF,MAAMA,EAAU,UAAUH,CAAI;EAC9B;CACF,SAASI,GAAQ;EACf,IAAIT,EAAiBK,CAAI,GAAG;EAC5B,MAAMI,aAAkB,QAAQA,IAAS,gBAAI,MAAM,iCAAiC;CACtF;CAEF,IAAI,CAACT,EAAiBK,CAAI,GAAG,MAAU,MAAM,2CAA2C;AAC1F;AAeA,SAAgBK,EAAa,EAC3B,aAAU,MACV,WACA,eACuB,CAAC,GAAuB;CAC/C,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK,GACpC,CAACC,GAAOC,KAAYF,EAAuB,IAAI,GAC/CG,IAAQC,EAAkD,KAAA,CAAS,GACnEC,IAAYC,EAAU;EAAE;EAAQ;EAAS;CAAQ,CAAC;CAExD,cACc;EACV,aAAaH,EAAM,OAAO;CAC5B,GACA,CAAC,CACH;CAEA,IAAMI,IAAQC,QAAkB;EAG9B,AAFA,aAAaL,EAAM,OAAO,GAC1BJ,EAAU,EAAK,GACfG,EAAS,IAAI;CACf,GAAG,CAAC,CAAC;CA8BL,OAAO;EAAE,MA5BIM,EACX,OAAO,MAAmC;GACxC,aAAaL,EAAM,OAAO;GAC1B,IAAM,EAAE,QAAQM,GAAM,SAASC,GAAQ,SAASC,MAASN,EAAU,SAC/DZ;GACJ,IAAI;IACF,IAAMD,IAAO,OAAOoB,KAAU,aAAaA,EAAM,IAAIA;IAKrD,AAJA,MAAMlB,EAAeF,CAAI,GACzBO,EAAU,EAAI,GACdG,EAAS,IAAI,GACbO,IAAOjB,CAAI,GACX,IAAK;GACP,SAASI,GAAQ;IACf,IAAMiB,IAAUjB,aAAkB,QAAQA,IAAa,MAAM,OAAOA,CAAM,CAAC;IAI3E,AAHAG,EAAU,EAAK,GACfG,EAASW,CAAO,GAChBH,IAASG,CAAO,GAChB,IAAK;GACP;GAKA,OAJA,EAAM,UAAU,iBAAiB;IAE/B,AADAd,EAAU,EAAK,GACfG,EAAS,IAAI;GACf,GAAGS,CAAI,GACAlB;EACT,GACA,CAACY,CAAS,CAGH;EAAM;EAAQ;EAAO;CAAM;AACtC"}

package/dist/components/actions/ToggleChip/ToggleChip.d.ts

@@ -1,8 +1,14 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { Toggle } from 'radix-ui';
+import { type SwatchColor } from '../../display/Swatch/index.js';
 export type ToggleChipSize = 'sm' | 'md';
 export interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {
     size?: ToggleChipSize;
+    /**
+     * A leading colour swatch, for a filter on something that has a colour: a team, a label, a
+     * chart series. A categorical slot (`1` to `8`) or a CSS colour from data.
+     */
+    swatch?: SwatchColor;
     /** A leading glyph. Keep it meaningful — one icon per row at most. */
     icon?: ReactNode;
     /** How many items the filter matches. Rendered in tabular figures after the label. */

package/dist/components/actions/ToggleChip/ToggleChip.js

@@ -1,38 +1,40 @@
 import { cx as e } from "../../../utils/cx.js";
-import t from "./chip.module.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Toggle as a } from "radix-ui";
+import { Swatch as t } from "../../display/Swatch/Swatch.js";
+import n from "./chip.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Toggle as o } from "radix-ui";
 //#region src/components/actions/ToggleChip/ToggleChip.tsx
-var o = n(function({ size: n = "md", icon: o, count: s, trailing: c, className: l, children: u, type: d, ...f }, p) {
-	return /* @__PURE__ */ i(a.Root, {
-		ref: p,
-		type: d ?? "button",
-		className: e(t.chip, l),
-		"data-size": n,
-		...f,
+var s = r(function({ size: r = "md", swatch: s, icon: c, count: l, trailing: u, className: d, children: f, type: p, ...m }, h) {
+	return /* @__PURE__ */ a(o.Root, {
+		ref: h,
+		type: p ?? "button",
+		className: e(n.chip, d),
+		"data-size": r,
+		...m,
 		children: [
-			o ? /* @__PURE__ */ r("span", {
-				className: t.icon,
+			s === void 0 ? null : /* @__PURE__ */ i(t, { color: s }),
+			c ? /* @__PURE__ */ i("span", {
+				className: n.icon,
 				"aria-hidden": "true",
-				children: o
+				children: c
 			}) : null,
-			/* @__PURE__ */ r("span", {
-				className: t.label,
-				children: u
+			/* @__PURE__ */ i("span", {
+				className: n.label,
+				children: f
 			}),
-			c === void 0 ? null : /* @__PURE__ */ r("span", {
-				className: t.trailing,
-				children: c
+			u === void 0 ? null : /* @__PURE__ */ i("span", {
+				className: n.trailing,
+				children: u
 			}),
-			s === void 0 ? null : /* @__PURE__ */ r("span", {
-				className: t.count,
-				children: s
+			l === void 0 ? null : /* @__PURE__ */ i("span", {
+				className: n.count,
+				children: l
 			})
 		]
 	});
 });
 //#endregion
-export { o as ToggleChip };
+export { s as ToggleChip };
 
 //# sourceMappingURL=ToggleChip.js.map

package/dist/components/actions/ToggleChip/ToggleChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleChip.js","names":["styles","chip_module_default","ToggleChip","forwardRef","rest","Toggle","type","cx","className","size","icon","trailing","count"],"sources":["../../../../src/components/actions/ToggleChip/ToggleChip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Toggle } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './chip.module.css'\n\nexport type ToggleChipSize = 'sm' | 'md'\n\nexport interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {\n  size?: ToggleChipSize\n  /** A leading glyph. Keep it meaningful — one icon per row at most. */\n  icon?: ReactNode\n  /** How many items the filter matches. Rendered in tabular figures after the label. */\n  count?: number\n  /**\n   * Content after the label, spaced from it: an `AvatarGroup` of who reacted, a small figure.\n   * Keep it phrasing content, since the chip is a button.\n   */\n  trailing?: ReactNode\n}\n\n/**\n * An independent on-off filter that sits in a row with others, with an optional count.\n *\n * @remarks\n * A `ToggleChip` is a pressed or unpressed button, announced as a toggle (`aria-pressed`). Each\n * chip in a row is independent, so a row of them is a set of filters, not a choice of one. For a\n * set of chips that act together (one of, or several of, one field), use {@link ChipGroup |\n * ChipGroup}.\n *\n * @privateRemarks\n * A pressable filter chip — an on/off switch that reads as a word (\"Mine\", \"Overdue\n * only\"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use\n * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.\n *\n * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow\n * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.\n */\nexport const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(function ToggleChip(\n  { size = 'md', icon, count, trailing, className, children, type, ...rest },\n  ref,\n) {\n  return (\n    <Toggle.Root\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(styles.chip, className)}\n      data-size={size}\n      {...rest}\n    >\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {trailing !== undefined ? <span className={styles.trailing}>{trailing}</span> : null}\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </Toggle.Root>\n  )\n})\n"],"mappings":";;;;;;AAqCA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,MAAM,SAAM,UAAO,aAAU,cAAW,aAAU,SAAM,GAAGC,KACpE,GACA;CACA,OACE,kBAACC,EAAO,MAAR;EACO;EACL,MAAMC,KAAQ;EACd,WAAWC,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,GAAIL;EALN,UAAA;GAOGM,IACC,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAM,eAAY;IACvC,UAAAU;GACG,CAAA,IACJ;GACJ,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAQ;GAAe,CAAA;GAC9CW,MAAa,KAAA,IAAkE,OAAtD,kBAAC,QAAD;IAAM,WAAWX,EAAO;IAAW,UAAAW;GAAe,CAAA;GAC3EC,MAAU,KAAA,IAA4D,OAAhD,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAQ,UAAAY;GAAY,CAAA;EACxD;;AAEjB,CAAC"}
+{"version":3,"file":"ToggleChip.js","names":["styles","chip_module_default","ToggleChip","forwardRef","rest","Toggle","type","cx","className","size","swatch","Swatch","icon","trailing","count"],"sources":["../../../../src/components/actions/ToggleChip/ToggleChip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Toggle } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { Swatch, type SwatchColor } from '#components/display/Swatch'\nimport styles from './chip.module.css'\n\nexport type ToggleChipSize = 'sm' | 'md'\n\nexport interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {\n  size?: ToggleChipSize\n  /**\n   * A leading colour swatch, for a filter on something that has a colour: a team, a label, a\n   * chart series. A categorical slot (`1` to `8`) or a CSS colour from data.\n   */\n  swatch?: SwatchColor\n  /** A leading glyph. Keep it meaningful — one icon per row at most. */\n  icon?: ReactNode\n  /** How many items the filter matches. Rendered in tabular figures after the label. */\n  count?: number\n  /**\n   * Content after the label, spaced from it: an `AvatarGroup` of who reacted, a small figure.\n   * Keep it phrasing content, since the chip is a button.\n   */\n  trailing?: ReactNode\n}\n\n/**\n * An independent on-off filter that sits in a row with others, with an optional count.\n *\n * @remarks\n * A `ToggleChip` is a pressed or unpressed button, announced as a toggle (`aria-pressed`). Each\n * chip in a row is independent, so a row of them is a set of filters, not a choice of one. For a\n * set of chips that act together (one of, or several of, one field), use {@link ChipGroup |\n * ChipGroup}.\n *\n * @privateRemarks\n * A pressable filter chip — an on/off switch that reads as a word (\"Mine\", \"Overdue\n * only\"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use\n * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.\n *\n * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow\n * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.\n */\nexport const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(function ToggleChip(\n  { size = 'md', swatch, icon, count, trailing, className, children, type, ...rest },\n  ref,\n) {\n  return (\n    <Toggle.Root\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(styles.chip, className)}\n      data-size={size}\n      {...rest}\n    >\n      {swatch !== undefined ? <Swatch color={swatch} /> : null}\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {trailing !== undefined ? <span className={styles.trailing}>{trailing}</span> : null}\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </Toggle.Root>\n  )\n})\n"],"mappings":";;;;;;;AA2CA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,MAAM,WAAQ,SAAM,UAAO,aAAU,cAAW,aAAU,SAAM,GAAGC,KAC5E,GACA;CACA,OACE,kBAACC,EAAO,MAAR;EACO;EACL,MAAMC,KAAQ;EACd,WAAWC,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,GAAIL;EALN,UAAA;GAOGM,MAAW,KAAA,IAAwC,OAA5B,kBAACC,GAAD,EAAQ,OAAOD,EAAS,CAAA;GAC/CE,IACC,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAM,eAAY;IACvC,UAAAY;GACG,CAAA,IACJ;GACJ,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAQ;GAAe,CAAA;GAC9Ca,MAAa,KAAA,IAAkE,OAAtD,kBAAC,QAAD;IAAM,WAAWb,EAAO;IAAW,UAAAa;GAAe,CAAA;GAC3EC,MAAU,KAAA,IAA4D,OAAhD,kBAAC,QAAD;IAAM,WAAWd,EAAO;IAAQ,UAAAc;GAAY,CAAA;EACxD;;AAEjB,CAAC"}

package/dist/components/display/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from 'react';
 import type { Tone } from '../../../utils/tokens.js';
+import { type SwatchColor } from '../Swatch/index.js';
 export type BadgeVariant = 'soft' | 'solid' | 'outline';
 export type BadgeSize = 'sm' | 'md';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -10,6 +11,11 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     size?: BadgeSize;
     /** Leading status dot in the tone colour. Decorative — the label carries the meaning. */
     dot?: boolean;
+    /**
+     * A leading colour swatch that says who or what the badge is about: a team, a label, a series.
+     * A categorical slot (`1` to `8`) or a CSS colour from data. Takes the place of `dot`.
+     */
+    swatch?: SwatchColor;
 }
 /**
  * A short word or count that says what state something is in. Live, delayed, 3 new.

package/dist/components/display/Badge/Badge.js

@@ -1,23 +1,24 @@
 import { cx as e } from "../../../utils/cx.js";
-import t from "./Badge.module.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Swatch as t } from "../Swatch/Swatch.js";
+import n from "./Badge.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/display/Badge/Badge.tsx
-var a = n(function({ tone: n = "neutral", variant: a = "soft", size: o = "sm", dot: s = !1, className: c, children: l, ...u }, d) {
-	return /* @__PURE__ */ i("span", {
-		ref: d,
-		className: e(t.badge, c),
-		"data-tone": n,
-		"data-variant": a,
-		"data-size": o,
-		...u,
-		children: [s ? /* @__PURE__ */ r("span", {
-			className: t.dot,
+var o = r(function({ tone: r = "neutral", variant: o = "soft", size: s = "sm", dot: c = !1, swatch: l, className: u, children: d, ...f }, p) {
+	return /* @__PURE__ */ a("span", {
+		ref: p,
+		className: e(n.badge, u),
+		"data-tone": r,
+		"data-variant": o,
+		"data-size": s,
+		...f,
+		children: [l === void 0 ? c ? /* @__PURE__ */ i("span", {
+			className: n.dot,
 			"aria-hidden": "true"
-		}) : null, l]
+		}) : null : /* @__PURE__ */ i(t, { color: l }), d]
 	});
 });
 //#endregion
-export { a as Badge };
+export { o as Badge };
 
 //# sourceMappingURL=Badge.js.map

package/dist/components/display/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["styles","Badge_module_default","Badge","forwardRef","rest","cx","className","tone","variant","size","dot","children"],"sources":["../../../../src/components/display/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport styles from './Badge.module.css'\n\nexport type BadgeVariant = 'soft' | 'solid' | 'outline'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Status colour. `neutral` for plain counts and labels. Default `neutral`. */\n  tone?: Tone\n  /** `soft` (default) for most status; `solid` for the one that must be seen; `outline` for quiet. */\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Leading status dot in the tone colour. Decorative — the label carries the meaning. */\n  dot?: boolean\n}\n\n/**\n * A short word or count that says what state something is in. Live, delayed, 3 new.\n *\n * @remarks\n * A `Badge` is status: what state a thing is in right now. For categories and metadata (a line, a\n * facility, a topic) use a {@link Tag | Tag}, which is quieter.\n *\n * @privateRemarks\n * A short status or count: \"Live\", \"Over quota\", \"3 new\", \"Overdue\".\n * Metadata and categories are Tags; a Badge says what *state* something is in.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { tone = 'neutral', variant = 'soft', size = 'sm', dot = false, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.badge, className)}\n      data-tone={tone}\n      data-variant={variant}\n      data-size={size}\n      {...rest}\n    >\n      {dot ? <span className={styles.dot} aria-hidden=\"true\" /> : null}\n      {children}\n    </span>\n  )\n})\n"],"mappings":";;;;;AA6BA,IAAaE,IAAQC,EAAwC,SAC3D,EAAE,UAAO,WAAW,aAAU,QAAQ,UAAO,MAAM,SAAM,IAAO,cAAW,aAAU,GAAGC,KACxF,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,aAAWC;EACX,gBAAcC;EACd,aAAWC;EACX,GAAIL;EANN,UAAA,CAQGM,IAAM,kBAAC,QAAD;GAAM,WAAWV,EAAO;GAAK,eAAY;EAAQ,CAAA,IAAI,MAC3DW,CACG;;AAEV,CAAC"}
+{"version":3,"file":"Badge.js","names":["styles","Badge_module_default","Badge","forwardRef","rest","cx","className","tone","variant","size","swatch","dot","Swatch","children"],"sources":["../../../../src/components/display/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Tone } from '#utils/tokens'\nimport { Swatch, type SwatchColor } from '#components/display/Swatch'\nimport styles from './Badge.module.css'\n\nexport type BadgeVariant = 'soft' | 'solid' | 'outline'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Status colour. `neutral` for plain counts and labels. Default `neutral`. */\n  tone?: Tone\n  /** `soft` (default) for most status; `solid` for the one that must be seen; `outline` for quiet. */\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Leading status dot in the tone colour. Decorative — the label carries the meaning. */\n  dot?: boolean\n  /**\n   * A leading colour swatch that says who or what the badge is about: a team, a label, a series.\n   * A categorical slot (`1` to `8`) or a CSS colour from data. Takes the place of `dot`.\n   */\n  swatch?: SwatchColor\n}\n\n/**\n * A short word or count that says what state something is in. Live, delayed, 3 new.\n *\n * @remarks\n * A `Badge` is status: what state a thing is in right now. For categories and metadata (a line, a\n * facility, a topic) use a {@link Tag | Tag}, which is quieter.\n *\n * @privateRemarks\n * A short status or count: \"Live\", \"Over quota\", \"3 new\", \"Overdue\".\n * Metadata and categories are Tags; a Badge says what *state* something is in.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    tone = 'neutral',\n    variant = 'soft',\n    size = 'sm',\n    dot = false,\n    swatch,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.badge, className)}\n      data-tone={tone}\n      data-variant={variant}\n      data-size={size}\n      {...rest}\n    >\n      {swatch !== undefined ? (\n        <Swatch color={swatch} />\n      ) : dot ? (\n        <span className={styles.dot} aria-hidden=\"true\" />\n      ) : null}\n      {children}\n    </span>\n  )\n})\n"],"mappings":";;;;;;AAmCA,IAAaE,IAAQC,EAAwC,SAC3D,EACE,UAAO,WACP,aAAU,QACV,UAAO,MACP,SAAM,IACN,WACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,aAAWC;EACX,gBAAcC;EACd,aAAWC;EACX,GAAIL;EANN,UAAA,CAQGM,MAAW,KAAA,IAERC,IACF,kBAAC,QAAD;GAAM,WAAWX,EAAO;GAAK,eAAY;EAAQ,CAAA,IAC/C,OAHF,kBAACY,GAAD,EAAQ,OAAOF,EAAS,CAAA,GAIzBG,CACG;;AAEV,CAAC"}

package/dist/components/display/CodeBlock/CodeBlock.js

@@ -1,90 +1,77 @@
 import { cx as e } from "../../../utils/cx.js";
 import { CheckIcon as t, CopyIcon as n } from "../../../icons/icons.js";
 import { Button as r } from "../../actions/Button/Button.js";
-import { trimTrailingNewlines as i } from "../../../utils/newlines.js";
-import a from "./CodeBlock.module.js";
-import { forwardRef as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useClipboard as i } from "../../actions/CopyButton/useClipboard.js";
+import { trimTrailingNewlines as a } from "../../../utils/newlines.js";
+import o from "./CodeBlock.module.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/display/CodeBlock/CodeBlock.tsx
-var p = o(function({ code: o, language: p, tokens: m, title: h, showLineNumbers: g = !1, highlightLines: _, copyable: v = !0, wrap: y = !1, copyLabel: b = "Copy code", className: x, ...S }, C) {
-	let [w, T] = u("idle"), E = l(void 0), D = c(), O = i(o), k = O.split("\n"), A = m?.length === k.length && m.every((e, t) => e.map((e) => e.content).join("") === k[t]) ? m : void 0, j = new Set(_), M = !!h || !!p || v;
-	s(() => () => {
-		clearTimeout(E.current);
-	}, []);
-	let N = async () => {
-		clearTimeout(E.current);
-		try {
-			await navigator.clipboard.writeText(O), T("copied");
-		} catch {
-			T("failed");
-		}
-		E.current = setTimeout(() => {
-			T("idle");
-		}, 2e3);
-	};
-	return /* @__PURE__ */ f("figure", {
-		ref: C,
-		className: e(a.codeBlock, x),
+var d = s(function({ code: s, language: d, tokens: f, title: p, showLineNumbers: m = !1, highlightLines: h, copyable: g = !0, wrap: _ = !1, copyLabel: v = "Copy code", className: y, ...b }, x) {
+	let S = i({ timeout: 2e3 }), C = S.copied ? "copied" : S.error ? "failed" : "idle", w = c(), T = a(s), E = T.split("\n"), D = f?.length === E.length && f.every((e, t) => e.map((e) => e.content).join("") === E[t]) ? f : void 0, O = new Set(h), k = !!p || !!d || g;
+	return /* @__PURE__ */ u("figure", {
+		ref: x,
+		className: e(o.codeBlock, y),
 		"data-kiln-component": "",
-		"data-wrap": y || void 0,
-		"data-line-numbers": g || void 0,
-		"aria-labelledby": h ? D : void 0,
-		...S,
+		"data-wrap": _ || void 0,
+		"data-line-numbers": m || void 0,
+		"aria-labelledby": p ? w : void 0,
+		...b,
 		children: [
-			M ? /* @__PURE__ */ f("figcaption", {
-				className: a.header,
+			k ? /* @__PURE__ */ u("figcaption", {
+				className: o.header,
 				children: [
-					h ? /* @__PURE__ */ d("span", {
-						id: D,
-						className: a.title,
-						children: h
-					}) : null,
-					p ? /* @__PURE__ */ d("span", {
-						className: a.language,
+					p ? /* @__PURE__ */ l("span", {
+						id: w,
+						className: o.title,
 						children: p
 					}) : null,
-					v ? /* @__PURE__ */ d(r, {
+					d ? /* @__PURE__ */ l("span", {
+						className: o.language,
+						children: d
+					}) : null,
+					g ? /* @__PURE__ */ l(r, {
 						variant: "ghost",
 						tone: "neutral",
 						size: "sm",
-						className: a.copy,
-						leadingIcon: d(w === "copied" ? t : n, {}),
-						"aria-label": b,
+						className: o.copy,
+						leadingIcon: l(C === "copied" ? t : n, {}),
+						"aria-label": v,
 						onClick: () => {
-							N();
+							S.copy(T);
 						},
-						"data-state": w,
-						children: w === "copied" ? "Copied" : w === "failed" ? "Copy failed" : "Copy"
+						"data-state": C,
+						children: C === "copied" ? "Copied" : C === "failed" ? "Copy failed" : "Copy"
 					}) : null
 				]
 			}) : null,
-			/* @__PURE__ */ d("pre", {
-				className: a.pre,
+			/* @__PURE__ */ l("pre", {
+				className: o.pre,
 				tabIndex: 0,
-				children: /* @__PURE__ */ d("code", {
-					className: a.code,
-					children: k.map((e, t) => /* @__PURE__ */ f("span", {
-						className: a.line,
-						"data-line": g ? t + 1 : void 0,
-						"data-highlighted": j.has(t + 1) || void 0,
-						children: [A?.[t] ? A[t].map((e, t) => e.type ? /* @__PURE__ */ d("span", {
-							className: a.token,
+				children: /* @__PURE__ */ l("code", {
+					className: o.code,
+					children: E.map((e, t) => /* @__PURE__ */ u("span", {
+						className: o.line,
+						"data-line": m ? t + 1 : void 0,
+						"data-highlighted": O.has(t + 1) || void 0,
+						children: [D?.[t] ? D[t].map((e, t) => e.type ? /* @__PURE__ */ l("span", {
+							className: o.token,
 							"data-token": e.type,
 							children: e.content
-						}, t) : e.content) : e, t < k.length - 1 ? "\n" : null]
+						}, t) : e.content) : e, t < E.length - 1 ? "\n" : null]
 					}, t))
 				})
 			}),
-			v ? /* @__PURE__ */ d("span", {
-				className: a.visuallyHidden,
+			g ? /* @__PURE__ */ l("span", {
+				className: o.visuallyHidden,
 				role: "status",
 				"aria-live": "polite",
-				children: w === "copied" ? "Copied to clipboard" : w === "failed" ? "Copy failed" : ""
+				children: C === "copied" ? "Copied to clipboard" : C === "failed" ? "Copy failed" : ""
 			}) : null
 		]
 	});
 });
 //#endregion
-export { p as CodeBlock };
+export { d as CodeBlock };
 
 //# sourceMappingURL=CodeBlock.js.map