@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/confirm-dialog.d.ts

@@ -1,101 +1,165 @@
-import 'react';
-export { c9 as ConfirmDialogLabels, ca as ConfirmFn, cb as ConfirmOptions, cc as ConfirmProvider, cd as ConfirmProviderProps, ce as ConfirmTone, cu as DEFAULT_CONFIRM_DIALOG_LABELS, gd as useConfirm } from '../delete-account-setting-DAgGBrbn.js';
-import './write-lock.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
+import type { ReactNode } from "react";
+import type { TypedMatch } from "./danger-confirm.js";
+import { type CommitScope } from "./write-lock.js";
+import { DEFAULT_CONFIRM_DIALOG_LABELS } from "./confirm-dialog-labels.js";
+/**
+ * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
+ * text. A call that knows what it is confirming says so per call (`confirmLabel:
+ * "Delete budget"`), which is what the dialog is for — these are for the rest.
+ */
+export interface ConfirmDialogLabels {
+    confirm: string;
+    cancel: string;
+    /**
+     * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to
+     * type by default — where the address sits in the sentence moves with the language —
+     * or a finished STRING. A call's own `typedLabel` wins over it.
+     *
+     * Required, like every key of a namespace: the shipped catalogues
+     * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should
+     * hear about the new string from the compiler rather than show it in English.
+     */
+    typed: string | ((text: string) => string);
+}
+export { DEFAULT_CONFIRM_DIALOG_LABELS };
+export type ConfirmTone = "danger" | "warning" | "neutral";
+export interface ConfirmOptions {
+    /** The question, and the dialog's accessible name. */
+    title: ReactNode;
+    /** The smaller line under it — the consequence. Wired to `aria-describedby`. */
+    body?: ReactNode;
+    /** Default: `confirmDialog.confirm` from the provider, else "Confirm". */
+    confirmLabel?: ReactNode;
+    /** Default: `confirmDialog.cancel` from the provider, else "Cancel". */
+    cancelLabel?: ReactNode;
+    /**
+     * `"danger"` for what cannot be undone (a delete): the confirm is the destructive
+     * button and focus starts on CANCEL. `"warning"` and `"neutral"` (default) start on
+     * the confirm. See {@link ConfirmProvider} for why the two differ.
+     */
+    tone?: ConfirmTone;
+    /**
+     * 0.18: make the user TYPE this before confirm is enabled — the target account's
+     * e-mail address, a budget's name. For the action whose risk is not "did you mean
+     * it" but "is this the right row": an admin who deactivates somebody has already
+     * proven who THEY are (they passed the admin gate); typing the address is what
+     * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and
+     * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no
+     * field.
+     *
+     * The dialog then shows one text field under the body and focuses it (whatever the
+     * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm
+     * stays disabled until the text matches; Enter in the field confirms once it does.
+     * The answer is still `true` / `false` — the text matched what you passed, so send
+     * that to the server if it asks for the address too, not the user's spelling.
+     */
+    requireTyped?: string;
+    /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */
+    typedLabel?: string;
+    /**
+     * How the typed text is compared. Default `"caseless"`: surrounding spaces and case
+     * ignored, the rule both apps applied to an address. `"trim"` keeps case, `"exact"`
+     * keeps spaces too — for a phrase like "DELETE" whose contract is "exactly this".
+     */
+    typedMatch?: TypedMatch;
+    /**
+     * 0.31.1: the confirm button COMMITS, as `Button`'s `commit` does. Under a locked
+     * `WriteLockProvider` — read where `useConfirm` was called, not where the one dialog
+     * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a
+     * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the
+     * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).
+     *
+     * 0.33: a {@link CommitScope} — `confirm({ commit: COMMIT_EXCEPT_BILLING })` for a
+     * confirm a lapsed plan still allows (removing access, the account's own settings;
+     * docs/billing-harmonization.md §12.36).
+     */
+    commit?: CommitScope;
+}
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+/**
+ * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.
+ *
+ * The returned function is STABLE for the life of the provider, so it can sit in an
+ * effect's or a `useCallback`'s dependency list without re-running it.
+ *
+ * Throws outside a {@link ConfirmProvider}, rather than falling back to
+ * `window.confirm`: a silent fallback is exactly the native dialog the three apps are
+ * migrating away from, and it would look like the migration had worked.
+ */
+export declare function useConfirm(): ConfirmFn;
+export interface ConfirmProviderProps {
+    children: ReactNode;
+}
+/**
+ * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on
+ * {@link DialogFrame}, answering a promise.
+ *
+ * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,
+ * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel
+ * (those are the BROWSER's language, not the app's), cannot say which button is the
+ * destructive one, and on an installed PWA it prints the origin over the question.
+ * A promise is what lets each of those call sites change by one `await`:
+ *
+ *     if (!window.confirm(t("budget.delete_confirm"))) return;
+ *     // becomes
+ *     if (!(await confirm({ title: t("budget.delete_confirm"), tone: "danger" }))) return;
+ *
+ * ## Its own provider, not part of `UiKitProvider`
+ *
+ * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it
+ * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host
+ * per nested provider, and a component under the inner one would open a second dialog
+ * layer of its own. So the host is its own component, mounted once — inside the
+ * `UiKitProvider` whose strings it should speak, which is also the order the labels
+ * need.
+ *
+ * ## Focus
+ *
+ * On CANCEL for `tone: "danger"`, on CONFIRM otherwise. A confirm is often answered by
+ * a reflexive Enter — the key that pressed the Delete button in the first place may
+ * still be down — and for an action that cannot be undone that reflex must land on the
+ * harmless answer; `DangerConfirm` makes the same call ("never to the destructive
+ * button itself"). For everything else the confirm is the expected answer and Enter
+ * accepting it is what `window.confirm` taught users, which the migrating call sites'
+ * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.
+ *
+ * ## Escape, the backdrop, Back and Cancel all answer `false`
+ *
+ * Only the confirm button answers `true`. Anything that merely dismisses is a no.
+ *
+ * ## A second `confirm` while one is open QUEUES
+ *
+ * It is shown when the first is answered, and each call gets its own answer. The
+ * alternative — answering the open one `false` to make room — would answer a question
+ * the user never answered: a background prompt ("your session is about to expire")
+ * would cancel the delete they were reading. `false` has to mean "the user said no".
+ * A double-click cannot queue two of the same: the first click opens the modal
+ * synchronously (a discrete event's update is flushed before the next one), so the
+ * second lands on the open dialog rather than on the button — at worst on its
+ * backdrop, which answers `false`, the safe way to be wrong.
+ *
+ * Unmounting the provider answers everything still pending `false`, so no caller's
+ * `await` hangs forever.
+ *
+ * ## keksdose's synchronous call (transaction-swipe-plan.ts)
+ *
+ * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the
+ * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a
+ * thunk may be async without its caller knowing. So the plan builder stays
+ * synchronous; it takes the confirm as an argument and the thunk awaits it:
+ *
+ *     // mobile-transaction-list.tsx
+ *     const confirm = useConfirm();
+ *     buildTxSwipeActions({ tx, …, confirm });
+ *
+ *     // transaction-swipe-plan.ts
+ *     const confirmed = (messageKey: string, run: () => void) => () => {
+ *       void confirm({ title: t(messageKey), tone: "danger" }).then((ok) => ok && run());
+ *     };
+ *
+ * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the
+ * global, and asserts after an `await` (the mutation now runs a microtask later). The
+ * row snaps back when the swipe commits, before the answer — which is right: the
+ * dialog, not the half-swiped row, is where the question now is.
+ */
+export declare function ConfirmProvider({ children }: ConfirmProviderProps): import("react").JSX.Element;

