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

package/dist/components/ColorPicker/ColorPicker2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker2.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/**\n * ColorPicker\n *\n * A colour field: a swatch trigger that opens a popover holding the\n * platform's colour input and a hex text field, and optionally a clear\n * button. Astryx has no colour picker, so the picking area is the native\n * `<input type=\"color\">` and everything around it is Astryx.\n *\n * The value is a `#rrggbb` string on both edges. `onChange` fires when the\n * user settles on a colour (the native input's `change` event, or a complete\n * hex typed into the field), not on every pointer move while dragging, so a\n * caller that writes a setting writes it once. There is no alpha.\n *\n * @example\n * <ColorPicker value={accent} onChange={setAccent} hasValueLabel hasClear onClear={reset} />\n */\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { Popover } from \"@astryxdesign/core/Popover\";\nimport { VStack } from \"@astryxdesign/core/Stack\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport \"./ColorPicker.css\";\n\nconst FULL_HEX = /^#[0-9a-fA-F]{6}$/;\nconst SHORT_HEX = /^#[0-9a-fA-F]{3}$/;\nconst HEX_WITH_ALPHA = /^#[0-9a-fA-F]{8}$/;\nconst RGB_FUNCTION = /^rgba?\\(([^)]+)\\)$/i;\n\nconst toHexPair = (channel: number) =>\n  Math.max(0, Math.min(255, Math.round(channel)))\n    .toString(16)\n    .padStart(2, \"0\");\n\n/**\n * Normalises `#rgb`, `#rrggbb`, `#rrggbbaa` (alpha dropped), `rgb()` and\n * `rgba()` to lower-case `#rrggbb`. Anything else is `null`, so an\n * unparseable value renders as unset instead of painting black.\n */\nexport function toHexColor(value?: string | null): string | null {\n  if (!value) return null;\n  const raw = value.trim();\n  if (FULL_HEX.test(raw)) return raw.toLowerCase();\n  if (HEX_WITH_ALPHA.test(raw)) return raw.slice(0, 7).toLowerCase();\n  if (SHORT_HEX.test(raw)) {\n    const [, r, g, b] = raw;\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n  }\n  const rgb = RGB_FUNCTION.exec(raw);\n  if (rgb) {\n    const parts = rgb[1]!\n      .split(/[,/\\s]+/)\n      .filter(Boolean)\n      .map(Number);\n    if (parts.length >= 3 && parts.slice(0, 3).every(Number.isFinite)) {\n      return `#${toHexPair(parts[0]!)}${toHexPair(parts[1]!)}${toHexPair(parts[2]!)}`;\n    }\n  }\n  return null;\n}\n\nexport interface ColorPickerProps {\n  /** The colour: hex, or anything `toHexColor` normalises. */\n  value?: string | null;\n  /** Fires with `#rrggbb` when the user settles on a colour. */\n  onChange?: (hex: string) => void;\n  /** Shows the hex value next to the swatch on the trigger. */\n  hasValueLabel?: boolean;\n  /** Offers a clear button in the popover. */\n  hasClear?: boolean;\n  /** Fires when the clear button is pressed. */\n  onClear?: () => void;\n  isDisabled?: boolean;\n  /**\n   * Accessible name of the trigger and the colour area.\n   * @default the catalog's uic.ColorPicker.label (\"Select color\")\n   */\n  label?: string;\n  /** @default the catalog's uic.ColorPicker.hexValue (\"Hex value\") */\n  hexValueLabel?: string;\n  /** @default the catalog's uic.ColorPicker.clear (\"Clear\") */\n  clearLabel?: string;\n  /** Shown on the trigger when there is no colour. @default the catalog's uic.ColorPicker.noColor (\"No color\") */\n  noColorLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Test id of the trigger. The colour area, the hex field, the clear button\n   * and the value label get `<id>-area`, `<id>-hex`, `<id>-clear` and\n   * `<id>-value`.\n   */\n  \"data-testid\"?: string;\n}\n\nexport function ColorPicker({\n  value,\n  onChange,\n  hasValueLabel,\n  hasClear,\n  onClear,\n  isDisabled,\n  label,\n  hexValueLabel,\n  clearLabel,\n  noColorLabel,\n  className,\n  style,\n  \"data-testid\": testId,\n}: ColorPickerProps) {\n  const t = useUicTranslator();\n  const areaRef = useRef<HTMLInputElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const hex = toHexColor(value);\n  // The popover's working copy, seeded when it opens. An unshowable value\n  // opens the area on black; the trigger keeps showing it as unset.\n  const [draft, setDraft] = useState<string>(hex ?? \"#000000\");\n  const [text, setText] = useState<string>(hex ?? \"\");\n\n  const commit = (next: string) => {\n    const normalised = toHexColor(next);\n    if (!normalised || normalised === hex) return;\n    onChange?.(normalised);\n  };\n\n  // React's onChange is the `input` event, which fires all through a drag;\n  // the settled value is the native `change` event, subscribed on the node.\n  useEffect(() => {\n    const el = areaRef.current;\n    if (!el) return;\n    const handleChange = () => commit(el.value);\n    el.addEventListener(\"change\", handleChange);\n    return () => el.removeEventListener(\"change\", handleChange);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, hex]);\n\n  const triggerLabel = label ?? t(\"uic.ColorPicker.label\");\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpenChange={(open) => {\n        setIsOpen(open);\n        if (open) {\n          setDraft(hex ?? \"#000000\");\n          setText(hex ?? \"\");\n        }\n        // Closing commits nothing: both commit paths have fired by then, and a\n        // close-commit would re-send a value the user just cleared.\n      }}\n      label={triggerLabel}\n      placement=\"below\"\n      alignment=\"start\"\n      content={\n        <VStack gap={3} align=\"stretch\" className=\"uic-color-picker__panel\">\n          <input\n            ref={areaRef}\n            type=\"color\"\n            className=\"uic-color-picker__area\"\n            aria-label={triggerLabel}\n            data-testid={testId ? `${testId}-area` : undefined}\n            value={draft}\n            disabled={isDisabled}\n            onChange={(e) => {\n              setDraft(e.target.value);\n              setText(e.target.value);\n            }}\n          />\n          <TextInput\n            label={hexValueLabel ?? t(\"uic.ColorPicker.hexValue\")}\n            isLabelHidden\n            size=\"sm\"\n            value={text}\n            placeholder=\"#000000\"\n            isDisabled={isDisabled}\n            data-testid={testId ? `${testId}-hex` : undefined}\n            onChange={(next) => {\n              setText(next);\n              // The field has no OK button: commit as soon as the text is a\n              // whole colour, since a click back onto the page loses it.\n              const normalised = toHexColor(next);\n              if (normalised) {\n                setDraft(normalised);\n                commit(normalised);\n              }\n            }}\n            onEnter={() => commit(text)}\n          />\n          {hasClear ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              label={clearLabel ?? t(\"uic.ColorPicker.clear\")}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              isDisabled={isDisabled}\n              onClick={() => {\n                onClear?.();\n                setIsOpen(false);\n              }}\n            />\n          ) : null}\n        </VStack>\n      }\n    >\n      <button\n        type=\"button\"\n        className={[\"uic-color-picker__trigger\", className].filter(Boolean).join(\" \")}\n        disabled={isDisabled}\n        style={style}\n        data-testid={testId}\n        aria-label={hasValueLabel ? undefined : triggerLabel}\n      >\n        <span className=\"uic-color-picker__swatch\" aria-hidden=\"true\">\n          <span\n            className=\"uic-color-picker__swatch-fill\"\n            style={{ backgroundColor: hex ?? \"transparent\" }}\n          />\n        </span>\n        {hasValueLabel ? (\n          <span data-testid={testId ? `${testId}-value` : undefined}>\n            {hex ?? noColorLabel ?? t(\"uic.ColorPicker.noColor\")}\n          </span>\n        ) : null}\n      </button>\n    </Popover>\n  );\n}\n\nColorPicker.displayName = \"ColorPicker\";\n"],"mappings":"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"}

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 {};