@lablup/ui-common 0.1.0-alpha.8 → 0.2.0-alpha.15

package/dist/components/DeleteConfirmModal/DeleteConfirmModal.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { ModalProps } from '../Modal/Modal';
+export interface DeleteConfirmModalItem {
+    /** Unique key of the item. */
+    key: string;
+    /** What the list shows for it. */
+    label: ReactNode;
+}
+export interface DeleteConfirmModalProps extends Omit<ModalProps, "children" | "title" | "footer" | "actionLabel" | "actionVariant" | "hasCancelButton" | "isLoading"> {
+    /** The items about to be deleted. */
+    items: DeleteConfirmModalItem[];
+    /**
+     * Title. Default: the catalog's `uic.DeleteConfirmModal.title` ("Delete"),
+     * or `uic.DeleteConfirmModal.titleMany` ("Delete 3 items") for several.
+     */
+    title?: ReactNode;
+    /** Glyph before the title. Default: the theme's `warning` icon */
+    titleIcon?: ReactNode;
+    /**
+     * The question above the list. Default: the catalog's
+     * `uic.DeleteConfirmModal.targetDescription` when `target` is set, else
+     * `uic.DeleteConfirmModal.description`.
+     */
+    description?: ReactNode;
+    /** What kind of thing is deleted ("Project"), named in the default question. */
+    target?: ReactNode;
+    /**
+     * The action can be undone: no typed confirmation, no "cannot be undone"
+     * warning. Default: false
+     */
+    isReversible?: boolean;
+    /** Asks for the typed confirmation for a single item too. Default: false */
+    isConfirmInputRequired?: boolean;
+    /**
+     * What the user types. Default: the item's label when there is one item and
+     * it is plain text, else the catalog's `uic.DeleteConfirmModal.confirmText`
+     * ("Delete"). Pass it when a single item's label is a node. An empty string
+     * keeps the action disabled and shows no field.
+     */
+    confirmText?: string;
+    /**
+     * Label above the field. A function receives the confirm text, drawn as a
+     * token, and places it. Default: the catalog's
+     * `uic.DeleteConfirmModal.typeToConfirm` ("Type {confirmText} to confirm.")
+     */
+    inputLabel?: ReactNode | ((confirmText: ReactNode) => ReactNode);
+    /** Placeholder of the field. */
+    inputPlaceholder?: string;
+    /** Disables the field, e.g. while the deletion runs. */
+    isInputDisabled?: boolean;
+    /** Content after the field, e.g. options that change what is deleted. */
+    extraContent?: ReactNode;
+    /**
+     * The irreversibility warning. Default: the catalog's
+     * `uic.DeleteConfirmModal.cannotBeUndone` ("This action cannot be undone.")
+     */
+    warningText?: string;
+    /** Maximum height of the item list, in pixels; 0 for none. Default: 200 */
+    itemListMaxHeight?: number;
+    /** Lists the items without the boxed, scrolling surface. Default: false */
+    hasPlainItems?: boolean;
+    /**
+     * The deletion. Returning a promise shows the action pending until it
+     * settles. It does not close the modal.
+     */
+    onAction: () => unknown;
+    /** Action label. Default: the catalog's `uic.common.delete` ("Delete") */
+    actionLabel?: string;
+    /**
+     * Disables the action. It only adds to the typed-confirmation gate, which it
+     * cannot open.
+     */
+    isActionDisabled?: boolean;
+}
+export declare function DeleteConfirmModal({ items, title, titleIcon, description, target, isReversible, isConfirmInputRequired, confirmText: confirmTextProp, inputLabel, inputPlaceholder, isInputDisabled, extraContent, warningText, itemListMaxHeight, hasPlainItems, actionLabel, isActionDisabled, isOpen, ...rest }: DeleteConfirmModalProps): import("react").JSX.Element;
+export declare namespace DeleteConfirmModal {
+    var displayName: string;
+}

package/dist/components/DeleteConfirmModal/DeleteConfirmModal.messages.d.ts

@@ -0,0 +1,30 @@
+export declare const deleteConfirmModalMessages: {
+    readonly "uic.DeleteConfirmModal.title": {
+        readonly defaultMessage: "Delete";
+        readonly description: "Title of the dialog that confirms deleting one item";
+    };
+    readonly "uic.DeleteConfirmModal.titleMany": {
+        readonly defaultMessage: "{count, plural, one {Delete # item} other {Delete # items}}";
+        readonly description: "Title of the dialog that confirms deleting several items; {count} is how many";
+    };
+    readonly "uic.DeleteConfirmModal.description": {
+        readonly defaultMessage: "Are you sure you want to delete?";
+        readonly description: "Question above the list of items about to be deleted";
+    };
+    readonly "uic.DeleteConfirmModal.targetDescription": {
+        readonly defaultMessage: "Are you sure you want to permanently delete {target}?";
+        readonly description: "Question above the list of items about to be deleted; {target} names the kind of item, e.g. Project";
+    };
+    readonly "uic.DeleteConfirmModal.typeToConfirm": {
+        readonly defaultMessage: "Type {confirmText} to confirm.";
+        readonly description: "Instruction above the confirmation field; {confirmText} is the text to type, shown as a token";
+    };
+    readonly "uic.DeleteConfirmModal.confirmText": {
+        readonly defaultMessage: "Delete";
+        readonly description: "The word the user types to confirm deleting several items at once";
+    };
+    readonly "uic.DeleteConfirmModal.cannotBeUndone": {
+        readonly defaultMessage: "This action cannot be undone.";
+        readonly description: "Warning that the deletion is permanent";
+    };
+};

package/dist/components/DeleteConfirmModal/DeleteConfirmModal.messages.js

@@ -0,0 +1,36 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/DeleteConfirmModal/DeleteConfirmModal.messages.ts
+var t = e({
+	"uic.DeleteConfirmModal.title": {
+		defaultMessage: "Delete",
+		description: "Title of the dialog that confirms deleting one item"
+	},
+	"uic.DeleteConfirmModal.titleMany": {
+		defaultMessage: "{count, plural, one {Delete # item} other {Delete # items}}",
+		description: "Title of the dialog that confirms deleting several items; {count} is how many"
+	},
+	"uic.DeleteConfirmModal.description": {
+		defaultMessage: "Are you sure you want to delete?",
+		description: "Question above the list of items about to be deleted"
+	},
+	"uic.DeleteConfirmModal.targetDescription": {
+		defaultMessage: "Are you sure you want to permanently delete {target}?",
+		description: "Question above the list of items about to be deleted; {target} names the kind of item, e.g. Project"
+	},
+	"uic.DeleteConfirmModal.typeToConfirm": {
+		defaultMessage: "Type {confirmText} to confirm.",
+		description: "Instruction above the confirmation field; {confirmText} is the text to type, shown as a token"
+	},
+	"uic.DeleteConfirmModal.confirmText": {
+		defaultMessage: "Delete",
+		description: "The word the user types to confirm deleting several items at once"
+	},
+	"uic.DeleteConfirmModal.cannotBeUndone": {
+		defaultMessage: "This action cannot be undone.",
+		description: "Warning that the deletion is permanent"
+	}
+});
+//#endregion
+export { t as deleteConfirmModalMessages };
+
+//# sourceMappingURL=DeleteConfirmModal.messages.js.map

