@wallarm-org/design-system 1.4.0 → 1.5.0

package/dist/components/FilterInput/FilterInputMenu/FilterInputMenu.js

@@ -22,7 +22,8 @@ const FilterInputMenu = ({ fields, fieldGroups, autocomplete })=>{
         editingMultiValues,
         editingSingleValue
     ]);
-    const selectedFieldValues = selectedField ? getFieldValues(selectedField, currentTokenText, selectedContext) : [];
+    const liveSelectedField = selectedField ? fields.find((f)=>f.name === selectedField.name) ?? selectedField : null;
+    const selectedFieldValues = liveSelectedField ? getFieldValues(liveSelectedField, currentTokenText, selectedContext) : [];
     const menuValues = useMemo(()=>{
         const selected = [
             ...editingMultiValues,
@@ -124,7 +125,8 @@ const FilterInputMenu = ({ fields, fieldGroups, autocomplete })=>{
                 inputRef: inputRef,
                 menuRef: menuRef,
                 filterText: valueFilterText,
-                blurCommitRef: blurCommitRef
+                blurCommitRef: blurCommitRef,
+                loading: liveSelectedField?.loadingOptions ?? false
             }))
         ]
     });

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FilterInputValueMenu.d.ts

@@ -43,6 +43,8 @@ export interface FilterInputValueMenuProps {
     inputRef?: RefObject<HTMLInputElement | null>;
     /** Filter values by label. */
     filterText?: string;
+    /** Options are still loading — show a loading indicator instead of the list. */
+    loading?: boolean;
     /** Menu content ref (shared across menus for focus management). */
     menuRef?: RefObject<HTMLDivElement | null>;
     /** Set here so blur handler can commit multi-select values. */

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FlatValueMenu.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup } from "../../../DropdownMenu/index.js";
+import { Loader } from "../../../Loader/index.js";
 import { filterAndSort } from "../../lib/index.js";
 import { MenuEmptyState } from "../MenuEmptyState.js";
 import { useValueMenuDisplayValues } from "./useValueMenuDisplayValues.js";
@@ -9,7 +10,7 @@ import { useValueMenuState } from "./useValueMenuState.js";
 import { ValueMenuFooterHints } from "./ValueMenuFooterHints.js";
 import { ValueMenuItem } from "./ValueMenuItem.js";
 import { valueOptionSearchText } from "./valueOptionSearchText.js";
