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

package/dist/components/Statistic/Statistic2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic2.js","names":[],"sources":["../../../src/components/Statistic/Statistic.tsx"],"sourcesContent":["/**\n * Statistic\n *\n * A dashboard metric: a caption, a large value with its unit, and an optional\n * segmented usage bar of `value` against `total`. The bar is a strip of\n * notches, so 3 of 20 reads differently from 4 of 20 at a glance; it carries\n * `role=\"progressbar\"` and shows \"value / total\" in a tooltip.\n *\n * A value that is not finite shows `unlimitedLabel` instead of a number.\n *\n * @example\n * <Statistic label=\"Memory\" value={12} total={64} unit=\"GiB\" progressMode=\"visible\" />\n */\nimport type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { Tooltip } from \"@astryxdesign/core/Tooltip\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport \"./Statistic.css\";\n\nexport interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n  /** The caption. */\n  label: ReactNode;\n  /** The value. Not finite renders `unlimitedLabel`. */\n  value?: number;\n  /** What the value is measured against; the bar needs it. */\n  total?: number;\n  /** Unit after the value. */\n  unit?: string;\n  /** Decimal places, trailing zeros dropped. @default 2 */\n  precision?: number;\n  /** A non-finite value or total in the bar's tooltip. @default '∞' */\n  infinityLabel?: string;\n  /**\n   * The usage bar: `visible` draws it (with a `total`), `placeholder` keeps\n   * its space without painting it, `hidden` leaves it out. @default 'hidden'\n   */\n  progressMode?: \"hidden\" | \"placeholder\" | \"visible\";\n  /** Notches in the bar. @default 20 */\n  progressSteps?: number;\n  /** Colour of the value and of the bar's filled notches. */\n  color?: string;\n  /** Shown for a non-finite value. @default the catalog's uic.Statistic.unlimited (\"Unlimited\") */\n  unlimitedLabel?: string;\n}\n\nfunction StepBar({\n  steps,\n  percent,\n  isPlaceholder,\n  color,\n  label,\n}: {\n  steps: number;\n  percent: number;\n  isPlaceholder?: boolean;\n  color?: string;\n  label: string;\n}) {\n  const filled = Math.round((percent / 100) * steps);\n  return (\n    <div\n      className=\"uic-statistic__steps\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuenow={percent}\n      aria-valuemin={0}\n      aria-valuemax={100}\n    >\n      {Array.from({ length: steps }, (_, index) => (\n        <span\n          key={index}\n          className={\n            isPlaceholder\n              ? \"uic-statistic__step uic-statistic__step--placeholder\"\n              : index < filled\n                ? \"uic-statistic__step uic-statistic__step--filled\"\n                : \"uic-statistic__step\"\n          }\n          style={\n            isPlaceholder || index >= filled ? undefined : { backgroundColor: color }\n          }\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function Statistic({\n  label,\n  value,\n  total,\n  unit = \"\",\n  precision = 2,\n  infinityLabel = \"∞\",\n  progressMode = \"hidden\",\n  progressSteps = 20,\n  color,\n  unlimitedLabel,\n  className,\n  ...divProps\n}: StatisticProps) {\n  const t = useUicTranslator();\n  const format = (n: number) =>\n    Number.isFinite(n) ? parseFloat(n.toFixed(precision)).toString() : infinityLabel;\n\n  const displayValue = value === undefined ? undefined : format(value);\n  const displayTotal = total === undefined ? undefined : format(total);\n\n  const percent = (() => {\n    if (progressMode === \"hidden\" || total === undefined || total === Infinity)\n      return 0;\n    // Nothing allocated out of a zero quota is empty; anything else against\n    // it, a non-finite value included, is full.\n    if (total === 0) return value === 0 ? 0 : 100;\n    if (value === undefined || !Number.isFinite(value) || !Number.isFinite(total))\n      return 100;\n    return Math.round((value / total) * 100);\n  })();\n  const accessibleLabel = typeof label === \"string\" ? label : \"usage\";\n  const colorStyle: CSSProperties | undefined = color ? { color } : undefined;\n\n  return (\n    <VStack\n      align=\"start\"\n      className={[\"uic-statistic\", className].filter(Boolean).join(\" \")}\n      {...divProps}\n    >\n      <Text\n        size=\"lg\"\n        color=\"secondary\"\n        display=\"block\"\n        className=\"uic-statistic__label\"\n      >\n        {label}\n      </Text>\n      <HStack gap={1} align=\"end\" className=\"uic-statistic__row\">\n        {value !== undefined && !Number.isFinite(value) ? (\n          <Text className=\"uic-statistic__value\">\n            {unlimitedLabel ?? t(\"uic.Statistic.unlimited\")}\n          </Text>\n        ) : (\n          <>\n            <Text className=\"uic-statistic__value\" style={colorStyle}>\n              {displayValue}\n            </Text>\n            {unit && <Text color=\"secondary\">{unit}</Text>}\n          </>\n        )}\n      </HStack>\n      {progressMode === \"visible\" && total !== undefined ? (\n        <Tooltip content={`${displayValue} ${unit} / ${displayTotal} ${unit}`}>\n          <StepBar\n            steps={progressSteps}\n            percent={percent}\n            color={color}\n            label={accessibleLabel}\n          />\n        </Tooltip>\n      ) : progressMode === \"placeholder\" ? (\n        <StepBar\n          isPlaceholder\n          steps={progressSteps}\n          percent={0}\n          label={accessibleLabel}\n        />\n      ) : null}\n    </VStack>\n  );\n}\n\nStatistic.displayName = \"Statistic\";\n"],"mappings":";;;;;;;AA+CA,SAAS,EAAQ,EACf,UACA,YACA,kBACA,UACA,YAOC;CACD,IAAM,IAAS,KAAK,MAAO,IAAU,MAAO,CAAK;CACjD,OACE,kBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EAEd,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MACjC,kBAAC,QAAD;GAEE,WACE,IACI,yDACA,IAAQ,IACN,oDACA;GAER,OACE,KAAiB,KAAS,IAAS,KAAA,IAAY,EAAE,iBAAiB,EAAM;EAE3E,GAXM,CAWN,CACF;CACE,CAAA;AAET;AAEA,SAAgB,EAAU,EACxB,UACA,UACA,UACA,UAAO,IACP,eAAY,GACZ,mBAAgB,KAChB,kBAAe,UACf,mBAAgB,IAChB,UACA,mBACA,cACA,GAAG,KACc;CACjB,IAAM,IAAI,EAAiB,GACrB,KAAU,MACd,OAAO,SAAS,CAAC,IAAI,WAAW,EAAE,QAAQ,CAAS,CAAC,CAAC,CAAC,SAAS,IAAI,GAE/D,IAAe,MAAU,KAAA,IAAY,KAAA,IAAY,EAAO,CAAK,GAC7D,IAAe,MAAU,KAAA,IAAY,KAAA,IAAY,EAAO,CAAK,GAE7D,IACA,MAAiB,YAAY,MAAU,KAAA,KAAa,MAAU,WACzD,IAGL,MAAU,IAAU,MAAU,IAAI,IAAI,MACtC,MAAU,KAAA,KAAa,CAAC,OAAO,SAAS,CAAK,KAAK,CAAC,OAAO,SAAS,CAAK,IACnE,MACF,KAAK,MAAO,IAAQ,IAAS,GAAG,GAEnC,IAAkB,OAAO,KAAU,WAAW,IAAQ,SACtD,IAAwC,IAAQ,EAAE,SAAM,IAAI,KAAA;CAElE,OACE,kBAAC,GAAD;EACE,OAAM;EACN,WAAW,CAAC,iBAAiB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAChE,GAAI;EAHN,UAAA;GAKE,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAQ;IACR,WAAU;IAET,UAAA;GACG,CAAA;GACN,kBAAC,GAAD;IAAQ,KAAK;IAAG,OAAM;IAAM,WAAU;IACnC,UAAA,MAAU,KAAA,KAAa,CAAC,OAAO,SAAS,CAAK,IAC5C,kBAAC,GAAD;KAAM,WAAU;KACb,UAAA,KAAkB,EAAE,yBAAyB;IAC1C,CAAA,IAEN,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;KAAM,WAAU;KAAuB,OAAO;KAC3C,UAAA;IACG,CAAA,GACL,KAAQ,kBAAC,GAAD;KAAM,OAAM;KAAa,UAAA;IAAW,CAAA,CAC7C,EAAA,CAAA;GAEE,CAAA;GACP,MAAiB,aAAa,MAAU,KAAA,IACvC,kBAAC,GAAD;IAAS,SAAS,GAAG,EAAa,GAAG,EAAK,KAAK,EAAa,GAAG;IAC7D,UAAA,kBAAC,GAAD;KACE,OAAO;KACE;KACF;KACP,OAAO;IACR,CAAA;GACM,CAAA,IACP,MAAiB,gBACnB,kBAAC,GAAD;IACE,eAAA;IACA,OAAO;IACP,SAAS;IACT,OAAO;GACR,CAAA,IACC;EACE;;AAEZ;AAEA,EAAU,cAAc"}

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

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

