@12-apps/ui 6.1.0 → 6.2.0

package/components-catalog.md

@@ -79,6 +79,14 @@ Components for displaying data, visualizations, and information to users.
 **Location**: `src/components/data-display/Chip`
 **Docs**: `src/components/data-display/Chip/Chip.md`
 
+### CardKit
+**Purpose**: The furniture an admin list's cards and row menus sit in — everything above `BaseCard` that is the same shape for every entity
+**Use Cases**: Kind cards and their kebab menus, expanded list-card bodies, confirm-before-deleting from a row or a selection
+**Features**: `CardKebab` (accessible name required, never defaulted), `rowActionsToMenuItems` so one `RowAction[]` drives the grid and the card alike, `CardActionsProvider` (tenant + refresh + one shared error snackbar, and it throws outside its provider), the body parts `DetailColumns`/`Fact`/`Ledger`/`BodyHeading`/`TagList`, and the two confirm hooks — `useRowConfirm` for a grid selection, `useRemoveConfirm` for a self-contained menu
+**Types**: `KindCardProps`, `KindListCardProps`, `RowConfirmCopy`, `CardWriteResult`, `CardFactProps`, `CardLedgerLine`
+**Location**: `src/components/data-display/CardKit`
+**Docs**: `src/components/data-display/CardKit/CardKit.md`
+
 ### DataGrid
 **Purpose**: Advanced data table with sorting, filtering, pagination, and editing
 **Use Cases**: Complex data tables, admin panels, data management interfaces

package/dist/data-display/CardKit.js

@@ -0,0 +1,266 @@
+import {
+  DropdownMenu
+} from "../chunk-DSO6BL77.js";
+import {
+  ConfirmActionDialog,
+  useConfirmAction
+} from "../chunk-62XQWGXU.js";
+import {
+  Alert
+} from "../chunk-3KWD5Y5O.js";
+import "../chunk-ARNQIGA4.js";
+import {
+  Box
+} from "../chunk-34DQAXL2.js";
+import "../chunk-BA4RHQ3B.js";
+import {
+  Button
+} from "../chunk-ANNZ3PLI.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/data-display/CardKit/CardKebab.tsx
+import { jsx } from "react/jsx-runtime";
+function CardKebab({
+  items,
+  menuLabel,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", "aria-label": menuLabel, dataTestId, children: "\u22EE" })
+    }
+  );
+}
+
+// src/components/data-display/CardKit/card-actions-context.tsx
+import { createContext, useCallback, useContext, useState } from "react";
+import { Snackbar } from "@mui/material";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CardActionsContext = createContext(null);
+function CardActionsProvider({
+  tenantSlug,
+  onRefresh,
+  errorTitle,
+  autoHideMs = 6e3,
+  children
+}) {
+  const [error, setError] = useState(null);
+  const notifyError = useCallback((message) => setError(message), []);
+  return /* @__PURE__ */ jsxs(CardActionsContext.Provider, { value: { tenantSlug, onRefresh, notifyError }, children: [
+    children,
+    /* @__PURE__ */ jsx2(
+      Snackbar,
+      {
+        open: error !== null,
+        autoHideDuration: autoHideMs,
+        onClose: () => setError(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        children: /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(
+          Alert,
+          {
+            variant: "danger",
+            title: errorTitle,
+            description: error ?? "",
+            closable: true,
+            onClose: () => setError(null),
+            "data-testid": "card-action-error"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function useCardActions() {
+  const value = useContext(CardActionsContext);
+  if (!value) {
+    throw new Error("useCardActions must be used within a CardActionsProvider");
+  }
+  return value;
+}
+
+// src/components/data-display/CardKit/row-actions-to-menu.ts
+function rowActionsToMenuItems(actions, row) {
+  return actions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
+    id: action.id,
+    label: action.rowLabel?.(row) ?? action.label,
+    color: action.color,
+    onClick: () => void action.onSelect([row])
+  }));
+}
+
+// src/components/data-display/CardKit/list-card-parts.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DetailColumns({ left, right }) {
+  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 3 }, children: [
+    /* @__PURE__ */ jsx3(Box, { sx: { minWidth: 0 }, children: left }),
+    /* @__PURE__ */ jsx3(Box, { sx: { minWidth: 0 }, children: right })
+  ] });
+}
+function Fact({ label, value }) {
+  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", justifyContent: "space-between", gap: 2, fontSize: 13, py: 0.25 }, children: [
+    /* @__PURE__ */ jsx3(Box, { component: "span", sx: { color: "text.secondary", flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsx3(Box, { component: "span", sx: { minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }, children: value })
+  ] });
+}
+function Ledger({
+  lines,
+  total
+}) {
+  return /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    lines.map((line) => /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          fontSize: 13,
+          color: line.tone === "info" ? "info.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Box, { component: "span", children: line.label }),
+          /* @__PURE__ */ jsx3(Box, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: line.value })
+        ]
+      },
+      line.label
+    )),
+    /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          fontWeight: 700,
+          borderTop: 1,
+          borderColor: "divider",
+          pt: 0.5,
+          mt: 0.5
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Box, { component: "span", children: total.label }),
+          /* @__PURE__ */ jsx3(Box, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: total.value })
+        ]
+      }
+    )
+  ] });
+}
+function BodyHeading({ children }) {
+  return /* @__PURE__ */ jsx3(
+    Box,
+    {
+      sx: {
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: 0.4,
+        textTransform: "uppercase",
+        color: "text.disabled",
+        mb: 0.5
+      },
+      children
+    }
+  );
+}
+function TagList({
+  items,
+  empty
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx3(Box, { sx: { fontSize: 13, color: "text.disabled" }, children: empty });
+  }
+  return /* @__PURE__ */ jsx3(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: items.map((item) => /* @__PURE__ */ jsx3(
+    Box,
+    {
+      component: "span",
+      sx: {
+        fontSize: 12,
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        bgcolor: "action.hover",
+        color: "text.secondary",
+        fontFamily: "monospace"
+      },
+      children: item
+    },
+    item
+  )) });
+}
+
+// src/components/data-display/CardKit/use-row-confirm.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function useRowConfirm({
+  write,
+  describe,
+  dataTestId,
+  errorText
+}) {
+  const [target, setTarget] = useState2(null);
+  const state = useConfirmAction(async () => {
+    if (!target) return;
+    await write(target);
+    setTarget(null);
+  }, errorText);
+  const request = (rows) => {
+    if (rows.length === 0) return;
+    setTarget(rows);
+    state.request();
+  };
+  return {
+    request,
+    dialog: target ? /* @__PURE__ */ jsx4(ConfirmActionDialog, { state, ...describe(target), dataTestId }) : null
+  };
+}
+
+// src/components/data-display/CardKit/use-remove-confirm.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function useRemoveConfirm({
+  write,
+  title,
+  entityName,
+  description,
+  confirmText,
+  fallbackError,
+  dataTestId
+}) {
+  const { onRefresh, notifyError } = useCardActions();
+  const state = useConfirmAction(async () => {
+    const result = await write();
+    if (!result.ok) {
+      const message = result.error ?? fallbackError;
+      notifyError(message);
+      throw new Error(message);
+    }
+    onRefresh();
+  }, fallbackError);
+  return {
+    request: state.request,
+    dialog: /* @__PURE__ */ jsx5(
+      ConfirmActionDialog,
+      {
+        state,
+        title,
+        entityName,
+        description,
+        confirmText,
+        dataTestId
+      }
+    )
+  };
+}
+export {
+  BodyHeading,
+  CardActionsProvider,
+  CardKebab,
+  DetailColumns,
+  Fact,
+  Ledger,
+  TagList,
+  rowActionsToMenuItems,
+  useCardActions,
+  useRemoveConfirm,
+  useRowConfirm
+};
+//# sourceMappingURL=CardKit.js.map