package/dist/components/confirm-dialog.js

@@ -4,13 +4,9 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { TypedConfirmField, typedMatches } from "./danger-confirm.js";
 import { DialogFrame } from "./dialog-frame.js";
-import { Button } from "./ui.js";
+import { Button } from "./button.js";
 import { useWriteLock, writeLockFor } from "./write-lock.js";
-const DEFAULT_CONFIRM_DIALOG_LABELS = {
-  confirm: "Confirm",
-  cancel: "Cancel",
-  typed: (text) => `Type \u201C${text}\u201D to confirm`
-};
+import { DEFAULT_CONFIRM_DIALOG_LABELS } from "./confirm-dialog-labels.js";
 const ConfirmContext = createContext(null);
 function useConfirm() {
   const confirm = useContext(ConfirmContext);

package/dist/components/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TypedConfirmField, typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button } from \"./ui\";\nimport { useWriteLock, writeLockFor, type CommitScope } from \"./write-lock\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n  confirm: string;\n  cancel: string;\n  /**\n   * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n   * type by default — where the address sits in the sentence moves with the language —\n   * or a finished STRING. A call's own `typedLabel` wins over it.\n   *\n   * Required, like every key of a namespace: the shipped catalogues\n   * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n   * hear about the new string from the compiler rather than show it in English.\n   */\n  typed: string | ((text: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a\n *  caller composing its own label from it. */\nexport const DEFAULT_CONFIRM_DIALOG_LABELS = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n  typed: (text: string) => `Type “${text}” to confirm`,\n} satisfies ConfirmDialogLabels;\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n  /** The question, and the dialog's accessible name. */\n  title: ReactNode;\n  /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n  body?: ReactNode;\n  /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n  confirmLabel?: ReactNode;\n  /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /**\n   * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n   * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n   * the confirm. See {@link ConfirmProvider} for why the two differ.\n   */\n  tone?: ConfirmTone;\n  /**\n   * 0.18: make the user TYPE this before confirm is enabled — the target account's\n   * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n   * it\" but \"is this the right row\": an admin who deactivates somebody has already\n   * proven who THEY are (they passed the admin gate); typing the address is what\n   * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n   * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n   * field.\n   *\n   * The dialog then shows one text field under the body and focuses it (whatever the\n   * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n   * stays disabled until the text matches; Enter in the field confirms once it does.\n   * The answer is still `true` / `false` — the text matched what you passed, so send\n   * that to the server if it asks for the address too, not the user's spelling.\n   */\n  requireTyped?: string;\n  /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n  typedLabel?: string;\n  /**\n   * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n   * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n   * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n   */\n  typedMatch?: TypedMatch;\n  /**\n   * 0.31.1: the confirm button COMMITS, as `Button`'s `commit` does. Under a locked\n   * `WriteLockProvider` — read where `useConfirm` was called, not where the one dialog\n   * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a\n   * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the\n   * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).\n   *\n   * 0.33: a {@link CommitScope} — `confirm({ commit: COMMIT_EXCEPT_BILLING })` for a\n   * confirm a lapsed plan still allows (removing access, the account's own settings;\n   * docs/billing-harmonization.md §12.36).\n   */\n  commit?: CommitScope;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n  const confirm = useContext(ConfirmContext);\n  if (!confirm) {\n    throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n  }\n  // The lock of the CALLER's place: the dialog host usually sits above the app's\n  // `WriteLockProvider`, so it could not read the lock itself. Each call's own `commit`\n  // scope is applied to it when the call runs (`writeLockFor`, §12.36).\n  const lock = useWriteLock();\n  return useCallback(\n    (options: ConfirmOptions) => {\n      const scoped = writeLockFor(lock, options.commit);\n      return confirm(scoped.locked ? ({ ...options, lockReason: scoped.reason } as ConfirmOptions) : options);\n    },\n    [confirm, lock],\n  );\n}\n\ninterface Request extends ConfirmOptions {\n  id: number;\n  resolve: (answer: boolean) => void;\n  /** Set by {@link useConfirm} for a `commit` confirm under a locked provider. */\n  lockReason?: ReactNode;\n}\n\nexport interface ConfirmProviderProps {\n  children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n *     if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n *     // becomes\n *     if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n *     // mobile-transaction-list.tsx\n *     const confirm = useConfirm();\n *     buildTxSwipeActions({ tx, …, confirm });\n *\n *     // transaction-swipe-plan.ts\n *     const confirmed = (messageKey: string, run: () => void) => () => {\n *       void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n *     };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n  const [queue, setQueue] = useState<Request[]>([]);\n  const nextId = useRef(0);\n  // Every unanswered request, including the ones not yet in state — the unmount\n  // cleanup below must reach a request made in the same tick it unmounts.\n  const pending = useRef(new Set<Request>());\n\n  const confirm = useCallback<ConfirmFn>(\n    (options) =>\n      new Promise<boolean>((resolve) => {\n        const request: Request = { ...options, id: ++nextId.current, resolve };\n        pending.current.add(request);\n        setQueue((q) => [...q, request]);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    const open = pending.current;\n    return () => {\n      for (const r of open) r.resolve(false);\n      open.clear();\n    };\n  }, []);\n\n  const answer = useCallback((request: Request, value: boolean) => {\n    if (!pending.current.delete(request)) return;\n    request.resolve(value);\n    setQueue((q) => q.filter((r) => r !== request));\n  }, []);\n\n  const current = queue[0];\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {current && (\n        // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n        // hands focus back to the page, and the next one's captures that as its own\n        // restore target instead of a button that has just been unmounted.\n        <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\nfunction ConfirmDialogView({\n  request,\n  onAnswer,\n}: {\n  request: Request;\n  onAnswer: (request: Request, value: boolean) => void;\n}) {\n  const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n  const tone = request.tone ?? \"neutral\";\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const cancelRef = useRef<HTMLButtonElement>(null);\n  // Set by the confirm button, read once the panel has finished lowering. Everything\n  // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n  const accepted = useRef(false);\n  const typedRef = useRef<HTMLInputElement>(null);\n  const [typed, setTyped] = useState(\"\");\n  const target = request.requireTyped;\n  const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n  // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n  // after its children's). `Modal` engages its focus trap on the panel first — and\n  // records the page's focused element as the restore target — and only then does\n  // focus move to the button. Focusing it from inside the panel would run first and\n  // make the button the restore target. A typed confirm starts in its field: typing is\n  // the one thing the dialog is waiting for.\n  useEffect(() => {\n    (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n  }, [tone, target]);\n\n  const typedLabel =\n    target === undefined\n      ? \"\"\n      : (request.typedLabel ??\n        (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n  return (\n    <DialogFrame\n      title={request.title}\n      description={request.body}\n      onClose={() => onAnswer(request, accepted.current)}\n      // A confirmation interrupts to ask a question that must be answered.\n      role=\"alertdialog\"\n      data-confirm-tone={tone}\n      actions={(close) => (\n        <>\n          <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n            {request.cancelLabel ?? labels.cancel}\n          </Button>\n          <Button\n            ref={confirmRef}\n            type=\"button\"\n            variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n            disabled={!matches}\n            disabledReason={request.lockReason}\n            onClick={() => {\n              accepted.current = true;\n              close();\n            }}\n          >\n            {request.confirmLabel ?? labels.confirm}\n          </Button>\n        </>\n      )}\n    >\n      {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n      {target !== undefined && (\n        <form\n          noValidate\n          onSubmit={(e) => {\n            e.preventDefault();\n            // Through the button, so Enter and a click are one path — and a disabled\n            // (not yet matching) confirm ignores the click.\n            confirmRef.current?.click();\n          }}\n        >\n          {/* The kit's one typed-confirmation field (0.23), DangerConfirm's too: the\n              keyboard told to leave the text alone, `data-matched` on the input. The\n              label is this namespace's (`confirmDialog.typed`), and `placeholder=\"\"`\n              keeps out the `dangerConfirm.phrasePlaceholder` a provider may set for\n              the tile — this field never had one. */}\n          <TypedConfirmField\n            ref={typedRef}\n            target={target}\n            match={request.typedMatch ?? \"caseless\"}\n            label={typedLabel}\n            placeholder=\"\"\n            value={typed}\n            onValueChange={setTyped}\n          />\n        </form>\n      )}\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TypedConfirmField, typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button } from \"./button\";\nimport { useWriteLock, writeLockFor, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_CONFIRM_DIALOG_LABELS } from \"./confirm-dialog-labels\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n  confirm: string;\n  cancel: string;\n  /**\n   * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n   * type by default — where the address sits in the sentence moves with the language —\n   * or a finished STRING. A call's own `typedLabel` wins over it.\n   *\n   * Required, like every key of a namespace: the shipped catalogues\n   * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n   * hear about the new string from the compiler rather than show it in English.\n   */\n  typed: string | ((text: string) => string);\n}\n\n// Defined in ./confirm-dialog-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CONFIRM_DIALOG_LABELS };\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n  /** The question, and the dialog's accessible name. */\n  title: ReactNode;\n  /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n  body?: ReactNode;\n  /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n  confirmLabel?: ReactNode;\n  /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /**\n   * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n   * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n   * the confirm. See {@link ConfirmProvider} for why the two differ.\n   */\n  tone?: ConfirmTone;\n  /**\n   * 0.18: make the user TYPE this before confirm is enabled — the target account's\n   * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n   * it\" but \"is this the right row\": an admin who deactivates somebody has already\n   * proven who THEY are (they passed the admin gate); typing the address is what\n   * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n   * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n   * field.\n   *\n   * The dialog then shows one text field under the body and focuses it (whatever the\n   * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n   * stays disabled until the text matches; Enter in the field confirms once it does.\n   * The answer is still `true` / `false` — the text matched what you passed, so send\n   * that to the server if it asks for the address too, not the user's spelling.\n   */\n  requireTyped?: string;\n  /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n  typedLabel?: string;\n  /**\n   * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n   * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n   * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n   */\n  typedMatch?: TypedMatch;\n  /**\n   * 0.31.1: the confirm button COMMITS, as `Button`'s `commit` does. Under a locked\n   * `WriteLockProvider` — read where `useConfirm` was called, not where the one dialog\n   * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a\n   * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the\n   * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).\n   *\n   * 0.33: a {@link CommitScope} — `confirm({ commit: COMMIT_EXCEPT_BILLING })` for a\n   * confirm a lapsed plan still allows (removing access, the account's own settings;\n   * docs/billing-harmonization.md §12.36).\n   */\n  commit?: CommitScope;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n  const confirm = useContext(ConfirmContext);\n  if (!confirm) {\n    throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n  }\n  // The lock of the CALLER's place: the dialog host usually sits above the app's\n  // `WriteLockProvider`, so it could not read the lock itself. Each call's own `commit`\n  // scope is applied to it when the call runs (`writeLockFor`, §12.36).\n  const lock = useWriteLock();\n  return useCallback(\n    (options: ConfirmOptions) => {\n      const scoped = writeLockFor(lock, options.commit);\n      return confirm(scoped.locked ? ({ ...options, lockReason: scoped.reason } as ConfirmOptions) : options);\n    },\n    [confirm, lock],\n  );\n}\n\ninterface Request extends ConfirmOptions {\n  id: number;\n  resolve: (answer: boolean) => void;\n  /** Set by {@link useConfirm} for a `commit` confirm under a locked provider. */\n  lockReason?: ReactNode;\n}\n\nexport interface ConfirmProviderProps {\n  children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n *     if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n *     // becomes\n *     if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n *     // mobile-transaction-list.tsx\n *     const confirm = useConfirm();\n *     buildTxSwipeActions({ tx, …, confirm });\n *\n *     // transaction-swipe-plan.ts\n *     const confirmed = (messageKey: string, run: () => void) => () => {\n *       void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n *     };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n  const [queue, setQueue] = useState<Request[]>([]);\n  const nextId = useRef(0);\n  // Every unanswered request, including the ones not yet in state — the unmount\n  // cleanup below must reach a request made in the same tick it unmounts.\n  const pending = useRef(new Set<Request>());\n\n  const confirm = useCallback<ConfirmFn>(\n    (options) =>\n      new Promise<boolean>((resolve) => {\n        const request: Request = { ...options, id: ++nextId.current, resolve };\n        pending.current.add(request);\n        setQueue((q) => [...q, request]);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    const open = pending.current;\n    return () => {\n      for (const r of open) r.resolve(false);\n      open.clear();\n    };\n  }, []);\n\n  const answer = useCallback((request: Request, value: boolean) => {\n    if (!pending.current.delete(request)) return;\n    request.resolve(value);\n    setQueue((q) => q.filter((r) => r !== request));\n  }, []);\n\n  const current = queue[0];\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {current && (\n        // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n        // hands focus back to the page, and the next one's captures that as its own\n        // restore target instead of a button that has just been unmounted.\n        <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\nfunction ConfirmDialogView({\n  request,\n  onAnswer,\n}: {\n  request: Request;\n  onAnswer: (request: Request, value: boolean) => void;\n}) {\n  const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n  const tone = request.tone ?? \"neutral\";\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const cancelRef = useRef<HTMLButtonElement>(null);\n  // Set by the confirm button, read once the panel has finished lowering. Everything\n  // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n  const accepted = useRef(false);\n  const typedRef = useRef<HTMLInputElement>(null);\n  const [typed, setTyped] = useState(\"\");\n  const target = request.requireTyped;\n  const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n  // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n  // after its children's). `Modal` engages its focus trap on the panel first — and\n  // records the page's focused element as the restore target — and only then does\n  // focus move to the button. Focusing it from inside the panel would run first and\n  // make the button the restore target. A typed confirm starts in its field: typing is\n  // the one thing the dialog is waiting for.\n  useEffect(() => {\n    (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n  }, [tone, target]);\n\n  const typedLabel =\n    target === undefined\n      ? \"\"\n      : (request.typedLabel ??\n        (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n  return (\n    <DialogFrame\n      title={request.title}\n      description={request.body}\n      onClose={() => onAnswer(request, accepted.current)}\n      // A confirmation interrupts to ask a question that must be answered.\n      role=\"alertdialog\"\n      data-confirm-tone={tone}\n      actions={(close) => (\n        <>\n          <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n            {request.cancelLabel ?? labels.cancel}\n          </Button>\n          <Button\n            ref={confirmRef}\n            type=\"button\"\n            variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n            disabled={!matches}\n            disabledReason={request.lockReason}\n            onClick={() => {\n              accepted.current = true;\n              close();\n            }}\n          >\n            {request.confirmLabel ?? labels.confirm}\n          </Button>\n        </>\n      )}\n    >\n      {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n      {target !== undefined && (\n        <form\n          noValidate\n          onSubmit={(e) => {\n            e.preventDefault();\n            // Through the button, so Enter and a click are one path — and a disabled\n            // (not yet matching) confirm ignores the click.\n            confirmRef.current?.click();\n          }}\n        >\n          {/* The kit's one typed-confirmation field (0.23), DangerConfirm's too: the\n              keyboard told to leave the text alone, `data-matched` on the input. The\n              label is this namespace's (`confirmDialog.typed`), and `placeholder=\"\"`\n              keeps out the `dangerConfirm.phrasePlaceholder` a provider may set for\n              the tile — this field never had one. */}\n          <TypedConfirmField\n            ref={typedRef}\n            target={target}\n            match={request.typedMatch ?? \"caseless\"}\n            label={typedLabel}\n            placeholder=\"\"\n            value={typed}\n            onValueChange={setTyped}\n          />\n        </form>\n      )}\n    </DialogFrame>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/copy-button-labels.d.ts

