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

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

@@ -0,0 +1,2 @@
+export { ColorPicker, toHexColor } from './ColorPicker';
+export type { ColorPickerProps } from './ColorPicker';

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,2 @@
+import { ColorPicker as e, toHexColor as t } from "./ColorPicker2.js";
+export { e as ColorPicker, t as toHexColor };

package/dist/components/ConfirmPopover/ConfirmPopover.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '@astryxdesign/core/Button';
+import { PopoverProps } from '@astryxdesign/core/Popover';
+export interface ConfirmPopoverProps extends Omit<PopoverProps, "content" | "label"> {
+    /** The question. A string renders as the heading line. */
+    title: ReactNode;
+    /** Supporting line under the title. */
+    description?: ReactNode;
+    /** Leading glyph beside the title. */
+    icon?: ReactNode;
+    /**
+     * Runs on confirm, with the click event. A returned promise keeps the
+     * popover open, and the button pending, until it settles.
+     */
+    onAction?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+    /** Confirm button label. @default the catalog's uic.common.confirm ("Confirm") */
+    actionLabel?: string;
+    /** Confirm button variant; `destructive` for a harmful action. @default "primary" */
+    actionVariant?: ButtonVariant;
+    /** Disable the confirm button. @default false */
+    isActionDisabled?: boolean;
+    /** Runs on Cancel. The popover closes either way. */
+    onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Cancel button label. @default the catalog's uic.common.cancel ("Cancel") */
+    cancelLabel?: string;
+    /**
+     * Accessible name of the popover. @default `title` when it is a string,
+     * else the action label
+     */
+    label?: string;
+}
+export declare function ConfirmPopover({ title, description, icon, onAction, actionLabel, actionVariant, isActionDisabled, onCancel, cancelLabel, label, isOpen: controlledIsOpen, onOpenChange, children, width, ...popoverProps }: ConfirmPopoverProps): import("react").JSX.Element;
+export declare namespace ConfirmPopover {
+    var displayName: string;
+}

package/dist/components/ConfirmPopover/ConfirmPopover.js

@@ -0,0 +1,75 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { Button as i } from "@astryxdesign/core/Button";
+import { HStack as a, VStack as o } from "@astryxdesign/core/Stack";
+import { Text as s } from "@astryxdesign/core/Text";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Popover as u } from "@astryxdesign/core/Popover";
+//#region src/components/ConfirmPopover/ConfirmPopover.tsx
+function d({ title: d, description: f, icon: p, onAction: m, actionLabel: h, actionVariant: g = "primary", isActionDisabled: _ = !1, onCancel: v, cancelLabel: y, label: b, isOpen: x, onOpenChange: S, children: C, width: w = 260, ...T }) {
+	let E = e(), [D, O] = r(!1), k = x !== void 0, A = k ? x : D, j = n(null), M = n(null), N = (e) => {
+		k || O(e), S?.(e);
+	};
+	t(() => {
+		if (A) {
+			M.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, j.current?.focus();
+			return;
+		}
+		let e = M.current;
+		M.current = null, e && document.activeElement === document.body && e.focus();
+	}, [A]);
+	let P = h ?? E("uic.common.confirm");
+	return /* @__PURE__ */ c(u, {
+		isOpen: A,
+		onOpenChange: N,
+		label: b ?? (typeof d == "string" ? d : P),
+		width: w,
+		content: /* @__PURE__ */ l(o, {
+			gap: 3,
+			align: "stretch",
+			children: [/* @__PURE__ */ l(a, {
+				gap: 2,
+				align: "start",
+				children: [p, /* @__PURE__ */ l(o, {
+					gap: 1,
+					align: "stretch",
+					children: [typeof d == "string" ? /* @__PURE__ */ c(s, {
+						weight: "semibold",
+						children: d
+					}) : d, f ? typeof f == "string" ? /* @__PURE__ */ c(s, {
+						type: "supporting",
+						color: "secondary",
+						children: f
+					}) : f : null]
+				})]
+			}), /* @__PURE__ */ l(a, {
+				gap: 2,
+				justify: "end",
+				children: [/* @__PURE__ */ c(i, {
+					ref: j,
+					size: "sm",
+					variant: "secondary",
+					label: y ?? E("uic.common.cancel"),
+					onClick: (e) => {
+						v?.(e), N(!1);
+					}
+				}), /* @__PURE__ */ c(i, {
+					size: "sm",
+					variant: g,
+					isDisabled: _,
+					label: P,
+					clickAction: async (e) => {
+						await m?.(e), N(!1);
+					}
+				})]
+			})]
+		}),
+		...T,
+		children: C
+	});
+}
+d.displayName = "ConfirmPopover";
+//#endregion
+export { d as ConfirmPopover };
+
+//# sourceMappingURL=ConfirmPopover.js.map