package/dist/components/Statistic/index.js

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

package/dist/components/StepNumberInput/NumberStepper.d.ts

@@ -0,0 +1,29 @@
+export type StepDirection = "up" | "down";
+export interface NumberStepperProps {
+    /** Called with the direction of the half that was pressed. */
+    onStep: (direction: StepDirection) => void;
+    /** Disables both halves. */
+    isDisabled?: boolean;
+    /**
+     * Accessible name of the upper half.
+     * @default the catalog's uic.NumberStepper.increase ("Increase")
+     */
+    increaseLabel?: string;
+    /**
+     * Accessible name of the lower half.
+     * @default the catalog's uic.NumberStepper.decrease ("Decrease")
+     */
+    decreaseLabel?: string;
+}
+export declare function NumberStepper({ onStep, isDisabled, increaseLabel, decreaseLabel, }: NumberStepperProps): import("react").JSX.Element;
+export declare namespace NumberStepper {
+    var displayName: string;
+}
+/**
+ * The index of the next rung of `steps` from `current`. A value already on a
+ * rung moves one rung (↑ from 4 lands on 8); a value between rungs moves to
+ * the nearer rung in that direction. The result can fall outside `steps`
+ * (-1, or `steps.length`); the caller decides what that means: clamp, or
+ * carry into another unit.
+ */
+export declare function getNextStepIndex(steps: readonly number[], current: number, direction: StepDirection): number;

package/dist/components/StepNumberInput/NumberStepper.messages.d.ts

@@ -0,0 +1,10 @@
+export declare const numberStepperMessages: {
+    readonly "uic.NumberStepper.increase": {
+        readonly defaultMessage: "Increase";
+        readonly description: "Accessible name of the button that steps a number field up";
+    };
+    readonly "uic.NumberStepper.decrease": {
+        readonly defaultMessage: "Decrease";
+        readonly description: "Accessible name of the button that steps a number field down";
+    };
+};

package/dist/components/StepNumberInput/NumberStepper.messages.js

@@ -0,0 +1,16 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/StepNumberInput/NumberStepper.messages.ts
+var t = e({
+	"uic.NumberStepper.increase": {
+		defaultMessage: "Increase",
+		description: "Accessible name of the button that steps a number field up"
+	},
+	"uic.NumberStepper.decrease": {
+		defaultMessage: "Decrease",
+		description: "Accessible name of the button that steps a number field down"
+	}
+});
+//#endregion
+export { t as numberStepperMessages };
+
+//# sourceMappingURL=NumberStepper.messages.js.map

package/dist/components/StepNumberInput/NumberStepper.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper.messages.js","names":[],"sources":["../../../src/components/StepNumberInput/NumberStepper.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const numberStepperMessages = defineMessages({\n  \"uic.NumberStepper.increase\": {\n    defaultMessage: \"Increase\",\n    description: \"Accessible name of the button that steps a number field up\",\n  },\n  \"uic.NumberStepper.decrease\": {\n    defaultMessage: \"Decrease\",\n    description: \"Accessible name of the button that steps a number field down\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAwB,EAAe;CAClD,8BAA8B;EAC5B,gBAAgB;EAChB,aAAa;CACf;CACA,8BAA8B;EAC5B,gBAAgB;EAChB,aAAa;CACf;AACF,CAAC"}

package/dist/components/StepNumberInput/NumberStepper2.js

@@ -0,0 +1,50 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+/* empty css              */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Icon as r } from "@astryxdesign/core/Icon";
+import { InputGroupText as i } from "@astryxdesign/core/InputGroup";
+//#region src/components/StepNumberInput/NumberStepper.tsx
+function a({ onStep: a, isDisabled: o, increaseLabel: s, decreaseLabel: c }) {
+	let l = e();
+	return /* @__PURE__ */ n(i, {
+		className: "uic-number-stepper",
+		children: [/* @__PURE__ */ t("button", {
+			type: "button",
+			tabIndex: -1,
+			className: "uic-number-stepper__button uic-number-stepper__button--increase",
+			"aria-label": s ?? l("uic.NumberStepper.increase"),
+			disabled: o,
+			onPointerDown: (e) => e.preventDefault(),
+			onClick: () => a("up"),
+			children: /* @__PURE__ */ t(r, {
+				icon: "chevronDown",
+				size: "xsm",
+				color: "inherit"
+			})
+		}), /* @__PURE__ */ t("button", {
+			type: "button",
+			tabIndex: -1,
+			className: "uic-number-stepper__button uic-number-stepper__button--decrease",
+			"aria-label": c ?? l("uic.NumberStepper.decrease"),
+			disabled: o,
+			onPointerDown: (e) => e.preventDefault(),
+			onClick: () => a("down"),
+			children: /* @__PURE__ */ t(r, {
+				icon: "chevronDown",
+				size: "xsm",
+				color: "inherit"
+			})
+		})]
+	});
+}
+a.displayName = "NumberStepper";
+function o(e, t, n) {
+	let r = [...e].sort((e, t) => e - t), i = 0;
+	for (; i < r.length && (r[i] ?? 0) < t;) i += 1;
+	return n === "up" ? t === r[i] ? i + 1 : i : i - 1;
+}
+//#endregion
+export { a as NumberStepper, o as getNextStepIndex };
+
+//# sourceMappingURL=NumberStepper2.js.map
+import "../../assets/components/StepNumberInput/NumberStepper.css";