@@ -0,0 +1,2 @@
+import type { CopyButtonLabels } from "./copy-button.js";
+export declare const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels;

package/dist/components/copy-button-labels.js

@@ -0,0 +1,12 @@
+"use client";
+const DEFAULT_COPY_BUTTON_LABELS = {
+  copy: "Copy",
+  copied: "Copied",
+  failed: "Couldn\u2019t copy",
+  copiedAnnouncement: "Copied to clipboard",
+  failedAnnouncement: "Couldn\u2019t copy to the clipboard"
+};
+export {
+  DEFAULT_COPY_BUTTON_LABELS
+};
+//# sourceMappingURL=copy-button-labels.js.map

package/dist/components/copy-button-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-button-labels.ts"],"sourcesContent":["// The English words of ./copy-button, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./copy-button re-exports them.\n\nimport type { CopyButtonLabels } from \"./copy-button\";\n\nexport const DEFAULT_COPY_BUTTON_LABELS: CopyButtonLabels = {\n  copy: \"Copy\",\n  copied: \"Copied\",\n  failed: \"Couldn’t copy\",\n  copiedAnnouncement: \"Copied to clipboard\",\n  failedAnnouncement: \"Couldn’t copy to the clipboard\",\n};\n"],"mappings":";AAMO,MAAM,6BAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;","names":[]}