package/dist/components/DeleteConfirmModal/DeleteConfirmModal.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteConfirmModal.messages.js","names":[],"sources":["../../../src/components/DeleteConfirmModal/DeleteConfirmModal.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const deleteConfirmModalMessages = defineMessages({\n  \"uic.DeleteConfirmModal.title\": {\n    defaultMessage: \"Delete\",\n    description: \"Title of the dialog that confirms deleting one item\",\n  },\n  \"uic.DeleteConfirmModal.titleMany\": {\n    defaultMessage: \"{count, plural, one {Delete # item} other {Delete # items}}\",\n    description:\n      \"Title of the dialog that confirms deleting several items; {count} is how many\",\n  },\n  \"uic.DeleteConfirmModal.description\": {\n    defaultMessage: \"Are you sure you want to delete?\",\n    description: \"Question above the list of items about to be deleted\",\n  },\n  \"uic.DeleteConfirmModal.targetDescription\": {\n    defaultMessage: \"Are you sure you want to permanently delete {target}?\",\n    description:\n      \"Question above the list of items about to be deleted; {target} names the kind of item, e.g. Project\",\n  },\n  \"uic.DeleteConfirmModal.typeToConfirm\": {\n    defaultMessage: \"Type {confirmText} to confirm.\",\n    description:\n      \"Instruction above the confirmation field; {confirmText} is the text to type, shown as a token\",\n  },\n  \"uic.DeleteConfirmModal.confirmText\": {\n    defaultMessage: \"Delete\",\n    description: \"The word the user types to confirm deleting several items at once\",\n  },\n  \"uic.DeleteConfirmModal.cannotBeUndone\": {\n    defaultMessage: \"This action cannot be undone.\",\n    description: \"Warning that the deletion is permanent\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAA6B,EAAe;CACvD,gCAAgC;EAC9B,gBAAgB;EAChB,aAAa;CACf;CACA,oCAAoC;EAClC,gBAAgB;EAChB,aACE;CACJ;CACA,sCAAsC;EACpC,gBAAgB;EAChB,aAAa;CACf;CACA,4CAA4C;EAC1C,gBAAgB;EAChB,aACE;CACJ;CACA,wCAAwC;EACtC,gBAAgB;EAChB,aACE;CACJ;CACA,sCAAsC;EACpC,gBAAgB;EAChB,aAAa;CACf;CACA,yCAAyC;EACvC,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/DeleteConfirmModal/DeleteConfirmModal2.js

@@ -0,0 +1,102 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { Modal as t } from "../Modal/Modal2.js";
+import { translateWithNodes as n } from "../../i18n/translateWithNodes.js";
+/* empty css                   */
+import { isValidElement as r, useState as i } from "react";
+import { VStack as a } from "@astryxdesign/core/Stack";
+import { Text as o } from "@astryxdesign/core/Text";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@astryxdesign/core/Icon";
+import { Token as u } from "@astryxdesign/core/Token";
+import { TextInput as d } from "@astryxdesign/core/TextInput";
+import { Banner as f } from "@astryxdesign/core/Banner";
+//#region src/components/DeleteConfirmModal/DeleteConfirmModal.tsx
+function p(e) {
+	return e == null || typeof e == "boolean" ? "" : typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(p).join("") : r(e) ? p(e.props.children) : "";
+}
+function m(e) {
+	if (typeof e == "string") return e;
+	if (typeof e == "number") return String(e);
+}
+function h({ items: r, title: h, titleIcon: g, description: _, target: v, isReversible: y = !1, isConfirmInputRequired: b = !1, confirmText: x, inputLabel: S, inputPlaceholder: C, isInputDisabled: w, extraContent: T, warningText: E, itemListMaxHeight: D = 200, hasPlainItems: O = !1, actionLabel: k, isActionDisabled: A, isOpen: j, ...M }) {
+	let N = e(), [P, F] = i(""), [I, L] = i(j);
+	j !== I && (L(j), j && F(""));
+	let R = h ?? (r.length > 1 ? N("uic.DeleteConfirmModal.titleMany", { count: r.length }) : N("uic.DeleteConfirmModal.title")), z = x ?? (r.length === 1 ? m(r[0]?.label) : void 0) ?? N("uic.DeleteConfirmModal.confirmText"), B = !y && (r.length > 1 || b), V = B && z !== "", H = B ? z !== "" && P === z : r.length > 0, U = E ?? N("uic.DeleteConfirmModal.cannotBeUndone"), W = _ ?? (v == null ? N("uic.DeleteConfirmModal.description") : n(N, "uic.DeleteConfirmModal.targetDescription", { target: v })), G = /* @__PURE__ */ s(u, {
+		label: z,
+		size: "sm"
+	}), K = typeof S == "function" ? S(G) : S ?? n(N, "uic.DeleteConfirmModal.typeToConfirm", { confirmText: G }), q = S === void 0 ? N("uic.DeleteConfirmModal.typeToConfirm", { confirmText: z }) : p(typeof S == "function" ? S(z) : S), J = r.length > 0 ? /* @__PURE__ */ s("div", {
+		role: "list",
+		className: O ? void 0 : ["uic-delete-confirm-modal__items", D ? "uic-delete-confirm-modal__items--scroll" : null].filter(Boolean).join(" "),
+		style: !O && D ? { maxHeight: D } : void 0,
+		children: /* @__PURE__ */ s(a, {
+			align: "stretch",
+			gap: 1,
+			children: r.map((e) => /* @__PURE__ */ s("div", {
+				role: "listitem",
+				children: e.label
+			}, e.key))
+		})
+	}) : null;
+	return /* @__PURE__ */ s(t, {
+		...M,
+		isOpen: j,
+		title: /* @__PURE__ */ c("span", {
+			className: "uic-delete-confirm-modal__title",
+			children: [/* @__PURE__ */ s("span", {
+				className: "uic-delete-confirm-modal__title-icon",
+				children: g ?? /* @__PURE__ */ s(l, {
+					icon: "warning",
+					size: "sm",
+					color: "inherit"
+				})
+			}), R]
+		}),
+		actionLabel: k ?? N("uic.common.delete"),
+		actionVariant: "destructive",
+		isActionDisabled: !H || A === !0,
+		children: /* @__PURE__ */ c(a, {
+			align: "stretch",
+			gap: 2,
+			children: [
+				W ? /* @__PURE__ */ s(o, { children: W }) : null,
+				!V || r.length > 1 ? J : null,
+				V ? /* @__PURE__ */ c(a, {
+					align: "stretch",
+					gap: 1,
+					children: [
+						/* @__PURE__ */ s(o, {
+							type: "label",
+							children: K
+						}),
+						/* @__PURE__ */ s(d, {
+							label: q,
+							isLabelHidden: !0,
+							value: P,
+							onChange: (e) => F(e ?? ""),
+							placeholder: C,
+							isDisabled: w,
+							hasAutoFocus: !0,
+							hasClear: !0,
+							htmlName: "confirmText"
+						}),
+						/* @__PURE__ */ s(o, {
+							className: "uic-delete-confirm-modal__warning",
+							children: U
+						})
+					]
+				}) : null,
+				T,
+				!V && !y ? /* @__PURE__ */ s(f, {
+					status: "error",
+					title: U
+				}) : null
+			]
+		})
+	});
+}
+h.displayName = "DeleteConfirmModal";
+//#endregion
+export { h as DeleteConfirmModal };
+
+//# sourceMappingURL=DeleteConfirmModal2.js.map
+import "../../assets/components/DeleteConfirmModal/DeleteConfirmModal.css";

package/dist/components/DeleteConfirmModal/DeleteConfirmModal2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteConfirmModal2.js","names":[],"sources":["../../../src/components/DeleteConfirmModal/DeleteConfirmModal.tsx"],"sourcesContent":["/**\n * DeleteConfirmModal\n *\n * Confirms a deletion on `Modal`: a title with a warning glyph, a question,\n * the items about to go, and a destructive action. For an irreversible\n * deletion of several items, or when `isConfirmInputRequired` is set, the\n * user types `confirmText` before the action enables.\n *\n * `isReversible` keeps the same layout for an action the user can undo\n * (revoking an assignment): no typed confirmation and no \"cannot be undone\"\n * warning.\n *\n * @example\n * <DeleteConfirmModal\n *   isOpen={target != null}\n *   onOpenChange={(open) => !open && setTarget(null)}\n *   items={target ? [{ key: target.id, label: target.name }] : []}\n *   target=\"Preset\"\n *   confirmText={target?.name}\n *   isConfirmInputRequired\n *   onAction={async () => {\n *     await remove(target.id);\n *     setTarget(null);\n *   }}\n * />\n */\nimport { isValidElement, useState, type ReactNode } from \"react\";\nimport { Banner } from \"@astryxdesign/core/Banner\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\nimport { VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { Token } from \"@astryxdesign/core/Token\";\n\nimport { translateWithNodes } from \"../../i18n/translateWithNodes\";\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { Modal, type ModalProps } from \"../Modal/Modal\";\nimport \"./DeleteConfirmModal.css\";\n\nexport interface DeleteConfirmModalItem {\n  /** Unique key of the item. */\n  key: string;\n  /** What the list shows for it. */\n  label: ReactNode;\n}\n\nexport interface DeleteConfirmModalProps extends Omit<\n  ModalProps,\n  | \"children\"\n  | \"title\"\n  | \"footer\"\n  | \"actionLabel\"\n  | \"actionVariant\"\n  | \"hasCancelButton\"\n  | \"isLoading\"\n> {\n  /** The items about to be deleted. */\n  items: DeleteConfirmModalItem[];\n  /**\n   * Title. Default: the catalog's `uic.DeleteConfirmModal.title` (\"Delete\"),\n   * or `uic.DeleteConfirmModal.titleMany` (\"Delete 3 items\") for several.\n   */\n  title?: ReactNode;\n  /** Glyph before the title. Default: the theme's `warning` icon */\n  titleIcon?: ReactNode;\n  /**\n   * The question above the list. Default: the catalog's\n   * `uic.DeleteConfirmModal.targetDescription` when `target` is set, else\n   * `uic.DeleteConfirmModal.description`.\n   */\n  description?: ReactNode;\n  /** What kind of thing is deleted (\"Project\"), named in the default question. */\n  target?: ReactNode;\n  /**\n   * The action can be undone: no typed confirmation, no \"cannot be undone\"\n   * warning. Default: false\n   */\n  isReversible?: boolean;\n  /** Asks for the typed confirmation for a single item too. Default: false */\n  isConfirmInputRequired?: boolean;\n  /**\n   * What the user types. Default: the item's label when there is one item and\n   * it is plain text, else the catalog's `uic.DeleteConfirmModal.confirmText`\n   * (\"Delete\"). Pass it when a single item's label is a node. An empty string\n   * keeps the action disabled and shows no field.\n   */\n  confirmText?: string;\n  /**\n   * Label above the field. A function receives the confirm text, drawn as a\n   * token, and places it. Default: the catalog's\n   * `uic.DeleteConfirmModal.typeToConfirm` (\"Type {confirmText} to confirm.\")\n   */\n  inputLabel?: ReactNode | ((confirmText: ReactNode) => ReactNode);\n  /** Placeholder of the field. */\n  inputPlaceholder?: string;\n  /** Disables the field, e.g. while the deletion runs. */\n  isInputDisabled?: boolean;\n  /** Content after the field, e.g. options that change what is deleted. */\n  extraContent?: ReactNode;\n  /**\n   * The irreversibility warning. Default: the catalog's\n   * `uic.DeleteConfirmModal.cannotBeUndone` (\"This action cannot be undone.\")\n   */\n  warningText?: string;\n  /** Maximum height of the item list, in pixels; 0 for none. Default: 200 */\n  itemListMaxHeight?: number;\n  /** Lists the items without the boxed, scrolling surface. Default: false */\n  hasPlainItems?: boolean;\n  /**\n   * The deletion. Returning a promise shows the action pending until it\n   * settles. It does not close the modal.\n   */\n  onAction: () => unknown;\n  /** Action label. Default: the catalog's `uic.common.delete` (\"Delete\") */\n  actionLabel?: string;\n  /**\n   * Disables the action. It only adds to the typed-confirmation gate, which it\n   * cannot open.\n   */\n  isActionDisabled?: boolean;\n}\n\n/** The text of a node, for the field's accessible name. */\nfunction toText(node: ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(toText).join(\"\");\n  if (isValidElement(node)) {\n    return toText((node.props as { children?: ReactNode }).children);\n  }\n  return \"\";\n}\n\nfunction plainText(node: ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  return undefined;\n}\n\nexport function DeleteConfirmModal({\n  items,\n  title,\n  titleIcon,\n  description,\n  target,\n  isReversible = false,\n  isConfirmInputRequired = false,\n  confirmText: confirmTextProp,\n  inputLabel,\n  inputPlaceholder,\n  isInputDisabled,\n  extraContent,\n  warningText,\n  itemListMaxHeight = 200,\n  hasPlainItems = false,\n  actionLabel,\n  isActionDisabled,\n  isOpen,\n  ...rest\n}: DeleteConfirmModalProps) {\n  const t = useUicTranslator();\n  const [typedText, setTypedText] = useState(\"\");\n\n  // The gate resets on every open.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (isOpen !== wasOpen) {\n    setWasOpen(isOpen);\n    if (isOpen) setTypedText(\"\");\n  }\n\n  const resolvedTitle =\n    title ??\n    (items.length > 1\n      ? t(\"uic.DeleteConfirmModal.titleMany\", { count: items.length })\n      : t(\"uic.DeleteConfirmModal.title\"));\n\n  const confirmText =\n    confirmTextProp ??\n    (items.length === 1 ? plainText(items[0]?.label) : undefined) ??\n    t(\"uic.DeleteConfirmModal.confirmText\");\n\n  // An empty confirm text (the target is not resolved yet) must neither arm\n  // an already satisfied gate nor drop the gate: no field, action disabled.\n  const wantsInput = !isReversible && (items.length > 1 || isConfirmInputRequired);\n  const needsInput = wantsInput && confirmText !== \"\";\n  const isGateOpen = wantsInput\n    ? confirmText !== \"\" && typedText === confirmText\n    : items.length > 0;\n\n  const warning = warningText ?? t(\"uic.DeleteConfirmModal.cannotBeUndone\");\n\n  const question =\n    description ??\n    (target != null\n      ? translateWithNodes(t, \"uic.DeleteConfirmModal.targetDescription\", { target })\n      : t(\"uic.DeleteConfirmModal.description\"));\n\n  const token = <Token label={confirmText} size=\"sm\" />;\n  const label =\n    typeof inputLabel === \"function\"\n      ? inputLabel(token)\n      : (inputLabel ??\n        translateWithNodes(t, \"uic.DeleteConfirmModal.typeToConfirm\", {\n          confirmText: token,\n        }));\n  const accessibleLabel =\n    inputLabel === undefined\n      ? t(\"uic.DeleteConfirmModal.typeToConfirm\", { confirmText })\n      : toText(typeof inputLabel === \"function\" ? inputLabel(confirmText) : inputLabel);\n\n  const itemList =\n    items.length > 0 ? (\n      <div\n        role=\"list\"\n        className={\n          hasPlainItems\n            ? undefined\n            : [\n                \"uic-delete-confirm-modal__items\",\n                itemListMaxHeight ? \"uic-delete-confirm-modal__items--scroll\" : null,\n              ]\n                .filter(Boolean)\n                .join(\" \")\n        }\n        style={\n          !hasPlainItems && itemListMaxHeight\n            ? { maxHeight: itemListMaxHeight }\n            : undefined\n        }\n      >\n        <VStack align=\"stretch\" gap={1}>\n          {items.map((item) => (\n            <div key={item.key} role=\"listitem\">\n              {item.label}\n            </div>\n          ))}\n        </VStack>\n      </div>\n    ) : null;\n\n  return (\n    <Modal\n      {...rest}\n      isOpen={isOpen}\n      title={\n        <span className=\"uic-delete-confirm-modal__title\">\n          <span className=\"uic-delete-confirm-modal__title-icon\">\n            {titleIcon ?? <Icon icon=\"warning\" size=\"sm\" color=\"inherit\" />}\n          </span>\n          {resolvedTitle}\n        </span>\n      }\n      actionLabel={actionLabel ?? t(\"uic.common.delete\")}\n      actionVariant=\"destructive\"\n      isActionDisabled={!isGateOpen || isActionDisabled === true}\n    >\n      <VStack align=\"stretch\" gap={2}>\n        {question ? <Text>{question}</Text> : null}\n        {!needsInput || items.length > 1 ? itemList : null}\n        {needsInput ? (\n          <VStack align=\"stretch\" gap={1}>\n            <Text type=\"label\">{label}</Text>\n            <TextInput\n              label={accessibleLabel}\n              isLabelHidden\n              value={typedText}\n              onChange={(value) => setTypedText(value ?? \"\")}\n              placeholder={inputPlaceholder}\n              isDisabled={isInputDisabled}\n              hasAutoFocus\n              hasClear\n              htmlName=\"confirmText\"\n            />\n            <Text className=\"uic-delete-confirm-modal__warning\">{warning}</Text>\n          </VStack>\n        ) : null}\n        {extraContent}\n        {/* With a field, the warning sits under it; without one, a banner. */}\n        {!needsInput && !isReversible ? (\n          <Banner status=\"error\" title={warning} />\n        ) : null}\n      </VStack>\n    </Modal>\n  );\n}\n\nDeleteConfirmModal.displayName = \"DeleteConfirmModal\";\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { DeleteConfirmModal } from './DeleteConfirmModal';
+export type { DeleteConfirmModalItem, DeleteConfirmModalProps, } from './DeleteConfirmModal';

package/dist/components/DeleteConfirmModal/index.js

@@ -0,0 +1,2 @@
+import { DeleteConfirmModal as e } from "./DeleteConfirmModal2.js";
+export { e as DeleteConfirmModal };

package/dist/components/DigitPopIn/DigitPopIn.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+export interface DigitPopInProps {
+    /** The text to animate, already formatted ("1,234", "98.5%"). */
+    text: string;
+    /** Extra class name applied to the root. */
+    className?: string;
+}
+export declare function DigitPopIn({ text, className }: DigitPopInProps): JSX.Element;

package/dist/components/DigitPopIn/DigitPopIn2.js

@@ -0,0 +1,30 @@
+import { usePrefersReducedMotion as e } from "../../hooks/usePrefersReducedMotion.js";
+/* empty css           */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/DigitPopIn/DigitPopIn.tsx
+function r({ text: r, className: i = "" }) {
+	let a = e(), o = ["uic-digit-pop-in", i].filter(Boolean).join(" ");
+	return a ? /* @__PURE__ */ t("span", {
+		className: o,
+		children: r
+	}) : /* @__PURE__ */ n("span", {
+		className: o,
+		children: [/* @__PURE__ */ t("span", {
+			className: "uic-digit-pop-in__text",
+			children: r
+		}), /* @__PURE__ */ t("span", {
+			className: "uic-digit-pop-in__digits",
+			"aria-hidden": "true",
+			children: Array.from(r).map((e, n) => /* @__PURE__ */ t("span", {
+				className: "uic-digit-pop-in__digit",
+				style: { "--digit-pop-in-index": n },
+				children: e === " " ? "\xA0" : e
+			}, n))
+		}, r)]
+	});
+}
+//#endregion
+export { r as DigitPopIn };
+
+//# sourceMappingURL=DigitPopIn2.js.map
+import "../../assets/components/DigitPopIn/DigitPopIn.css";

package/dist/components/DigitPopIn/DigitPopIn2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DigitPopIn2.js","names":[],"sources":["../../../src/components/DigitPopIn/DigitPopIn.tsx"],"sourcesContent":["/**\n * DigitPopIn Component\n *\n * Renders text, usually a formatted number, one element per character, each\n * rising into place from a light blur after the one before it. A new `text`\n * replays the animation. Under `prefers-reduced-motion` it renders the plain\n * text and never animates.\n *\n * The characters are hidden from assistive tech and a plain copy of the text\n * is read instead, so a screen reader hears \"1,234\" rather than five glyphs.\n *\n * `StatCard` uses it for `animate=\"digits\"`; use it directly for a number\n * that is not in a card.\n */\n\nimport type { CSSProperties, JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport \"./DigitPopIn.css\";\n\nexport interface DigitPopInProps {\n  /** The text to animate, already formatted (\"1,234\", \"98.5%\"). */\n  text: string;\n  /** Extra class name applied to the root. */\n  className?: string;\n}\n\nexport function DigitPopIn({ text, className = \"\" }: DigitPopInProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const rootClass = [\"uic-digit-pop-in\", className].filter(Boolean).join(\" \");\n\n  if (prefersReducedMotion) {\n    return <span className={rootClass}>{text}</span>;\n  }\n\n  return (\n    <span className={rootClass}>\n      <span className=\"uic-digit-pop-in__text\">{text}</span>\n      {/* Keyed on the text, so a new value remounts the characters and the\n          animation plays again. */}\n      <span key={text} className=\"uic-digit-pop-in__digits\" aria-hidden=\"true\">\n        {Array.from(text).map((char, index) => (\n          <span\n            // Position is the identity: the list is rebuilt whole whenever\n            // the text changes.\n            key={index}\n            className=\"uic-digit-pop-in__digit\"\n            style={{ \"--digit-pop-in-index\": index } as CSSProperties}\n          >\n            {char === \" \" ? \" \" : char}\n          </span>\n        ))}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;AA0BA,SAAgB,EAAW,EAAE,SAAM,eAAY,MAAoC;CACjF,IAAM,IAAuB,EAAwB,GAC/C,IAAY,CAAC,oBAAoB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAM1E,OAJI,IACK,kBAAC,QAAD;EAAM,WAAW;EAAY,UAAA;CAAW,CAAA,IAI/C,kBAAC,QAAD;EAAM,WAAW;EAAjB,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAW,CAAA,GAGrD,kBAAC,QAAD;GAAiB,WAAU;GAA2B,eAAY;GAC/D,UAAA,MAAM,KAAK,CAAI,CAAC,CAAC,KAAK,GAAM,MAC3B,kBAAC,QAAD;IAIE,WAAU;IACV,OAAO,EAAE,wBAAwB,EAAM;IAEtC,UAAA,MAAS,MAAM,SAAM;GAClB,GALC,CAKD,CACP;EACG,GAZK,CAYL,CACF;;AAEV"}

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

@@ -0,0 +1,2 @@
+export { DigitPopIn } from './DigitPopIn';
+export type { DigitPopInProps } from './DigitPopIn';

package/dist/components/DigitPopIn/index.js

@@ -0,0 +1,2 @@
+import { DigitPopIn as e } from "./DigitPopIn2.js";
+export { e as DigitPopIn };

package/dist/components/DividedRow/DividedRow.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface DividedRowProps {
+    children?: ReactNode;
+    /** Whether items flow onto more lines. @default 'wrap' */
+    wrap?: "wrap" | "nowrap";
+    /** Gap between lines. A number is pixels. @default var(--spacing-8) (32px) */
+    rowGap?: number | string;
+    /**
+     * Gap between items on a line; the divider sits in its middle. A number is
+     * pixels. @default var(--spacing-12) (48px)
+     */
+    columnGap?: number | string;
+    /** Divider thickness in pixels. @default 1 */
+    dividerWidth?: number;
+    /** Divider colour. @default var(--color-border) */
+    dividerColor?: string;
+    /** How far the divider stops short of the item's top and bottom, in pixels. @default 0 */
+    dividerInset?: number;
+    /** Inline styles on each item's wrapper. */
+    itemStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function DividedRow({ children, wrap, rowGap, columnGap, dividerWidth, dividerColor, dividerInset, itemStyle, className, style, }: DividedRowProps): import("react").JSX.Element;
+export declare namespace DividedRow {
+    var displayName: string;
+}

package/dist/components/DividedRow/DividedRow2.js

@@ -0,0 +1,63 @@
+/* empty css           */
+import { Children as e, isValidElement as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DividedRow/DividedRow.tsx
+var s = (e) => typeof e == "number" ? `${e}px` : e;
+function c({ children: c, wrap: l = "wrap", rowGap: u = "var(--spacing-8)", columnGap: d = "var(--spacing-12)", dividerWidth: f = 1, dividerColor: p, dividerInset: m = 0, itemStyle: h, className: g, style: _ }) {
+	let v = e.toArray(c).filter(Boolean), y = r(null), b = r([]), [x, S] = i([]), C = r(() => {});
+	return C.current = () => {
+		let e = b.current.slice(0, v.length).filter((e) => e !== null), t = e.map((t, n) => n === e.length - 1 || e[n + 1].offsetTop > t.offsetTop);
+		S((e) => e.length === t.length && e.every((e, n) => e === t[n]) ? e : t);
+	}, n(() => {
+		b.current.length = v.length, C.current();
+	}, [v.length]), n(() => {
+		let e = y.current;
+		if (!e) return;
+		let t = () => C.current(), n = new ResizeObserver(t);
+		n.observe(e);
+		let r = new ResizeObserver(t);
+		b.current.forEach((e) => e && r.observe(e));
+		let i = new MutationObserver(t);
+		return i.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0
+		}), window.addEventListener("resize", t), t(), () => {
+			n.disconnect(), r.disconnect(), i.disconnect(), window.removeEventListener("resize", t);
+		};
+	}, []), /* @__PURE__ */ a("div", {
+		ref: y,
+		className: ["uic-divided-row", g].filter(Boolean).join(" "),
+		style: {
+			flexWrap: l,
+			rowGap: s(u),
+			columnGap: s(d),
+			"--divided-row-column-gap": s(d),
+			..._
+		},
+		children: v.map((e, n) => /* @__PURE__ */ o("div", {
+			ref: (e) => {
+				b.current[n] = e;
+			},
+			className: "uic-divided-row__item",
+			style: h,
+			children: [e, /* @__PURE__ */ a("span", {
+				"aria-hidden": !0,
+				className: "uic-divided-row__divider",
+				style: {
+					top: m,
+					bottom: m,
+					width: f,
+					background: p,
+					visibility: x[n] ?? n === v.length - 1 ? "hidden" : "visible"
+				}
+			})]
+		}, t(e) && e.key !== null ? e.key : n))
+	});
+}
+c.displayName = "DividedRow";
+//#endregion
+export { c as DividedRow };
+
+//# sourceMappingURL=DividedRow2.js.map
+import "../../assets/components/DividedRow/DividedRow.css";

package/dist/components/DividedRow/DividedRow2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividedRow2.js","names":[],"sources":["../../../src/components/DividedRow/DividedRow.tsx"],"sourcesContent":["/**\n * DividedRow\n *\n * Lays its children out in a wrapping row and draws a vertical divider\n * between neighbours on the same line only: an item that ends a line has no\n * divider after it, so a wrapped row never starts or ends with a stray rule.\n * The divider sits in the middle of the column gap and takes no space.\n *\n * Which items end a line is measured after layout, and again whenever the row\n * or an item resizes.\n *\n * @example\n * <DividedRow>\n *   <Stat label=\"CPU\" value=\"4\" />\n *   <Stat label=\"Memory\" value=\"16 GiB\" />\n * </DividedRow>\n */\nimport {\n  Children,\n  isValidElement,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport \"./DividedRow.css\";\n\nexport interface DividedRowProps {\n  children?: ReactNode;\n  /** Whether items flow onto more lines. @default 'wrap' */\n  wrap?: \"wrap\" | \"nowrap\";\n  /** Gap between lines. A number is pixels. @default var(--spacing-8) (32px) */\n  rowGap?: number | string;\n  /**\n   * Gap between items on a line; the divider sits in its middle. A number is\n   * pixels. @default var(--spacing-12) (48px)\n   */\n  columnGap?: number | string;\n  /** Divider thickness in pixels. @default 1 */\n  dividerWidth?: number;\n  /** Divider colour. @default var(--color-border) */\n  dividerColor?: string;\n  /** How far the divider stops short of the item's top and bottom, in pixels. @default 0 */\n  dividerInset?: number;\n  /** Inline styles on each item's wrapper. */\n  itemStyle?: CSSProperties;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst toLength = (value: number | string) =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nexport function DividedRow({\n  children,\n  wrap = \"wrap\",\n  rowGap = \"var(--spacing-8)\",\n  columnGap = \"var(--spacing-12)\",\n  dividerWidth = 1,\n  dividerColor,\n  dividerInset = 0,\n  itemStyle,\n  className,\n  style,\n}: DividedRowProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([]);\n  const [lineEnds, setLineEnds] = useState<boolean[]>([]);\n\n  const measureRef = useRef(() => {});\n  measureRef.current = () => {\n    const nodes = itemRefs.current\n      .slice(0, items.length)\n      .filter((node): node is HTMLDivElement => node !== null);\n    const next = nodes.map(\n      (node, i) => i === nodes.length - 1 || nodes[i + 1]!.offsetTop > node.offsetTop,\n    );\n    setLineEnds((prev) =>\n      prev.length === next.length && prev.every((v, i) => v === next[i]) ? prev : next,\n    );\n  };\n\n  useLayoutEffect(() => {\n    itemRefs.current.length = items.length;\n    measureRef.current();\n  }, [items.length]);\n\n  useLayoutEffect(() => {\n    const root = containerRef.current;\n    if (!root) return;\n    const measure = () => measureRef.current();\n    const rowObserver = new ResizeObserver(measure);\n    rowObserver.observe(root);\n    const itemObserver = new ResizeObserver(measure);\n    itemRefs.current.forEach((node) => node && itemObserver.observe(node));\n    const mutationObserver = new MutationObserver(measure);\n    mutationObserver.observe(root, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n    });\n    window.addEventListener(\"resize\", measure);\n    measure();\n    return () => {\n      rowObserver.disconnect();\n      itemObserver.disconnect();\n      mutationObserver.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      className={[\"uic-divided-row\", className].filter(Boolean).join(\" \")}\n      style={\n        {\n          flexWrap: wrap,\n          rowGap: toLength(rowGap),\n          columnGap: toLength(columnGap),\n          \"--divided-row-column-gap\": toLength(columnGap),\n          ...style,\n        } as CSSProperties\n      }\n    >\n      {items.map((child, i) => (\n        <div\n          key={isValidElement(child) && child.key !== null ? child.key : i}\n          ref={(node) => {\n            itemRefs.current[i] = node;\n          }}\n          className=\"uic-divided-row__item\"\n          style={itemStyle}\n        >\n          {child}\n          <span\n            aria-hidden\n            className=\"uic-divided-row__divider\"\n            style={{\n              top: dividerInset,\n              bottom: dividerInset,\n              width: dividerWidth,\n              background: dividerColor,\n              visibility:\n                (lineEnds[i] ?? i === items.length - 1) ? \"hidden\" : \"visible\",\n            }}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nDividedRow.displayName = \"DividedRow\";\n"],"mappings":";;;;AAoDA,IAAM,KAAY,MAChB,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;AAE7C,SAAgB,EAAW,EACzB,aACA,UAAO,QACP,YAAS,oBACT,eAAY,qBACZ,kBAAe,GACf,iBACA,kBAAe,GACf,cACA,cACA,YACkB;CAClB,IAAM,IAAQ,EAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,OAAO,GACjD,IAAe,EAAuB,IAAI,GAC1C,IAAW,EAAqC,CAAC,CAAC,GAClD,CAAC,GAAU,KAAe,EAAoB,CAAC,CAAC,GAEhD,IAAa,QAAa,CAAC,CAAC;CA0ClC,OAzCA,EAAW,gBAAgB;EACzB,IAAM,IAAQ,EAAS,QACpB,MAAM,GAAG,EAAM,MAAM,CAAC,CACtB,QAAQ,MAAiC,MAAS,IAAI,GACnD,IAAO,EAAM,KAChB,GAAM,MAAM,MAAM,EAAM,SAAS,KAAK,EAAM,IAAI,EAAE,CAAE,YAAY,EAAK,SACxE;EACA,GAAa,MACX,EAAK,WAAW,EAAK,UAAU,EAAK,OAAO,GAAG,MAAM,MAAM,EAAK,EAAE,IAAI,IAAO,CAC9E;CACF,GAEA,QAAsB;EAEpB,AADA,EAAS,QAAQ,SAAS,EAAM,QAChC,EAAW,QAAQ;CACrB,GAAG,CAAC,EAAM,MAAM,CAAC,GAEjB,QAAsB;EACpB,IAAM,IAAO,EAAa;EAC1B,IAAI,CAAC,GAAM;EACX,IAAM,UAAgB,EAAW,QAAQ,GACnC,IAAc,IAAI,eAAe,CAAO;EAC9C,EAAY,QAAQ,CAAI;EACxB,IAAM,IAAe,IAAI,eAAe,CAAO;EAC/C,EAAS,QAAQ,SAAS,MAAS,KAAQ,EAAa,QAAQ,CAAI,CAAC;EACrE,IAAM,IAAmB,IAAI,iBAAiB,CAAO;EAQrD,OAPA,EAAiB,QAAQ,GAAM;GAC7B,WAAW;GACX,SAAS;GACT,YAAY;EACd,CAAC,GACD,OAAO,iBAAiB,UAAU,CAAO,GACzC,EAAQ,SACK;GAIX,AAHA,EAAY,WAAW,GACvB,EAAa,WAAW,GACxB,EAAiB,WAAW,GAC5B,OAAO,oBAAoB,UAAU,CAAO;EAC9C;CACF,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,CAAC,mBAAmB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAClE,OACE;GACE,UAAU;GACV,QAAQ,EAAS,CAAM;GACvB,WAAW,EAAS,CAAS;GAC7B,4BAA4B,EAAS,CAAS;GAC9C,GAAG;EACL;EAGD,UAAA,EAAM,KAAK,GAAO,MACjB,kBAAC,OAAD;GAEE,MAAM,MAAS;IACb,EAAS,QAAQ,KAAK;GACxB;GACA,WAAU;GACV,OAAO;GANT,UAAA,CAQG,GACD,kBAAC,QAAD;IACE,eAAA;IACA,WAAU;IACV,OAAO;KACL,KAAK;KACL,QAAQ;KACR,OAAO;KACP,YAAY;KACZ,YACG,EAAS,MAAM,MAAM,EAAM,SAAS,IAAK,WAAW;IACzD;GACD,CAAA,CACE;EApBE,GAAA,EAAe,CAAK,KAAK,EAAM,QAAQ,OAAO,EAAM,MAAM,CAoB5D,CACN;CACE,CAAA;AAET;AAEA,EAAW,cAAc"}

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

@@ -0,0 +1,2 @@
+export { DividedRow } from './DividedRow';
+export type { DividedRowProps } from './DividedRow';

package/dist/components/DividedRow/index.js

@@ -0,0 +1,2 @@
+import { DividedRow as e } from "./DividedRow2.js";
+export { e as DividedRow };

package/dist/components/DoubleBadge/DoubleBadge.d.ts

@@ -0,0 +1,14 @@
+import { BadgeVariant } from '@astryxdesign/core/Badge';
+export interface DoubleBadgeValue {
+    label: string;
+    /** @default 'neutral' */
+    variant?: BadgeVariant;
+}
+export interface DoubleBadgeProps {
+    /** The badges, in order. */
+    values?: Array<string | DoubleBadgeValue>;
+}
+export declare function DoubleBadge({ values }: DoubleBadgeProps): import("react").JSX.Element | null;
+export declare namespace DoubleBadge {
+    var displayName: string;
+}

package/dist/components/DoubleBadge/DoubleBadge2.js

@@ -0,0 +1,28 @@
+/* empty css            */
+import { HStack as e } from "@astryxdesign/core/Stack";
+import { jsx as t } from "react/jsx-runtime";
+import { Badge as n } from "@astryxdesign/core/Badge";
+//#region src/components/DoubleBadge/DoubleBadge.tsx
+function r({ values: r = [] }) {
+	if (r.length === 0) return null;
+	let i = r.map((e) => typeof e == "string" ? {
+		label: e,
+		variant: "neutral"
+	} : e);
+	return /* @__PURE__ */ t(e, {
+		gap: 0,
+		align: "center",
+		className: "uic-double-badge",
+		children: i.map((e, r) => e.label ? /* @__PURE__ */ t(n, {
+			className: "uic-double-badge__item",
+			variant: e.variant ?? "neutral",
+			label: e.label
+		}, r) : null)
+	});
+}
+r.displayName = "DoubleBadge";
+//#endregion
+export { r as DoubleBadge };
+
+//# sourceMappingURL=DoubleBadge2.js.map
+import "../../assets/components/DoubleBadge/DoubleBadge.css";

package/dist/components/DoubleBadge/DoubleBadge2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBadge2.js","names":[],"sources":["../../../src/components/DoubleBadge/DoubleBadge.tsx"],"sourcesContent":["/**\n * DoubleBadge\n *\n * A run of Badges welded into one chip: a live pair such as a status and its\n * detail, or a label and a ticker. Neighbours overlap by one border width and\n * square their inner corners, so the outlines read as one seam.\n *\n * A string value is a neutral Badge. Values with an empty label are skipped,\n * and an empty list renders nothing.\n *\n * @example\n * <DoubleBadge values={[{ label: \"RUNNING\", variant: \"success\" }, \"2m\"]} />\n */\nimport { Badge, type BadgeVariant } from \"@astryxdesign/core/Badge\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\n\nimport \"./DoubleBadge.css\";\n\nexport interface DoubleBadgeValue {\n  label: string;\n  /** @default 'neutral' */\n  variant?: BadgeVariant;\n}\n\nexport interface DoubleBadgeProps {\n  /** The badges, in order. */\n  values?: Array<string | DoubleBadgeValue>;\n}\n\nexport function DoubleBadge({ values = [] }: DoubleBadgeProps) {\n  if (values.length === 0) return null;\n  const objectValues = values.map((value): DoubleBadgeValue =>\n    typeof value === \"string\" ? { label: value, variant: \"neutral\" } : value,\n  );\n\n  return (\n    <HStack gap={0} align=\"center\" className=\"uic-double-badge\">\n      {objectValues.map((value, idx) =>\n        value.label ? (\n          <Badge\n            key={idx}\n            className=\"uic-double-badge__item\"\n            variant={value.variant ?? \"neutral\"}\n            label={value.label}\n          />\n        ) : null,\n      )}\n    </HStack>\n  );\n}\n\nDoubleBadge.displayName = \"DoubleBadge\";\n"],"mappings":";;;;;AA6BA,SAAgB,EAAY,EAAE,YAAS,CAAC,KAAuB;CAC7D,IAAI,EAAO,WAAW,GAAG,OAAO;CAChC,IAAM,IAAe,EAAO,KAAK,MAC/B,OAAO,KAAU,WAAW;EAAE,OAAO;EAAO,SAAS;CAAU,IAAI,CACrE;CAEA,OACE,kBAAC,GAAD;EAAQ,KAAK;EAAG,OAAM;EAAS,WAAU;EACtC,UAAA,EAAa,KAAK,GAAO,MACxB,EAAM,QACJ,kBAAC,GAAD;GAEE,WAAU;GACV,SAAS,EAAM,WAAW;GAC1B,OAAO,EAAM;EACd,GAJM,CAIN,IACC,IACN;CACM,CAAA;AAEZ;AAEA,EAAY,cAAc"}

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

