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

package/dist/components/PagedSelector/PagedSelector2.js

@@ -0,0 +1,220 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { compiledStyles as t } from "../../forks/compiled.js";
+import { ComplexSelector as n } from "../../forks/ComplexSelector/ComplexSelector.js";
+import { PanelSearchInput as r } from "./PanelSearchInput.js";
+/* empty css              */
+import { useId as i, useLayoutEffect as ee, useRef as a, useState as o } from "react";
+import { HStack as s } from "@astryxdesign/core/Stack";
+import { Text as c } from "@astryxdesign/core/Text";
+import { themeProps as te } from "@astryxdesign/core/utils";
+import { Fragment as ne, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Token as d } from "@astryxdesign/core/Token";
+import { Spinner as f } from "@astryxdesign/core/Spinner";
+import { Divider as re } from "@astryxdesign/core/Divider";
+import { useIndicator as p } from "@astryxdesign/core/Indicator";
+import { SelectorOption as ie } from "@astryxdesign/core/Selector";
+import { VisuallyHidden as m } from "@astryxdesign/core/VisuallyHidden";
+//#region src/components/PagedSelector/PagedSelector.tsx
+var h = { padding: "x1717udv" }, g = t({ reset: {
+	kmVPX3: h.padding,
+	$$css: !0
+} });
+function _(t) {
+	let { label: h, options: _, labels: ae, placeholder: oe, hasSearch: v = !0, searchValue: se, onSearchChange: ce, searchPlaceholder: le, searchLabel: y, clearSearchLabel: b, onEndReached: x, endReachedThreshold: ue = 30, onAtEndChange: S, isLoadingMore: C, totalCount: w, formatTotalCount: de, emptyText: T, header: fe, footer: E, listMaxHeight: pe = 260, triggerDisplay: me = "labels", maxTriggerItems: he = 3, selectionIndicator: D = "check", hasClear: ge, onClear: O, onOpenChange: k, isLoading: A, size: j, isMultiple: M, value: _e, onChange: ve, ...N } = t, P = e(), F = p("check"), I = p("checkbox"), L = i(), ye = i(), R = t.isMultiple ? [...t.value ?? []] : t.value == null ? [] : [t.value], z = a(/* @__PURE__ */ new Map());
+	for (let e of _) z.current.set(e.value, e.label);
+	let B = (e) => ae?.[e] ?? _.find((t) => t.value === e)?.label ?? z.current.get(e) ?? e, V = (e) => {
+		let n = e.map((e) => ({
+			value: e,
+			label: B(e)
+		}));
+		t.isMultiple ? t.onChange?.(e, n) : t.onChange?.(e[0] ?? null, n[0] ?? null);
+	}, [H, U] = o(-1), [be, xe] = o(""), Se = se ?? be, W = a(!1), G = (e) => `${ye}-option-${e}`, K = _.length === 0 || H < 0 ? -1 : Math.min(H, _.length - 1), q = K >= 0 && _[K]?.isDisabled ? -1 : K, J = (e, t) => {
+		for (let n = e; n >= 0 && n < _.length; n += t) if (!_[n]?.isDisabled) return n;
+		return -1;
+	};
+	ee(() => {
+		q < 0 || document.getElementById(G(q))?.scrollIntoView({ block: "nearest" });
+	}, [q]);
+	let Ce = (e) => {
+		if (!x && !S) return;
+		let t = e.currentTarget, n = t.scrollHeight - t.scrollTop - t.clientHeight <= ue;
+		n !== W.current && (W.current = n, S?.(n), n && x?.());
+	}, Y = (e) => R.includes(e), X = (e, t) => {
+		if (!M) {
+			V([e.value]), t();
+			return;
+		}
+		V(Y(e.value) ? R.filter((t) => t !== e.value) : [...R, e.value]);
+	}, Z = (e, t, n) => {
+		if (_.length === 0) return;
+		let r = (e) => {
+			e >= 0 && U(e);
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), r(J(q < 0 ? 0 : q + 1, 1));
+				break;
+			case "ArrowUp":
+				e.preventDefault(), r(q < 0 ? J(0, 1) : J(q - 1, -1));
+				break;
+			case "Home":
+				e.preventDefault(), r(J(0, 1));
+				break;
+			case "End":
+				e.preventDefault(), r(J(_.length - 1, -1));
+				break;
+			case " ":
+			case "Enter": {
+				if (e.key === " " && !n) break;
+				let r = _[q];
+				if (!r || r.isDisabled) break;
+				e.preventDefault(), X(r, t);
+				break;
+			}
+		}
+	}, we = (() => {
+		if (R.length === 0) return;
+		if (!M) return B(R[0]);
+		let e = R.slice(0, he), t = R.length - e.length;
+		if (me === "badges") return /* @__PURE__ */ u(s, {
+			gap: .5,
+			vAlign: "center",
+			wrap: "wrap",
+			children: [e.map((e) => /* @__PURE__ */ l(d, {
+				label: B(e),
+				size: "sm"
+			}, e)), t > 0 ? /* @__PURE__ */ l(c, {
+				color: "secondary",
+				children: `+${t}`
+			}) : null]
+		});
+		let n = e.map(B).join(", ");
+		return t > 0 ? `${n}, +${t}` : n;
+	})(), Q = (e) => de?.(e) ?? P("uic.PagedSelector.totalItems", { total: e }), $ = P("uic.PagedSelector.loading");
+	return /* @__PURE__ */ l(n, {
+		...N,
+		label: h,
+		value: R,
+		onChange: V,
+		triggerLabel: we,
+		placeholder: oe ?? P("uic.PagedSelector.placeholder", { label: h }),
+		isLoading: A,
+		size: j,
+		hasClear: ge,
+		onClear: O ?? (() => V([])),
+		onOpenChange: (e) => {
+			e || U(-1), k?.(e);
+		},
+		contentXstyle: g.reset,
+		children: (e, t, n) => /* @__PURE__ */ u("div", { children: [
+			v ? /* @__PURE__ */ u(ne, { children: [/* @__PURE__ */ l(r, {
+				label: y ?? P("uic.PagedSelector.searchOptions"),
+				clearLabel: b ?? P("uic.PagedSelector.clearSearch"),
+				placeholder: le ?? P("uic.PagedSelector.searchPlaceholder"),
+				value: Se,
+				onValueChange: (e) => {
+					xe(e), U(J(0, 1)), ce?.(e);
+				},
+				onKeyDown: (e) => Z(e, n, !1),
+				"aria-controls": L,
+				"aria-activedescendant": q >= 0 ? G(q) : void 0
+			}), /* @__PURE__ */ l(re, {})] }) : null,
+			fe,
+			/* @__PURE__ */ l("div", {
+				id: L,
+				role: "listbox",
+				"aria-label": h,
+				"aria-multiselectable": M || void 0,
+				tabIndex: v ? void 0 : 0,
+				"aria-activedescendant": !v && q >= 0 ? G(q) : void 0,
+				onKeyDown: v ? void 0 : (e) => Z(e, n, !0),
+				onScroll: Ce,
+				className: "uic-paged-selector__listbox",
+				style: { maxHeight: pe },
+				children: _.length === 0 ? /* @__PURE__ */ l("div", {
+					className: "uic-paged-selector__empty",
+					children: T === void 0 ? A ? /* @__PURE__ */ u(s, {
+						gap: 1,
+						vAlign: "center",
+						hAlign: "center",
+						children: [/* @__PURE__ */ l(f, { size: "sm" }), /* @__PURE__ */ l(c, {
+							color: "secondary",
+							children: $
+						})]
+					}) : /* @__PURE__ */ l(c, {
+						color: "secondary",
+						children: P("uic.PagedSelector.noResults")
+					}) : T
+				}) : _.map((e, t) => {
+					let r = Y(e.value), i = e.isDisabled ?? !1;
+					return /* @__PURE__ */ u("div", {
+						id: G(t),
+						role: "option",
+						"aria-selected": r,
+						"aria-disabled": i || void 0,
+						className: "uic-paged-selector__option",
+						"data-size": j === "sm" ? "sm" : void 0,
+						"data-selected": r ? "true" : void 0,
+						"data-highlighted": t === q ? "true" : void 0,
+						"data-disabled": i ? "true" : void 0,
+						onClick: () => {
+							i || (U(t), X(e, n));
+						},
+						onMouseEnter: () => {
+							i || U(t);
+						},
+						children: [
+							D === "checkbox" && /* @__PURE__ */ l("span", {
+								className: "uic-paged-selector__option-mark",
+								children: /* @__PURE__ */ l(I, {
+									state: r ? "checked" : "unchecked",
+									size: "sm",
+									isDisabled: i
+								})
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "uic-paged-selector__option-content",
+								children: /* @__PURE__ */ l(ie, {
+									icon: e.icon,
+									label: e.labelContent ?? e.label,
+									description: e.description,
+									endContent: e.endContent
+								})
+							}),
+							D === "check" && /* @__PURE__ */ l("span", {
+								className: "uic-paged-selector__option-mark",
+								children: /* @__PURE__ */ l(F, {
+									state: r ? "checked" : "unchecked",
+									size: "sm",
+									isDisabled: i,
+									...te("selector-check")
+								})
+							})
+						]
+					}, e.value);
+				})
+			}),
+			(typeof E == "function" ? E(n) : E) ?? (typeof w == "number" && w > 0 ? /* @__PURE__ */ u(s, {
+				gap: 1,
+				vAlign: "center",
+				hAlign: "end",
+				className: "uic-paged-selector__foot",
+				children: [C ? /* @__PURE__ */ l(f, { size: "sm" }) : null, /* @__PURE__ */ l(c, {
+					color: "secondary",
+					size: "sm",
+					children: Q(w)
+				})]
+			}) : null),
+			/* @__PURE__ */ l(m, {
+				as: "div",
+				"aria-live": "polite",
+				children: _.length === 0 && A ? $ : Q(_.length)
+			})
+		] })
+	});
+}
+//#endregion
+export { h as CONTENT_RESET, _ as PagedSelector };
+
+//# sourceMappingURL=PagedSelector2.js.map
+import "../../assets/components/PagedSelector/PagedSelector.css";