package/dist/components/StepNumberInput/NumberStepper2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepper2.js","names":[],"sources":["../../../src/components/StepNumberInput/NumberStepper.tsx"],"sourcesContent":["/**\n * NumberStepper\n *\n * The up/down column of a number field whose steps are not linear. Astryx's\n * `NumberInput hasNumberSteppers` snaps to a grid anchored at `min`\n * (`min + n * step`), so no `step` goes 8 → 16 up and 8 → 4 down, and its\n * buttons expose no hook to replace the arithmetic. This column is drawn the\n * way Astryx draws its own: the same width, the same chevron, rotated for\n * the upper half, the same hairline between the halves.\n *\n * It must sit inside an `InputGroup`: `InputGroupText` is what welds the\n * column to the field.\n *\n * Unlike Astryx's buttons, these do not move focus back into the field; they\n * only keep a click from taking it away.\n *\n * @example\n * <InputGroup label=\"Size\" isLabelHidden>\n *   <NumberInput label=\"Size\" isLabelHidden value={value} onChange={setValue} />\n *   <NumberStepper onStep={(direction) => setValue(stepTo(direction))} />\n * </InputGroup>\n */\nimport { Icon } from \"@astryxdesign/core/Icon\";\nimport { InputGroupText } from \"@astryxdesign/core/InputGroup\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport \"./NumberStepper.css\";\n\nexport type StepDirection = \"up\" | \"down\";\n\nexport interface NumberStepperProps {\n  /** Called with the direction of the half that was pressed. */\n  onStep: (direction: StepDirection) => void;\n  /** Disables both halves. */\n  isDisabled?: boolean;\n  /**\n   * Accessible name of the upper half.\n   * @default the catalog's uic.NumberStepper.increase (\"Increase\")\n   */\n  increaseLabel?: string;\n  /**\n   * Accessible name of the lower half.\n   * @default the catalog's uic.NumberStepper.decrease (\"Decrease\")\n   */\n  decreaseLabel?: string;\n}\n\nexport function NumberStepper({\n  onStep,\n  isDisabled,\n  increaseLabel,\n  decreaseLabel,\n}: NumberStepperProps) {\n  const t = useUicTranslator();\n  return (\n    <InputGroupText className=\"uic-number-stepper\">\n      <button\n        type=\"button\"\n        // Not a tab stop, and a click must not take focus from the field,\n        // as with Astryx's own stepper.\n        tabIndex={-1}\n        className=\"uic-number-stepper__button uic-number-stepper__button--increase\"\n        aria-label={increaseLabel ?? t(\"uic.NumberStepper.increase\")}\n        disabled={isDisabled}\n        onPointerDown={(event) => event.preventDefault()}\n        onClick={() => onStep(\"up\")}\n      >\n        <Icon icon=\"chevronDown\" size=\"xsm\" color=\"inherit\" />\n      </button>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className=\"uic-number-stepper__button uic-number-stepper__button--decrease\"\n        aria-label={decreaseLabel ?? t(\"uic.NumberStepper.decrease\")}\n        disabled={isDisabled}\n        onPointerDown={(event) => event.preventDefault()}\n        onClick={() => onStep(\"down\")}\n      >\n        <Icon icon=\"chevronDown\" size=\"xsm\" color=\"inherit\" />\n      </button>\n    </InputGroupText>\n  );\n}\n\nNumberStepper.displayName = \"NumberStepper\";\n\n/**\n * The index of the next rung of `steps` from `current`. A value already on a\n * rung moves one rung (↑ from 4 lands on 8); a value between rungs moves to\n * the nearer rung in that direction. The result can fall outside `steps`\n * (-1, or `steps.length`); the caller decides what that means: clamp, or\n * carry into another unit.\n */\nexport function getNextStepIndex(\n  steps: readonly number[],\n  current: number,\n  direction: StepDirection,\n): number {\n  const sorted = [...steps].sort((a, b) => a - b);\n  let index = 0;\n  while (index < sorted.length && (sorted[index] ?? 0) < current) index += 1;\n  if (direction === \"up\") return current === sorted[index] ? index + 1 : index;\n  return index - 1;\n}\n"],"mappings":";;;;;;AA+CA,SAAgB,EAAc,EAC5B,WACA,eACA,kBACA,oBACqB;CACrB,IAAM,IAAI,EAAiB;CAC3B,OACE,kBAAC,GAAD;EAAgB,WAAU;EAA1B,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GAGL,UAAU;GACV,WAAU;GACV,cAAY,KAAiB,EAAE,4BAA4B;GAC3D,UAAU;GACV,gBAAgB,MAAU,EAAM,eAAe;GAC/C,eAAe,EAAO,IAAI;GAE1B,UAAA,kBAAC,GAAD;IAAM,MAAK;IAAc,MAAK;IAAM,OAAM;GAAW,CAAA;EAC/C,CAAA,GACR,kBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,WAAU;GACV,cAAY,KAAiB,EAAE,4BAA4B;GAC3D,UAAU;GACV,gBAAgB,MAAU,EAAM,eAAe;GAC/C,eAAe,EAAO,MAAM;GAE5B,UAAA,kBAAC,GAAD;IAAM,MAAK;IAAc,MAAK;IAAM,OAAM;GAAW,CAAA;EAC/C,CAAA,CACM;;AAEpB;AAEA,EAAc,cAAc;AAS5B,SAAgB,EACd,GACA,GACA,GACQ;CACR,IAAM,IAAS,CAAC,GAAG,CAAK,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GAC1C,IAAQ;CACZ,OAAO,IAAQ,EAAO,WAAW,EAAO,MAAU,KAAK,IAAS,KAAS;CAEzE,OADI,MAAc,OAAa,MAAY,EAAO,KAAS,IAAQ,IAAI,IAChE,IAAQ;AACjB"}

package/dist/components/StepNumberInput/StepNumberInput.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+export interface StepNumberInputProps {
+    /** The values the stepper moves between. */
+    steps: readonly number[];
+    /** The value, when controlled. */
+    value?: number;
+    /** The first value when uncontrolled. Default: `steps[0]` */
+    defaultValue?: number;
+    /** Called with the new value. A cleared field reports 0. */
+    onChange?: (value: number) => void;
+    /** Lower bound for typing and stepping. */
+    min?: number;
+    /** Upper bound for typing and stepping. */
+    max?: number;
+    /** Unit shown in the field ("GiB"). */
+    units?: string;
+    /** Accessible name. */
+    label: string;
+    /** Hides the label visually; it stays the accessible name. Default: false */
+    isLabelHidden?: boolean;
+    placeholder?: string;
+    isDisabled?: boolean;
+    /** Accessible name of the step-up button. Default: NumberStepper's */
+    increaseLabel?: string;
+    /** Accessible name of the step-down button. Default: NumberStepper's */
+    decreaseLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function StepNumberInput({ steps, value: valueProp, defaultValue, onChange, min, max, units, label, isLabelHidden, placeholder, isDisabled, increaseLabel, decreaseLabel, className, style, }: StepNumberInputProps): import("react").JSX.Element;
+export declare namespace StepNumberInput {
+    var displayName: string;
+}

package/dist/components/StepNumberInput/StepNumberInput.js

@@ -0,0 +1,48 @@
+import { NumberStepper as e, getNextStepIndex as t } from "./NumberStepper2.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { InputGroup as a } from "@astryxdesign/core/InputGroup";
+import { NumberInput as o } from "@astryxdesign/core/NumberInput";
+//#region src/components/StepNumberInput/StepNumberInput.tsx
+function s({ steps: s, value: c, defaultValue: l, onChange: u, min: d, max: f, units: p, label: m, isLabelHidden: h = !1, placeholder: g, isDisabled: _, increaseLabel: v, decreaseLabel: y, className: b, style: x }) {
+	let [S, C] = n(l ?? s[0] ?? 0), w = c !== void 0, T = w ? c : S, E = (e) => {
+		w || C(e), u?.(e);
+	}, D = (e) => {
+		let n = t(s, T, e);
+		if (n < 0 || n >= s.length) return;
+		let r = [...s].sort((e, t) => e - t)[n] ?? T;
+		d !== void 0 && r < d ? r = d : f !== void 0 && r > f && (r = f), E(r);
+	};
+	return /* @__PURE__ */ i(a, {
+		label: m,
+		isLabelHidden: h,
+		isDisabled: _,
+		className: b,
+		style: x,
+		children: [/* @__PURE__ */ r(o, {
+			label: m,
+			isLabelHidden: !0,
+			value: T,
+			onChange: (e) => E(e ?? 0),
+			onKeyDown: (e) => {
+				_ || (e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), D(e.key === "ArrowUp" ? "up" : "down"));
+			},
+			min: d,
+			max: f,
+			units: p,
+			placeholder: g,
+			isDisabled: _,
+			width: "100%"
+		}), /* @__PURE__ */ r(e, {
+			onStep: D,
+			isDisabled: _,
+			increaseLabel: v,
+			decreaseLabel: y
+		})]
+	});
+}
+s.displayName = "StepNumberInput";
+//#endregion
+export { s as StepNumberInput };
+
+//# sourceMappingURL=StepNumberInput.js.map