@@ -0,0 +1,2 @@
+export { DoubleBadge } from './DoubleBadge';
+export type { DoubleBadgeProps, DoubleBadgeValue } from './DoubleBadge';

package/dist/components/DoubleBadge/index.js

@@ -0,0 +1,2 @@
+import { DoubleBadge as e } from "./DoubleBadge2.js";
+export { e as DoubleBadge };

package/dist/components/DoubleToken/DoubleToken.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+import { TokenProps } from '@astryxdesign/core/Token';
+export type DoubleTokenColor = NonNullable<TokenProps["color"]>;
+export interface DoubleTokenValue {
+    label: string;
+    /** @default 'blue' */
+    color?: DoubleTokenColor;
+    /**
+     * Rendered in place of the visible label, which stays the accessible name.
+     * The caller renders the label inside it; `highlightKeyword` does not
+     * reach into it.
+     */
+    endContent?: ReactNode;
+}
+export interface DoubleTokenProps {
+    /** The tokens, in order. */
+    values?: Array<string | DoubleTokenValue>;
+    /** Marks this text in every label. */
+    highlightKeyword?: string;
+}
+export declare function DoubleToken({ values, highlightKeyword, }: DoubleTokenProps): ReactElement | null;
+export declare namespace DoubleToken {
+    var displayName: string;
+}