package/dist/components/PagedSelector/PagedSelector2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagedSelector2.js","names":[],"sources":["../../../src/components/PagedSelector/PagedSelector.tsx"],"sourcesContent":["/**\n * PagedSelector\n *\n * A searchable selector, single or multiple, over a list that loads a page at\n * a time: scrolling the panel near its end calls `onEndReached`, which is\n * where a consumer loads the next page (a Relay `loadNext`, a cursor fetch).\n * Search is the consumer's too: `onSearchChange` reports every keystroke.\n *\n * Astryx's `Selector` / `MultiSelector` mount every option and have no\n * scroll callback; `Typeahead` replaces its list on each query. This is\n * built on `ComplexSelector` (ui-common's copy), which owns the field,\n * trigger, popover and focus return and hands the panel body back, so the\n * body can own the scroll container. The body is drawn the way `Selector`'s\n * is: Astryx's panel search row, then option rows with the theme's check.\n *\n * - `value` holds option values: a string (or null) alone, a string array\n *   with `isMultiple`. `onChange` also gets each chosen value's label, so a\n *   consumer can keep labels for values that are not on the loaded page.\n * - A selected value missing from `options` (on another page, or filtered out\n *   by the query) is named from `labels`, then from any page it was seen on,\n *   then shown as the value itself.\n * - Keyboard: ArrowUp/Down, Home/End move a highlight that skips disabled\n *   rows; Enter commits it, and Space too when there is no search box. The\n *   panel is `ComplexSelector`'s dialog holding a listbox, not an ARIA\n *   combobox.\n * - Options render one DOM row each; paging is what keeps that bounded.\n *\n * @example\n * <PagedSelector\n *   label=\"Owner\"\n *   value={ownerId}\n *   onChange={(id) => setOwnerId(id)}\n *   options={users.map((u) => ({ value: u.id, label: u.email }))}\n *   onSearchChange={setQuery}\n *   onEndReached={() => hasNext && loadNext(10)}\n *   isLoadingMore={isLoadingNext}\n *   totalCount={count}\n * />\n */\nimport { useId, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  ComplexSelector,\n  type ComplexSelectorProps,\n} from \"../../forks/ComplexSelector\";\nimport { compiledStyles } from \"../../forks/compiled\";\nimport { Divider } from \"@astryxdesign/core/Divider\";\nimport { useIndicator } from \"@astryxdesign/core/Indicator\";\nimport { SelectorOption } from \"@astryxdesign/core/Selector\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { Token } from \"@astryxdesign/core/Token\";\nimport { VisuallyHidden } from \"@astryxdesign/core/VisuallyHidden\";\nimport { themeProps } from \"@astryxdesign/core/utils\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { PanelSearchInput } from \"./PanelSearchInput\";\nimport \"./PagedSelector.css\";\n\nexport interface PagedSelectorOption {\n  value: string;\n  /** The option's name: the trigger text and the row's accessible name. */\n  label: string;\n  /** Drawn in the row in place of `label`, for a row richer than a string. */\n  labelContent?: ReactNode;\n  /** Leading visual (avatar, glyph). */\n  icon?: ReactNode;\n  /** Secondary line under the label. */\n  description?: ReactNode;\n  /** Trailing content (tokens, meta). */\n  endContent?: ReactNode;\n  isDisabled?: boolean;\n}\n\n/** A chosen value with its label, as `onChange` reports it. */\nexport interface PagedSelectorSelectedItem {\n  value: string;\n  label: string;\n}\n\ntype Passthrough = Pick<\n  ComplexSelectorProps<string[]>,\n  | \"label\"\n  | \"isLabelHidden\"\n  | \"description\"\n  | \"isOptional\"\n  | \"isRequired\"\n  | \"isDisabled\"\n  | \"isLoading\"\n  | \"status\"\n  | \"statusVariant\"\n  | \"labelTooltip\"\n  | \"size\"\n  | \"variant\"\n  | \"startIcon\"\n  | \"width\"\n  | \"placement\"\n  | \"alignment\"\n  | \"onOpenChange\"\n  | \"xstyle\"\n  | \"className\"\n  | \"style\"\n  | \"data-testid\"\n>;\n\ninterface PagedSelectorBaseProps extends Passthrough {\n  /** The loaded options, every page so far, in order. */\n  options: readonly PagedSelectorOption[];\n  /** Labels for selected values that may not be among `options`. */\n  labels?: Readonly<Record<string, string>>;\n  /**\n   * Placeholder while nothing is selected.\n   * @default the catalog's uic.PagedSelector.placeholder (\"Select {label}\")\n   */\n  placeholder?: string;\n  /** Show the search box at the top of the panel. @default true */\n  hasSearch?: boolean;\n  /** Controlled search text; uncontrolled without it. */\n  searchValue?: string;\n  /** Called on every keystroke in the search box; debounce it yourself. */\n  onSearchChange?: (searchValue: string) => void;\n  /** @default the catalog's uic.PagedSelector.searchPlaceholder (\"Search\") */\n  searchPlaceholder?: string;\n  /** @default the catalog's uic.PagedSelector.searchOptions (\"Search options\") */\n  searchLabel?: string;\n  /** @default the catalog's uic.PagedSelector.clearSearch (\"Clear search options\") */\n  clearSearchLabel?: string;\n  /**\n   * Called once each time the list is scrolled to within\n   * `endReachedThreshold` px of its end. Load the next page here.\n   */\n  onEndReached?: () => void;\n  /** Distance from the end, in px, that counts as reaching it. @default 30 */\n  endReachedThreshold?: number;\n  /** Called when the list arrives at, or leaves, its end. */\n  onAtEndChange?: (isAtEnd: boolean) => void;\n  /** A spinner in the foot while the next page loads. */\n  isLoadingMore?: boolean;\n  /** Options in all pages; shows the \"Total N items\" foot when positive. */\n  totalCount?: number;\n  /** @default the catalog's uic.PagedSelector.totalItems (\"Total {total} items\") */\n  formatTotalCount?: (total: number) => string;\n  /**\n   * Replaces the empty list's content, the loading row included.\n   * @default the catalog's uic.PagedSelector.loading while `isLoading`, else\n   * uic.PagedSelector.noResults (\"No results\")\n   */\n  emptyText?: ReactNode;\n  /** Above the option list, under the search box. */\n  header?: ReactNode;\n  /** Below the option list, in place of the total count. A function gets `close`. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Height the option list scrolls within, in px. @default 260 */\n  listMaxHeight?: number;\n  /**\n   * How a multiple selection shows in the trigger: `labels` (\"A, B, C, +2\",\n   * as `MultiSelector`) or `badges` (tokens). @default \"labels\"\n   */\n  triggerDisplay?: \"labels\" | \"badges\";\n  /** Selected items the trigger names before \"+N\". @default 3 */\n  maxTriggerItems?: number;\n  /** How a selected row is marked: the theme's check at its end, or a checkbox at its start. @default \"check\" */\n  selectionIndicator?: \"check\" | \"checkbox\";\n  /** A clear button in the trigger while something is selected. */\n  hasClear?: boolean;\n  /** Runs on clear. @default onChange(null) alone, onChange([]) with isMultiple */\n  onClear?: () => void;\n}\n\nexport interface PagedSelectorSingleProps extends PagedSelectorBaseProps {\n  isMultiple?: false;\n  value?: string | null;\n  onChange?: (value: string | null, item: PagedSelectorSelectedItem | null) => void;\n}\n\nexport interface PagedSelectorMultipleProps extends PagedSelectorBaseProps {\n  isMultiple: true;\n  value?: readonly string[];\n  onChange?: (value: string[], items: PagedSelectorSelectedItem[]) => void;\n}\n\nexport type PagedSelectorProps = PagedSelectorSingleProps | PagedSelectorMultipleProps;\n\n/**\n * `ComplexSelector` insets its panel body by `--spacing-3`; this body brings\n * Selector's own gutters, so the inset goes. Astryx's compiled `padding: 0`\n * class (kmVPX3 is StyleX's key for `padding`), so no StyleX compiler is\n * needed; the test suite fails if astryx.css stops defining it.\n */\nexport const CONTENT_RESET = { padding: \"x1717udv\" } as const;\nconst contentStyles = compiledStyles({\n  reset: { kmVPX3: CONTENT_RESET.padding, $$css: true },\n});\n\nexport function PagedSelector(props: PagedSelectorProps) {\n  const {\n    label,\n    options,\n    labels,\n    placeholder,\n    hasSearch = true,\n    searchValue,\n    onSearchChange,\n    searchPlaceholder,\n    searchLabel,\n    clearSearchLabel,\n    onEndReached,\n    endReachedThreshold = 30,\n    onAtEndChange,\n    isLoadingMore,\n    totalCount,\n    formatTotalCount,\n    emptyText,\n    header,\n    footer,\n    listMaxHeight = 260,\n    triggerDisplay = \"labels\",\n    maxTriggerItems = 3,\n    selectionIndicator = \"check\",\n    hasClear,\n    onClear,\n    onOpenChange,\n    isLoading,\n    size,\n    isMultiple,\n    value: _value,\n    onChange: _onChange,\n    ...rest\n  } = props;\n  const t = useUicTranslator();\n  const CheckMark = useIndicator(\"check\");\n  const CheckboxMark = useIndicator(\"checkbox\");\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const selectedValues: string[] = props.isMultiple\n    ? [...(props.value ?? [])]\n    : props.value != null\n      ? [props.value]\n      : [];\n\n  // Labels of every option seen, so a value picked from a page the list has\n  // since dropped (a new query) keeps its name.\n  const seenLabels = useRef(new Map<string, string>());\n  for (const option of options) seenLabels.current.set(option.value, option.label);\n  const labelOf = (value: string) =>\n    labels?.[value] ??\n    options.find((option) => option.value === value)?.label ??\n    seenLabels.current.get(value) ??\n    value;\n\n  const emit = (values: string[]) => {\n    const items = values.map((value) => ({ value, label: labelOf(value) }));\n    if (props.isMultiple) props.onChange?.(values, items);\n    else props.onChange?.(values[0] ?? null, items[0] ?? null);\n  };\n\n  // -1: an opened Astryx Selector highlights nothing until the pointer or an\n  // arrow key picks a row.\n  const [highlightedIndex, setHighlightedIndex] = useState(-1);\n  const [internalSearch, setInternalSearch] = useState(\"\");\n  const search = searchValue ?? internalSearch;\n  const isAtEnd = useRef(false);\n\n  const optionIdOf = (index: number) => `${optionIdPrefix}-option-${index}`;\n  const clampedIndex =\n    options.length === 0 || highlightedIndex < 0\n      ? -1\n      : Math.min(highlightedIndex, options.length - 1);\n  // A row that went disabled under a page append does not keep the highlight.\n  const activeIndex =\n    clampedIndex >= 0 && options[clampedIndex]?.isDisabled ? -1 : clampedIndex;\n\n  const nextEnabledIndex = (from: number, step: 1 | -1) => {\n    for (let i = from; i >= 0 && i < options.length; i += step) {\n      if (!options[i]?.isDisabled) return i;\n    }\n    return -1;\n  };\n\n  useLayoutEffect(() => {\n    if (activeIndex < 0) return;\n    document\n      .getElementById(optionIdOf(activeIndex))\n      ?.scrollIntoView({ block: \"nearest\" });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeIndex]);\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (!onEndReached && !onAtEndChange) return;\n    const el = event.currentTarget;\n    const isAtEndNow =\n      el.scrollHeight - el.scrollTop - el.clientHeight <= endReachedThreshold;\n    if (isAtEndNow === isAtEnd.current) return;\n    isAtEnd.current = isAtEndNow;\n    onAtEndChange?.(isAtEndNow);\n    if (isAtEndNow) onEndReached?.();\n  };\n\n  const isSelected = (value: string) => selectedValues.includes(value);\n\n  const commit = (option: PagedSelectorOption, close: () => void) => {\n    if (!isMultiple) {\n      emit([option.value]);\n      close();\n      return;\n    }\n    emit(\n      isSelected(option.value)\n        ? selectedValues.filter((value) => value !== option.value)\n        : [...selectedValues, option.value],\n    );\n  };\n\n  // Shared by the search box and, with no search box, the listbox itself.\n  // Space commits only where it is not typing into the search box.\n  const handleNavKeyDown = (\n    event: React.KeyboardEvent<HTMLElement>,\n    close: () => void,\n    hasSpaceCommit: boolean,\n  ) => {\n    if (options.length === 0) return;\n    const moveTo = (index: number) => {\n      if (index >= 0) setHighlightedIndex(index);\n    };\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveTo(nextEnabledIndex(activeIndex < 0 ? 0 : activeIndex + 1, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveTo(\n          activeIndex < 0\n            ? nextEnabledIndex(0, 1)\n            : nextEnabledIndex(activeIndex - 1, -1),\n        );\n        break;\n      case \"Home\":\n        event.preventDefault();\n        moveTo(nextEnabledIndex(0, 1));\n        break;\n      case \"End\":\n        event.preventDefault();\n        moveTo(nextEnabledIndex(options.length - 1, -1));\n        break;\n      case \" \":\n      case \"Enter\": {\n        if (event.key === \" \" && !hasSpaceCommit) break;\n        const option = options[activeIndex];\n        if (!option || option.isDisabled) break;\n        event.preventDefault();\n        commit(option, close);\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const triggerLabel = (() => {\n    if (selectedValues.length === 0) return undefined;\n    if (!isMultiple) return labelOf(selectedValues[0]!);\n    const shown = selectedValues.slice(0, maxTriggerItems);\n    const remaining = selectedValues.length - shown.length;\n    if (triggerDisplay === \"badges\") {\n      // Display-only: the trigger is ComplexSelector's own <button>, so a\n      // removable token would nest a button in a button.\n      return (\n        <HStack gap={0.5} vAlign=\"center\" wrap=\"wrap\">\n          {shown.map((value) => (\n            <Token key={value} label={labelOf(value)} size=\"sm\" />\n          ))}\n          {remaining > 0 ? <Text color=\"secondary\">{`+${remaining}`}</Text> : null}\n        </HStack>\n      );\n    }\n    const joined = shown.map(labelOf).join(\", \");\n    return remaining > 0 ? `${joined}, +${remaining}` : joined;\n  })();\n\n  const totalText = (total: number) =>\n    formatTotalCount?.(total) ?? t(\"uic.PagedSelector.totalItems\", { total });\n  const loadingText = t(\"uic.PagedSelector.loading\");\n\n  return (\n    <ComplexSelector<string[]>\n      {...rest}\n      label={label}\n      value={selectedValues}\n      onChange={emit}\n      triggerLabel={triggerLabel}\n      placeholder={placeholder ?? t(\"uic.PagedSelector.placeholder\", { label })}\n      isLoading={isLoading}\n      size={size}\n      hasClear={hasClear}\n      onClear={onClear ?? (() => emit([]))}\n      onOpenChange={(isOpen) => {\n        // Astryx drops its highlight when the panel closes, so the next open\n        // starts clean.\n        if (!isOpen) setHighlightedIndex(-1);\n        onOpenChange?.(isOpen);\n      }}\n      contentXstyle={contentStyles.reset}\n    >\n      {(_current, _commit, close) => (\n        <div>\n          {hasSearch ? (\n            <>\n              <PanelSearchInput\n                label={searchLabel ?? t(\"uic.PagedSelector.searchOptions\")}\n                clearLabel={clearSearchLabel ?? t(\"uic.PagedSelector.clearSearch\")}\n                placeholder={\n                  searchPlaceholder ?? t(\"uic.PagedSelector.searchPlaceholder\")\n                }\n                value={search}\n                onValueChange={(next) => {\n                  setInternalSearch(next);\n                  // Seeds the first selectable row, so type-then-Enter works.\n                  setHighlightedIndex(nextEnabledIndex(0, 1));\n                  onSearchChange?.(next);\n                }}\n                onKeyDown={(event) => handleNavKeyDown(event, close, false)}\n                aria-controls={listboxId}\n                aria-activedescendant={\n                  activeIndex >= 0 ? optionIdOf(activeIndex) : undefined\n                }\n              />\n              <Divider />\n            </>\n          ) : null}\n          {header}\n          <div\n            id={listboxId}\n            role=\"listbox\"\n            aria-label={label}\n            aria-multiselectable={isMultiple || undefined}\n            // With no search box nothing else in the panel takes focus, so the\n            // popover's autofocus lands here and the arrows work.\n            tabIndex={hasSearch ? undefined : 0}\n            aria-activedescendant={\n              !hasSearch && activeIndex >= 0 ? optionIdOf(activeIndex) : undefined\n            }\n            onKeyDown={\n              hasSearch ? undefined : (event) => handleNavKeyDown(event, close, true)\n            }\n            onScroll={handleScroll}\n            className=\"uic-paged-selector__listbox\"\n            style={{ maxHeight: listMaxHeight }}\n          >\n            {options.length === 0 ? (\n              <div className=\"uic-paged-selector__empty\">\n                {emptyText !== undefined ? (\n                  emptyText\n                ) : isLoading ? (\n                  <HStack gap={1} vAlign=\"center\" hAlign=\"center\">\n                    <Spinner size=\"sm\" />\n                    <Text color=\"secondary\">{loadingText}</Text>\n                  </HStack>\n                ) : (\n                  <Text color=\"secondary\">{t(\"uic.PagedSelector.noResults\")}</Text>\n                )}\n              </div>\n            ) : (\n              options.map((option, index) => {\n                const selected = isSelected(option.value);\n                const isDisabled = option.isDisabled ?? false;\n                return (\n                  <div\n                    key={option.value}\n                    id={optionIdOf(index)}\n                    role=\"option\"\n                    aria-selected={selected}\n                    aria-disabled={isDisabled || undefined}\n                    className=\"uic-paged-selector__option\"\n                    data-size={size === \"sm\" ? \"sm\" : undefined}\n                    data-selected={selected ? \"true\" : undefined}\n                    data-highlighted={index === activeIndex ? \"true\" : undefined}\n                    data-disabled={isDisabled ? \"true\" : undefined}\n                    onClick={() => {\n                      if (isDisabled) return;\n                      setHighlightedIndex(index);\n                      commit(option, close);\n                    }}\n                    onMouseEnter={() => {\n                      if (!isDisabled) setHighlightedIndex(index);\n                    }}\n                  >\n                    {selectionIndicator === \"checkbox\" && (\n                      <span className=\"uic-paged-selector__option-mark\">\n                        <CheckboxMark\n                          state={selected ? \"checked\" : \"unchecked\"}\n                          size=\"sm\"\n                          isDisabled={isDisabled}\n                        />\n                      </span>\n                    )}\n                    <span className=\"uic-paged-selector__option-content\">\n                      <SelectorOption\n                        icon={option.icon}\n                        label={option.labelContent ?? option.label}\n                        description={option.description}\n                        endContent={option.endContent}\n                      />\n                    </span>\n                    {/* Rendered with the state passed down: a theme that swaps\n                        the check for a radio draws its empty circle too. */}\n                    {selectionIndicator === \"check\" && (\n                      <span className=\"uic-paged-selector__option-mark\">\n                        <CheckMark\n                          state={selected ? \"checked\" : \"unchecked\"}\n                          size=\"sm\"\n                          isDisabled={isDisabled}\n                          {...themeProps(\"selector-check\")}\n                        />\n                      </span>\n                    )}\n                  </div>\n                );\n              })\n            )}\n          </div>\n          {(typeof footer === \"function\" ? footer(close) : footer) ??\n            (typeof totalCount === \"number\" && totalCount > 0 ? (\n              <HStack\n                gap={1}\n                vAlign=\"center\"\n                hAlign=\"end\"\n                className=\"uic-paged-selector__foot\"\n              >\n                {isLoadingMore ? <Spinner size=\"sm\" /> : null}\n                <Text color=\"secondary\" size=\"sm\">\n                  {totalText(totalCount)}\n                </Text>\n              </HStack>\n            ) : null)}\n          <VisuallyHidden as=\"div\" aria-live=\"polite\">\n            {options.length === 0 && isLoading\n              ? loadingText\n              : totalText(options.length)}\n          </VisuallyHidden>\n        </div>\n      )}\n    </ComplexSelector>\n  );\n}\n"],"mappings":"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"}