package/dist/components/StepNumberInput/StepNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepNumberInput.js","names":[],"sources":["../../../src/components/StepNumberInput/StepNumberInput.tsx"],"sourcesContent":["/**\n * StepNumberInput\n *\n * A number field that steps along a list of values instead of by a fixed\n * step: `[0.25, 0.5, 1, 2, 4, 8]` goes 2 → 4 → 8 on the stepper and on\n * ArrowUp/ArrowDown, and a typed 3 steps up to 4. A typed value is kept as\n * typed. `min` and `max` clamp a step.\n *\n * `NumberInput`'s own stepping is linear, so the field cancels its\n * ArrowUp/ArrowDown and the column beside it is a `NumberStepper`.\n *\n * @example\n * <StepNumberInput\n *   label=\"Shared memory\"\n *   steps={[0.25, 0.5, 1, 2, 4, 8]}\n *   units=\"GiB\"\n *   value={value}\n *   onChange={setValue}\n * />\n */\nimport { useState, type CSSProperties, type KeyboardEvent } from \"react\";\nimport { InputGroup } from \"@astryxdesign/core/InputGroup\";\nimport { NumberInput } from \"@astryxdesign/core/NumberInput\";\n\nimport { NumberStepper, getNextStepIndex, type StepDirection } from \"./NumberStepper\";\n\nexport interface StepNumberInputProps {\n  /** The values the stepper moves between. */\n  steps: readonly number[];\n  /** The value, when controlled. */\n  value?: number;\n  /** The first value when uncontrolled. Default: `steps[0]` */\n  defaultValue?: number;\n  /** Called with the new value. A cleared field reports 0. */\n  onChange?: (value: number) => void;\n  /** Lower bound for typing and stepping. */\n  min?: number;\n  /** Upper bound for typing and stepping. */\n  max?: number;\n  /** Unit shown in the field (\"GiB\"). */\n  units?: string;\n  /** Accessible name. */\n  label: string;\n  /** Hides the label visually; it stays the accessible name. Default: false */\n  isLabelHidden?: boolean;\n  placeholder?: string;\n  isDisabled?: boolean;\n  /** Accessible name of the step-up button. Default: NumberStepper's */\n  increaseLabel?: string;\n  /** Accessible name of the step-down button. Default: NumberStepper's */\n  decreaseLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function StepNumberInput({\n  steps,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  units,\n  label,\n  isLabelHidden = false,\n  placeholder,\n  isDisabled,\n  increaseLabel,\n  decreaseLabel,\n  className,\n  style,\n}: StepNumberInputProps) {\n  const [innerValue, setInnerValue] = useState(defaultValue ?? steps[0] ?? 0);\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : innerValue;\n\n  const setValue = (next: number) => {\n    if (!isControlled) setInnerValue(next);\n    onChange?.(next);\n  };\n\n  const step = (direction: StepDirection) => {\n    const index = getNextStepIndex(steps, value, direction);\n    if (index < 0 || index >= steps.length) return;\n    let next = [...steps].sort((a, b) => a - b)[index] ?? value;\n    if (min !== undefined && next < min) next = min;\n    else if (max !== undefined && next > max) next = max;\n    setValue(next);\n  };\n\n  // ArrowUp/ArrowDown would step linearly by `step`; step the list instead.\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) return;\n    if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n    event.preventDefault();\n    step(event.key === \"ArrowUp\" ? \"up\" : \"down\");\n  };\n\n  return (\n    <InputGroup\n      label={label}\n      isLabelHidden={isLabelHidden}\n      isDisabled={isDisabled}\n      className={className}\n      style={style}\n    >\n      <NumberInput\n        label={label}\n        isLabelHidden\n        value={value}\n        onChange={(next) => setValue(next ?? 0)}\n        onKeyDown={handleKeyDown}\n        min={min}\n        max={max}\n        units={units}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        width=\"100%\"\n      />\n      <NumberStepper\n        onStep={step}\n        isDisabled={isDisabled}\n        increaseLabel={increaseLabel}\n        decreaseLabel={decreaseLabel}\n      />\n    </InputGroup>\n  );\n}\n\nStepNumberInput.displayName = \"StepNumberInput\";\n"],"mappings":";;;;;;AAuDA,SAAgB,EAAgB,EAC9B,UACA,OAAO,GACP,iBACA,aACA,QACA,QACA,UACA,UACA,mBAAgB,IAChB,gBACA,eACA,kBACA,kBACA,cACA,YACuB;CACvB,IAAM,CAAC,GAAY,KAAiB,EAAS,KAAgB,EAAM,MAAM,CAAC,GACpE,IAAe,MAAc,KAAA,GAC7B,IAAQ,IAAe,IAAY,GAEnC,KAAY,MAAiB;EAEjC,AADK,KAAc,EAAc,CAAI,GACrC,IAAW,CAAI;CACjB,GAEM,KAAQ,MAA6B;EACzC,IAAM,IAAQ,EAAiB,GAAO,GAAO,CAAS;EACtD,IAAI,IAAQ,KAAK,KAAS,EAAM,QAAQ;EACxC,IAAI,IAAO,CAAC,GAAG,CAAK,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAU;EAGtD,AAFI,MAAQ,KAAA,KAAa,IAAO,IAAK,IAAO,IACnC,MAAQ,KAAA,KAAa,IAAO,MAAK,IAAO,IACjD,EAAS,CAAI;CACf;CAUA,OACE,kBAAC,GAAD;EACS;EACQ;EACH;EACD;EACJ;EALT,UAAA,CAOE,kBAAC,GAAD;GACS;GACP,eAAA;GACO;GACP,WAAW,MAAS,EAAS,KAAQ,CAAC;GACtC,YApBiB,MAA2C;IAC5D,MACA,EAAM,QAAQ,aAAa,EAAM,QAAQ,iBAC7C,EAAM,eAAe,GACrB,EAAK,EAAM,QAAQ,YAAY,OAAO,MAAM;GAC9C;GAgBW;GACA;GACE;GACM;GACD;GACZ,OAAM;EACP,CAAA,GACD,kBAAC,GAAD;GACE,QAAQ;GACI;GACG;GACA;EAChB,CAAA,CACS;;AAEhB;AAEA,EAAgB,cAAc"}

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

@@ -0,0 +1,4 @@
+export { StepNumberInput } from './StepNumberInput';
+export type { StepNumberInputProps } from './StepNumberInput';
+export { NumberStepper, getNextStepIndex } from './NumberStepper';
+export type { NumberStepperProps, StepDirection } from './NumberStepper';

package/dist/components/StepNumberInput/index.js

@@ -0,0 +1,3 @@
+import { NumberStepper as e, getNextStepIndex as t } from "./NumberStepper2.js";
+import { StepNumberInput as n } from "./StepNumberInput.js";
+export { e as NumberStepper, n as StepNumberInput, t as getNextStepIndex };

package/dist/components/TextHighlighter/TextHighlighter.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactElement } from 'react';
+export interface TextHighlighterProps {
+    /** The text to search in. */
+    children?: string | null;
+    /** The text to mark. */
+    keyword?: string;
+    /** Class on the outer span. */
+    className?: string;
+    /** Inline style of each marked part. */
+    highlightStyle?: CSSProperties;
+}
+declare function TextHighlighterBase({ children, keyword, className, highlightStyle, }: TextHighlighterProps): ReactElement | null;
+export declare const TextHighlighter: import('react').MemoExoticComponent<typeof TextHighlighterBase>;
+export {};

package/dist/components/TextHighlighter/TextHighlighter2.js