package/dist/data-display/CardKit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-display/CardKit/CardKebab.tsx","../../src/components/data-display/CardKit/card-actions-context.tsx","../../src/components/data-display/CardKit/row-actions-to-menu.ts","../../src/components/data-display/CardKit/list-card-parts.tsx","../../src/components/data-display/CardKit/use-row-confirm.tsx","../../src/components/data-display/CardKit/use-remove-confirm.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX } from 'react';\n\nimport { Button } from '../../form/Button';\nimport { DropdownMenu, type DropdownMenuItem } from '../../navigation/DropdownMenu';\n\n/**\n * The \"⋮\" trigger every row and card menu opens from.\n *\n * One component rather than a `DropdownMenu` per entity, so the kebab looks and\n * behaves identically in the card, in the list row and in the table row. The\n * entity's menu owns its own popups; this is the trigger and the item list.\n */\nexport function CardKebab({\n  items,\n  menuLabel,\n  dataTestId,\n}: {\n  items: DropdownMenuItem[];\n  /**\n   * The trigger's accessible name — required, and with no default.\n   *\n   * It is the only text this component renders, and a screen reader announces\n   * it verbatim. A default here would be a word in the origin's language that\n   * reads as finished to the next adopter right up until somebody using a\n   * screen reader meets it.\n   */\n  menuLabel: string;\n  dataTestId?: string;\n}): JSX.Element {\n  return (\n    <DropdownMenu\n      size=\"sm\"\n      items={items}\n      trigger={\n        <Button variant=\"text\" size=\"sm\" aria-label={menuLabel} dataTestId={dataTestId}>\n          ⋮\n        </Button>\n      }\n    />\n  );\n}\n","'use client';\n\nimport { createContext, useCallback, useContext, useState, type JSX, type ReactNode } from 'react';\n\nimport { Snackbar } from '@mui/material';\n\nimport { Alert } from '../Alert';\n\n/**\n * The ambient wiring a self-contained row/card menu needs, and nothing else.\n *\n * A menu that owns its own popups still needs three things it cannot know: the\n * tenant it is acting inside, what to do after a write lands, and somewhere to\n * put a failure. Passing those down through the grid, the layout and the card\n * is four props of drilling per entity; holding them in context is one.\n *\n * Kept deliberately SMALL — it is not an edit-dialog host. A menu that read its\n * dialogs from here would stop being portable, because the set of dialogs is\n * per-entity. What it may read is the three facts below.\n *\n * The provider renders ONE shared error snackbar, which is the whole reason the\n * error channel is here rather than per-menu: before it, every page carried its\n * own error alert and every menu had to find its page's.\n */\ninterface CardActionsValue {\n  /** The tenant every action in this subtree acts inside. */\n  tenantSlug: string;\n  /** Re-read the list after a write. */\n  onRefresh: () => void;\n  /** Surface a failed action's message (the shared snackbar). */\n  notifyError: (message: string) => void;\n}\n\nconst CardActionsContext = createContext<CardActionsValue | null>(null);\n\nexport function CardActionsProvider({\n  tenantSlug,\n  onRefresh,\n  errorTitle,\n  autoHideMs = 6_000,\n  children,\n}: {\n  tenantSlug: string;\n  onRefresh: () => void;\n  /**\n   * The snackbar's heading — required, no default.\n   *\n   * It is the one sentence this provider renders on its own, and a default\n   * would be the origin's language shipped as a finished-looking silence. The\n   * MESSAGE beside it comes from whatever failed, which is already the host's.\n   */\n  errorTitle: string;\n  /** How long the snackbar stays up. */\n  autoHideMs?: number;\n  children: ReactNode;\n}): JSX.Element {\n  const [error, setError] = useState<string | null>(null);\n  const notifyError = useCallback((message: string) => setError(message), []);\n\n  return (\n    <CardActionsContext.Provider value={{ tenantSlug, onRefresh, notifyError }}>\n      {children}\n      <Snackbar\n        open={error !== null}\n        autoHideDuration={autoHideMs}\n        onClose={() => setError(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n      >\n        <span>\n          <Alert\n            variant=\"danger\"\n            title={errorTitle}\n            description={error ?? ''}\n            closable\n            onClose={() => setError(null)}\n            data-testid=\"card-action-error\"\n          />\n        </span>\n      </Snackbar>\n    </CardActionsContext.Provider>\n  );\n}\n\n/**\n * Read the tenant + refresh + error wiring.\n *\n * THROWS outside a provider rather than answering a null object, deliberately:\n * a menu whose `onRefresh` silently did nothing would leave the operator\n * looking at a stale row after a delete that worked, which reads as the delete\n * having failed. Failing at mount says where the provider is missing.\n */\nexport function useCardActions(): CardActionsValue {\n  const value = useContext(CardActionsContext);\n  if (!value) {\n    throw new Error('useCardActions must be used within a CardActionsProvider');\n  }\n  return value;\n}\n","import type { DropdownMenuItem } from '../../navigation/DropdownMenu';\nimport type { RowAction } from '../DataViews';\n\n/**\n * Adapt a list of {@link RowAction}s into single-row kebab items.\n *\n * Applies each action's `isVisible` guard, resolves its per-row `rowLabel`\n * override, carries its colour, and fires `onSelect([row])` on click.\n *\n * The point is that ONE definition drives both surfaces. An entity that already\n * declares its per-row actions as `RowAction[]` — because the table's multi-\n * select menu needs them — gets the card's kebab from the same array through\n * `renderRowMenu` / `renderCard`, with no second list to keep in step. Two\n * lists is how a \"Duplicar\" that appears in the table and not on the card\n * happens, and nothing reports it.\n */\nexport function rowActionsToMenuItems<T extends Record<string, unknown>>(\n  actions: RowAction<T>[],\n  row: T,\n): DropdownMenuItem[] {\n  return actions\n    .filter((action) => action.isVisible?.(row) ?? true)\n    .map((action) => ({\n      id: action.id,\n      label: action.rowLabel?.(row) ?? action.label,\n      color: action.color,\n      onClick: () => void action.onSelect([row]),\n    }));\n}\n","'use client';\n\nimport type { JSX, ReactNode } from 'react';\n\nimport { Box } from '../../../mui/Box';\n\nimport type { CardFactProps, CardLedgerLine } from './CardKit.types';\n\n/**\n * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.\n *\n * `BaseListCard` says nothing about what goes inside a row's expanded area — it\n * spans the rails and stops, because the design belongs to the consumer. Right\n * for the card; wrong as the place where every entity in an admin app invents\n * its own two-column layout, its own label/value pair and its own ledger.\n *\n * So the four shapes that actually repeat live here, once. Nothing here knows a\n * domain: they take `ReactNode` and lay it out.\n */\n\n/** The expanded body's two-column split: detail on the left, a ledger right. */\nexport function DetailColumns({ left, right }: { left: ReactNode; right: ReactNode }): JSX.Element {\n  return (\n    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>\n      <Box sx={{ minWidth: 0 }}>{left}</Box>\n      <Box sx={{ minWidth: 0 }}>{right}</Box>\n    </Box>\n  );\n}\n\n/**\n * One labelled fact inside an expanded body.\n *\n * Horizontal, not stacked: the body is already a wide area with room for a\n * label beside its value, and stacking them there would ape the summary rails\n * above without their alignment.\n */\nexport function Fact({ label, value }: CardFactProps): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: 13, py: 0.25 }}>\n      <Box component=\"span\" sx={{ color: 'text.secondary', flexShrink: 0 }}>\n        {label}\n      </Box>\n      <Box component=\"span\" sx={{ minWidth: 0, textAlign: 'right', overflowWrap: 'anywhere' }}>\n        {value}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A money ledger: rows of label/amount, then a ruled total.\n *\n * The total is separated by a RULE rather than by weight alone, because a\n * subtotal and a total in one column with only bold between them is the classic\n * misread — the eye lands on whichever number is larger.\n *\n * The figures arrive pre-formatted. This is a layout, and a component that\n * formatted money would be choosing a locale on the consumer's behalf.\n */\nexport function Ledger({\n  lines,\n  total,\n}: {\n  lines: CardLedgerLine[];\n  total: { label: string; value: ReactNode };\n}): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {lines.map((line) => (\n        <Box\n          key={line.label}\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: 13,\n            color: line.tone === 'info' ? 'info.main' : 'text.secondary',\n          }}\n        >\n          <Box component=\"span\">{line.label}</Box>\n          <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n            {line.value}\n          </Box>\n        </Box>\n      ))}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontWeight: 700,\n          borderTop: 1,\n          borderColor: 'divider',\n          pt: 0.5,\n          mt: 0.5,\n        }}\n      >\n        <Box component=\"span\">{total.label}</Box>\n        <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n          {total.value}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading inside the expanded body, for a section that needs naming. */\nexport function BodyHeading({ children }: { children: ReactNode }): JSX.Element {\n  return (\n    <Box\n      sx={{\n        fontSize: 11,\n        fontWeight: 700,\n        letterSpacing: 0.4,\n        textTransform: 'uppercase',\n        color: 'text.disabled',\n        mb: 0.5,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * A wrapping run of small items — permission names, role names, target ids.\n *\n * The whole reason several entities earn a list card at all: a `string[]` has no\n * honest table cell. Truncated to \"3 items\" it says nothing; printed in full it\n * destroys the column. Here it simply wraps.\n */\nexport function TagList({\n  items,\n  empty,\n}: {\n  items: readonly string[];\n  /** What to show for an empty run — the consumer's sentence, no default. */\n  empty: string;\n}): JSX.Element {\n  if (items.length === 0) {\n    return <Box sx={{ fontSize: 13, color: 'text.disabled' }}>{empty}</Box>;\n  }\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n      {items.map((item) => (\n        <Box\n          key={item}\n          component=\"span\"\n          sx={{\n            fontSize: 12,\n            px: 0.75,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: 'action.hover',\n            color: 'text.secondary',\n            fontFamily: 'monospace',\n          }}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n","'use client';\n\nimport { useState, type JSX } from 'react';\n\nimport { ConfirmActionDialog, useConfirmAction } from '../../feedback/ConfirmAction';\n\n/**\n * How the popup should read for the rows about to be acted on.\n *\n * Built from the SELECTION rather than from a single row, because the same\n * guard covers a bulk action: \"Delete 4 categories?\" and \"Delete the category\n * Drinks?\" are the same question asked of a different-sized selection — and an\n * operator who multi-selected by mistake is exactly who this popup is for.\n */\nexport interface RowConfirmCopy {\n  title: string;\n  description: string;\n  /** Echoed into the popup; omit for a multi-row selection the title covers. */\n  entityName?: string;\n  /** The VERB. Required, never defaulted — see {@link useRowConfirm}. */\n  confirmText: string;\n  /** Override where the word \"cancel\" would mean the ACTION itself. */\n  cancelText?: string;\n  /** Require typing this before the confirm enables — for the unrecoverable few. */\n  typeToConfirm?: string;\n}\n\ninterface RowConfirmOptions<T> {\n  /**\n   * The destructive write, over the whole selection. Called ONLY after the\n   * operator confirms; throw (or reject) to keep the popup open carrying the\n   * message.\n   */\n  write: (rows: T[]) => Promise<unknown>;\n  /** The wording, given the selection. */\n  describe: (rows: T[]) => RowConfirmCopy;\n  dataTestId: string;\n  /** Shown when `write` fails without a message of its own. */\n  errorText?: string;\n}\n\nexport interface RowConfirm<T> {\n  /** Hand this a grid action's `rows`: it opens the popup and writes nothing. */\n  request: (rows: T[]) => void;\n  /** Render next to the grid. */\n  dialog: JSX.Element | null;\n}\n\n/**\n * Confirmation for a grid's `RowAction` — the per-row kebab entry and the\n * multi-select actions menu both, since they run the same handler.\n *\n * The SELECTION is held while the popup is open, so the write sees exactly the\n * rows the operator was looking at when they were asked. Re-reading the grid's\n * live selection at confirm time is the bug this shape avoids: the list can\n * refresh underneath an open dialog.\n *\n * `confirmText` is required and comes from `describe`, with no default. A verb\n * defaulted in the origin's language reads as finished to the next adopter\n * right up until an operator sees it — and `ConfirmOptions` already refuses to\n * default one for the same reason.\n */\nexport function useRowConfirm<T>({\n  write,\n  describe,\n  dataTestId,\n  errorText,\n}: RowConfirmOptions<T>): RowConfirm<T> {\n  const [target, setTarget] = useState<T[] | null>(null);\n\n  const state = useConfirmAction(async () => {\n    if (!target) return;\n    await write(target);\n    setTarget(null);\n  }, errorText);\n\n  const request = (rows: T[]): void => {\n    // An empty selection has nothing to confirm — asking would be a popup about\n    // nothing, and confirming it would write nothing.\n    if (rows.length === 0) return;\n    setTarget(rows);\n    state.request();\n  };\n\n  return {\n    request,\n    dialog: target ? (\n      <ConfirmActionDialog state={state} {...describe(target)} dataTestId={dataTestId} />\n    ) : null,\n  };\n}\n","'use client';\n\nimport type { JSX } from 'react';\n\nimport { ConfirmActionDialog, useConfirmAction } from '../../feedback/ConfirmAction';\n\nimport { useCardActions } from './card-actions-context';\n\n/** The `{ ok, error }` envelope a write action answers with. */\nexport interface CardWriteResult {\n  ok: boolean;\n  error?: string;\n}\n\ninterface RemoveConfirmOptions {\n  /** The destructive write. Called ONLY after the operator confirms. */\n  write: () => Promise<CardWriteResult>;\n  /** The popup's question. */\n  title: string;\n  /** The row being removed, echoed into the popup so it names a thing. */\n  entityName: string;\n  /**\n   * What happens, and whether it can be walked back. Say which — the difference\n   * between a soft delete a recycle bin recovers and one nothing recovers is\n   * the whole content of the decision being asked for.\n   */\n  description: string;\n  /** The confirm button's VERB. Required, never defaulted. */\n  confirmText: string;\n  /** Used when the write fails without a message of its own. */\n  fallbackError: string;\n  dataTestId: string;\n}\n\ninterface RemoveConfirm {\n  /** Hand this to the menu item's `onClick`: it opens the popup, nothing more. */\n  request: () => void;\n  /** Render alongside the trigger. */\n  dialog: JSX.Element;\n}\n\n/**\n * The confirm-before-removing wiring every card/row menu repeats, in one place.\n *\n * It closes the three gaps a hand-rolled version keeps re-opening: the write\n * leaves ONLY on confirm; a refusal is surfaced twice — inside the popup, where\n * the operator is still deciding, and in the shared snackbar behind it — and a\n * failed attempt leaves the popup OPEN to be retried instead of vanishing over\n * a delete that never happened.\n *\n * The difference from {@link useRowConfirm} is which surface it serves: this one\n * is for a SELF-CONTAINED menu that already sits inside a\n * `CardActionsProvider`, so it reads the refresh and the error channel from\n * context and answers the `{ ok, error }` envelope those actions use.\n * `useRowConfirm` is for a grid whose actions are declared as `RowAction[]` and\n * act on a selection.\n *\n * ```tsx\n * const remove = useRemoveConfirm({\n *   write: () => deleteCategory({ tenantSlug, id: row.id }),\n *   title: copy.deleteTitle,\n *   entityName: row.name,\n *   description: copy.deleteDescription,\n *   confirmText: copy.delete,\n *   fallbackError: copy.deleteFailed,\n *   dataTestId: 'category-delete-confirm',\n * });\n * ```\n */\nexport function useRemoveConfirm({\n  write,\n  title,\n  entityName,\n  description,\n  confirmText,\n  fallbackError,\n  dataTestId,\n}: RemoveConfirmOptions): RemoveConfirm {\n  const { onRefresh, notifyError } = useCardActions();\n\n  const state = useConfirmAction(async () => {\n    const result = await write();\n    if (!result.ok) {\n      const message = result.error ?? fallbackError;\n      notifyError(message);\n      // Rejecting is what keeps the popup open carrying `message`; the snackbar\n      // above is what remains once the operator dismisses it.\n      throw new Error(message);\n    }\n    onRefresh();\n  }, fallbackError);\n\n  return {\n    request: state.request,\n    dialog: (\n      <ConfirmActionDialog\n        state={state}\n        title={title}\n        entityName={entityName}\n        description={description}\n        confirmText={confirmText}\n        dataTestId={dataTestId}\n      />\n    ),\n  };\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","useState","jsx","useState","jsx"]}