package/dist/components/ConfirmPopover/ConfirmPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmPopover.js","names":[],"sources":["../../../src/components/ConfirmPopover/ConfirmPopover.tsx"],"sourcesContent":["/**\n * ConfirmPopover\n *\n * A one-click confirmation anchored to its trigger: a question, an optional\n * supporting line, Cancel and a confirm action. For reversible actions\n * (deactivate, restore, reset a form). An action that cannot be undone\n * belongs in a Modal that asks the user to type what they are deleting.\n *\n * - `onAction` may return a promise. The action button shows its pending\n *   state (Astryx `clickAction`) and the popover closes once it resolves. A\n *   rejection does not close it; the error propagates as `clickAction`'s\n *   does.\n * - Cancel comes first and takes focus on open, so an accidental Enter backs\n *   out. Focus returns to the trigger on close.\n * - `children` is the trigger, as on `Popover`. Its render-prop form keeps\n *   the trigger a direct child of its parent (a `ButtonGroup` needs that).\n *\n * @example\n * <ConfirmPopover\n *   title=\"Deactivate this key?\"\n *   actionLabel=\"Deactivate\"\n *   actionVariant=\"destructive\"\n *   onAction={() => deactivate(key.id)}\n * >\n *   <Button label=\"Deactivate\" />\n * </ConfirmPopover>\n */\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Button, type ButtonVariant } from \"@astryxdesign/core/Button\";\nimport { Popover, type PopoverProps } from \"@astryxdesign/core/Popover\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\n\nexport interface ConfirmPopoverProps extends Omit<PopoverProps, \"content\" | \"label\"> {\n  /** The question. A string renders as the heading line. */\n  title: ReactNode;\n  /** Supporting line under the title. */\n  description?: ReactNode;\n  /** Leading glyph beside the title. */\n  icon?: ReactNode;\n  /**\n   * Runs on confirm, with the click event. A returned promise keeps the\n   * popover open, and the button pending, until it settles.\n   */\n  onAction?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;\n  /** Confirm button label. @default the catalog's uic.common.confirm (\"Confirm\") */\n  actionLabel?: string;\n  /** Confirm button variant; `destructive` for a harmful action. @default \"primary\" */\n  actionVariant?: ButtonVariant;\n  /** Disable the confirm button. @default false */\n  isActionDisabled?: boolean;\n  /** Runs on Cancel. The popover closes either way. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Cancel button label. @default the catalog's uic.common.cancel (\"Cancel\") */\n  cancelLabel?: string;\n  /**\n   * Accessible name of the popover. @default `title` when it is a string,\n   * else the action label\n   */\n  label?: string;\n}\n\nexport function ConfirmPopover({\n  title,\n  description,\n  icon,\n  onAction,\n  actionLabel,\n  actionVariant = \"primary\",\n  isActionDisabled = false,\n  onCancel,\n  cancelLabel,\n  label,\n  isOpen: controlledIsOpen,\n  onOpenChange,\n  children,\n  width = 260,\n  ...popoverProps\n}: ConfirmPopoverProps) {\n  const t = useUicTranslator();\n  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;\n\n  const cancelRef = useRef<HTMLButtonElement>(null);\n  // Popover traps focus but does not hand it back on close.\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const setIsOpen = (next: boolean) => {\n    if (!isControlled) setUncontrolledIsOpen(next);\n    onOpenChange?.(next);\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      restoreFocusRef.current =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      cancelRef.current?.focus();\n      return;\n    }\n    const toRestore = restoreFocusRef.current;\n    restoreFocusRef.current = null;\n    // Only when focus fell back to the body; never steal it from elsewhere.\n    if (toRestore && document.activeElement === document.body) {\n      toRestore.focus();\n    }\n  }, [isOpen]);\n\n  const actionText = actionLabel ?? t(\"uic.common.confirm\");\n  const accessibleLabel = label ?? (typeof title === \"string\" ? title : actionText);\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      label={accessibleLabel}\n      width={width}\n      content={\n        <VStack gap={3} align=\"stretch\">\n          <HStack gap={2} align=\"start\">\n            {icon}\n            <VStack gap={1} align=\"stretch\">\n              {typeof title === \"string\" ? (\n                <Text weight=\"semibold\">{title}</Text>\n              ) : (\n                title\n              )}\n              {description ? (\n                typeof description === \"string\" ? (\n                  <Text type=\"supporting\" color=\"secondary\">\n                    {description}\n                  </Text>\n                ) : (\n                  description\n                )\n              ) : null}\n            </VStack>\n          </HStack>\n          <HStack gap={2} justify=\"end\">\n            {/* First in DOM order: the safe action takes the initial focus. */}\n            <Button\n              ref={cancelRef}\n              size=\"sm\"\n              variant=\"secondary\"\n              label={cancelLabel ?? t(\"uic.common.cancel\")}\n              onClick={(event) => {\n                onCancel?.(event);\n                setIsOpen(false);\n              }}\n            />\n            <Button\n              size=\"sm\"\n              variant={actionVariant}\n              isDisabled={isActionDisabled}\n              label={actionText}\n              clickAction={async (event) => {\n                await onAction?.(event);\n                setIsOpen(false);\n              }}\n            />\n          </HStack>\n        </VStack>\n      }\n      {...popoverProps}\n    >\n      {children}\n    </Popover>\n  );\n}\n\nConfirmPopover.displayName = \"ConfirmPopover\";\n"],"mappings":";;;;;;;;AAgEA,SAAgB,EAAe,EAC7B,UACA,gBACA,SACA,aACA,gBACA,mBAAgB,WAChB,sBAAmB,IACnB,aACA,gBACA,UACA,QAAQ,GACR,iBACA,aACA,WAAQ,KACR,GAAG,KACmB;CACtB,IAAM,IAAI,EAAiB,GACrB,CAAC,GAAoB,KAAyB,EAAS,EAAK,GAC5D,IAAe,MAAqB,KAAA,GACpC,IAAS,IAAe,IAAmB,GAE3C,IAAY,EAA0B,IAAI,GAE1C,IAAkB,EAA2B,IAAI,GAEjD,KAAa,MAAkB;EAEnC,AADK,KAAc,EAAsB,CAAI,GAC7C,IAAe,CAAI;CACrB;CAEA,QAAgB;EACd,IAAI,GAAQ;GAGV,AAFA,EAAgB,UACd,SAAS,yBAAyB,cAAc,SAAS,gBAAgB,MAC3E,EAAU,SAAS,MAAM;GACzB;EACF;EACA,IAAM,IAAY,EAAgB;EAGlC,AAFA,EAAgB,UAAU,MAEtB,KAAa,SAAS,kBAAkB,SAAS,QACnD,EAAU,MAAM;CAEpB,GAAG,CAAC,CAAM,CAAC;CAEX,IAAM,IAAa,KAAe,EAAE,oBAAoB;CAGxD,OACE,kBAAC,GAAD;EACU;EACR,cAAc;EACd,OANoB,MAAU,OAAO,KAAU,WAAW,IAAQ;EAO3D;EACP,SACE,kBAAC,GAAD;GAAQ,KAAK;GAAG,OAAM;GAAtB,UAAA,CACE,kBAAC,GAAD;IAAQ,KAAK;IAAG,OAAM;IAAtB,UAAA,CACG,GACD,kBAAC,GAAD;KAAQ,KAAK;KAAG,OAAM;KAAtB,UAAA,CACG,OAAO,KAAU,WAChB,kBAAC,GAAD;MAAM,QAAO;MAAY,UAAA;KAAY,CAAA,IAErC,GAED,IACC,OAAO,KAAgB,WACrB,kBAAC,GAAD;MAAM,MAAK;MAAa,OAAM;MAC3B,UAAA;KACG,CAAA,IAEN,IAEA,IACE;IACF,CAAA,CAAA;GACR,CAAA,GAAA,kBAAC,GAAD;IAAQ,KAAK;IAAG,SAAQ;IAAxB,UAAA,CAEE,kBAAC,GAAD;KACE,KAAK;KACL,MAAK;KACL,SAAQ;KACR,OAAO,KAAe,EAAE,mBAAmB;KAC3C,UAAU,MAAU;MAElB,AADA,IAAW,CAAK,GAChB,EAAU,EAAK;KACjB;IACD,CAAA,GACD,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,YAAY;KACZ,OAAO;KACP,aAAa,OAAO,MAAU;MAE5B,AADA,MAAM,IAAW,CAAK,GACtB,EAAU,EAAK;KACjB;IACD,CAAA,CACK;GACF,CAAA,CAAA;;EAEV,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,EAAe,cAAc"}

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

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