package/dist/components/PagedSelector/PanelSearchInput.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEventHandler, Ref } from 'react';
+/** Astryx's compiled classes, from dist/Field/PanelSearchInput.js and Selector's `searchRowInput`. */
+export declare const PANEL_SEARCH_CLASS_NAMES: {
+    /** `styles.wrapper` with Selector's popover `searchRowInput` padding. */
+    readonly wrapper: "xu0wf1k x2hg6jq";
+    readonly field: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92";
+    /** Added to `field` while focus arrived by keyboard: draws the inset ring. */
+    readonly fieldKeyboardFocus: "x1gnnqk1 x1btxeh5";
+    readonly input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5";
+};
+export interface PanelSearchInputProps {
+    ref?: Ref<HTMLInputElement>;
+    label: string;
+    clearLabel: string;
+    placeholder?: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    "aria-controls"?: string;
+    "aria-activedescendant"?: string;
+}
+export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, ...ariaProps }: PanelSearchInputProps): import("react").JSX.Element;

package/dist/components/PagedSelector/PanelSearchInput.js

@@ -0,0 +1,95 @@
+"use client";
+import { compiledStyles as e } from "../../forks/compiled.js";
+import { useCallback as t, useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Icon as o } from "@astryxdesign/core/Icon";
+import { InputClearButton as s } from "@astryxdesign/core/Field";
+//#region src/components/PagedSelector/PanelSearchInput.tsx
+var c = {
+	wrapper: "xu0wf1k x2hg6jq",
+	field: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92",
+	fieldKeyboardFocus: "x1gnnqk1 x1btxeh5",
+	input: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
+}, l = e({ icon: {
+	k1xSpc: "x78zum5",
+	kGNEyG: "x6s0dn4",
+	kmuXW: "x2lah0s",
+	$$css: !0
+} }), u = Symbol.for("@astryxdesign/core/interaction-modality/v1");
+function d(e) {
+	let t = e[u];
+	if (t != null) return t;
+	let n = {
+		modality: "keyboard",
+		isListening: !1,
+		onPointerDown: () => {
+			n.modality = "pointer";
+		},
+		onKeyDown: (e) => {
+			e.metaKey || e.altKey || e.ctrlKey || (n.modality = "keyboard");
+		}
+	};
+	return Object.defineProperty(e, u, { value: n }), n;
+}
+function f() {
+	if (typeof document > "u") return;
+	let e = d(document);
+	e.isListening || (e.isListening = !0, document.addEventListener("pointerdown", e.onPointerDown, {
+		capture: !0,
+		passive: !0
+	}), document.addEventListener("keydown", e.onKeyDown, {
+		capture: !0,
+		passive: !0
+	}));
+}
+function p() {
+	return typeof document > "u" ? "keyboard" : d(document).modality;
+}
+function m({ ref: e, label: u, clearLabel: d, placeholder: m, value: h, onValueChange: g, onKeyDown: _, ...v }) {
+	let [y, b] = r(!1), [x, S] = r(null);
+	n(() => f(), []);
+	let C = t((t) => {
+		S(t), typeof e == "function" ? e(t) : e != null && (e.current = t);
+	}, [e]), w = t((e) => {
+		g(""), !e || e.detail === 0 ? x?.focus() : requestAnimationFrame(() => x?.focus({ preventScroll: !0 }));
+	}, [x, g]);
+	return /* @__PURE__ */ i("div", {
+		className: c.wrapper,
+		children: /* @__PURE__ */ a("div", {
+			"data-keyboard-focus": y ? "true" : void 0,
+			className: y ? `${c.field} ${c.fieldKeyboardFocus}` : c.field,
+			children: [
+				/* @__PURE__ */ i(o, {
+					icon: "search",
+					size: "sm",
+					color: "secondary",
+					xstyle: l.icon
+				}),
+				/* @__PURE__ */ i("input", {
+					ref: C,
+					type: "text",
+					"aria-label": u,
+					placeholder: m,
+					value: h,
+					onChange: (e) => g(e.target.value),
+					onKeyDown: _,
+					onFocus: () => b(p() === "keyboard"),
+					onBlur: () => b(!1),
+					className: c.input,
+					role: "combobox",
+					"aria-expanded": !0,
+					"aria-autocomplete": "list",
+					...v
+				}),
+				h !== "" && /* @__PURE__ */ i(s, {
+					label: d,
+					onClick: w
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as PANEL_SEARCH_CLASS_NAMES, m as PanelSearchInput };
+
+//# sourceMappingURL=PanelSearchInput.js.map

package/dist/components/PagedSelector/PanelSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSearchInput.js","names":[],"sources":["../../../src/components/PagedSelector/PanelSearchInput.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Adapted from @astryxdesign/core 0.6.2, dist/Field/PanelSearchInput.js and\n// dist/utils/interactionModality.js (MIT; see NOTICE). Neither is exported by\n// the package; Selector and MultiSelector use them for their search row.\n\n\"use client\";\n\n/**\n * The search row at the top of PagedSelector's panel: magnifier, borderless\n * input, and a clear button once a query is typed, in a rounded box shaped\n * like the option rows beneath it. Astryx's own, so the row reads exactly as\n * `Selector`'s does.\n *\n * It renders with the class names Astryx compiled for this version (their\n * rules arrive with `astryx.css`), so it needs no stylesheet and no StyleX\n * compiler. The keyboard-only focus ring is Astryx's too. The test suite\n * fails when an Astryx bump drops one of these classes.\n */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type KeyboardEventHandler,\n  type Ref,\n} from \"react\";\nimport { InputClearButton } from \"@astryxdesign/core/Field\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\n\nimport { compiledStyles } from \"../../forks/compiled\";\n\n/** Astryx's compiled classes, from dist/Field/PanelSearchInput.js and Selector's `searchRowInput`. */\nexport const PANEL_SEARCH_CLASS_NAMES = {\n  /** `styles.wrapper` with Selector's popover `searchRowInput` padding. */\n  wrapper: \"xu0wf1k x2hg6jq\",\n  field:\n    \"x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92\",\n  /** Added to `field` while focus arrived by keyboard: draws the inset ring. */\n  fieldKeyboardFocus: \"x1gnnqk1 x1btxeh5\",\n  input:\n    \"x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5\",\n} as const;\n\nconst iconStyles = compiledStyles({\n  icon: { k1xSpc: \"x78zum5\", kGNEyG: \"x6s0dn4\", kmuXW: \"x2lah0s\", $$css: true },\n});\n\n// Astryx's interaction-modality store, shared through the same document\n// symbol, so this copy and Astryx's agree on how the user last interacted.\n// `:focus-visible` matches a text input focused by pointer too, so the ring\n// is gated on the last modality being the keyboard.\ntype Modality = \"keyboard\" | \"pointer\";\ntype ModalityStore = {\n  modality: Modality;\n  isListening: boolean;\n  onPointerDown: () => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n};\nconst MODALITY_STORE_KEY = Symbol.for(\"@astryxdesign/core/interaction-modality/v1\");\n\nfunction getModalityStore(doc: Document): ModalityStore {\n  const holder = doc as unknown as Record<symbol, ModalityStore | undefined>;\n  const existing = holder[MODALITY_STORE_KEY];\n  if (existing != null) return existing;\n  const store: ModalityStore = {\n    modality: \"keyboard\",\n    isListening: false,\n    onPointerDown: () => {\n      store.modality = \"pointer\";\n    },\n    onKeyDown: (event) => {\n      if (event.metaKey || event.altKey || event.ctrlKey) return;\n      store.modality = \"keyboard\";\n    },\n  };\n  Object.defineProperty(doc, MODALITY_STORE_KEY, { value: store });\n  return store;\n}\n\nfunction trackInteractionModality(): void {\n  if (typeof document === \"undefined\") return;\n  const store = getModalityStore(document);\n  if (store.isListening) return;\n  store.isListening = true;\n  document.addEventListener(\"pointerdown\", store.onPointerDown, {\n    capture: true,\n    passive: true,\n  });\n  document.addEventListener(\"keydown\", store.onKeyDown, {\n    capture: true,\n    passive: true,\n  });\n}\n\nfunction getInteractionModality(): Modality {\n  return typeof document === \"undefined\"\n    ? \"keyboard\"\n    : getModalityStore(document).modality;\n}\n\nexport interface PanelSearchInputProps {\n  ref?: Ref<HTMLInputElement>;\n  label: string;\n  clearLabel: string;\n  placeholder?: string;\n  value: string;\n  onValueChange: (value: string) => void;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  \"aria-controls\"?: string;\n  \"aria-activedescendant\"?: string;\n}\n\nexport function PanelSearchInput({\n  ref,\n  label,\n  clearLabel,\n  placeholder,\n  value,\n  onValueChange,\n  onKeyDown,\n  ...ariaProps\n}: PanelSearchInputProps) {\n  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  useEffect(() => trackInteractionModality(), []);\n\n  const attachInput = useCallback(\n    (node: HTMLInputElement | null) => {\n      setInput(node);\n      if (typeof ref === \"function\") ref(node);\n      else if (ref != null)\n        (ref as { current: HTMLInputElement | null }).current = node;\n    },\n    [ref],\n  );\n\n  const handleClear = useCallback(\n    (event?: React.MouseEvent) => {\n      onValueChange(\"\");\n      // Upstream: keyboard keeps focus synchronously; a tap defers it past the\n      // button's unmount so touch browsers do not jump the page.\n      if (!event || event.detail === 0) input?.focus();\n      else requestAnimationFrame(() => input?.focus({ preventScroll: true }));\n    },\n    [input, onValueChange],\n  );\n\n  return (\n    <div className={PANEL_SEARCH_CLASS_NAMES.wrapper}>\n      <div\n        data-keyboard-focus={isKeyboardFocus ? \"true\" : undefined}\n        className={\n          isKeyboardFocus\n            ? `${PANEL_SEARCH_CLASS_NAMES.field} ${PANEL_SEARCH_CLASS_NAMES.fieldKeyboardFocus}`\n            : PANEL_SEARCH_CLASS_NAMES.field\n        }\n      >\n        <Icon icon=\"search\" size=\"sm\" color=\"secondary\" xstyle={iconStyles.icon} />\n        <input\n          ref={attachInput}\n          type=\"text\"\n          aria-label={label}\n          placeholder={placeholder}\n          value={value}\n          onChange={(event) => onValueChange(event.target.value)}\n          onKeyDown={onKeyDown}\n          onFocus={() => setIsKeyboardFocus(getInteractionModality() === \"keyboard\")}\n          onBlur={() => setIsKeyboardFocus(false)}\n          className={PANEL_SEARCH_CLASS_NAMES.input}\n          role=\"combobox\"\n          aria-expanded\n          aria-autocomplete=\"list\"\n          {...ariaProps}\n        />\n        {value !== \"\" && <InputClearButton label={clearLabel} onClick={handleClear} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,IAAa,IAA2B;CAEtC,SAAS;CACT,OACE;CAEF,oBAAoB;CACpB,OACE;AACJ,GAEM,IAAa,EAAe,EAChC,MAAM;CAAE,QAAQ;CAAW,QAAQ;CAAW,OAAO;CAAW,OAAO;AAAK,EAC9E,CAAC,GAaK,IAAqB,OAAO,IAAI,4CAA4C;AAElF,SAAS,EAAiB,GAA8B;CAEtD,IAAM,IAAW,EAAO;CACxB,IAAI,KAAY,MAAM,OAAO;CAC7B,IAAM,IAAuB;EAC3B,UAAU;EACV,aAAa;EACb,qBAAqB;GACnB,EAAM,WAAW;EACnB;EACA,YAAY,MAAU;GAChB,EAAM,WAAW,EAAM,UAAU,EAAM,YAC3C,EAAM,WAAW;EACnB;CACF;CAEA,OADA,OAAO,eAAe,GAAK,GAAoB,EAAE,OAAO,EAAM,CAAC,GACxD;AACT;AAEA,SAAS,IAAiC;CACxC,IAAI,OAAO,WAAa,KAAa;CACrC,IAAM,IAAQ,EAAiB,QAAQ;CACnC,EAAM,gBACV,EAAM,cAAc,IACpB,SAAS,iBAAiB,eAAe,EAAM,eAAe;EAC5D,SAAS;EACT,SAAS;CACX,CAAC,GACD,SAAS,iBAAiB,WAAW,EAAM,WAAW;EACpD,SAAS;EACT,SAAS;CACX,CAAC;AACH;AAEA,SAAS,IAAmC;CAC1C,OAAO,OAAO,WAAa,MACvB,aACA,EAAiB,QAAQ,CAAC,CAAC;AACjC;AAcA,SAAgB,EAAiB,EAC/B,QACA,UACA,eACA,gBACA,UACA,kBACA,cACA,GAAG,KACqB;CACxB,IAAM,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,CAAC,GAAO,KAAY,EAAkC,IAAI;CAEhE,QAAgB,EAAyB,GAAG,CAAC,CAAC;CAE9C,IAAM,IAAc,GACjB,MAAkC;EAEjC,AADA,EAAS,CAAI,GACT,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,KAAO,SACd,EAA8C,UAAU;CAC5D,GACA,CAAC,CAAG,CACN,GAEM,IAAc,GACjB,MAA6B;EAI5B,AAHA,EAAc,EAAE,GAGZ,CAAC,KAAS,EAAM,WAAW,IAAG,GAAO,MAAM,IAC1C,4BAA4B,GAAO,MAAM,EAAE,eAAe,GAAK,CAAC,CAAC;CACxE,GACA,CAAC,GAAO,CAAa,CACvB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAyB;EACvC,UAAA,kBAAC,OAAD;GACE,uBAAqB,IAAkB,SAAS,KAAA;GAChD,WACE,IACI,GAAG,EAAyB,MAAM,GAAG,EAAyB,uBAC9D,EAAyB;GALjC,UAAA;IAQE,kBAAC,GAAD;KAAM,MAAK;KAAS,MAAK;KAAK,OAAM;KAAY,QAAQ,EAAW;IAAO,CAAA;IAC1E,kBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,cAAY;KACC;KACN;KACP,WAAW,MAAU,EAAc,EAAM,OAAO,KAAK;KAC1C;KACX,eAAe,EAAmB,EAAuB,MAAM,UAAU;KACzE,cAAc,EAAmB,EAAK;KACtC,WAAW,EAAyB;KACpC,MAAK;KACL,iBAAA;KACA,qBAAkB;KAClB,GAAI;IACL,CAAA;IACA,MAAU,MAAM,kBAAC,GAAD;KAAkB,OAAO;KAAY,SAAS;IAAc,CAAA;GAC1E;;CACF,CAAA;AAET"}

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

@@ -0,0 +1,2 @@
+export { PagedSelector } from './PagedSelector';
+export type { PagedSelectorMultipleProps, PagedSelectorOption, PagedSelectorProps, PagedSelectorSelectedItem, PagedSelectorSingleProps, } from './PagedSelector';

package/dist/components/PagedSelector/index.js

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

package/dist/components/ProgressWithLabel/ProgressWithLabel.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+export interface ProgressWithLabelProps {
+    /** Start label, usually what is measured. */
+    label?: ReactNode;
+    /** End label, usually the amount. */
+    valueLabel?: ReactNode;
+    /** Fill, in percent. Values above 100 fill the bar. */
+    value?: number;
+    /** Whether the end label shows. Its space stays reserved. Default: true */
+    hasValueLabel?: boolean;
+    /** Fill colour: any CSS colour or `var()`. */
+    color?: string;
+    /** Width of the bar. Without it the bar grows to fill its flex container. */
+    width?: CSSProperties["width"];
+    /** Label size. Default: "sm" */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    /** Inline style of the frame. */
+    style?: CSSProperties;
+    /** Inline style of both labels. */
+    labelStyle?: CSSProperties;
+}
+export declare function ProgressWithLabel({ label, valueLabel, value, hasValueLabel, color, width, size, className, style, labelStyle, }: ProgressWithLabelProps): ReactElement;
+export declare namespace ProgressWithLabel {
+    var displayName: string;
+}

package/dist/components/ProgressWithLabel/ProgressWithLabel2.js

@@ -0,0 +1,44 @@
+/* empty css                  */
+import { Text as e } from "@astryxdesign/core/Text";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/ProgressWithLabel/ProgressWithLabel.tsx
+function r({ label: r, valueLabel: i, value: a, hasValueLabel: o = !0, color: s, width: c, size: l = "sm", className: u, style: d, labelStyle: f }) {
+	let p = a === void 0 || Number.isNaN(a), m = !a || Number.isNaN(a) ? 0 : Math.min(a, 100), h = typeof c == "number" || typeof c == "string";
+	return /* @__PURE__ */ n("div", {
+		className: [
+			"uic-progress-with-label",
+			`uic-progress-with-label--${l}`,
+			!h && "uic-progress-with-label--grow",
+			u
+		].filter(Boolean).join(" "),
+		style: {
+			...h ? { width: c } : null,
+			...d
+		},
+		children: [/* @__PURE__ */ t("div", {
+			className: "uic-progress-with-label__fill",
+			style: {
+				width: `${m}%`,
+				...s ? { backgroundColor: s } : null
+			}
+		}), /* @__PURE__ */ n("div", {
+			className: "uic-progress-with-label__labels",
+			children: [/* @__PURE__ */ t(e, {
+				className: "uic-progress-with-label__text",
+				style: f,
+				children: r
+			}), /* @__PURE__ */ t(e, {
+				className: "uic-progress-with-label__text uic-progress-with-label__value",
+				color: p ? "disabled" : void 0,
+				style: f,
+				children: o ? i : " "
+			})]
+		})]
+	});
+}
+r.displayName = "ProgressWithLabel";
+//#endregion
+export { r as ProgressWithLabel };
+
+//# sourceMappingURL=ProgressWithLabel2.js.map
+import "../../assets/components/ProgressWithLabel/ProgressWithLabel.css";

package/dist/components/ProgressWithLabel/ProgressWithLabel2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressWithLabel2.js","names":[],"sources":["../../../src/components/ProgressWithLabel/ProgressWithLabel.tsx"],"sourcesContent":["/**\n * ProgressWithLabel\n *\n * A bar that carries its own labels: `label` at the start and `valueLabel` at\n * the end, over a fill of `value` percent. For compact resource readouts in\n * table cells and cards (\"CPU  3 / 8 cores\"). A missing or NaN `value` draws\n * no fill and greys the value label.\n *\n * The fill is `color`, by default Astryx `--color-success`. The frame's\n * corner is `--progress-with-label-radius` (default `--radius-inner`).\n *\n * @example\n * <ProgressWithLabel label=\"CPU\" valueLabel=\"3 / 8\" value={37.5} width={160} />\n */\nimport type { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport \"./ProgressWithLabel.css\";\n\nexport interface ProgressWithLabelProps {\n  /** Start label, usually what is measured. */\n  label?: ReactNode;\n  /** End label, usually the amount. */\n  valueLabel?: ReactNode;\n  /** Fill, in percent. Values above 100 fill the bar. */\n  value?: number;\n  /** Whether the end label shows. Its space stays reserved. Default: true */\n  hasValueLabel?: boolean;\n  /** Fill colour: any CSS colour or `var()`. */\n  color?: string;\n  /** Width of the bar. Without it the bar grows to fill its flex container. */\n  width?: CSSProperties[\"width\"];\n  /** Label size. Default: \"sm\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  /** Inline style of the frame. */\n  style?: CSSProperties;\n  /** Inline style of both labels. */\n  labelStyle?: CSSProperties;\n}\n\nexport function ProgressWithLabel({\n  label,\n  valueLabel,\n  value,\n  hasValueLabel = true,\n  color,\n  width,\n  size = \"sm\",\n  className,\n  style,\n  labelStyle,\n}: ProgressWithLabelProps): ReactElement {\n  const isValueMissing = value === undefined || Number.isNaN(value);\n  const fill = !value || Number.isNaN(value) ? 0 : Math.min(value, 100);\n  const hasWidth = typeof width === \"number\" || typeof width === \"string\";\n\n  return (\n    <div\n      className={[\n        \"uic-progress-with-label\",\n        `uic-progress-with-label--${size}`,\n        !hasWidth && \"uic-progress-with-label--grow\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{\n        ...(hasWidth ? { width } : null),\n        ...style,\n      }}\n    >\n      <div\n        className=\"uic-progress-with-label__fill\"\n        style={{ width: `${fill}%`, ...(color ? { backgroundColor: color } : null) }}\n      />\n      <div className=\"uic-progress-with-label__labels\">\n        <Text className=\"uic-progress-with-label__text\" style={labelStyle}>\n          {label}\n        </Text>\n        <Text\n          className=\"uic-progress-with-label__text uic-progress-with-label__value\"\n          color={isValueMissing ? \"disabled\" : undefined}\n          style={labelStyle}\n        >\n          {hasValueLabel ? valueLabel : \" \"}\n        </Text>\n      </div>\n    </div>\n  );\n}\n\nProgressWithLabel.displayName = \"ProgressWithLabel\";\n"],"mappings":";;;;AAyCA,SAAgB,EAAkB,EAChC,UACA,eACA,UACA,mBAAgB,IAChB,UACA,UACA,UAAO,MACP,cACA,UACA,iBACuC;CACvC,IAAM,IAAiB,MAAU,KAAA,KAAa,OAAO,MAAM,CAAK,GAC1D,IAAO,CAAC,KAAS,OAAO,MAAM,CAAK,IAAI,IAAI,KAAK,IAAI,GAAO,GAAG,GAC9D,IAAW,OAAO,KAAU,YAAY,OAAO,KAAU;CAE/D,OACE,kBAAC,OAAD;EACE,WAAW;GACT;GACA,4BAA4B;GAC5B,CAAC,KAAY;GACb;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,OAAO;GACL,GAAI,IAAW,EAAE,SAAM,IAAI;GAC3B,GAAG;EACL;EAZF,UAAA,CAcE,kBAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE,OAAO,GAAG,EAAK;IAAI,GAAI,IAAQ,EAAE,iBAAiB,EAAM,IAAI;GAAM;EAC5E,CAAA,GACD,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAM,WAAU;IAAgC,OAAO;IACpD,UAAA;GACG,CAAA,GACN,kBAAC,GAAD;IACE,WAAU;IACV,OAAO,IAAiB,aAAa,KAAA;IACrC,OAAO;IAEN,UAAA,IAAgB,IAAa;GAC1B,CAAA,CACH;EACF,CAAA,CAAA;;AAET;AAEA,EAAkB,cAAc"}

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

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

package/dist/components/ProgressWithLabel/index.js

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

package/dist/components/SelectionLabel/SelectionLabel.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface SelectionLabelProps {
+    /** How many items are selected. 0 or less renders nothing. */
+    count: number;
+    /** Clears the selection. Without it, no clear button renders. */
+    onClear?: () => void;
+    /**
+     * The text. @default the catalog's uic.SelectionLabel.selectedCount
+     * ("{count} selected")
+     */
+    label?: string;
+    /**
+     * Accessible name and tooltip of the clear button.
+     * @default the catalog's uic.SelectionLabel.clear ("Deselect all")
+     */
+    clearLabel?: string;
+    /** Glyph of the clear button. @default the theme's `close` icon */
+    clearIcon?: ReactNode;
+}
+export declare function SelectionLabel({ count, onClear, label, clearLabel, clearIcon, }: SelectionLabelProps): import("react").JSX.Element | null;
+export declare namespace SelectionLabel {
+    var displayName: string;
+}

package/dist/components/SelectionLabel/SelectionLabel.js

@@ -0,0 +1,29 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { HStack as t } from "@astryxdesign/core/Stack";
+import { Text as n } from "@astryxdesign/core/Text";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@astryxdesign/core/Icon";
+import { IconButton as o } from "@astryxdesign/core/IconButton";
+//#region src/components/SelectionLabel/SelectionLabel.tsx
+function s({ count: s, onClear: c, label: l, clearLabel: u, clearIcon: d }) {
+	let f = e();
+	if (s <= 0) return null;
+	let p = u ?? f("uic.SelectionLabel.clear");
+	return /* @__PURE__ */ i(t, {
+		gap: 1,
+		align: "center",
+		children: [/* @__PURE__ */ r(n, { children: l ?? f("uic.SelectionLabel.selectedCount", { count: s }) }), c ? /* @__PURE__ */ r(o, {
+			variant: "ghost",
+			size: "sm",
+			icon: d ?? /* @__PURE__ */ r(a, { icon: "close" }),
+			label: p,
+			tooltip: p,
+			onClick: c
+		}) : null]
+	});
+}
+s.displayName = "SelectionLabel";
+//#endregion
+export { s as SelectionLabel };
+
+//# sourceMappingURL=SelectionLabel.js.map

package/dist/components/SelectionLabel/SelectionLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLabel.js","names":[],"sources":["../../../src/components/SelectionLabel/SelectionLabel.tsx"],"sourcesContent":["/**\n * SelectionLabel\n *\n * \"3 selected\" beside a bulk-action toolbar, with an optional button that\n * clears the selection. Renders nothing while `count` is 0 or less.\n *\n * @example\n * <SelectionLabel count={selectedKeys.length} onClear={() => setSelectedKeys([])} />\n */\nimport type { ReactNode } from \"react\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\nimport { IconButton } from \"@astryxdesign/core/IconButton\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\n\nexport interface SelectionLabelProps {\n  /** How many items are selected. 0 or less renders nothing. */\n  count: number;\n  /** Clears the selection. Without it, no clear button renders. */\n  onClear?: () => void;\n  /**\n   * The text. @default the catalog's uic.SelectionLabel.selectedCount\n   * (\"{count} selected\")\n   */\n  label?: string;\n  /**\n   * Accessible name and tooltip of the clear button.\n   * @default the catalog's uic.SelectionLabel.clear (\"Deselect all\")\n   */\n  clearLabel?: string;\n  /** Glyph of the clear button. @default the theme's `close` icon */\n  clearIcon?: ReactNode;\n}\n\nexport function SelectionLabel({\n  count,\n  onClear,\n  label,\n  clearLabel,\n  clearIcon,\n}: SelectionLabelProps) {\n  const t = useUicTranslator();\n  if (count <= 0) return null;\n  const clearText = clearLabel ?? t(\"uic.SelectionLabel.clear\");\n  return (\n    <HStack gap={1} align=\"center\">\n      <Text>{label ?? t(\"uic.SelectionLabel.selectedCount\", { count })}</Text>\n      {onClear ? (\n        <IconButton\n          variant=\"ghost\"\n          size=\"sm\"\n          icon={clearIcon ?? <Icon icon=\"close\" />}\n          label={clearText}\n          tooltip={clearText}\n          onClick={onClear}\n        />\n      ) : null}\n    </HStack>\n  );\n}\n\nSelectionLabel.displayName = \"SelectionLabel\";\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAe,EAC7B,UACA,YACA,UACA,eACA,gBACsB;CACtB,IAAM,IAAI,EAAiB;CAC3B,IAAI,KAAS,GAAG,OAAO;CACvB,IAAM,IAAY,KAAc,EAAE,0BAA0B;CAC5D,OACE,kBAAC,GAAD;EAAQ,KAAK;EAAG,OAAM;EAAtB,UAAA,CACE,kBAAC,GAAD,EAAA,UAAO,KAAS,EAAE,oCAAoC,EAAE,SAAM,CAAC,EAAQ,CAAA,GACtE,IACC,kBAAC,GAAD;GACE,SAAQ;GACR,MAAK;GACL,MAAM,KAAa,kBAAC,GAAD,EAAM,MAAK,QAAS,CAAA;GACvC,OAAO;GACP,SAAS;GACT,SAAS;EACV,CAAA,IACC,IACE;;AAEZ;AAEA,EAAe,cAAc"}

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

@@ -0,0 +1,10 @@
+export declare const selectionLabelMessages: {
+    readonly "uic.SelectionLabel.selectedCount": {
+        readonly defaultMessage: "{count} selected";
+        readonly description: "How many items are selected, e.g. rows of a table; {count} is the number";
+    };
+    readonly "uic.SelectionLabel.clear": {
+        readonly defaultMessage: "Deselect all";
+        readonly description: "Button that clears the whole selection";
+    };
+};

package/dist/components/SelectionLabel/SelectionLabel.messages.js

@@ -0,0 +1,16 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/SelectionLabel/SelectionLabel.messages.ts
+var t = e({
+	"uic.SelectionLabel.selectedCount": {
+		defaultMessage: "{count} selected",
+		description: "How many items are selected, e.g. rows of a table; {count} is the number"
+	},
+	"uic.SelectionLabel.clear": {
+		defaultMessage: "Deselect all",
+		description: "Button that clears the whole selection"
+	}
+});
+//#endregion
+export { t as selectionLabelMessages };
+
+//# sourceMappingURL=SelectionLabel.messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLabel.messages.js","names":[],"sources":["../../../src/components/SelectionLabel/SelectionLabel.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const selectionLabelMessages = defineMessages({\n  \"uic.SelectionLabel.selectedCount\": {\n    defaultMessage: \"{count} selected\",\n    description:\n      \"How many items are selected, e.g. rows of a table; {count} is the number\",\n  },\n  \"uic.SelectionLabel.clear\": {\n    defaultMessage: \"Deselect all\",\n    description: \"Button that clears the whole selection\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAyB,EAAe;CACnD,oCAAoC;EAClC,gBAAgB;EAChB,aACE;CACJ;CACA,4BAA4B;EAC1B,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

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

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

package/dist/components/SelectionLabel/index.js

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