package/dist/types/components/data-display/CardKit/CardKebab.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from 'react';
+import { type DropdownMenuItem } from '../../navigation/DropdownMenu';
+/**
+ * The "⋮" trigger every row and card menu opens from.
+ *
+ * One component rather than a `DropdownMenu` per entity, so the kebab looks and
+ * behaves identically in the card, in the list row and in the table row. The
+ * entity's menu owns its own popups; this is the trigger and the item list.
+ */
+export declare function CardKebab({ items, menuLabel, dataTestId, }: {
+    items: DropdownMenuItem[];
+    /**
+     * The trigger's accessible name — required, and with no default.
+     *
+     * It is the only text this component renders, and a screen reader announces
+     * it verbatim. A default here would be a word in the origin's language that
+     * reads as finished to the next adopter right up until somebody using a
+     * screen reader meets it.
+     */
+    menuLabel: string;
+    dataTestId?: string;
+}): JSX.Element;
+//# sourceMappingURL=CardKebab.d.ts.map

package/dist/types/components/data-display/CardKit/CardKebab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardKebab.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/CardKebab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE;IACD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAYd"}

package/dist/types/components/data-display/CardKit/CardKit.types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { CardAspectRatio, DataViewCardSelection } from '../DataViews';
+/**
+ * THE CARD KIT — what an admin list needs above `BaseCard`, and no more.
+ *
+ * `BaseCard` and `BaseListCard` deliberately say nothing about what goes inside
+ * them: the envelope is the library's and the design is the consumer's. That is
+ * the right call for a card component and exactly the wrong place for every
+ * entity in an admin app to invent its own kebab, its own two-column body, its
+ * own label/value pair and its own confirm-before-deleting. Those shapes are
+ * not per-entity decisions — they are the same shape repeated — so they live
+ * here once.
+ *
+ * The line this kit does NOT cross is the entity card itself. A "product card"
+ * or a "discount card" knows a domain, and a domain is the consumer's. What is
+ * here is the furniture such a card sits in.
+ */
+/**
+ * Props every KIND CARD receives — the grid's `renderCard` contract, named.
+ *
+ * `row` is `Record<string, unknown>` rather than a generic on purpose: a grid
+ * renders rows of one shape and the renderer is registered per kind, so the
+ * cast happens once inside each card rather than threading a type parameter
+ * through the grid, the layout and the selection.
+ */
+export interface KindCardProps {
+    row: Record<string, unknown>;
+    selection: DataViewCardSelection;
+    /** Force a ratio (a uniform grid); defaults to the card's own. */
+    aspectRatio?: CardAspectRatio;
+}
+/**
+ * Props every kind LIST card receives — the "list" layout's counterpart.
+ *
+ * The same `(row, selection)` pair `renderListRow` hands over, and nothing
+ * more. No density: a row inside a list group takes the group's, so a card
+ * accepting one could only contradict its list. No `aspectRatio`: a full-width
+ * row has no ratio to force.
+ */
+export interface KindListCardProps {
+    row: Record<string, unknown>;
+    selection: DataViewCardSelection;
+}
+/** One labelled fact inside an expanded body. */
+export interface CardFactProps {
+    label: string;
+    value: ReactNode;
+}
+/** One line of a money ledger. `info` tints a line that is not a plain cost. */
+export interface CardLedgerLine {
+    label: string;
+    value: ReactNode;
+    tone?: 'default' | 'info';
+}
+//# sourceMappingURL=CardKit.types.d.ts.map