package/dist/components/ConfirmPopover/index.js

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

package/dist/components/CountBadge/CountBadge.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '@astryxdesign/core/Badge';
+export interface CountBadgeProps extends Omit<BadgeProps, "label" | "icon"> {
+    /** The number, or node, shown in the overlay. */
+    count?: number | ReactNode;
+    /** Render a bare dot instead of the count. @default false */
+    hasDot?: boolean;
+    /** A numeric count above this renders as `${max}+`. @default 99 */
+    max?: number;
+    /** Keep the overlay when `count` is 0. @default false */
+    isZeroShown?: boolean;
+    /** `[x, y]` pixel nudge of the overlay: +x moves it right, +y down. */
+    offset?: [number, number];
+    /** `sm` is a denser pill for tab rails and table headers. @default 'md' */
+    size?: "sm" | "md";
+    /** Accessible name of the overlay, e.g. "3 unread notifications". */
+    label?: string;
+    /** The element the overlay is anchored to. */
+    children?: ReactNode;
+}
+export declare function CountBadge({ count, hasDot, max, isZeroShown, offset, size, label, variant, children, className, style, ...badgeProps }: CountBadgeProps): import("react").JSX.Element;
+export declare namespace CountBadge {
+    var displayName: string;
+}

package/dist/components/CountBadge/CountBadge2.js

@@ -0,0 +1,35 @@
+/* empty css           */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Badge as n } from "@astryxdesign/core/Badge";
+//#region src/components/CountBadge/CountBadge.tsx
+function r({ count: r, hasDot: i = !1, max: a = 99, isZeroShown: o = !1, offset: s, size: c = "md", label: l, variant: u, children: d, className: f, style: p, ...m }) {
+	let h = typeof r == "number", g = !i && (r == null || h && r === 0 && !o), _ = h && r > a ? `${a}+` : r;
+	return /* @__PURE__ */ t("span", {
+		className: ["uic-count-badge", f].filter(Boolean).join(" "),
+		style: p,
+		children: [d, g ? null : /* @__PURE__ */ e("span", {
+			className: ["uic-count-badge__overlay", c === "sm" ? "uic-count-badge__overlay--sm" : ""].filter(Boolean).join(" "),
+			style: {
+				"--count-badge-offset-x": `${s?.[0] ?? 0}px`,
+				"--count-badge-offset-y": `${s?.[1] ?? 0}px`
+			},
+			role: "status",
+			"aria-label": l,
+			children: i ? /* @__PURE__ */ e("span", {
+				className: "uic-count-badge__dot",
+				"data-variant": u ?? "neutral"
+			}) : /* @__PURE__ */ e(n, {
+				...m,
+				className: "uic-count-badge__pill",
+				variant: u,
+				label: _
+			})
+		})]
+	});
+}
+r.displayName = "CountBadge";
+//#endregion
+export { r as CountBadge };
+
+//# sourceMappingURL=CountBadge2.js.map
+import "../../assets/components/CountBadge/CountBadge.css";