@@ -0,0 +1,29 @@
+/* empty css                */
+import { memo as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/TextHighlighter/TextHighlighter.tsx
+var n = (e) => e.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
+function r({ children: e, keyword: r, className: i, highlightStyle: a }) {
+	if (!e) return null;
+	let o = ["uic-text-highlighter", i].filter(Boolean).join(" ");
+	if (!r) return /* @__PURE__ */ t("span", {
+		className: o,
+		children: e
+	});
+	let s = r.toLowerCase(), c = e.split(RegExp(`(${n(r)})`, "gi"));
+	return /* @__PURE__ */ t("span", {
+		className: o,
+		children: c.map((e, n) => e.toLowerCase() === s ? /* @__PURE__ */ t("span", {
+			className: "uic-text-highlighter__match",
+			style: a,
+			children: e
+		}, n) : e)
+	});
+}
+var i = e(r);
+i.displayName = "TextHighlighter";
+//#endregion
+export { i as TextHighlighter };
+
+//# sourceMappingURL=TextHighlighter2.js.map
+import "../../assets/components/TextHighlighter/TextHighlighter.css";

package/dist/components/TextHighlighter/TextHighlighter2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextHighlighter2.js","names":[],"sources":["../../../src/components/TextHighlighter/TextHighlighter.tsx"],"sourcesContent":["/**\n * TextHighlighter\n *\n * Marks every case-insensitive occurrence of `keyword` in a string, for search\n * results. The keyword is matched literally (regex characters are escaped).\n * Without a keyword the text renders plain; without text nothing renders.\n *\n * The mark's background is the theme's `--color-warning-border-hover` where\n * the theme declares one (the Backend.AI WebUI theme does), else Astryx\n * `--color-warning-muted`.\n *\n * @example\n * <TextHighlighter keyword={search}>{row.name}</TextHighlighter>\n */\nimport { memo, type CSSProperties, type ReactElement } from \"react\";\n\nimport \"./TextHighlighter.css\";\n\nexport interface TextHighlighterProps {\n  /** The text to search in. */\n  children?: string | null;\n  /** The text to mark. */\n  keyword?: string;\n  /** Class on the outer span. */\n  className?: string;\n  /** Inline style of each marked part. */\n  highlightStyle?: CSSProperties;\n}\n\nconst escapeRegExp = (text: string) => text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n\nfunction TextHighlighterBase({\n  children,\n  keyword,\n  className,\n  highlightStyle,\n}: TextHighlighterProps): ReactElement | null {\n  if (!children) return null;\n  const rootClassName = [\"uic-text-highlighter\", className].filter(Boolean).join(\" \");\n  if (!keyword) return <span className={rootClassName}>{children}</span>;\n\n  const lowerKeyword = keyword.toLowerCase();\n  const parts = children.split(new RegExp(`(${escapeRegExp(keyword)})`, \"gi\"));\n  return (\n    <span className={rootClassName}>\n      {parts.map((part, index) =>\n        part.toLowerCase() === lowerKeyword ? (\n          <span\n            key={index}\n            className=\"uic-text-highlighter__match\"\n            style={highlightStyle}\n          >\n            {part}\n          </span>\n        ) : (\n          part\n        ),\n      )}\n    </span>\n  );\n}\n\nexport const TextHighlighter = memo(TextHighlighterBase);\nTextHighlighter.displayName = \"TextHighlighter\";\n"],"mappings":";;;;AA6BA,IAAM,KAAgB,MAAiB,EAAK,QAAQ,uBAAuB,MAAM;AAEjF,SAAS,EAAoB,EAC3B,aACA,YACA,cACA,qBAC4C;CAC5C,IAAI,CAAC,GAAU,OAAO;CACtB,IAAM,IAAgB,CAAC,wBAAwB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAClF,IAAI,CAAC,GAAS,OAAO,kBAAC,QAAD;EAAM,WAAW;EAAgB;CAAe,CAAA;CAErE,IAAM,IAAe,EAAQ,YAAY,GACnC,IAAQ,EAAS,MAAU,OAAO,IAAI,EAAa,CAAO,EAAE,IAAI,IAAI,CAAC;CAC3E,OACE,kBAAC,QAAD;EAAM,WAAW;EACd,UAAA,EAAM,KAAK,GAAM,MAChB,EAAK,YAAY,MAAM,IACrB,kBAAC,QAAD;GAEE,WAAU;GACV,OAAO;GAEN,UAAA;EACG,GALC,CAKD,IAEN,CAEJ;CACI,CAAA;AAEV;AAEA,IAAa,IAAkB,EAAK,CAAmB;AACvD,EAAgB,cAAc"}

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

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

package/dist/components/TextHighlighter/index.js

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

package/dist/components/TokenList/TokenList.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type TokenListItem = string | number;
+export interface TokenListProps {
+    /** The values. */
+    items: ReadonlyArray<TokenListItem>;
+    /** How many items show inline before `+N`. @default 3 */
+    maxInline?: number;
+    /** Rendered instead of the list when `items` is empty. @default '-' */
+    emptyText?: ReactNode;
+    /** `token` for Tokens and a `+N` link, `text` for plain text and a `+N` badge. @default 'token' */
+    variant?: "token" | "text";
+    /** How the overflow opens. @default 'hover' */
+    trigger?: "hover" | "click";
+}
+export declare function TokenList({ items, maxInline, emptyText, variant, trigger, }: TokenListProps): import("react").JSX.Element;
+export declare namespace TokenList {
+    var displayName: string;
+}

package/dist/components/TokenList/TokenList2.js

@@ -0,0 +1,55 @@
+/* empty css          */
+import { HStack as e, VStack as t } from "@astryxdesign/core/Stack";
+import { Text as n } from "@astryxdesign/core/Text";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Token as o } from "@astryxdesign/core/Token";
+import { Link as s } from "@astryxdesign/core/Link";
+import { Popover as c } from "@astryxdesign/core/Popover";
+import { Badge as l } from "@astryxdesign/core/Badge";
+import { HoverCard as u } from "@astryxdesign/core/HoverCard";
+//#region src/components/TokenList/TokenList.tsx
+function d({ items: d, maxInline: f = 3, emptyText: p = "-", variant: m = "token", trigger: h = "hover" }) {
+	if (d.length === 0) return /* @__PURE__ */ i(r, { children: p });
+	let g = d.slice(0, f), _ = d.slice(f), v = _.length, y = /* @__PURE__ */ i(t, {
+		align: "start",
+		className: "uic-token-list__rest",
+		children: _.map((e, t) => /* @__PURE__ */ i(n, { children: e }, `${e}-${t}`))
+	}), b = h === "hover" ? /* @__PURE__ */ i(u, {
+		content: y,
+		touchTrigger: "tap",
+		children: m === "text" ? /* @__PURE__ */ i(l, {
+			variant: "neutral",
+			label: `+${v}`,
+			tabIndex: 0,
+			className: "uic-token-list__count"
+		}) : /* @__PURE__ */ a(s, { children: ["+", v] })
+	}) : /* @__PURE__ */ i(c, {
+		label: `+${v}`,
+		content: y,
+		hasCloseButton: !1,
+		hasAutoFocus: !1,
+		role: "none",
+		children: /* @__PURE__ */ a(s, { children: ["+", v] })
+	});
+	return m === "text" ? /* @__PURE__ */ a(e, {
+		gap: 1,
+		align: "center",
+		className: "uic-token-list uic-token-list--text",
+		children: [g.map((e, t) => /* @__PURE__ */ i("span", {
+			className: "uic-token-list__text",
+			children: e
+		}, `${e}-${t}`)), v > 0 && b]
+	}) : /* @__PURE__ */ a("span", { children: [/* @__PURE__ */ i(e, {
+		gap: 2,
+		align: "center",
+		wrap: "wrap",
+		className: "uic-token-list",
+		children: g.map((e, t) => /* @__PURE__ */ i(o, { label: String(e) }, `${e}-${t}`))
+	}), v > 0 && /* @__PURE__ */ a(r, { children: ["\xA0", b] })] });
+}
+d.displayName = "TokenList";
+//#endregion
+export { d as TokenList };
+
+//# sourceMappingURL=TokenList2.js.map
+import "../../assets/components/TokenList/TokenList.css";