package/dist/types/components/data-display/CardKit/CardKit.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardKit.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/CardKit.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,qBAAqB,CAAC;IACjC,kEAAkE;IAClE,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,qBAAqB,CAAC;CAClC;AAED,iDAAiD;AACjD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC3B"}

package/dist/types/components/data-display/CardKit/card-actions-context.d.ts

@@ -0,0 +1,51 @@
+import { type JSX, type ReactNode } from 'react';
+/**
+ * The ambient wiring a self-contained row/card menu needs, and nothing else.
+ *
+ * A menu that owns its own popups still needs three things it cannot know: the
+ * tenant it is acting inside, what to do after a write lands, and somewhere to
+ * put a failure. Passing those down through the grid, the layout and the card
+ * is four props of drilling per entity; holding them in context is one.
+ *
+ * Kept deliberately SMALL — it is not an edit-dialog host. A menu that read its
+ * dialogs from here would stop being portable, because the set of dialogs is
+ * per-entity. What it may read is the three facts below.
+ *
+ * The provider renders ONE shared error snackbar, which is the whole reason the
+ * error channel is here rather than per-menu: before it, every page carried its
+ * own error alert and every menu had to find its page's.
+ */
+interface CardActionsValue {
+    /** The tenant every action in this subtree acts inside. */
+    tenantSlug: string;
+    /** Re-read the list after a write. */
+    onRefresh: () => void;
+    /** Surface a failed action's message (the shared snackbar). */
+    notifyError: (message: string) => void;
+}
+export declare function CardActionsProvider({ tenantSlug, onRefresh, errorTitle, autoHideMs, children, }: {
+    tenantSlug: string;
+    onRefresh: () => void;
+    /**
+     * The snackbar's heading — required, no default.
+     *
+     * It is the one sentence this provider renders on its own, and a default
+     * would be the origin's language shipped as a finished-looking silence. The
+     * MESSAGE beside it comes from whatever failed, which is already the host's.
+     */
+    errorTitle: string;
+    /** How long the snackbar stays up. */
+    autoHideMs?: number;
+    children: ReactNode;
+}): JSX.Element;
+/**
+ * Read the tenant + refresh + error wiring.
+ *
+ * THROWS outside a provider rather than answering a null object, deliberately:
+ * a menu whose `onRefresh` silently did nothing would leave the operator
+ * looking at a stale row after a delete that worked, which reads as the delete
+ * having failed. Failing at mount says where the provider is missing.
+ */
+export declare function useCardActions(): CardActionsValue;
+export {};
+//# sourceMappingURL=card-actions-context.d.ts.map