package/dist/components/CountBadge/CountBadge2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge2.js","names":[],"sources":["../../../src/components/CountBadge/CountBadge.tsx"],"sourcesContent":["/**\n * CountBadge\n *\n * A count or a dot overlaid on the corner of its child: unread notices on a\n * bell, a problem count on a tab. Astryx `Badge` is an inline pill with no\n * anchored form, so this positions one over the child's top-end corner.\n *\n * - `count` above `max` renders as `${max}+`.\n * - A zero or missing count renders nothing, unless `isZeroShown`.\n * - `hasDot` renders a bare dot instead of a number.\n * - The overlay is a `role=\"status\"` live region; `label` names it, since a\n *   dot has no text and a bare number rarely says what it counts.\n *\n * `className` and `style` go on the wrapper around the child, so a consumer\n * can scope a rule at the overlay. Every other prop goes to the `Badge`.\n *\n * @example\n * <CountBadge count={unread} variant=\"error\" label={`${unread} unread`}>\n *   <IconButton icon={<Bell />} label=\"Notifications\" />\n * </CountBadge>\n */\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"@astryxdesign/core/Badge\";\n\nimport \"./CountBadge.css\";\n\nexport interface CountBadgeProps extends Omit<BadgeProps, \"label\" | \"icon\"> {\n  /** The number, or node, shown in the overlay. */\n  count?: number | ReactNode;\n  /** Render a bare dot instead of the count. @default false */\n  hasDot?: boolean;\n  /** A numeric count above this renders as `${max}+`. @default 99 */\n  max?: number;\n  /** Keep the overlay when `count` is 0. @default false */\n  isZeroShown?: boolean;\n  /** `[x, y]` pixel nudge of the overlay: +x moves it right, +y down. */\n  offset?: [number, number];\n  /** `sm` is a denser pill for tab rails and table headers. @default 'md' */\n  size?: \"sm\" | \"md\";\n  /** Accessible name of the overlay, e.g. \"3 unread notifications\". */\n  label?: string;\n  /** The element the overlay is anchored to. */\n  children?: ReactNode;\n}\n\nexport function CountBadge({\n  count,\n  hasDot = false,\n  max = 99,\n  isZeroShown = false,\n  offset,\n  size = \"md\",\n  label,\n  variant,\n  children,\n  className,\n  style,\n  ...badgeProps\n}: CountBadgeProps) {\n  const isNumericCount = typeof count === \"number\";\n  const isHidden =\n    !hasDot &&\n    (count === undefined ||\n      count === null ||\n      (isNumericCount && count === 0 && !isZeroShown));\n\n  const shown = isNumericCount && count > max ? `${max}+` : (count as ReactNode);\n\n  return (\n    <span\n      className={[\"uic-count-badge\", className].filter(Boolean).join(\" \")}\n      style={style}\n    >\n      {children}\n      {isHidden ? null : (\n        <span\n          className={[\n            \"uic-count-badge__overlay\",\n            size === \"sm\" ? \"uic-count-badge__overlay--sm\" : \"\",\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          style={\n            {\n              \"--count-badge-offset-x\": `${offset?.[0] ?? 0}px`,\n              \"--count-badge-offset-y\": `${offset?.[1] ?? 0}px`,\n            } as CSSProperties\n          }\n          role=\"status\"\n          aria-label={label}\n        >\n          {hasDot ? (\n            <span\n              className=\"uic-count-badge__dot\"\n              data-variant={variant ?? \"neutral\"}\n            />\n          ) : (\n            <Badge\n              {...badgeProps}\n              className=\"uic-count-badge__pill\"\n              variant={variant}\n              label={shown}\n            />\n          )}\n        </span>\n      )}\n    </span>\n  );\n}\n\nCountBadge.displayName = \"CountBadge\";\n"],"mappings":";;;;AA6CA,SAAgB,EAAW,EACzB,UACA,YAAS,IACT,SAAM,IACN,iBAAc,IACd,WACA,UAAO,MACP,UACA,YACA,aACA,cACA,UACA,GAAG,KACe;CAClB,IAAM,IAAiB,OAAO,KAAU,UAClC,IACJ,CAAC,MACA,KACW,QACT,KAAkB,MAAU,KAAK,CAAC,IAEjC,IAAQ,KAAkB,IAAQ,IAAM,GAAG,EAAI,KAAM;CAE3D,OACE,kBAAC,QAAD;EACE,WAAW,CAAC,mBAAmB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D;EAFT,UAAA,CAIG,GACA,IAAW,OACV,kBAAC,QAAD;GACE,WAAW,CACT,4BACA,MAAS,OAAO,iCAAiC,EACnD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,OACE;IACE,0BAA0B,GAAG,IAAS,MAAM,EAAE;IAC9C,0BAA0B,GAAG,IAAS,MAAM,EAAE;GAChD;GAEF,MAAK;GACL,cAAY;GAEX,UAAA,IACC,kBAAC,QAAD;IACE,WAAU;IACV,gBAAc,KAAW;GAC1B,CAAA,IAED,kBAAC,GAAD;IACE,GAAI;IACJ,WAAU;IACD;IACT,OAAO;GACR,CAAA;EAEC,CAAA,CAEJ;;AAEV;AAEA,EAAW,cAAc"}

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

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

package/dist/components/CountBadge/index.js

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

package/dist/components/CountdownBorder/CountdownBorder.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, Key, ReactElement, ReactNode } from 'react';
+export interface CountdownBorderProps {
+    children?: ReactNode;
+    /** Length of one fill cycle, in milliseconds. */
+    durationMs: number;
+    /** Whether the border shows and fills. Default: true */
+    isAnimated?: boolean;
+    /**
+     * Restarts the fill on this render when it changes. Pass the trigger of the
+     * real refresh, so the countdown never drifts from it.
+     */
+    resetKey?: Key;
+    /** Freezes the fill and hides the border, e.g. while a refresh runs. Default: false */
+    isPaused?: boolean;
+    className?: string;
+    /** Wrapper style; `stroke`, `strokeWidth` and `borderRadius` style the border. */
+    style?: CSSProperties;
+}
+export declare function CountdownBorder({ children, durationMs, isAnimated, resetKey, isPaused, className, style, }: CountdownBorderProps): ReactElement;
+export declare namespace CountdownBorder {
+    var displayName: string;
+}

package/dist/components/CountdownBorder/CountdownBorder2.js