package/dist/components/TokenList/TokenList2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenList2.js","names":[],"sources":["../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["/**\n * TokenList\n *\n * A bounded list of settled values: the first `maxInline` items inline, then\n * a `+N` that shows the rest. The overflow opens on hover and focus, like a\n * tooltip, on a card surface (`HoverCard`) because it is a list of values,\n * not a hint. `trigger=\"click\"` latches it open as a `Popover` instead.\n *\n * - `variant=\"token\"` (default): the items are `Token`s and `+N` is a `Link`.\n *   Suits dialogs and forms.\n * - `variant=\"text\"`: the items are plain, unwrapped text and `+N` is a\n *   compact `Badge`. Suits dense table cells.\n *\n * The overflow lists only the items that did not fit.\n *\n * @example\n * <TokenList items={emails} maxInline={2} variant=\"text\" />\n */\nimport type { ReactNode } from \"react\";\nimport { Badge } from \"@astryxdesign/core/Badge\";\nimport { HoverCard } from \"@astryxdesign/core/HoverCard\";\nimport { Link } from \"@astryxdesign/core/Link\";\nimport { Popover } from \"@astryxdesign/core/Popover\";\nimport { HStack, VStack } from \"@astryxdesign/core/Stack\";\nimport { Text } from \"@astryxdesign/core/Text\";\nimport { Token } from \"@astryxdesign/core/Token\";\n\nimport \"./TokenList.css\";\n\nexport type TokenListItem = string | number;\n\nexport interface TokenListProps {\n  /** The values. */\n  items: ReadonlyArray<TokenListItem>;\n  /** How many items show inline before `+N`. @default 3 */\n  maxInline?: number;\n  /** Rendered instead of the list when `items` is empty. @default '-' */\n  emptyText?: ReactNode;\n  /** `token` for Tokens and a `+N` link, `text` for plain text and a `+N` badge. @default 'token' */\n  variant?: \"token\" | \"text\";\n  /** How the overflow opens. @default 'hover' */\n  trigger?: \"hover\" | \"click\";\n}\n\nexport function TokenList({\n  items,\n  maxInline = 3,\n  emptyText = \"-\",\n  variant = \"token\",\n  trigger = \"hover\",\n}: TokenListProps) {\n  if (items.length === 0) return <>{emptyText}</>;\n\n  const inlineItems = items.slice(0, maxInline);\n  const restItems = items.slice(maxInline);\n  const restCount = restItems.length;\n\n  const restList = (\n    <VStack align=\"start\" className=\"uic-token-list__rest\">\n      {restItems.map((item, index) => (\n        <Text key={`${item}-${index}`}>{item}</Text>\n      ))}\n    </VStack>\n  );\n\n  const overflowControl =\n    trigger === \"hover\" ? (\n      // touchTrigger=\"tap\": the token variant's trigger is a button with no\n      // action of its own, so the default would leave touch users no way in.\n      <HoverCard content={restList} touchTrigger=\"tap\">\n        {variant === \"text\" ? (\n          // A Badge is a bare <span>; HoverCard only attaches focus to a\n          // focusable trigger.\n          <Badge\n            variant=\"neutral\"\n            label={`+${restCount}`}\n            tabIndex={0}\n            className=\"uic-token-list__count\"\n          />\n        ) : (\n          <Link>+{restCount}</Link>\n        )}\n      </HoverCard>\n    ) : (\n      // Popover wires its handlers onto a <button> in the trigger, which a\n      // Link without href renders. The list is read-only: no close button,\n      // no autofocus, and no dialog role for a layer focus never enters.\n      <Popover\n        label={`+${restCount}`}\n        content={restList}\n        hasCloseButton={false}\n        hasAutoFocus={false}\n        role=\"none\"\n      >\n        <Link>+{restCount}</Link>\n      </Popover>\n    );\n\n  if (variant === \"text\") {\n    return (\n      <HStack gap={1} align=\"center\" className=\"uic-token-list uic-token-list--text\">\n        {inlineItems.map((item, index) => (\n          <span key={`${item}-${index}`} className=\"uic-token-list__text\">\n            {item}\n          </span>\n        ))}\n        {restCount > 0 && overflowControl}\n      </HStack>\n    );\n  }\n\n  return (\n    <span>\n      <HStack gap={2} align=\"center\" wrap=\"wrap\" className=\"uic-token-list\">\n        {inlineItems.map((item, index) => (\n          <Token key={`${item}-${index}`} label={String(item)} />\n        ))}\n      </HStack>\n      {restCount > 0 && (\n        <>\n          {\" \"}\n          {overflowControl}\n        </>\n      )}\n    </span>\n  );\n}\n\nTokenList.displayName = \"TokenList\";\n"],"mappings":";;;;;;;;;;AA4CA,SAAgB,EAAU,EACxB,UACA,eAAY,GACZ,eAAY,KACZ,aAAU,SACV,aAAU,WACO;CACjB,IAAI,EAAM,WAAW,GAAG,OAAO,kBAAA,GAAA,EAAA,UAAG,EAAY,CAAA;CAE9C,IAAM,IAAc,EAAM,MAAM,GAAG,CAAS,GACtC,IAAY,EAAM,MAAM,CAAS,GACjC,IAAY,EAAU,QAEtB,IACJ,kBAAC,GAAD;EAAQ,OAAM;EAAQ,WAAU;EAC7B,UAAA,EAAU,KAAK,GAAM,MACpB,kBAAC,GAAD,EAAA,UAAgC,EAAW,GAAhC,GAAG,EAAK,GAAG,GAAqB,CAC5C;CACK,CAAA,GAGJ,IACJ,MAAY,UAGV,kBAAC,GAAD;EAAW,SAAS;EAAU,cAAa;EACxC,UAAA,MAAY,SAGX,kBAAC,GAAD;GACE,SAAQ;GACR,OAAO,IAAI;GACX,UAAU;GACV,WAAU;EACX,CAAA,IAED,kBAAC,GAAD,EAAA,UAAA,CAAM,KAAE,CAAgB,EAAA,CAAA;CAEjB,CAAA,IAKX,kBAAC,GAAD;EACE,OAAO,IAAI;EACX,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,MAAK;EAEL,UAAA,kBAAC,GAAD,EAAA,UAAA,CAAM,KAAE,CAAgB,EAAA,CAAA;CACjB,CAAA;CAgBb,OAbI,MAAY,SAEZ,kBAAC,GAAD;EAAQ,KAAK;EAAG,OAAM;EAAS,WAAU;EAAzC,UAAA,CACG,EAAY,KAAK,GAAM,MACtB,kBAAC,QAAD;GAA+B,WAAU;GACtC,UAAA;EACG,GAFK,GAAG,EAAK,GAAG,GAEhB,CACP,GACA,IAAY,KAAK,CACZ;MAKV,kBAAC,QAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,KAAK;EAAG,OAAM;EAAS,MAAK;EAAO,WAAU;EAClD,UAAA,EAAY,KAAK,GAAM,MACtB,kBAAC,GAAD,EAAgC,OAAO,OAAO,CAAI,EAAI,GAA1C,GAAG,EAAK,GAAG,GAA+B,CACvD;CACK,CAAA,GACP,IAAY,KACX,kBAAA,GAAA,EAAA,UAAA,CACG,QACA,CACD,EAAA,CAAA,CAEA,EAAA,CAAA;AAEV;AAEA,EAAU,cAAc"}

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

@@ -0,0 +1,2 @@
+export { TokenList } from './TokenList';
+export type { TokenListItem, TokenListProps } from './TokenList';

package/dist/components/TokenList/index.js

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

package/dist/components/TokenRow/TokenRow.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, Key, ReactNode } from 'react';
+import { TokenColor } from '@astryxdesign/core/Token';
+export interface TokenRowItem {
+    key?: Key;
+    label: string;
+}
+export interface TokenRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "color"> {
+    /** The tokens, in order. */
+    items: ReadonlyArray<TokenRowItem>;
+    /** How many tokens render before the "and N more" count. @default 3 */
+    maxCount?: number;
+    /** Size of the whole collection when `items` is a page of it. @default items.length */
+    totalCount?: number;
+    /** Colour of every token. */
+    color?: TokenColor;
+    /** Rendered instead of the row when there is nothing to show. @default '-' */
+    emptyText?: ReactNode;
+    /**
+     * The count after the tokens, given how many were left out.
+     * @default the catalog's uic.TokenRow.more ("and {count} more")
+     */
+    moreLabel?: (count: number) => string;
+}
+export declare function TokenRow({ items, maxCount, totalCount, color, emptyText, moreLabel, className, ...divProps }: TokenRowProps): import("react").JSX.Element;
+export declare namespace TokenRow {
+    var displayName: string;
+}

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

@@ -0,0 +1,6 @@
+export declare const tokenRowMessages: {
+    readonly "uic.TokenRow.more": {
+        readonly defaultMessage: "and {count} more";
+        readonly description: "After a row of tokens cut short, how many were left out; {count} is the number";
+    };
+};