package/dist/components/DoubleToken/DoubleToken2.js

@@ -0,0 +1,38 @@
+import { TextHighlighter as e } from "../TextHighlighter/TextHighlighter2.js";
+/* empty css            */
+import { HStack as t } from "@astryxdesign/core/Stack";
+import { jsx as n } from "react/jsx-runtime";
+import { Token as r } from "@astryxdesign/core/Token";
+//#region src/components/DoubleToken/DoubleToken.tsx
+function i({ values: i = [], highlightKeyword: a }) {
+	if (i.length === 0) return null;
+	let o = i.map((e) => typeof e == "string" ? {
+		label: e,
+		color: "blue"
+	} : e), s = a !== void 0;
+	return /* @__PURE__ */ n(t, {
+		gap: 0,
+		align: "center",
+		className: "uic-double-token",
+		children: o.map((t, i) => {
+			if (!t.label) return null;
+			let o = t.endContent === void 0 ? s ? /* @__PURE__ */ n(e, {
+				keyword: a,
+				children: t.label
+			}) : void 0 : t.endContent;
+			return /* @__PURE__ */ n(r, {
+				className: "uic-double-token__item",
+				color: t.color ?? "blue",
+				label: t.label,
+				isLabelHidden: o !== void 0,
+				endContent: o
+			}, i);
+		})
+	});
+}
+i.displayName = "DoubleToken";
+//#endregion
+export { i as DoubleToken };
+
+//# sourceMappingURL=DoubleToken2.js.map
+import "../../assets/components/DoubleToken/DoubleToken.css";