@@ -0,0 +1,63 @@
+/* empty css                */
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { useTheme as r } from "@astryxdesign/core/theme";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/CountdownBorder/CountdownBorder.tsx
+function o({ children: o, durationMs: s, isAnimated: c = !0, resetKey: l, isPaused: u = !1, className: d, style: f }) {
+	let { token: p } = r(), m = t(null), [h, g] = n({
+		w: 0,
+		h: 0
+	});
+	e(() => {
+		let e = m.current;
+		if (!e) return;
+		let t = () => g({
+			w: e.clientWidth,
+			h: e.clientHeight
+		});
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let { stroke: _ = "var(--color-accent)", strokeWidth: v = 1.5, borderRadius: y = p("--radius-inner"), ...b } = f ?? {}, { w: x, h: S } = h;
+	return /* @__PURE__ */ a("div", {
+		ref: m,
+		className: ["uic-countdown-border", d].filter(Boolean).join(" "),
+		style: {
+			display: "inline-flex",
+			...b,
+			position: "relative"
+		},
+		children: [o, c && x > 0 && S > 0 && /* @__PURE__ */ i("svg", {
+			"aria-hidden": !0,
+			width: x,
+			height: S,
+			className: "uic-countdown-border__overlay",
+			style: { visibility: u ? "hidden" : "visible" },
+			children: /* @__PURE__ */ i("rect", {
+				x: 0,
+				y: 0,
+				width: x,
+				height: S,
+				rx: y,
+				ry: y,
+				fill: "none",
+				strokeWidth: v,
+				pathLength: 100,
+				strokeDasharray: 100,
+				className: "uic-countdown-border__fill",
+				style: {
+					stroke: _,
+					animationDuration: `${s}ms`,
+					animationPlayState: u ? "paused" : "running"
+				}
+			}, l)
+		})]
+	});
+}
+o.displayName = "CountdownBorder";
+//#endregion
+export { o as CountdownBorder };
+
+//# sourceMappingURL=CountdownBorder2.js.map
+import "../../assets/components/CountdownBorder/CountdownBorder.css";

package/dist/components/CountdownBorder/CountdownBorder2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownBorder2.js","names":[],"sources":["../../../src/components/CountdownBorder/CountdownBorder.tsx"],"sourcesContent":["/**\n * CountdownBorder\n *\n * Wraps its children in a rounded-rect border that fills clockwise over\n * `durationMs` and starts again: a countdown to the next automatic refresh.\n * The wrapper measures its own box, so the outline fits the content at any\n * size; the stroke is centred on the content's edge, so half of it stays\n * visible over opaque children. Under `prefers-reduced-motion` the border\n * does not animate.\n *\n * The border's look comes from `style`: `stroke` (default\n * `var(--color-accent)`), `strokeWidth` (default 1.5) and `borderRadius`\n * (default the theme's `--radius-inner`). The rest of `style` reaches the\n * wrapper.\n *\n * @example\n * <CountdownBorder durationMs={5000} resetKey={fetchKey} isPaused={isFetching}>\n *   <IconButton label=\"Refresh\" icon={<RotateCw />} onClick={refetch} />\n * </CountdownBorder>\n */\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type Key,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useTheme } from \"@astryxdesign/core/theme\";\n\nimport \"./CountdownBorder.css\";\n\nexport interface CountdownBorderProps {\n  children?: ReactNode;\n  /** Length of one fill cycle, in milliseconds. */\n  durationMs: number;\n  /** Whether the border shows and fills. Default: true */\n  isAnimated?: boolean;\n  /**\n   * Restarts the fill on this render when it changes. Pass the trigger of the\n   * real refresh, so the countdown never drifts from it.\n   */\n  resetKey?: Key;\n  /** Freezes the fill and hides the border, e.g. while a refresh runs. Default: false */\n  isPaused?: boolean;\n  className?: string;\n  /** Wrapper style; `stroke`, `strokeWidth` and `borderRadius` style the border. */\n  style?: CSSProperties;\n}\n\nexport function CountdownBorder({\n  children,\n  durationMs,\n  isAnimated = true,\n  resetKey,\n  isPaused = false,\n  className,\n  style,\n}: CountdownBorderProps): ReactElement {\n  const { token } = useTheme();\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const measure = () => setSize({ w: el.clientWidth, h: el.clientHeight });\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const {\n    // A var(), so a nested Astryx Theme's accent applies.\n    stroke = \"var(--color-accent)\",\n    strokeWidth = 1.5,\n    // `rx` takes a length, not a var(): resolved from the theme.\n    borderRadius = token(\"--radius-inner\"),\n    ...wrapperStyle\n  } = style ?? {};\n  const { w, h } = size;\n\n  return (\n    <div\n      ref={ref}\n      className={[\"uic-countdown-border\", className].filter(Boolean).join(\" \")}\n      // `position: relative` stays last: the overlay depends on it.\n      style={{ display: \"inline-flex\", ...wrapperStyle, position: \"relative\" }}\n    >\n      {children}\n      {isAnimated && w > 0 && h > 0 && (\n        <svg\n          aria-hidden\n          width={w}\n          height={h}\n          className=\"uic-countdown-border__overlay\"\n          // Hidden, not just paused: at offset 100 the dash edge can still\n          // paint a sliver at the path start.\n          style={{ visibility: isPaused ? \"hidden\" : \"visible\" }}\n        >\n          <rect\n            key={resetKey}\n            x={0}\n            y={0}\n            width={w}\n            height={h}\n            rx={borderRadius}\n            ry={borderRadius}\n            fill=\"none\"\n            strokeWidth={strokeWidth}\n            pathLength={100}\n            strokeDasharray={100}\n            className=\"uic-countdown-border__fill\"\n            style={{\n              // A CSS property: var() does not resolve in the stroke attribute.\n              stroke,\n              animationDuration: `${durationMs}ms`,\n              animationPlayState: isPaused ? \"paused\" : \"running\",\n            }}\n          />\n        </svg>\n      )}\n    </div>\n  );\n}\n\nCountdownBorder.displayName = \"CountdownBorder\";\n"],"mappings":";;;;;AAmDA,SAAgB,EAAgB,EAC9B,aACA,eACA,gBAAa,IACb,aACA,cAAW,IACX,cACA,YACqC;CACrC,IAAM,EAAE,aAAU,EAAS,GACrB,IAAM,EAAuB,IAAI,GACjC,CAAC,GAAM,KAAW,EAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAE/C,QAAgB;EACd,IAAM,IAAK,EAAI;EACf,IAAI,CAAC,GAAI;EACT,IAAM,UAAgB,EAAQ;GAAE,GAAG,EAAG;GAAa,GAAG,EAAG;EAAa,CAAC;EACvE,EAAQ;EACR,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAE,SACN,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,IAAM,EAEJ,YAAS,uBACT,iBAAc,KAEd,kBAAe,EAAM,gBAAgB,GACrC,GAAG,MACD,KAAS,CAAC,GACR,EAAE,MAAG,SAAM;CAEjB,OACE,kBAAC,OAAD;EACO;EACL,WAAW,CAAC,wBAAwB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAEvE,OAAO;GAAE,SAAS;GAAe,GAAG;GAAc,UAAU;EAAW;EAJzE,UAAA,CAMG,GACA,KAAc,IAAI,KAAK,IAAI,KAC1B,kBAAC,OAAD;GACE,eAAA;GACA,OAAO;GACP,QAAQ;GACR,WAAU;GAGV,OAAO,EAAE,YAAY,IAAW,WAAW,UAAU;GAErD,UAAA,kBAAC,QAAD;IAEE,GAAG;IACH,GAAG;IACH,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,IAAI;IACJ,MAAK;IACQ;IACb,YAAY;IACZ,iBAAiB;IACjB,WAAU;IACV,OAAO;KAEL;KACA,mBAAmB,GAAG,EAAW;KACjC,oBAAoB,IAAW,WAAW;IAC5C;GACD,GAlBM,CAkBN;EACE,CAAA,CAEJ;;AAET;AAEA,EAAgB,cAAc"}

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

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