package/dist/components/TokenRow/TokenRow.messages.js

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/TokenRow/TokenRow.messages.ts
+var t = e({ "uic.TokenRow.more": {
+	defaultMessage: "and {count} more",
+	description: "After a row of tokens cut short, how many were left out; {count} is the number"
+} });
+//#endregion
+export { t as tokenRowMessages };
+
+//# sourceMappingURL=TokenRow.messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenRow.messages.js","names":[],"sources":["../../../src/components/TokenRow/TokenRow.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const tokenRowMessages = defineMessages({\n  \"uic.TokenRow.more\": {\n    defaultMessage: \"and {count} more\",\n    description:\n      \"After a row of tokens cut short, how many were left out; {count} is the number\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAmB,EAAe,EAC7C,qBAAqB;CACnB,gBAAgB;CAChB,aACE;AACJ,EACF,CAAC"}

package/dist/components/TokenRow/TokenRow2.js

@@ -0,0 +1,29 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+/* empty css         */
+import { HStack as t } from "@astryxdesign/core/Stack";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Token as a } from "@astryxdesign/core/Token";
+//#region src/components/TokenRow/TokenRow.tsx
+function o({ items: o, maxCount: s = 3, totalCount: c, color: l, emptyText: u = "-", moreLabel: d, className: f, ...p }) {
+	let m = e(), h = o.slice(0, s), g = Math.max((c ?? o.length) - h.length, 0);
+	return h.length === 0 ? /* @__PURE__ */ r(n, { children: u }) : /* @__PURE__ */ i(t, {
+		gap: 1,
+		align: "center",
+		wrap: "wrap",
+		className: ["uic-token-row", f].filter(Boolean).join(" "),
+		...p,
+		children: [h.map((e, t) => /* @__PURE__ */ r(a, {
+			color: l,
+			label: e.label
+		}, e.key ?? `${e.label}-${t}`)), g > 0 ? /* @__PURE__ */ r("span", {
+			className: "uic-token-row__more",
+			children: d ? d(g) : m("uic.TokenRow.more", { count: g })
+		}) : null]
+	});
+}
+o.displayName = "TokenRow";
+//#endregion
+export { o as TokenRow };
+
+//# sourceMappingURL=TokenRow2.js.map
+import "../../assets/components/TokenRow/TokenRow.css";

package/dist/components/TokenRow/TokenRow2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenRow2.js","names":[],"sources":["../../../src/components/TokenRow/TokenRow.tsx"],"sourcesContent":["/**\n * TokenRow\n *\n * A row of read-only tokens that stops at `maxCount` and ends with \"and N\n * more\", so one long-tailed record cannot stretch a table row. Pass\n * `totalCount` when `items` is only a page of the collection (a connection\n * capped by `first:`): the count then reports what exists, not what was\n * fetched.\n *\n * @example\n * <TokenRow items={aliases.map((a) => ({ key: a, label: a }))} maxCount={2} />\n */\nimport type { HTMLAttributes, Key, ReactNode } from \"react\";\nimport { HStack } from \"@astryxdesign/core/Stack\";\nimport { Token, type TokenColor } from \"@astryxdesign/core/Token\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport \"./TokenRow.css\";\n\nexport interface TokenRowItem {\n  key?: Key;\n  label: string;\n}\n\nexport interface TokenRowProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"color\"\n> {\n  /** The tokens, in order. */\n  items: ReadonlyArray<TokenRowItem>;\n  /** How many tokens render before the \"and N more\" count. @default 3 */\n  maxCount?: number;\n  /** Size of the whole collection when `items` is a page of it. @default items.length */\n  totalCount?: number;\n  /** Colour of every token. */\n  color?: TokenColor;\n  /** Rendered instead of the row when there is nothing to show. @default '-' */\n  emptyText?: ReactNode;\n  /**\n   * The count after the tokens, given how many were left out.\n   * @default the catalog's uic.TokenRow.more (\"and {count} more\")\n   */\n  moreLabel?: (count: number) => string;\n}\n\nexport function TokenRow({\n  items,\n  maxCount = 3,\n  totalCount,\n  color,\n  emptyText = \"-\",\n  moreLabel,\n  className,\n  ...divProps\n}: TokenRowProps) {\n  const t = useUicTranslator();\n  const visibleItems = items.slice(0, maxCount);\n  const restCount = Math.max((totalCount ?? items.length) - visibleItems.length, 0);\n\n  if (visibleItems.length === 0) return <>{emptyText}</>;\n\n  return (\n    <HStack\n      gap={1}\n      align=\"center\"\n      wrap=\"wrap\"\n      className={[\"uic-token-row\", className].filter(Boolean).join(\" \")}\n      {...divProps}\n    >\n      {visibleItems.map((item, index) => (\n        <Token\n          key={item.key ?? `${item.label}-${index}`}\n          color={color}\n          label={item.label}\n        />\n      ))}\n      {restCount > 0 ? (\n        <span className=\"uic-token-row__more\">\n          {moreLabel\n            ? moreLabel(restCount)\n            : t(\"uic.TokenRow.more\", { count: restCount })}\n        </span>\n      ) : null}\n    </HStack>\n  );\n}\n\nTokenRow.displayName = \"TokenRow\";\n"],"mappings":";;;;;;AA6CA,SAAgB,EAAS,EACvB,UACA,cAAW,GACX,eACA,UACA,eAAY,KACZ,cACA,cACA,GAAG,KACa;CAChB,IAAM,IAAI,EAAiB,GACrB,IAAe,EAAM,MAAM,GAAG,CAAQ,GACtC,IAAY,KAAK,KAAK,KAAc,EAAM,UAAU,EAAa,QAAQ,CAAC;CAIhF,OAFI,EAAa,WAAW,IAAU,kBAAA,GAAA,EAAA,UAAG,EAAY,CAAA,IAGnD,kBAAC,GAAD;EACE,KAAK;EACL,OAAM;EACN,MAAK;EACL,WAAW,CAAC,iBAAiB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAChE,GAAI;EALN,UAAA,CAOG,EAAa,KAAK,GAAM,MACvB,kBAAC,GAAD;GAES;GACP,OAAO,EAAK;EACb,GAHM,EAAK,OAAO,GAAG,EAAK,MAAM,GAAG,GAGnC,CACF,GACA,IAAY,IACX,kBAAC,QAAD;GAAM,WAAU;GACb,UAAA,IACG,EAAU,CAAS,IACnB,EAAE,qBAAqB,EAAE,OAAO,EAAU,CAAC;EAC3C,CAAA,IACJ,IACE;;AAEZ;AAEA,EAAS,cAAc"}

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

@@ -0,0 +1,2 @@
+export { TokenRow } from './TokenRow';
+export type { TokenRowItem, TokenRowProps } from './TokenRow';

package/dist/components/TokenRow/index.js

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

package/dist/components/UncontrolledInput/UncontrolledInput.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react';
+import { TextInputStatus } from '@astryxdesign/core/TextInput';
+export interface UncontrolledInputProps {
+    /** Initial value. A new value resets the field and drops an uncommitted edit. */
+    defaultValue?: string;
+    /** Called with the value when the user presses Enter or leaves the field. */
+    onCommit?: (value: string) => void;
+    /** `number` renders `NumberInput`. @default "text" */
+    type?: "text" | "number" | "password" | "email";
+    placeholder?: string;
+    isDisabled?: boolean;
+    /** Validation state, as on `TextInput`. */
+    status?: TextInputStatus;
+    /**
+     * Accessible name. @default the catalog's uic.UncontrolledInput.label
+     * ("Select"), hidden
+     */
+    label?: string;
+    /** @default true when `label` is not given, else false */
+    isLabelHidden?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** `data-testid` and other data attributes go on the field. */
+    [dataAttribute: `data-${string}`]: string | undefined;
+}
+export declare function UncontrolledInput({ defaultValue, onCommit, type, placeholder, isDisabled, status, label, isLabelHidden, className, style, ...dataAttributes }: UncontrolledInputProps): import("react").JSX.Element;
+export declare namespace UncontrolledInput {
+    var displayName: string;
+}