package/dist/components/DoubleToken/DoubleToken2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleToken2.js","names":[],"sources":["../../../src/components/DoubleToken/DoubleToken.tsx"],"sourcesContent":["/**\n * DoubleToken\n *\n * A run of Tokens welded into one chip, for a settled pair such as a type and\n * its version, or a scope and its name. Its live counterpart is `DoubleBadge`.\n * Neighbours overlap by one border width and square their inner corners.\n *\n * A string value is a blue Token. Values with an empty label are skipped, and\n * an empty list renders nothing. With `highlightKeyword` each label marks the\n * keyword (`TextHighlighter`), and the plain label stays the accessible name.\n * A value's `endContent` takes the place of its visible label (a copy\n * control around the text, say); the caller renders the label in it,\n * highlighted or not, and the plain label stays the accessible name.\n *\n * @example\n * <DoubleToken values={[{ label: \"CUDA\", color: \"green\" }, \"12.4\"]} />\n */\nimport type { ReactElement, ReactNode } from \"react\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\nimport { Token, type TokenProps } from \"@astryxdesign/core/Token\";\n\nimport { TextHighlighter } from \"../TextHighlighter/TextHighlighter\";\nimport \"./DoubleToken.css\";\n\nexport type DoubleTokenColor = NonNullable<TokenProps[\"color\"]>;\n\nexport interface DoubleTokenValue {\n  label: string;\n  /** @default 'blue' */\n  color?: DoubleTokenColor;\n  /**\n   * Rendered in place of the visible label, which stays the accessible name.\n   * The caller renders the label inside it; `highlightKeyword` does not\n   * reach into it.\n   */\n  endContent?: ReactNode;\n}\n\nexport interface DoubleTokenProps {\n  /** The tokens, in order. */\n  values?: Array<string | DoubleTokenValue>;\n  /** Marks this text in every label. */\n  highlightKeyword?: string;\n}\n\nexport function DoubleToken({\n  values = [],\n  highlightKeyword,\n}: DoubleTokenProps): ReactElement | null {\n  if (values.length === 0) return null;\n  const objectValues = values.map((value): DoubleTokenValue =>\n    typeof value === \"string\" ? { label: value, color: \"blue\" } : value,\n  );\n  const isHighlighting = highlightKeyword !== undefined;\n\n  return (\n    <HStack gap={0} align=\"center\" className=\"uic-double-token\">\n      {objectValues.map((value, idx) => {\n        if (!value.label) return null;\n        // Token.label is a string: anything richer is a hidden label plus\n        // endContent, so the plain string stays the accessible name.\n        const endContent =\n          value.endContent !== undefined ? (\n            value.endContent\n          ) : isHighlighting ? (\n            <TextHighlighter keyword={highlightKeyword}>{value.label}</TextHighlighter>\n          ) : undefined;\n        return (\n          <Token\n            key={idx}\n            className=\"uic-double-token__item\"\n            color={value.color ?? \"blue\"}\n            label={value.label}\n            isLabelHidden={endContent !== undefined}\n            endContent={endContent}\n          />\n        );\n      })}\n    </HStack>\n  );\n}\n\nDoubleToken.displayName = \"DoubleToken\";\n"],"mappings":";;;;;;AA6CA,SAAgB,EAAY,EAC1B,YAAS,CAAC,GACV,uBACwC;CACxC,IAAI,EAAO,WAAW,GAAG,OAAO;CAChC,IAAM,IAAe,EAAO,KAAK,MAC/B,OAAO,KAAU,WAAW;EAAE,OAAO;EAAO,OAAO;CAAO,IAAI,CAChE,GACM,IAAiB,MAAqB,KAAA;CAE5C,OACE,kBAAC,GAAD;EAAQ,KAAK;EAAG,OAAM;EAAS,WAAU;EACtC,UAAA,EAAa,KAAK,GAAO,MAAQ;GAChC,IAAI,CAAC,EAAM,OAAO,OAAO;GAGzB,IAAM,IACJ,EAAM,eAAe,KAAA,IAEjB,IACF,kBAAC,GAAD;IAAiB,SAAS;IAAmB,UAAA,EAAM;GAAuB,CAAA,IACxE,KAAA,IAHF,EAAM;GAIV,OACE,kBAAC,GAAD;IAEE,WAAU;IACV,OAAO,EAAM,SAAS;IACtB,OAAO,EAAM;IACb,eAAe,MAAe,KAAA;IAClB;GACb,GANM,CAMN;EAEL,CAAC;CACK,CAAA;AAEZ;AAEA,EAAY,cAAc"}

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

@@ -0,0 +1,2 @@
+export { DoubleToken } from './DoubleToken';
+export type { DoubleTokenColor, DoubleTokenProps, DoubleTokenValue, } from './DoubleToken';

package/dist/components/DoubleToken/index.js

@@ -0,0 +1,2 @@
+import { DoubleToken as e } from "./DoubleToken2.js";
+export { e as DoubleToken };