-const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
+const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], highlightValue, width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className, loading = false })=>{
     const filteredValues = useMemo(()=>filterAndSort(values, filterText, valueOptionSearchText), [
         values,
         filterText
@@ -54,7 +55,14 @@ const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange,
             style: widthStyle,
             "data-filter-input-menu": "true",
             children: [
-                displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                loading ? /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center justify-center pt-2 pb-4 text-text-secondary",
+                    role: "status",
+                    "aria-live": "polite",
+                    children: /*#__PURE__*/ jsx(Loader, {
+                        size: "sm"
+                    })
+                }) : displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     className: "flex flex-col gap-1",
                     children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
                             option: option,

package/dist/components/FilterInput/lib/applyKnownFieldHelpers.d.ts

@@ -8,7 +8,7 @@ import type { FieldMetadata } from '../types';
  * | `name`        | DS owns                                                  |
  * | ------------- | -------------------------------------------------------- |
  * | `status_code` | acceptChar, normalize, getSuggestions, validate, serializeValue |
- * | `country`     | values (bundled ISO country allowlist)                   |
+ * | `country`     | values/getSuggestions (consumer lead → "Most frequent" section, bundled ISO list → "Other countries") |
  *
  * Backend with a different name (e.g. `http_status_code`) must either rename or
  * wire the pieces manually (`createStatusCode*`, `COUNTRY_OPTIONS`). Only the

package/dist/components/FilterInput/lib/applyKnownFieldHelpers.js

@@ -1,5 +1,21 @@
 import { COUNTRY_OPTIONS } from "./country/index.js";
 import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
+const FREQUENT_COUNTRY_SECTION = 'Most frequent';
+const OTHER_COUNTRY_SECTION = 'Other countries';
+const withBundledCountrySections = (lead)=>{
+    if (0 === lead.length) return COUNTRY_OPTIONS;
+    const seen = new Set(lead.map((option)=>option.value));
+    return [
+        ...lead.map((option)=>({
+                ...option,
+                section: FREQUENT_COUNTRY_SECTION
+            })),
+        ...COUNTRY_OPTIONS.filter((option)=>!seen.has(option.value)).map((option)=>({
+                ...option,
+                section: OTHER_COUNTRY_SECTION
+            }))
+    ];
+};
 const KNOWN_FIELD_HELPERS = {
     status_code: ()=>({
             acceptChar: createStatusCodeInputFilter(),
@@ -8,10 +24,19 @@ const KNOWN_FIELD_HELPERS = {
             validate: createStatusCodeValidator(),
             serializeValue: createStatusCodeSerializer()
         }),
-    country: ()=>({
-            values: COUNTRY_OPTIONS,
+    country: (field)=>{
+        if (field.getSuggestions) {
+            const consumerSuggest = field.getSuggestions;
+            return {
+                getSuggestions: (input, context)=>withBundledCountrySections(consumerSuggest(input, context) ?? []),
+                values: COUNTRY_OPTIONS
+            };
+        }
+        return {
+            values: withBundledCountrySections(field.values ?? []),
             getSuggestions: void 0
-        })
+        };
+    }
 };
 const applyKnownFieldHelpers = (fields)=>{
     let changed = false;
@@ -21,10 +46,12 @@ const applyKnownFieldHelpers = (fields)=>{
         changed = true;
         return {
             ...field,
-            ...factory()
+            ...factory(field)
         };
     });
     return changed ? out : fields;
 };
-const getKnownFieldSerializer = (fieldName)=>KNOWN_FIELD_HELPERS[fieldName]?.().serializeValue;
+const getKnownFieldSerializer = (fieldName)=>KNOWN_FIELD_HELPERS[fieldName]?.({
+        name: fieldName
+    }).serializeValue;
 export { applyKnownFieldHelpers, getKnownFieldSerializer };

package/dist/components/FilterInput/types.d.ts

@@ -192,6 +192,13 @@ export interface FieldMetadata {
      * want users to pick manually.
      */
     hidden?: boolean;
+    /**
+     * When `true`, this field's value options are still loading (e.g. fetched
+     * on demand). The value dropdown shows a loading indicator instead of the
+     * option list until it flips back to `false`. Consumer-owned and reactive —
+     * set it while an async options fetch is in flight.
+     */
+    loadingOptions?: boolean;
 }
 /**
  * A labeled group of filter fields for the field-selection menu, referenced by

package/dist/components/FormatNumber/FormatNumber.d.ts

@@ -24,6 +24,12 @@ interface FormatNumberBaseProps {
     unit?: string;
     /** Decimal places for percent. Default: 0. */
     decimals?: number;
+    /**
+     * Whether to show a tooltip with the full value on abbreviated numbers.
+     * When false, abbreviated values display without tooltip or dashed underline.
+     * Default: true.
+     */
+    tooltip?: boolean;
     ref?: Ref<HTMLSpanElement>;
 }
 type FormatNumberNativeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;

package/dist/components/FormatNumber/FormatNumber.js

@@ -4,13 +4,18 @@ import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 const DASHED_UNDERLINE = 'border-b-1 border-dashed border-border-strong-primary';
-const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, decimals = 0, ref, ...props })=>{
+const TOOLTIP_POSITIONING = {
+    placement: 'top'
+};
+const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, decimals = 0, tooltip: showTooltip = true, ref, ...props })=>{
     if (null == value) return /*#__PURE__*/ jsxs(Tooltip, {
+        positioning: TOOLTIP_POSITIONING,
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsx("span", {
                     ref: ref,
+                    className: "w-fit",
                     "data-slot": "format-number",
                     ...props,
                     children: /*#__PURE__*/ jsx(Text, {
@@ -47,12 +52,14 @@ const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, dec
     if ('byte' === type) {
         const { display, full } = formatBytes(value);
         const isAbbreviated = 'compact' === notation && value >= 1000;
-        if (isAbbreviated) return /*#__PURE__*/ jsxs(Tooltip, {
+        if (isAbbreviated && showTooltip) return /*#__PURE__*/ jsxs(Tooltip, {
+            positioning: TOOLTIP_POSITIONING,
             children: [
                 /*#__PURE__*/ jsx(TooltipTrigger, {
                     asChild: true,
                     children: /*#__PURE__*/ jsx("span", {
                         ref: ref,
+                        className: "w-fit",
                         "data-slot": "format-number",
                         "aria-label": full,
                         ...props,
@@ -70,6 +77,19 @@ const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, dec
                 })
             ]
         });
+        if (isAbbreviated) return /*#__PURE__*/ jsx("span", {
+            ref: ref,
+            "data-slot": "format-number",
+            "aria-label": full,
+            ...props,
+            children: /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "whitespace-nowrap tabular-nums",
+                    children: display
+                })
+            })
+        });
         return /*#__PURE__*/ jsx("span", {
             ref: ref,
             "data-slot": "format-number",
@@ -84,12 +104,14 @@ const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, dec
     const fullValue = formatFullNumber(value);
     const isAbbreviated = 'compact' === notation && Math.abs(value) >= 1000;
     const fullWithUnit = unit ? `${fullValue}\u00A0${unit}` : fullValue;
-    if (isAbbreviated) return /*#__PURE__*/ jsxs(Tooltip, {
+    if (isAbbreviated && showTooltip) return /*#__PURE__*/ jsxs(Tooltip, {
+        positioning: TOOLTIP_POSITIONING,
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsx("span", {
                     ref: ref,
+                    className: "w-fit",
                     "data-slot": "format-number",
                     "aria-label": fullWithUnit,
                     ...props,
@@ -107,6 +129,22 @@ const FormatNumber = ({ value, type = 'decimal', notation = 'compact', unit, dec
             })
         ]
     });
+    if (isAbbreviated) {
+        const displayValue = unit ? `${abbreviated}\u00A0${unit}` : abbreviated;
+        return /*#__PURE__*/ jsx("span", {
+            ref: ref,
+            "data-slot": "format-number",
+            "aria-label": fullWithUnit,
+            ...props,
+            children: /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "whitespace-nowrap tabular-nums",
+                    children: displayValue
+                })
+            })
+        });
+    }
     const displayValue = unit ? `${fullValue}\u00A0${unit}` : fullValue;
     return /*#__PURE__*/ jsx("span", {
         ref: ref,

package/dist/components/Indicator/Indicator.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { indicatorVariants } from "./classes.js";
-const Indicator = ({ ref, className, size = 'md', color = 'info', ...props })=>/*#__PURE__*/ jsx("span", {
+const Indicator = ({ ref, className, size = 'sm', color = 'info', ...props })=>/*#__PURE__*/ jsx("span", {
         ...props,
         ref: ref,
         className: cn(indicatorVariants({

package/dist/components/Indicator/classes.js

@@ -15,7 +15,7 @@ const indicatorVariants = cva('inline-block shrink-0 rounded-2', {
         }
     },
     defaultVariants: {
-        size: 'md',
+        size: 'sm',
         color: 'info'
     }
 });

package/dist/components/InlineEdit/InlineEditActions.js

@@ -21,7 +21,9 @@ const InlineEditActions = ({ onSubmit, onCancel })=>/*#__PURE__*/ jsxs("div", {
                             onClick: onSubmit,
                             "aria-label": "Save",
                             tabIndex: -1,
-                            children: /*#__PURE__*/ jsx(Check, {})
+                            children: /*#__PURE__*/ jsx(Check, {
+                                className: "text-slate-500"
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxs(TooltipContent, {
@@ -47,7 +49,9 @@ const InlineEditActions = ({ onSubmit, onCancel })=>/*#__PURE__*/ jsxs("div", {
                             onClick: onCancel,
                             "aria-label": "Cancel",
                             tabIndex: -1,
-                            children: /*#__PURE__*/ jsx(X, {})
+                            children: /*#__PURE__*/ jsx(X, {
+                                className: "text-slate-500"
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxs(TooltipContent, {

package/dist/components/PasswordInput/PasswordInput.js

@@ -36,8 +36,14 @@ const PasswordInput = ({ disabled = false, size = 'default', error = false, clas
                                 disabled: disabled,
                                 "aria-label": visible ? 'Hide password' : 'Show password',
                                 onClick: toggle,
-                                className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-                                children: visible ? /*#__PURE__*/ jsx(EyeOff, {}) : /*#__PURE__*/ jsx(Eye, {})
+                                className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 flex",
+                                children: visible ? /*#__PURE__*/ jsx(EyeOff, {
+                                    size: "md",
+                                    className: "text-slate-500"
+                                }) : /*#__PURE__*/ jsx(Eye, {
+                                    size: "md",
+                                    className: "text-slate-500"
+                                })
                             })
                         }),
                         /*#__PURE__*/ jsx(TooltipContent, {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.0",
-  "generatedAt": "2026-08-20T21:26:32.176Z",
+  "version": "1.4.0",
+  "generatedAt": "2026-08-24T13:22:56.292Z",
   "components": [
     {
       "name": "Accordion",
@@ -30664,6 +30664,12 @@
               "required": false,
               "description": "Filter values by label."
             },
+            {
+              "name": "loading",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Options are still loading — show a loading indicator instead of the list."
+            },
             {
               "name": "menuRef",
               "type": "RefObject<HTMLDivElement | null> | undefined",
@@ -31810,6 +31816,12 @@
           "required": false,
           "description": "Decimal places for percent. Default: 0.",
           "defaultValue": "0"
+        },
+        {
+          "name": "tooltip",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Whether to show a tooltip with the full value on abbreviated numbers.\nWhen false, abbreviated values display without tooltip or dashed underline.\nDefault: true."
         }
       ],
       "variants": [],
@@ -31835,6 +31847,10 @@
           "name": "Bytes",
           "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      512 (compact)\n    </Text>\n    <FormatNumber value={512} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      3,400 (compact)\n    </Text>\n    <FormatNumber value={3_400} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,700,000 (compact)\n    </Text>\n    <FormatNumber value={12_700_000} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      2,345,678,901 (compact)\n    </Text>\n    <FormatNumber value={2_345_678_901} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      1,100,000,000,000 (compact)\n    </Text>\n    <FormatNumber value={1_100_000_000_000} type='byte' />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,700,000 (standard)\n    </Text>\n    <FormatNumber value={12_700_000} type='byte' notation='standard' />\n  </div>\n)"
         },
+        {
+          "name": "NoTooltip",
+          "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      12,042 (decimal)\n    </Text>\n    <FormatNumber value={12_042} tooltip={false} />\n\n    <Text size='sm' color='secondary' align='right'>\n      59,614,283 (decimal)\n    </Text>\n    <FormatNumber value={59_614_283} tooltip={false} />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,042 with unit\n    </Text>\n    <FormatNumber value={12_042} unit='requests' tooltip={false} />\n\n    <Text size='sm' color='secondary' align='right'>\n      12,700,000 (byte)\n    </Text>\n    <FormatNumber value={12_700_000} type='byte' tooltip={false} />\n  </div>\n)"
+        },
         {
           "name": "NegativeValues",
           "code": "() => (\n  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>\n    <Text size='sm' color='secondary' align='right'>\n      -42\n    </Text>\n    <FormatNumber value={-42} />\n\n    <Text size='sm' color='secondary' align='right'>\n      -12,042\n    </Text>\n    <FormatNumber value={-12_042} />\n\n    <Text size='sm' color='secondary' align='right'>\n      -59,614,283\n    </Text>\n    <FormatNumber value={-59_614_283} />\n  </div>\n)"
@@ -32583,7 +32599,7 @@
           "name": "size",
           "type": "{ sm: string; md: string; }",
           "required": false,
-          "defaultValue": "md"
+          "defaultValue": "sm"
         }
       ],
       "variants": [
@@ -32593,7 +32609,7 @@
             "sm",
             "md"
           ],
-          "defaultValue": "md"
+          "defaultValue": "sm"
         },
         {
           "name": "color",
@@ -50046,7 +50062,7 @@
         },
         {
           "name": "WithRequirements",
-          "code": "() => {\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n\n  const items: PasswordComplexityItem[] = [\n    {\n      id: 'length',\n      label: 'At least 8 characters',\n      met: passwordValidators.minLength(8)(password),\n    },\n    {\n      id: 'uppercase',\n      label: 'One uppercase letter (A\\u2013Z)',\n      met: passwordValidators.hasUppercase(password),\n    },\n    {\n      id: 'lowercase',\n      label: 'One lowercase letter (a\\u2013z)',\n      met: passwordValidators.hasLowercase(password),\n    },\n    { id: 'number', label: 'One number (0\\u20139)', met: passwordValidators.hasNumber(password) },\n    {\n      id: 'symbol',\n      label: 'One symbol (e.g. ! ? @ #)',\n      met: passwordValidators.hasSymbol(password),\n    },\n    {\n      id: 'match',\n      label: 'Both passwords match',\n      met: passwordValidators.passwordsMatch(password, confirmPassword),\n    },\n  ];\n\n  return (\n    <div className='flex flex-col gap-16 w-[320px]'>\n      <Field>\n        <FieldLabel>New password</FieldLabel>\n        <PasswordInput\n          placeholder='New password...'\n          value={password}\n          onChange={e => setPassword(e.target.value)}\n        />\n      </Field>\n      <Field>\n        <FieldLabel>Confirm password</FieldLabel>\n        <PasswordInput\n          placeholder='Confirm password...'\n          value={confirmPassword}\n          onChange={e => setConfirmPassword(e.target.value)}\n        />\n      </Field>\n      <PasswordComplexity items={items} />\n    </div>\n  );\n}"
+          "code": "() => {\n  const [password, setPassword] = useState('');\n  const [confirmPassword, setConfirmPassword] = useState('');\n\n  const items: PasswordComplexityItem[] = [\n    {\n      id: 'length',\n      label: 'At least 8 characters',\n      met: passwordValidators.minLength(8)(password),\n    },\n    {\n      id: 'uppercase',\n      label: 'One uppercase letter (A\\u2013Z)',\n      met: passwordValidators.hasUppercase(password),\n    },\n    {\n      id: 'lowercase',\n      label: 'One lowercase letter (a\\u2013z)',\n      met: passwordValidators.hasLowercase(password),\n    },\n    { id: 'number', label: 'One number (0\\u20139)', met: passwordValidators.hasNumber(password) },\n    {\n      id: 'symbol',\n      label: 'One symbol (e.g. ! ? @ #)',\n      met: passwordValidators.hasSymbol(password),\n    },\n    {\n      id: 'match',\n      label: 'Both passwords match',\n      met: passwordValidators.passwordsMatch(password, confirmPassword),\n    },\n  ];\n\n  return (\n    <VStack gap={16} className='w-[320px]'>\n      <Field>\n        <FieldLabel>New password</FieldLabel>\n        <PasswordInput\n          placeholder='New password...'\n          value={password}\n          onChange={e => setPassword(e.target.value)}\n        />\n      </Field>\n\n      <VStack gap={6}>\n        <Field>\n          <FieldLabel>Confirm password</FieldLabel>\n          <PasswordInput\n            placeholder='Confirm password...'\n            value={confirmPassword}\n            onChange={e => setConfirmPassword(e.target.value)}\n          />\n        </Field>\n        <PasswordComplexity items={items} />\n      </VStack>\n    </VStack>\n  );\n}"
         },
         {
           "name": "Disabled",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",