package/dist/types/components/data-display/CardKit/card-actions-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-actions-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/card-actions-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoD,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnG;;;;;;;;;;;;;;;GAeG;AACH,UAAU,gBAAgB;IACxB,2DAA2D;IAC3D,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,+DAA+D;IAC/D,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,SAAS,EACT,UAAU,EACV,UAAkB,EAClB,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;OAMG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA0Bd;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,IAAI,gBAAgB,CAMjD"}

package/dist/types/components/data-display/CardKit/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@12-apps/ui/data-display/CardKit` — the furniture an admin list's cards and
+ * row menus sit in.
+ *
+ * See `./CardKit.types` for where the line falls: the envelope and the repeated
+ * shapes are here; the entity card that knows a domain is the consumer's.
+ */
+export { CardKebab } from './CardKebab';
+export { CardActionsProvider, useCardActions } from './card-actions-context';
+export { rowActionsToMenuItems } from './row-actions-to-menu';
+export { BodyHeading, DetailColumns, Fact, Ledger, TagList } from './list-card-parts';
+export { useRowConfirm, type RowConfirm, type RowConfirmCopy } from './use-row-confirm';
+export { useRemoveConfirm, type CardWriteResult } from './use-remove-confirm';
+export type { CardFactProps, CardLedgerLine, KindCardProps, KindListCardProps, } from './CardKit.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/data-display/CardKit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC9E,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/types/components/data-display/CardKit/list-card-parts.d.ts

@@ -0,0 +1,60 @@
+import type { JSX, ReactNode } from 'react';
+import type { CardFactProps, CardLedgerLine } from './CardKit.types';
+/**
+ * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.
+ *
+ * `BaseListCard` says nothing about what goes inside a row's expanded area — it
+ * spans the rails and stops, because the design belongs to the consumer. Right
+ * for the card; wrong as the place where every entity in an admin app invents
+ * its own two-column layout, its own label/value pair and its own ledger.
+ *
+ * So the four shapes that actually repeat live here, once. Nothing here knows a
+ * domain: they take `ReactNode` and lay it out.
+ */
+/** The expanded body's two-column split: detail on the left, a ledger right. */
+export declare function DetailColumns({ left, right }: {
+    left: ReactNode;
+    right: ReactNode;
+}): JSX.Element;
+/**
+ * One labelled fact inside an expanded body.
+ *
+ * Horizontal, not stacked: the body is already a wide area with room for a
+ * label beside its value, and stacking them there would ape the summary rails
+ * above without their alignment.
+ */
+export declare function Fact({ label, value }: CardFactProps): JSX.Element;
+/**
+ * A money ledger: rows of label/amount, then a ruled total.
+ *
+ * The total is separated by a RULE rather than by weight alone, because a
+ * subtotal and a total in one column with only bold between them is the classic
+ * misread — the eye lands on whichever number is larger.
+ *
+ * The figures arrive pre-formatted. This is a layout, and a component that
+ * formatted money would be choosing a locale on the consumer's behalf.
+ */
+export declare function Ledger({ lines, total, }: {
+    lines: CardLedgerLine[];
+    total: {
+        label: string;
+        value: ReactNode;
+    };
+}): JSX.Element;
+/** A heading inside the expanded body, for a section that needs naming. */
+export declare function BodyHeading({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+/**
+ * A wrapping run of small items — permission names, role names, target ids.
+ *
+ * The whole reason several entities earn a list card at all: a `string[]` has no
+ * honest table cell. Truncated to "3 items" it says nothing; printed in full it
+ * destroys the column. Here it simply wraps.
+ */
+export declare function TagList({ items, empty, }: {
+    items: readonly string[];
+    /** What to show for an empty run — the consumer's sentence, no default. */
+    empty: string;
+}): JSX.Element;
+//# sourceMappingURL=list-card-parts.d.ts.map

package/dist/types/components/data-display/CardKit/list-card-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-card-parts.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/list-card-parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE;;;;;;;;;;GAUG;AAEH,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAOjG;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAWjE;AAED;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC;CAC5C,GAAG,GAAG,CAAC,OAAO,CAqCd;AAED,2EAA2E;AAC3E,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAe9E;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,GAAG,CAAC,OAAO,CAyBd"}

package/dist/types/components/data-display/CardKit/row-actions-to-menu.d.ts

@@ -0,0 +1,17 @@
+import type { DropdownMenuItem } from '../../navigation/DropdownMenu';
+import type { RowAction } from '../DataViews';
+/**
+ * Adapt a list of {@link RowAction}s into single-row kebab items.
+ *
+ * Applies each action's `isVisible` guard, resolves its per-row `rowLabel`
+ * override, carries its colour, and fires `onSelect([row])` on click.
+ *
+ * The point is that ONE definition drives both surfaces. An entity that already
+ * declares its per-row actions as `RowAction[]` — because the table's multi-
+ * select menu needs them — gets the card's kebab from the same array through
+ * `renderRowMenu` / `renderCard`, with no second list to keep in step. Two
+ * lists is how a "Duplicar" that appears in the table and not on the card
+ * happens, and nothing reports it.
+ */
+export declare function rowActionsToMenuItems<T extends Record<string, unknown>>(actions: RowAction<T>[], row: T): DropdownMenuItem[];
+//# sourceMappingURL=row-actions-to-menu.d.ts.map

package/dist/types/components/data-display/CardKit/row-actions-to-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-actions-to-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/row-actions-to-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,EACvB,GAAG,EAAE,CAAC,GACL,gBAAgB,EAAE,CASpB"}

package/dist/types/components/data-display/CardKit/use-remove-confirm.d.ts

@@ -0,0 +1,62 @@
+import type { JSX } from 'react';
+/** The `{ ok, error }` envelope a write action answers with. */
+export interface CardWriteResult {
+    ok: boolean;
+    error?: string;
+}
+interface RemoveConfirmOptions {
+    /** The destructive write. Called ONLY after the operator confirms. */
+    write: () => Promise<CardWriteResult>;
+    /** The popup's question. */
+    title: string;
+    /** The row being removed, echoed into the popup so it names a thing. */
+    entityName: string;
+    /**
+     * What happens, and whether it can be walked back. Say which — the difference
+     * between a soft delete a recycle bin recovers and one nothing recovers is
+     * the whole content of the decision being asked for.
+     */
+    description: string;
+    /** The confirm button's VERB. Required, never defaulted. */
+    confirmText: string;
+    /** Used when the write fails without a message of its own. */
+    fallbackError: string;
+    dataTestId: string;
+}
+interface RemoveConfirm {
+    /** Hand this to the menu item's `onClick`: it opens the popup, nothing more. */
+    request: () => void;
+    /** Render alongside the trigger. */
+    dialog: JSX.Element;
+}
+/**
+ * The confirm-before-removing wiring every card/row menu repeats, in one place.
+ *
+ * It closes the three gaps a hand-rolled version keeps re-opening: the write
+ * leaves ONLY on confirm; a refusal is surfaced twice — inside the popup, where
+ * the operator is still deciding, and in the shared snackbar behind it — and a
+ * failed attempt leaves the popup OPEN to be retried instead of vanishing over
+ * a delete that never happened.
+ *
+ * The difference from {@link useRowConfirm} is which surface it serves: this one
+ * is for a SELF-CONTAINED menu that already sits inside a
+ * `CardActionsProvider`, so it reads the refresh and the error channel from
+ * context and answers the `{ ok, error }` envelope those actions use.
+ * `useRowConfirm` is for a grid whose actions are declared as `RowAction[]` and
+ * act on a selection.
+ *
+ * ```tsx
+ * const remove = useRemoveConfirm({
+ *   write: () => deleteCategory({ tenantSlug, id: row.id }),
+ *   title: copy.deleteTitle,
+ *   entityName: row.name,
+ *   description: copy.deleteDescription,
+ *   confirmText: copy.delete,
+ *   fallbackError: copy.deleteFailed,
+ *   dataTestId: 'category-delete-confirm',
+ * });
+ * ```
+ */
+export declare function useRemoveConfirm({ write, title, entityName, description, confirmText, fallbackError, dataTestId, }: RemoveConfirmOptions): RemoveConfirm;
+export {};
+//# sourceMappingURL=use-remove-confirm.d.ts.map

package/dist/types/components/data-display/CardKit/use-remove-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-remove-confirm.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/CardKit/use-remove-confirm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,gEAAgE;AAChE,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAC5B,sEAAsE;IACtE,KAAK,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAa;IACrB,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,UAAU,GACX,EAAE,oBAAoB,GAAG,aAAa,CA4BtC"}