package/dist/components/copy-button.d.ts

@@ -1,101 +1,74 @@
-import 'react';
-export { cf as CopyButton, cg as CopyButtonLabels, ch as CopyButtonProps, cv as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
+import type { ButtonHTMLAttributes, Ref } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look.js";
+import type { IconButtonSize, IconButtonTone } from "./icon-button.js";
+import type { TooltipSide } from "./tooltip.js";
+import { DEFAULT_COPY_BUTTON_LABELS } from "./copy-button-labels.js";
+/** The words a copy button says. The visible three are short on purpose (they
+ *  replace the button's own text in the `label` variant); the two announcements
+ *  are the sentences a screen reader hears, since the button's focus never moves. */
+export interface CopyButtonLabels {
+    copy: string;
+    copied: string;
+    failed: string;
+    copiedAnnouncement: string;
+    failedAnnouncement: string;
+}
+export { DEFAULT_COPY_BUTTON_LABELS };
+export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    /** What to copy. A function is read at click time — for a value that is expensive
+     *  to build (a CSV of the table) or that changes under the button. */
+    text: string | (() => string);
+    /** `icon` (default): a square icon button whose tooltip states the result.
+     *  `label`: a text button whose words change to the result. */
+    variant?: "icon" | "label";
+    /** The idle accessible name — and, in the `label` variant, the visible text:
+     *  "Copy IBAN" says WHAT is copied, which a row of three copy icons needs. Default
+     *  `copyButton.copy`. */
+    label?: string;
+    /** The button's own look. Default: `ghost` for the icon, `secondary` for the label. */
+    buttonVariant?: ButtonVariant;
+    /** The icon variant's IconButton size (default `sm`). The `label` variant takes a
+     *  Button size, `sm` or `md` — passed only when given, so an existing label button
+     *  keeps its look (keksdose budget-share-card and jobs-panel wanted the compact one). */
+    size?: IconButtonSize | ButtonSize;
+    /** The icon variant's IconButton tone (e.g. `muted`, so a row of copy icons is no
+     *  heavier than the row's other actions); in the `label` variant a Button tone,
+     *  which applies to `link` / `ghost`. The copied / failed colour still wins. */
+    tone?: IconButtonTone | ButtonTone;
+    /** Keep the click and Enter/Space from reaching a clickable row around the button,
+     *  as IconButton's own `stopPropagation` does (keksdose feedback-page, users-panel). */
+    stopPropagation?: boolean;
+    /** Icon variant only: where the result tooltip opens. */
+    tooltipSide?: TooltipSide;
+    /** Pass through to the tooltip. Left unset, the Tooltip decides on its own — it
+     *  portals inside a clipping container (a DataTable's `data-clips` scroller). */
+    tooltipPortal?: boolean;
+    /** ms until the button returns to idle. Default 2000. */
+    resetAfter?: number;
+    /** Called with the real outcome once the copy settles. */
+    onCopied?: (ok: boolean) => void;
+    labels?: LabelOverride<CopyButtonLabels>;
+    /** The `<button>` in either variant — the {@link IconButton}'s or the {@link Button}'s,
+     *  never the tooltip's wrapper round it (0.35, round 0.35 R4, the follow-up to API-2).
+     *  It rides the rest of the props on to that kit button, whose own ref it is. */
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * A button that copies a value and tells the truth about whether it did.
+ *
+ * keksdose asked for it after two of its own copy buttons said "Copied" on a build
+ * where the copy had failed (no Clipboard API over plain http). This one takes its
+ * state from {@link useCopyToClipboard}, which reads the result, and has a `failed`
+ * state that looks and sounds different from success.
+ *
+ * The result is spoken through {@link useAnnounce}: activating the button moves no
+ * focus, so without a live region a screen-reader user hears nothing at all. A
+ * failure goes through an ASSERTIVE region and a success through a polite one — the
+ * failure is the news that changes what they do next.
+ *
+ * The icon variant keeps the SAME accessible name in every state. A button renaming
+ * itself under the focus is announced inconsistently across readers; the live region
+ * is the channel that is actually heard.
+ */
+export declare function CopyButton({ text, variant, label, buttonVariant, size, tone, stopPropagation, tooltipSide, tooltipPortal, resetAfter, onCopied, labels, className, disabled, ...rest }: CopyButtonProps): import("react").JSX.Element;

package/dist/components/copy-button.js

@@ -5,15 +5,10 @@ import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
-import { Button, IconButton } from "./ui.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
 import { Tooltip } from "./tooltip.js";
-const DEFAULT_COPY_BUTTON_LABELS = {
-  copy: "Copy",
-  copied: "Copied",
-  failed: "Couldn\u2019t copy",
-  copiedAnnouncement: "Copied to clipboard",
-  failedAnnouncement: "Couldn\u2019t copy to the clipboard"
-};
+import { DEFAULT_COPY_BUTTON_LABELS } from "./copy-button-labels.js";
 const ICONS = { idle: Copy, copied: Check, failed: X };
 function CopyButton({
   text,
@@ -39,7 +34,7 @@ function CopyButton({
   const idleText = label ?? words.copy;
   const stateText = state === "copied" ? words.copied : state === "failed" ? words.failed : idleText;
   const Icon = ICONS[state];
-  const iconTone = state === "copied" ? "text-[var(--success)]" : state === "failed" ? "text-[var(--danger)]" : void 0;
+  const iconTone = state === "copied" ? "text-success" : state === "failed" ? "text-danger" : void 0;
   const onClick = async () => {
     const ok = await copy(typeof text === "function" ? text() : text);
     if (ok) polite.announce(words.copiedAnnouncement);