package/dist/components/UncontrolledInput/UncontrolledInput.js

@@ -0,0 +1,49 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { useRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { TextInput as i } from "@astryxdesign/core/TextInput";
+import { NumberInput as a } from "@astryxdesign/core/NumberInput";
+//#region src/components/UncontrolledInput/UncontrolledInput.tsx
+function o({ defaultValue: o, onCommit: s, type: c, placeholder: l, isDisabled: u, status: d, label: f, isLabelHidden: p, className: m, style: h, ...g }) {
+	let _ = e(), [v, y] = n(o ?? ""), b = t(null), [x, S] = n(o);
+	x !== o && (S(o), y(o ?? ""));
+	let C = {
+		...g,
+		label: f ?? _("uic.UncontrolledInput.label"),
+		isLabelHidden: p ?? f === void 0,
+		placeholder: l,
+		isDisabled: u,
+		status: d,
+		className: m,
+		style: h
+	}, w = () => {
+		let e = b.current ?? v;
+		b.current = null, s?.(e);
+	};
+	if (c === "number") {
+		let e = v === "" ? null : Number(v);
+		return /* @__PURE__ */ r(a, {
+			...C,
+			value: e === null || Number.isNaN(e) ? null : e,
+			onChange: (e) => {
+				let t = e === null ? "" : String(e);
+				b.current = t, y(t);
+			},
+			onEnter: w,
+			onBlur: w
+		});
+	}
+	return /* @__PURE__ */ r(i, {
+		...C,
+		type: c === "password" || c === "email" ? c : "text",
+		value: v,
+		onChange: y,
+		onEnter: w,
+		onBlur: w
+	});
+}
+o.displayName = "UncontrolledInput";
+//#endregion
+export { o as UncontrolledInput };
+
+//# sourceMappingURL=UncontrolledInput.js.map

package/dist/components/UncontrolledInput/UncontrolledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledInput.js","names":[],"sources":["../../../src/components/UncontrolledInput/UncontrolledInput.tsx"],"sourcesContent":["/**\n * UncontrolledInput\n *\n * A text or number field that reports its value only when the user commits\n * it, by pressing Enter or leaving the field, never on each keystroke. For a\n * value whose change is expensive: persisting a setting, refetching a list.\n *\n * - The draft lives in the component, seeded from `defaultValue`. A new\n *   `defaultValue` discards an uncommitted edit.\n * - `type=\"number\"` renders `NumberInput`; every other type `TextInput`.\n * - Astryx fields need an accessible name. Without `label`, a generic one\n *   from the catalog is used and hidden; pass a real `label` wherever the\n *   field has one.\n *\n * @example\n * <UncontrolledInput label=\"Page size\" type=\"number\" defaultValue=\"20\" onCommit={setPageSize} />\n */\nimport { useRef, useState, type CSSProperties } from \"react\";\nimport { NumberInput } from \"@astryxdesign/core/NumberInput\";\nimport { TextInput, type TextInputStatus } from \"@astryxdesign/core/TextInput\";\n\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\n\nexport interface UncontrolledInputProps {\n  /** Initial value. A new value resets the field and drops an uncommitted edit. */\n  defaultValue?: string;\n  /** Called with the value when the user presses Enter or leaves the field. */\n  onCommit?: (value: string) => void;\n  /** `number` renders `NumberInput`. @default \"text\" */\n  type?: \"text\" | \"number\" | \"password\" | \"email\";\n  placeholder?: string;\n  isDisabled?: boolean;\n  /** Validation state, as on `TextInput`. */\n  status?: TextInputStatus;\n  /**\n   * Accessible name. @default the catalog's uic.UncontrolledInput.label\n   * (\"Select\"), hidden\n   */\n  label?: string;\n  /** @default true when `label` is not given, else false */\n  isLabelHidden?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** `data-testid` and other data attributes go on the field. */\n  [dataAttribute: `data-${string}`]: string | undefined;\n}\n\nexport function UncontrolledInput({\n  defaultValue,\n  onCommit,\n  type,\n  placeholder,\n  isDisabled,\n  status,\n  label,\n  isLabelHidden,\n  className,\n  style,\n  ...dataAttributes\n}: UncontrolledInputProps) {\n  const t = useUicTranslator();\n  const [draft, setDraft] = useState(defaultValue ?? \"\");\n  // NumberInput calls onChange and then onEnter/onBlur in one handler, before\n  // a re-render, so a value it has just changed to is read from here.\n  const justChanged = useRef<string | null>(null);\n  // Reseed on a new `defaultValue` during render, as React documents for\n  // state derived from a prop.\n  const [seed, setSeed] = useState(defaultValue);\n  if (seed !== defaultValue) {\n    setSeed(defaultValue);\n    setDraft(defaultValue ?? \"\");\n  }\n\n  const shared = {\n    ...dataAttributes,\n    label: label ?? t(\"uic.UncontrolledInput.label\"),\n    isLabelHidden: isLabelHidden ?? label === undefined,\n    placeholder,\n    isDisabled,\n    status,\n    className,\n    style,\n  };\n  const commit = () => {\n    const value = justChanged.current ?? draft;\n    justChanged.current = null;\n    onCommit?.(value);\n  };\n\n  if (type === \"number\") {\n    const numeric = draft === \"\" ? null : Number(draft);\n    return (\n      <NumberInput\n        {...shared}\n        value={numeric === null || Number.isNaN(numeric) ? null : numeric}\n        onChange={(next) => {\n          const text = next === null ? \"\" : String(next);\n          justChanged.current = text;\n          setDraft(text);\n        }}\n        onEnter={commit}\n        onBlur={commit}\n      />\n    );\n  }\n\n  return (\n    <TextInput\n      {...shared}\n      type={type === \"password\" || type === \"email\" ? type : \"text\"}\n      value={draft}\n      onChange={setDraft}\n      onEnter={commit}\n      onBlur={commit}\n    />\n  );\n}\n\nUncontrolledInput.displayName = \"UncontrolledInput\";\n"],"mappings":";;;;;;AA+CA,SAAgB,EAAkB,EAChC,iBACA,aACA,SACA,gBACA,eACA,WACA,UACA,kBACA,cACA,UACA,GAAG,KACsB;CACzB,IAAM,IAAI,EAAiB,GACrB,CAAC,GAAO,KAAY,EAAS,KAAgB,EAAE,GAG/C,IAAc,EAAsB,IAAI,GAGxC,CAAC,GAAM,KAAW,EAAS,CAAY;CAC7C,AAAI,MAAS,MACX,EAAQ,CAAY,GACpB,EAAS,KAAgB,EAAE;CAG7B,IAAM,IAAS;EACb,GAAG;EACH,OAAO,KAAS,EAAE,6BAA6B;EAC/C,eAAe,KAAiB,MAAU,KAAA;EAC1C;EACA;EACA;EACA;EACA;CACF,GACM,UAAe;EACnB,IAAM,IAAQ,EAAY,WAAW;EAErC,AADA,EAAY,UAAU,MACtB,IAAW,CAAK;CAClB;CAEA,IAAI,MAAS,UAAU;EACrB,IAAM,IAAU,MAAU,KAAK,OAAO,OAAO,CAAK;EAClD,OACE,kBAAC,GAAD;GACE,GAAI;GACJ,OAAO,MAAY,QAAQ,OAAO,MAAM,CAAO,IAAI,OAAO;GAC1D,WAAW,MAAS;IAClB,IAAM,IAAO,MAAS,OAAO,KAAK,OAAO,CAAI;IAE7C,AADA,EAAY,UAAU,GACtB,EAAS,CAAI;GACf;GACA,SAAS;GACT,QAAQ;EACT,CAAA;CAEL;CAEA,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,MAAS,cAAc,MAAS,UAAU,IAAO;EACvD,OAAO;EACP,UAAU;EACV,SAAS;EACT,QAAQ;CACT,CAAA;AAEL;AAEA,EAAkB,cAAc"}