package/dist/components/CountdownBorder/index.js

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

package/dist/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,212 @@
+import { Key, CSSProperties, HTMLAttributes, ReactElement, ReactNode, TdHTMLAttributes } from 'react';
+import { PaginationProps } from '@astryxdesign/core/Pagination';
+import { TableProps } from '@astryxdesign/core/Table';
+import { DataGridExportModalProps } from './DataGridExportModal';
+import { DataGridSettingsModalProps, DataGridSettingsResult } from './DataGridSettingsModal';
+/** A row identity, as `idKey` returns it. */
+export type DataGridKey = Key;
+export type DataGridSortDirection = "ascending" | "descending";
+/** The active sort: one column, by its `sortKey`. */
+export interface DataGridSort {
+    sortKey: string;
+    direction: DataGridSortDirection;
+}
+export interface DataGridColumn<T> {
+    /** Stable identity: column settings, widths and pinning use it. */
+    key: string;
+    /** Header content. It is clipped to the column width. */
+    header?: ReactNode;
+    /** Caption above the header, for a column that belongs to a group. */
+    groupHeader?: ReactNode;
+    /**
+     * Plain-text name in the settings and export dialogs. Default: the text of
+     * `groupHeader` and `header` joined with " / ", else the key.
+     */
+    label?: string;
+    /** Cell content. `index` is the row's position on the current page. */
+    renderCell?: (item: T, index: number) => ReactNode;
+    /** Width in pixels. A resized width replaces it. Without one the column flexes. */
+    width?: number;
+    /** Lower bound, in pixels, of a flexing column. */
+    minWidth?: number;
+    align?: "start" | "center" | "end";
+    /** Makes the column sortable. The sort state names it by this key. */
+    sortKey?: string;
+    /**
+     * Sorts the rows on the client when this column is sorted. Compare in
+     * ascending order; the grid reverses the result for descending.
+     */
+    compare?: (a: T, b: T, direction: DataGridSortDirection) => number;
+    /**
+     * Pins the column to an edge. Only the contiguous run of pinned columns at
+     * each edge of the displayed order is pinned.
+     */
+    pin?: "start" | "end";
+    /** Column settings cannot hide it. */
+    isAlwaysVisible?: boolean;
+    /** Hidden until the user shows it in the column settings. */
+    isHiddenByDefault?: boolean;
+    /** Fields this column exports as. Without them it cannot be exported. */
+    exportKeys?: ReadonlyArray<string>;
+    /** Extra attributes for this column's body cells. */
+    getCellProps?: (item: T, index: number) => TdHTMLAttributes<HTMLTableCellElement>;
+}
+/** Per-column settings a user changed, keyed by column key. */
+export interface DataGridColumnOverride {
+    hidden?: boolean;
+    /** Display position. Lower comes first. Set only after a reorder. */
+    order?: number;
+    /** Resized width in pixels. */
+    width?: number;
+}
+export type DataGridColumnOverrides = Record<string, DataGridColumnOverride>;
+export interface DataGridColumnSettings {
+    /** Controlled overrides. */
+    overrides?: DataGridColumnOverrides;
+    /** Initial overrides when uncontrolled; always merged under `overrides`. */
+    defaultOverrides?: DataGridColumnOverrides;
+    onOverridesChange?: (overrides: DataGridColumnOverrides) => void;
+    /** Whether the settings dialog lets the user reorder columns. Default: true */
+    isReorderable?: boolean;
+    /** Strings of the settings dialog. */
+    modalProps?: Pick<DataGridSettingsModalProps, "title" | "subtitle" | "searchLabel" | "noMatchText" | "applyLabel" | "cancelLabel">;
+}
+export interface DataGridCsvExport {
+    /** Export keys the backend can produce. Columns asking for others are disabled. */
+    supportedKeys: ReadonlyArray<string>;
+    /** Runs the export with the chosen keys. The dialog closes when it resolves. */
+    onExport: (keys: string[]) => Promise<void>;
+    /** A warning above the column list, e.g. that the export is truncated. */
+    notice?: ReactNode;
+    /** Strings of the export dialog. */
+    modalProps?: Pick<DataGridExportModalProps, "title" | "subtitle" | "searchLabel" | "noMatchText" | "exportLabel" | "cancelLabel">;
+}
+export interface DataGridSelection<T> {
+    /** The selected row keys. Selection is controlled. */
+    selectedKeys?: ReadonlyArray<DataGridKey>;
+    onChange?: (keys: string[], items: T[]) => void;
+    /** Whether a row's checkbox is enabled. Select-all leaves a disabled row as it is. */
+    getIsItemEnabled?: (item: T) => boolean;
+    /** Accessible name of a row's checkbox. Default: the row key. */
+    getRowLabel?: (item: T) => string;
+    /** Select-all keeps keys of rows on other pages. Default: false */
+    isPreservingOtherPages?: boolean;
+}
+export interface DataGridExpansion<T> {
+    renderExpandedRow: (item: T, index: number) => ReactNode;
+    getIsRowExpandable?: (item: T) => boolean;
+    /** Controlled expanded row keys. */
+    expandedKeys?: ReadonlyArray<DataGridKey>;
+    defaultExpandedKeys?: ReadonlyArray<DataGridKey>;
+    onExpandedKeysChange?: (keys: ReadonlyArray<DataGridKey>) => void;
+    /** Header content of the expand-button column. */
+    columnHeader?: ReactNode;
+    /** Width in pixels of the expand-button column. */
+    columnWidth?: number;
+}
+export interface DataGridPagination extends Omit<PaginationProps, "page" | "totalItems" | "onChange" | "onPageSizeChange" | "label" | "ref" | "totalPages" | "hasMore"> {
+    /** Controlled page, 1-based. */
+    page?: number;
+    defaultPage?: number;
+    defaultPageSize?: number;
+    /**
+     * Total row count. Without it the grid pages `data` itself; a total larger
+     * than `data` declares the rows already sliced to the page.
+     */
+    totalItems?: number;
+    onChange?: (page: number, pageSize: number) => void;
+    /** Whether the bar offers a page-size choice. Default: true */
+    hasPageSizeSelector?: boolean;
+    /** Hides the page bar while every row fits on one page. Default: false */
+    isHiddenOnSinglePage?: boolean;
+    /** Content at the end of the bar. */
+    endContent?: ReactNode;
+}
+type AnyRow = Record<string, unknown>;
+export interface DataGridProps<T extends object = AnyRow> extends Omit<TableProps<AnyRow>, "data" | "columns" | "idKey" | "rowIndexStart" | "rowCount" | "children" | "scrollWrapper" | "ref" | "emptyState" | "className" | "style" | "plugins" | "onChange"> {
+    data?: ReadonlyArray<T>;
+    columns?: ReadonlyArray<DataGridColumn<T>>;
+    /**
+     * Row identity: a field name or a function. A missing field falls back to
+     * the row's `key`, then its `id`, then its position.
+     */
+    idKey?: string | ((item: T) => DataGridKey);
+    /** Dims the rows and blocks input while data is refetched. */
+    isLoading?: boolean;
+    /** Drag-to-resize column borders. Default: true */
+    isResizable?: boolean;
+    /** Controlled sort; `null` for none. */
+    sort?: DataGridSort | null;
+    defaultSort?: DataGridSort | null;
+    onSortChange?: (sort: DataGridSort | null) => void;
+    selection?: DataGridSelection<T>;
+    /** The page bar. `false` shows every row and no bar. */
+    pagination?: false | DataGridPagination;
+    /** Enables the column settings button and persists resized widths. */
+    columnSettings?: DataGridColumnSettings;
+    /** Enables the CSV export button. */
+    csvExport?: DataGridCsvExport;
+    expansion?: DataGridExpansion<T>;
+    /**
+     * Shown in place of the rows when there are none. A string gets the default
+     * icon and layout, a node is rendered as is, `false` shows nothing. Default:
+     * the catalog's `uic.DataGrid.noData`.
+     */
+    emptyState?: ReactNode | false;
+    /** Extra attributes for a body row. */
+    getRowProps?: (item: T, index: number | undefined) => HTMLAttributes<HTMLTableRowElement>;
+    /**
+     * Scrolls horizontally with the table at this width (at least the
+     * container's). Columns without a width then size to their content.
+     */
+    scrollWidth?: number | string;
+    /** Caps the rows' height and makes the header sticky. */
+    maxHeight?: number | string;
+    /** Hides the header row, and with it sorting and select-all. */
+    isHeaderHidden?: boolean;
+    /** Accessible name of the expand buttons. Default: the catalog's `uic.DataGrid.expandRow` */
+    expandRowLabel?: string;
+    /** Shown when the page lies past the last one. Default: the catalog's `uic.DataGrid.invalidPage` */
+    invalidPageText?: string;
+    /** Default: the catalog's `uic.DataGrid.goToFirstPage` */
+    goToFirstPageLabel?: string;
+    /** Accessible name of the page navigation. Default: the catalog's `uic.DataGrid.pagination` */
+    paginationLabel?: string;
+    /** The range line beside the page navigation. Default: the catalog's `uic.DataGrid.range` */
+    renderRange?: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => ReactNode;
+    /** Default: the catalog's `uic.DataGrid.settings` */
+    settingsLabel?: string;
+    /** Default: the catalog's `uic.DataGrid.exportCsv` */
+    exportLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** The label a column carries in the settings and export dialogs. */
+export declare function dataGridColumnLabel<T>(column: DataGridColumn<T>): string;
+/** Whether a column shows, given the user's overrides. */
+/**
+ * The overrides record a settings dialog result writes. `defaultOverrides`
+ * stays merged under it key by key, and a key it holds replaces the default's
+ * entry whole. So a column is left out only while its default (natural, then
+ * `defaultOverrides`) already renders what the user chose, and an entry that
+ * is written states everything that differs from the natural column:
+ * otherwise re-showing a column the defaults hide, or restoring the natural
+ * order over a reordering default, would bring the default back.
+ *
+ * @internal Exported for tests.
+ */
+export declare function dataGridSettingsToOverrides({ columns, result, defaultOverrides, overrides, isReorderable, }: {
+    columns: ReadonlyArray<Pick<DataGridColumn<never>, "key" | "isHiddenByDefault">>;
+    result: DataGridSettingsResult;
+    defaultOverrides?: DataGridColumnOverrides;
+    /** The overrides in effect, defaults merged; their widths are kept. */
+    overrides: DataGridColumnOverrides;
+    isReorderable: boolean;
+}): DataGridColumnOverrides;
+export declare function isDataGridColumnVisible<T>(column: Pick<DataGridColumn<T>, "key" | "isAlwaysVisible" | "isHiddenByDefault">, overrides?: DataGridColumnOverrides): boolean;
+export declare function DataGrid<T extends object = AnyRow>({ data, columns, idKey, isLoading, isResizable, sort: sortProp, defaultSort, onSortChange, selection, pagination, columnSettings, csvExport, expansion, emptyState, getRowProps, scrollWidth, maxHeight, isHeaderHidden, expandRowLabel, invalidPageText, goToFirstPageLabel, paginationLabel, renderRange, settingsLabel, exportLabel, density, dividers, hasHover, textOverflow, className, style, ...tableProps }: DataGridProps<T>): ReactElement;
+export {};

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

@@ -0,0 +1,70 @@
+export declare const dataGridMessages: {
+    readonly "uic.DataGrid.noData": {
+        readonly defaultMessage: "No data to display";
+        readonly description: "Shown in place of a data grid's rows when there are none";
+    };
+    readonly "uic.DataGrid.invalidPage": {
+        readonly defaultMessage: "Invalid page number";
+        readonly description: "Shown in place of a data grid's rows when the current page lies past the last page";
+    };
+    readonly "uic.DataGrid.goToFirstPage": {
+        readonly defaultMessage: "Go to first page";
+        readonly description: "Button under the invalid page message that returns to page 1";
+    };
+    readonly "uic.DataGrid.expandRow": {
+        readonly defaultMessage: "Expand row";
+        readonly description: "Accessible name of the button that shows or hides a row's details";
+    };
+    readonly "uic.DataGrid.pagination": {
+        readonly defaultMessage: "Pagination";
+        readonly description: "Accessible name of a data grid's page navigation";
+    };
+    readonly "uic.DataGrid.range": {
+        readonly defaultMessage: "{start} - {end} of {total} items";
+        readonly description: "Beside a data grid's page navigation: the rows on screen out of the total. {start} and {end} are 1-based row numbers";
+    };
+    readonly "uic.DataGrid.settings": {
+        readonly defaultMessage: "Table Settings";
+        readonly description: "Button under a data grid that opens its column settings, and the title of that dialog";
+    };
+    readonly "uic.DataGrid.exportCsv": {
+        readonly defaultMessage: "Export CSV";
+        readonly description: "Button under a data grid that opens the CSV export dialog, and the title of that dialog";
+    };
+    readonly "uic.DataGrid.selectColumns": {
+        readonly defaultMessage: "Select columns to display";
+        readonly description: "Subtitle of a data grid's column settings and CSV export dialogs";
+    };
+    readonly "uic.DataGrid.searchColumns": {
+        readonly defaultMessage: "Search table columns";
+        readonly description: "Placeholder of the column search field in a data grid's dialogs, also shown when no column matches";
+    };
+    readonly "uic.DataGrid.reorderColumn": {
+        readonly defaultMessage: "Reorder {column}";
+        readonly description: "Accessible name of the drag handle beside a column in a data grid's column settings dialog. {column} is the column's label";
+    };
+    readonly "uic.DataGrid.reorderInstructions": {
+        readonly defaultMessage: "Press Space to pick up the column, use the arrow keys to move it, then press Space again to drop it or Escape to cancel.";
+        readonly description: "Screen reader instructions for a drag handle in a data grid's column settings dialog";
+    };
+    readonly "uic.DataGrid.reorderPickedUp": {
+        readonly defaultMessage: "Picked up {column}. It is at position {position} of {total}.";
+        readonly description: "Screen reader announcement when a column is picked up for reordering in the column settings dialog. {position} is 1-based";
+    };
+    readonly "uic.DataGrid.reorderMoved": {
+        readonly defaultMessage: "{column} moved to position {position} of {total}.";
+        readonly description: "Screen reader announcement while a picked-up column moves in the column settings dialog. {position} is 1-based";
+    };
+    readonly "uic.DataGrid.reorderDropped": {
+        readonly defaultMessage: "{column} dropped at position {position} of {total}.";
+        readonly description: "Screen reader announcement when a column is dropped in the column settings dialog. {position} is 1-based";
+    };
+    readonly "uic.DataGrid.reorderCancelled": {
+        readonly defaultMessage: "Reordering cancelled. {column} is back at position {position} of {total}.";
+        readonly description: "Screen reader announcement when reordering a column is cancelled in the column settings dialog. {position} is 1-based";
+    };
+    readonly "uic.DataGrid.export": {
+        readonly defaultMessage: "Export";
+        readonly description: "Primary button of a data grid's CSV export dialog";
+    };
+};