@k2b/ui 0.1.0-rc.0

package/dist/ssr/inputs/MultiSelectInput.js

@@ -0,0 +1,347 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-multi-select-trigger__values\">", "</span>"],
+  _tmpl$2 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$3 = ["<button type=\"button\" class=\"k2b-choice-control__clear k2b-input-clear-action\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$4 = ["<div class=\"k2b-choice-search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\"", "></div>"],
+  _tmpl$5 = ["<div class=\"k2b-choice-toolbar\">", "</div>"],
+  _tmpl$6 = ["<div class=\"k2b-choice-status\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><span>", "</span></div>"],
+  _tmpl$7 = ["<div class=\"k2b-choice-control\"", ">", "", "<div popover=\"manual\" class=\"k2b-choice-popover\" role=\"group\"", ">", "", "<div", " class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">", "", "", "</div></div>", "</div>"],
+  _tmpl$8 = ["<span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">", "</span>"],
+  _tmpl$9 = ["<span class=\"k2b-choice-pill\" style=\"", "\">", "<button type=\"button\"", "", " tabindex=\"-1\"><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></span>"],
+  _tmpl$0 = ["<span>", "</span>"],
+  _tmpl$1 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$10 = ["<span class=\"k2b-choice-pill__content\">", "</span>"],
+  _tmpl$11 = ["<div class=\"k2b-choice-status\" data-tone=\"danger\"><span>", "</span><button type=\"button\">", "</button></div>"],
+  _tmpl$12 = ["<div class=\"k2b-choice-status\">", "</div>"],
+  _tmpl$13 = ["<button type=\"button\" id=\"", "\" class=\"k2b-choice-option\" role=\"option\"", "", "><span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\"><i class=\"ti ti-check\"></i></span>", "<span class=\"k2b-choice-option__content\">", "</span></button>"],
+  _tmpl$14 = ["<span class=\"k2b-choice-dot\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$15 = ["<i", " style=\"", "\" aria-hidden=\"true\"></i>"],
+  _tmpl$16 = ["<strong>", "</strong>"],
+  _tmpl$17 = ["<small>", "</small>"],
+  _tmpl$18 = ["<input type=\"hidden\"", ">"];
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { colorTintStyle, normalizeHexColor } from "../internal/color";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useUiMessages } from "../intl/messages";
+import { ChoiceGroups } from "./ChoiceGroups";
+import { createChoiceLoader, createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from "./choice";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+/** Cloud tints the option icon with the option color instead of adding a dot. */
+const iconColor = color => {
+  const normalized = normalizeHexColor(color);
+  return normalized ? {
+    color: normalized
+  } : undefined;
+};
+const normalize = option => typeof option === "string" ? {
+  value: option,
+  label: option
+} : "value" in option ? option : {
+  ...option,
+  value: option.id,
+  label: option.label || option.id
+};
+export function MultiSelectInput(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  const listboxId = `${meta.controlId}-listbox`;
+  const [query, setQuery] = createSignal("");
+  const [focusedIndex, setFocusedIndex] = createSignal(-1);
+  const [cache, setCache] = createSignal({});
+  const [selectedGroup, setSelectedGroup] = createSignal(props.defaultGroup ?? null);
+  let searchRef;
+  const values = () => resolveMaybeAccessor(props.value) ?? [];
+  const error = () => resolveMaybeAccessor(props.error);
+  const activeGroup = createMemo(() => {
+    const current = selectedGroup();
+    return current && props.groups?.some(group => group.value === current) ? current : null;
+  });
+  const groupChoices = createMemo(() => [{
+    value: null,
+    label: props.allGroupLabel ?? messages().all
+  }, ...(props.groups ?? [])]);
+  const asyncOptions = createChoiceLoader(() => props.fetchData ? async (query, signal) => (await props.fetchData(query, signal, activeGroup())).map(normalize) : props.loadOptions ? (query, signal) => props.loadOptions(query, signal, activeGroup()) : undefined, () => props.fetchDebounceMs ?? props.debounceMs ?? 200);
+  const isAsync = () => Boolean(props.fetchData || props.loadOptions);
+  const sourceOptions = createMemo(() => isAsync() ? asyncOptions.options() : (props.options ?? []).map(normalize));
+  const groupedOptions = createMemo(() => {
+    const group = activeGroup();
+    return !isAsync() && group ? sourceOptions().filter(option => option.groups?.includes(group)) : sourceOptions();
+  });
+  // Cloud's multi-select always renders its search field, and filters a static
+  // option list client-side while a remote loader filters server-side.
+  const searchable = () => isAsync() || (props.searchable ?? true);
+  const visibleOptions = createMemo(() => isAsync() ? groupedOptions() : filterChoiceOptions(groupedOptions(), searchable() ? query() : ""));
+  const optionByValue = createMemo(() => {
+    const options = new Map();
+    for (const option of Object.values(cache())) options.set(option.value, option);
+    for (const option of (props.selectedOptions?.() ?? []).map(normalize)) options.set(option.value, option);
+    for (const option of sourceOptions()) options.set(option.value, option);
+    return options;
+  });
+  const selected = createMemo(() => values().map(value => optionByValue().get(value) ?? {
+    value,
+    label: value
+  }));
+  const hasClearAction = () => Boolean(props.clearable && selected().length > 0 && !props.disabled);
+  const selectedValues = createMemo(() => new Set(values()));
+  const popover = createChoicePopover(() => Boolean(props.disabled));
+  const focusedOption = () => visibleOptions()[focusedIndex()];
+  const emit = next => {
+    const unique = [...new Set(next)];
+    commitFieldValue(props, unique);
+  };
+  const isSelected = value => selectedValues().has(value);
+  const focusFirst = () => setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), -1, 1));
+  const chooseGroup = group => {
+    if (group === activeGroup()) return;
+    setSelectedGroup(group);
+    focusFirst();
+    if (isAsync()) asyncOptions.load(query(), true);
+  };
+  const open = () => {
+    if (props.disabled) return;
+    setQuery("");
+    if (isAsync()) asyncOptions.load("", true);
+    focusFirst();
+    popover.show();
+    if (searchable()) queueMicrotask(() => searchRef?.focus());
+  };
+  const close = (restoreFocus = false) => {
+    asyncOptions.cancel();
+    setQuery("");
+    setFocusedIndex(-1);
+    popover.hide(restoreFocus);
+  };
+  const toggleOption = option => {
+    if (option.disabled) return;
+    setCache({
+      ...cache(),
+      [option.value]: option
+    });
+    emit(isSelected(option.value) ? values().filter(value => value !== option.value) : [...values(), option.value]);
+  };
+  const remove = value => emit(values().filter(item => item !== value));
+  const move = direction => {
+    setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), focusedIndex(), direction));
+  };
+  const handleKeyDown = event => {
+    const inToolbar = Boolean(event.target?.closest?.(".k2b-choice-toolbar"));
+    if (inToolbar && event.key !== "Escape" && event.key !== "Tab") return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!popover.open()) open();else move(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && !popover.open()) {
+      event.preventDefault();
+      open();
+      return;
+    }
+    if (event.key === "Enter" && popover.open()) {
+      const option = focusedOption();
+      if (option) {
+        event.preventDefault();
+        toggleOption(option);
+      }
+      return;
+    }
+    if (event.key === "Backspace" && popover.open() && !query() && values().length > 0) {
+      event.preventDefault();
+      const last = values().at(-1);
+      if (last) remove(last);
+      return;
+    }
+    if (event.key === "Escape" && popover.open()) {
+      event.preventDefault();
+      close(true);
+    } else if (event.key === "Tab" && popover.open()) {
+      close();
+    }
+  };
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return error();
+    },
+    meta: meta,
+    labelFor: false,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      return _$ssr(_tmpl$7, _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("div", _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        "class": "k2b-multi-select-trigger",
+        role: "combobox",
+        get tabIndex() {
+          return props.disabled ? -1 : 0;
+        },
+        "aria-haspopup": "listbox",
+        get ["aria-expanded"]() {
+          return popover.open();
+        },
+        "aria-controls": listboxId,
+        get ["aria-activedescendant"]() {
+          return focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined;
+        }
+      }, () => fieldControlAria(meta, props), {
+        get ["aria-disabled"]() {
+          return props.disabled;
+        },
+        get ["data-disabled"]() {
+          return props.disabled ? "true" : undefined;
+        }
+      }), [_$escape(_$createComponent(Show, {
+        get when() {
+          return selected().length > 0;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$8, _$escape(props.placeholder ?? messages().select));
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$escape(_$createComponent(For, {
+            get each() {
+              return selected();
+            },
+            children: option => _$ssr(_tmpl$9, _$ssrStyle(colorTintStyle(option.color)), _$escape(_$createComponent(Show, {
+              get when() {
+                return props.renderValue;
+              },
+              get fallback() {
+                return [_$createComponent(Show, {
+                  get when() {
+                    return option.icon;
+                  },
+                  children: icon => _$ssr(_tmpl$1, _$ssrAttribute("class", _$escape(icon(), true), false))
+                }), _$ssr(_tmpl$0, _$escape(option.label))];
+              },
+              children: render => _$ssr(_tmpl$10, _$escape(render()(option)))
+            })), _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
+              name: option.label
+            }), true), false), _$ssrAttribute("disabled", props.disabled, true))
+          })));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return !hasClearAction();
+        },
+        get children() {
+          return _$ssr(_tmpl$2, `${popover.open() ? _$escape(props.activeIcon ?? "ti ti-chevron-up", true) : _$escape(props.icon ?? "ti ti-chevron-down", true)} k2b-multi-select-trigger__chevron`);
+        }
+      }))], false), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasClearAction();
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(props.clearLabel ?? messages().clearSelection, true), false));
+        }
+      })), _$ssrAttribute("aria-label", typeof props.label === "string" ? _$escape(props.label, true) : _$escape(messages().options, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return searchable();
+        },
+        get children() {
+          return _$ssr(_tmpl$4, _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-label", _$escape(props.searchPlaceholder ?? messages().searchOptions, true), false) + _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-activedescendant", focusedOption() ? `${_$escape(listboxId, true)}-${_$escape(focusedIndex(), true)}` : _$escape(undefined, true), false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return (props.groups?.length ?? 0) > 0;
+        },
+        get children() {
+          return _$ssr(_tmpl$5, _$escape(_$createComponent(ChoiceGroups, {
+            get choices() {
+              return groupChoices();
+            },
+            get value() {
+              return activeGroup();
+            },
+            onValueChange: chooseGroup,
+            get ariaLabel() {
+              return props.groupsAriaLabel ?? messages().filterOptions;
+            },
+            controls: listboxId
+          })));
+        }
+      })), _$ssrAttribute("id", _$escape(listboxId, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return asyncOptions.error();
+        },
+        children: message => _$ssr(_tmpl$11, _$escape(message()), _$escape(props.retryLabel ?? messages().retry))
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return asyncOptions.loading() && visibleOptions().length === 0;
+        },
+        get children() {
+          return _$ssr(_tmpl$6, _$escape(props.loadingLabel ?? messages().loading));
+        }
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return asyncOptions.error() ? [] : visibleOptions();
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return !asyncOptions.loading() && !asyncOptions.error();
+            },
+            get children() {
+              return _$ssr(_tmpl$12, isAsync() || query() ? _$escape(props.noResultsLabel ?? messages().noResults) : _$escape(props.emptyLabel ?? messages().noOptions));
+            }
+          });
+        },
+        children: (option, index) => _$ssr(_tmpl$13, `${_$escape(listboxId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-label", _$escape(option.label, true), false) + _$ssrAttribute("aria-selected", _$escape(isSelected(option.value), true), false) + _$ssrAttribute("data-focused", index() === focusedIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("disabled", option.disabled, true), _$escape(_$createComponent(Show, {
+          get when() {
+            return option.icon;
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return normalizeHexColor(option.color);
+              },
+              children: color => _$ssr(_tmpl$14, _$ssrStyleProperty("background:", _$escape(color(), true)))
+            });
+          },
+          children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false), _$ssrStyle(iconColor(option.color)))
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return props.renderOption;
+          },
+          get fallback() {
+            return [_$ssr(_tmpl$16, _$escape(option.label)), _$createComponent(Show, {
+              get when() {
+                return option.description;
+              },
+              children: description => _$ssr(_tmpl$17, _$escape(description()))
+            })];
+          },
+          children: render => render()(option)
+        })))
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.name;
+        },
+        children: name => _$ssr(_tmpl$18, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(values().join(","), true), false))
+      })));
+    }
+  });
+}
+export default MultiSelectInput;
+//# sourceMappingURL=MultiSelectInput.js.map

package/dist/ssr/inputs/MultiSelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createMemo","createSignal","For","Show","colorTintStyle","normalizeHexColor","createFieldMeta","Field","fieldControlAria","useUiMessages","ChoiceGroups","createChoiceLoader","createChoicePopover","filterChoiceOptions","nextEnabledChoiceIndex","commitFieldValue","resolveMaybeAccessor","iconColor","color","normalized","undefined","normalize","option","value","label","id","MultiSelectInput","props","messages","meta","listboxId","controlId","query","setQuery","focusedIndex","setFocusedIndex","cache","setCache","selectedGroup","setSelectedGroup","defaultGroup","searchRef","values","error","activeGroup","current","groups","some","group","groupChoices","allGroupLabel","all","asyncOptions","fetchData","signal","map","loadOptions","fetchDebounceMs","debounceMs","isAsync","Boolean","sourceOptions","options","groupedOptions","filter","includes","searchable","visibleOptions","optionByValue","Map","Object","set","selectedOptions","selected","get","hasClearAction","clearable","length","disabled","selectedValues","Set","popover","focusedOption","emit","next","unique","isSelected","has","focusFirst","chooseGroup","load","open","show","queueMicrotask","focus","close","restoreFocus","cancel","hide","toggleOption","remove","item","move","direction","handleKeyDown","event","inToolbar","target","closest","key","preventDefault","last","at","_$createComponent","class","description","labelFor","required","children","_$ssr","_tmpl$7","_$ssrAttribute","_$escape","_$ssrElement","_$mergeProps","role","tabIndex","aria-expanded","aria-activedescendant","aria-disabled","data-disabled","when","fallback","_tmpl$8","placeholder","select","_tmpl$","each","_tmpl$9","_$ssrStyle","renderValue","icon","_tmpl$1","_tmpl$0","render","_tmpl$10","removeNamed","name","_tmpl$2","activeIcon","_tmpl$3","clearLabel","clearSelection","_tmpl$4","searchPlaceholder","search","searchOptions","_tmpl$5","choices","onValueChange","ariaLabel","groupsAriaLabel","filterOptions","controls","message","_tmpl$11","retryLabel","retry","loading","_tmpl$6","loadingLabel","_tmpl$12","noResultsLabel","noResults","emptyLabel","noOptions","index","_tmpl$13","_tmpl$14","_$ssrStyleProperty","_tmpl$15","renderOption","_tmpl$16","_tmpl$17","_tmpl$18","join"],"sources":["inputs/MultiSelectInput.tsx"],"sourcesContent":["import { createMemo, createSignal, For, type JSX, Show } from \"solid-js\";\nimport { colorTintStyle, normalizeHexColor } from \"../internal/color\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { ChoiceGroups } from \"./ChoiceGroups\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from \"./choice\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport type { SelectGroup } from \"./Select\";\n\nexport type MultiSelectOption =\n  | string\n  | { id: string; label?: string; description?: string; icon?: string; color?: string; groups?: readonly string[] }\n  | ChoiceOption<string>;\ntype NormalizedOption = ChoiceOption<string>;\nexport type MultiSelectFetchDataFn = (query: string, signal: AbortSignal, group: string | null) => Promise<MultiSelectOption[]>;\n\nexport type MultiSelectInputProps = ValueFieldProps<string[]> & {\n  options?: MultiSelectOption[];\n  fetchData?: MultiSelectFetchDataFn;\n  selectedOptions?: () => MultiSelectOption[];\n  placeholder?: string;\n  icon?: string;\n  activeIcon?: string;\n  fetchDebounceMs?: number;\n  debounceMs?: number;\n  loadOptions?: (query: string, signal: AbortSignal, group: string | null) => Promise<readonly ChoiceOption<string>[]>;\n  groups?: readonly SelectGroup[];\n  defaultGroup?: string;\n  groupsAriaLabel?: string;\n  allGroupLabel?: string;\n  searchable?: boolean;\n  clearable?: boolean;\n  name?: string;\n  renderOption?: (option: ChoiceOption<string>) => JSX.Element;\n  renderValue?: (option: ChoiceOption<string>) => JSX.Element;\n  searchPlaceholder?: string;\n  loadingLabel?: string;\n  noResultsLabel?: string;\n  emptyLabel?: string;\n  retryLabel?: string;\n  clearLabel?: string;\n};\n\n/** Cloud tints the option icon with the option color instead of adding a dot. */\nconst iconColor = (color: string | undefined): JSX.CSSProperties | undefined => {\n  const normalized = normalizeHexColor(color);\n  return normalized ? { color: normalized } : undefined;\n};\n\nconst normalize = (option: MultiSelectOption): NormalizedOption =>\n  typeof option === \"string\"\n    ? { value: option, label: option }\n    : \"value\" in option\n      ? option\n      : { ...option, value: option.id, label: option.label || option.id };\n\nexport function MultiSelectInput(props: MultiSelectInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [query, setQuery] = createSignal(\"\");\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  const [cache, setCache] = createSignal<Record<string, NormalizedOption>>({});\n  const [selectedGroup, setSelectedGroup] = createSignal<string | null>(props.defaultGroup ?? null);\n  let searchRef: HTMLInputElement | undefined;\n\n  const values = () => resolveMaybeAccessor(props.value) ?? [];\n  const error = () => resolveMaybeAccessor(props.error);\n  const activeGroup = createMemo(() => {\n    const current = selectedGroup();\n    return current && props.groups?.some((group) => group.value === current) ? current : null;\n  });\n  const groupChoices = createMemo(() => [{ value: null, label: props.allGroupLabel ?? messages().all }, ...(props.groups ?? [])]);\n  const asyncOptions = createChoiceLoader(\n    () =>\n      props.fetchData\n        ? async (query, signal) => (await props.fetchData!(query, signal, activeGroup())).map(normalize)\n        : props.loadOptions\n          ? (query, signal) => props.loadOptions!(query, signal, activeGroup())\n          : undefined,\n    () => props.fetchDebounceMs ?? props.debounceMs ?? 200,\n  );\n  const isAsync = () => Boolean(props.fetchData || props.loadOptions);\n  const sourceOptions = createMemo(() => (isAsync() ? asyncOptions.options() : (props.options ?? []).map(normalize)));\n  const groupedOptions = createMemo(() => {\n    const group = activeGroup();\n    return !isAsync() && group ? sourceOptions().filter((option) => option.groups?.includes(group)) : sourceOptions();\n  });\n  // Cloud's multi-select always renders its search field, and filters a static\n  // option list client-side while a remote loader filters server-side.\n  const searchable = () => isAsync() || (props.searchable ?? true);\n  const visibleOptions = createMemo(() =>\n    isAsync() ? groupedOptions() : filterChoiceOptions(groupedOptions(), searchable() ? query() : \"\"),\n  );\n  const optionByValue = createMemo(() => {\n    const options = new Map<string, NormalizedOption>();\n    for (const option of Object.values(cache())) options.set(option.value, option);\n    for (const option of (props.selectedOptions?.() ?? []).map(normalize)) options.set(option.value, option);\n    for (const option of sourceOptions()) options.set(option.value, option);\n    return options;\n  });\n  const selected = createMemo(() => values().map((value) => optionByValue().get(value) ?? ({ value, label: value } as NormalizedOption)));\n  const hasClearAction = () => Boolean(props.clearable && selected().length > 0 && !props.disabled);\n  const selectedValues = createMemo(() => new Set(values()));\n  const popover = createChoicePopover(() => Boolean(props.disabled));\n  const focusedOption = () => visibleOptions()[focusedIndex()];\n\n  const emit = (next: readonly string[]) => {\n    const unique = [...new Set(next)];\n    commitFieldValue(props, unique);\n  };\n  const isSelected = (value: string) => selectedValues().has(value);\n  const focusFirst = () => setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), -1, 1));\n  const chooseGroup = (group: string | null) => {\n    if (group === activeGroup()) return;\n    setSelectedGroup(group);\n    focusFirst();\n    if (isAsync()) asyncOptions.load(query(), true);\n  };\n  const open = () => {\n    if (props.disabled) return;\n    setQuery(\"\");\n    if (isAsync()) asyncOptions.load(\"\", true);\n    focusFirst();\n    popover.show();\n    if (searchable()) queueMicrotask(() => searchRef?.focus());\n  };\n  const close = (restoreFocus = false) => {\n    asyncOptions.cancel();\n    setQuery(\"\");\n    setFocusedIndex(-1);\n    popover.hide(restoreFocus);\n  };\n  const toggleOption = (option: NormalizedOption) => {\n    if (option.disabled) return;\n    setCache({ ...cache(), [option.value]: option });\n    emit(isSelected(option.value) ? values().filter((value) => value !== option.value) : [...values(), option.value]);\n  };\n  const remove = (value: string) => emit(values().filter((item) => item !== value));\n  const move = (direction: 1 | -1) => {\n    setFocusedIndex(nextEnabledChoiceIndex(visibleOptions(), focusedIndex(), direction));\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    const inToolbar = Boolean((event.target as HTMLElement | null)?.closest?.(\".k2b-choice-toolbar\"));\n    if (inToolbar && event.key !== \"Escape\" && event.key !== \"Tab\") return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else move(event.key === \"ArrowDown\" ? 1 : -1);\n      return;\n    }\n    if ((event.key === \"Enter\" || event.key === \" \") && !popover.open()) {\n      event.preventDefault();\n      open();\n      return;\n    }\n    if (event.key === \"Enter\" && popover.open()) {\n      const option = focusedOption();\n      if (option) {\n        event.preventDefault();\n        toggleOption(option);\n      }\n      return;\n    }\n    if (event.key === \"Backspace\" && popover.open() && !query() && values().length > 0) {\n      event.preventDefault();\n      const last = values().at(-1);\n      if (last) remove(last);\n      return;\n    }\n    if (event.key === \"Escape\" && popover.open()) {\n      event.preventDefault();\n      close(true);\n    } else if (event.key === \"Tab\" && popover.open()) {\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      labelFor={false}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-choice-control\" data-invalid={error() ? \"true\" : undefined}>\n        <div\n          ref={popover.setTrigger}\n          id={meta.controlId}\n          class=\"k2b-multi-select-trigger\"\n          role=\"combobox\"\n          tabIndex={props.disabled ? -1 : 0}\n          aria-haspopup=\"listbox\"\n          aria-expanded={popover.open()}\n          aria-controls={listboxId}\n          aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n          {...fieldControlAria(meta, props)}\n          aria-disabled={props.disabled}\n          data-disabled={props.disabled ? \"true\" : undefined}\n          onClick={() => (popover.open() ? close() : open())}\n          onKeyDown={handleKeyDown}\n        >\n          <Show\n            when={selected().length > 0}\n            fallback={\n              <span class=\"k2b-choice-trigger__value\" data-placeholder=\"true\">\n                {props.placeholder ?? messages().select}\n              </span>\n            }\n          >\n            <span class=\"k2b-multi-select-trigger__values\">\n              <For each={selected()}>\n                {(option) => (\n                  <span class=\"k2b-choice-pill\" style={colorTintStyle(option.color)}>\n                    <Show\n                      when={props.renderValue}\n                      fallback={\n                        <>\n                          <Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n                          <span>{option.label}</span>\n                        </>\n                      }\n                    >\n                      {(render) => <span class=\"k2b-choice-pill__content\">{render()(option)}</span>}\n                    </Show>\n                    <button\n                      type=\"button\"\n                      aria-label={messages().removeNamed({ name: option.label })}\n                      disabled={props.disabled}\n                      tabIndex={-1}\n                      onClick={(event) => {\n                        event.stopPropagation();\n                        remove(option.value);\n                      }}\n                    >\n                      <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                    </button>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <Show when={!hasClearAction()}>\n            <i\n              class={`${popover.open() ? (props.activeIcon ?? \"ti ti-chevron-up\") : (props.icon ?? \"ti ti-chevron-down\")} k2b-multi-select-trigger__chevron`}\n              aria-hidden=\"true\"\n            />\n          </Show>\n        </div>\n        <Show when={hasClearAction()}>\n          <button\n            type=\"button\"\n            class=\"k2b-choice-control__clear k2b-input-clear-action\"\n            aria-label={props.clearLabel ?? messages().clearSelection}\n            onClick={(event) => {\n              event.stopPropagation();\n              emit([]);\n              popover.trigger()?.focus();\n            }}\n          >\n            <i class=\"ti ti-x\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n\n        <div\n          ref={popover.setPopover}\n          popover=\"manual\"\n          class=\"k2b-choice-popover\"\n          role=\"group\"\n          onKeyDown={handleKeyDown}\n          aria-label={typeof props.label === \"string\" ? props.label : messages().options}\n        >\n          <Show when={searchable()}>\n            <div class=\"k2b-choice-search\">\n              <i class=\"ti ti-search\" aria-hidden=\"true\" />\n              <input\n                ref={searchRef}\n                type=\"search\"\n                value={query()}\n                placeholder={props.searchPlaceholder ?? messages().search}\n                aria-label={props.searchPlaceholder ?? messages().searchOptions}\n                aria-controls={listboxId}\n                aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n                onInput={(event) => {\n                  const next = event.currentTarget.value;\n                  setQuery(next);\n                  if (isAsync()) asyncOptions.load(next);\n                  focusFirst();\n                }}\n              />\n            </div>\n          </Show>\n          <Show when={(props.groups?.length ?? 0) > 0}>\n            <div class=\"k2b-choice-toolbar\">\n              <ChoiceGroups\n                choices={groupChoices()}\n                value={activeGroup()}\n                onValueChange={chooseGroup}\n                ariaLabel={props.groupsAriaLabel ?? messages().filterOptions}\n                controls={listboxId}\n              />\n            </div>\n          </Show>\n          <div id={listboxId} class=\"k2b-choice-options\" role=\"listbox\" aria-multiselectable=\"true\">\n            <Show when={asyncOptions.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={asyncOptions.retry}>\n                    {props.retryLabel ?? messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            <Show when={asyncOptions.loading() && visibleOptions().length === 0}>\n              <div class=\"k2b-choice-status\">\n                <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                <span>{props.loadingLabel ?? messages().loading}</span>\n              </div>\n            </Show>\n            <For\n              each={asyncOptions.error() ? [] : visibleOptions()}\n              fallback={\n                <Show when={!asyncOptions.loading() && !asyncOptions.error()}>\n                  <div class=\"k2b-choice-status\">\n                    {isAsync() || query() ? (props.noResultsLabel ?? messages().noResults) : (props.emptyLabel ?? messages().noOptions)}\n                  </div>\n                </Show>\n              }\n            >\n              {(option, index) => (\n                <button\n                  type=\"button\"\n                  id={`${listboxId}-${index()}`}\n                  class=\"k2b-choice-option\"\n                  role=\"option\"\n                  aria-label={option.label}\n                  aria-selected={isSelected(option.value)}\n                  data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                  disabled={option.disabled}\n                  onPointerMove={() => !option.disabled && setFocusedIndex(index())}\n                  onClick={() => toggleOption(option)}\n                >\n                  <span class=\"k2b-choice-option__checkbox\" aria-hidden=\"true\">\n                    <i class=\"ti ti-check\" />\n                  </span>\n                  <Show\n                    when={option.icon}\n                    fallback={\n                      <Show when={normalizeHexColor(option.color)}>\n                        {(color) => <span class=\"k2b-choice-dot\" style={{ background: color() }} aria-hidden=\"true\" />}\n                      </Show>\n                    }\n                  >\n                    {(icon) => <i class={icon()} style={iconColor(option.color)} aria-hidden=\"true\" />}\n                  </Show>\n                  <span class=\"k2b-choice-option__content\">\n                    <Show\n                      when={props.renderOption}\n                      fallback={\n                        <>\n                          <strong>{option.label}</strong>\n                          <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                        </>\n                      }\n                    >\n                      {(render) => render()(option)}\n                    </Show>\n                  </span>\n                </button>\n              )}\n            </For>\n          </div>\n        </div>\n        <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={values().join(\",\")} />}</Show>\n      </div>\n    </Field>\n  );\n}\n\nexport default MultiSelectInput;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/NumberInput.js

@@ -0,0 +1,177 @@
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<button type=\"button\" class=\"k2b-number-input__step\"", "", "><i class=\"ti ti-minus\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$2 = ["<span class=\"k2b-input-shell__icon k2b-text-input__icon\" aria-hidden=\"true\"><i", "></i><i", "></i></span>"],
+  _tmpl$3 = ["<span class=\"k2b-input-shell__affix\">", "</span>"],
+  _tmpl$4 = ["<button type=\"button\" class=\"k2b-input-shell__clear k2b-input-clear-action\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-number-input__step\"", "", "><i class=\"ti ti-plus\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$6 = ["<div class=\"k2b-input-shell k2b-number-input\"", ">", "<div class=\"k2b-number-input__value\">", "", "", "", "", "</div>", "</div>"];
+import { createEffect, createMemo, createSignal, Show, splitProps } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { decimalSeparator, useLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { resolveMaybeAccessor } from "./field-contract";
+export function NumberInput(props) {
+  const [local, rest] = splitProps(props, ["activeIcon", "allowNegative", "aria-describedby", "aria-label", "class", "clearLabel", "clearable", "decimalPlaces", "decreaseLabel", "description", "disableSteppers", "error", "icon", "id", "increaseLabel", "label", "locale", "max", "min", "onClear", "onValueCommit", "onValueChange", "prefix", "required", "showSteppers", "step", "suffix", "value"]);
+  const meta = createFieldMeta(local.id);
+  const [focused, setFocused] = createSignal(false);
+  const value = () => resolveMaybeAccessor(local.value);
+  const error = () => resolveMaybeAccessor(local.error);
+  const contextLocale = useLocale();
+  const messages = useUiMessages();
+  const separator = createMemo(() => decimalSeparator(local.locale ?? contextLocale()));
+  // The visible text keeps the canonical number, only the decimal separator
+  // follows the effective locale; grouping is never rendered while editing.
+  const display = value => value == null ? "" : String(value).replace(".", separator());
+  const [raw, setRaw] = createSignal(display(value()));
+  const places = () => Math.max(0, local.decimalPlaces ?? 0);
+  const min = () => local.min ?? -Infinity;
+  const max = () => local.max ?? Infinity;
+  const step = () => local.step ?? 1;
+  const filter = input => {
+    let output = "";
+    let decimal = false;
+    for (const character of input) {
+      if (/\d/.test(character)) output += character;else if (character === "-" && output === "" && (local.allowNegative ?? true)) output += character;else if ((character === "." || character === "," || character === separator()) && !decimal && places() > 0) {
+        output += separator();
+        decimal = true;
+      }
+    }
+    if (decimal) {
+      const [integer = "", fraction = ""] = output.split(separator());
+      return `${integer}${separator()}${fraction.slice(0, places())}`;
+    }
+    return output;
+  };
+  const parse = input => {
+    const canonical = input.replace(separator(), ".");
+    if (!canonical || canonical === "-" || canonical === ".") return null;
+    const number = places() === 0 ? Number.parseInt(canonical, 10) : Number(canonical);
+    return Number.isFinite(number) ? number : null;
+  };
+  const normalize = value => {
+    if (value === null) return null;
+    const clamped = Math.max(min(), Math.min(max(), value));
+    const anchor = Number.isFinite(min()) ? min() : 0;
+    const snapped = step() > 0 ? Math.round((clamped - anchor) / step()) * step() + anchor : clamped;
+    const bounded = Math.max(min(), Math.min(max(), snapped));
+    return places() === 0 ? Math.round(bounded) : Number(bounded.toFixed(places()));
+  };
+  const emit = value => local.onValueChange?.(value);
+  const commit = (value, changeAlreadyEmitted = false) => {
+    const next = normalize(value);
+    setRaw(display(next));
+    if (!changeAlreadyEmitted || !Object.is(next, value)) emit(next);
+    local.onValueCommit?.(next);
+  };
+  const stepBy = direction => {
+    if (rest.disabled || local.disableSteppers) return;
+    const seed = value() ?? (Number.isFinite(min()) ? min() : 0);
+    commit(seed + direction * step());
+  };
+  createEffect(() => {
+    if (focused()) return;
+    if (parse(raw()) !== value()) setRaw(display(value()));
+  });
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return local.class;
+    },
+    get label() {
+      return local.label;
+    },
+    get description() {
+      return local.description;
+    },
+    get error() {
+      return error();
+    },
+    meta: meta,
+    get required() {
+      return local.required;
+    },
+    get disabled() {
+      return rest.disabled;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$ssrAttribute("data-disabled", rest.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.showSteppers ?? true;
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(local.decreaseLabel ?? messages().decreaseValue, true), false), _$ssrAttribute("disabled", rest.disabled || local.disableSteppers || value() !== null && value() !== undefined && value() <= min(), true));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.icon;
+        },
+        get children() {
+          return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(local.icon, true), false), _$ssrAttribute("class", _$escape(local.activeIcon ?? local.icon, true), false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.prefix;
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$escape(local.prefix));
+        }
+      })), _$ssrElement("input", _$mergeProps(rest, {
+        get id() {
+          return meta.controlId;
+        },
+        "class": "k2b-input k2b-number-input__control",
+        get ["data-filled"]() {
+          return raw() ? "true" : undefined;
+        },
+        type: "text",
+        role: "spinbutton",
+        get inputmode() {
+          return places() === 0 ? "numeric" : "decimal";
+        },
+        get value() {
+          return raw();
+        },
+        get required() {
+          return local.required;
+        }
+      }, () => fieldControlAria(meta, local), {
+        get ["aria-valuemin"]() {
+          return Number.isFinite(min()) ? min() : undefined;
+        },
+        get ["aria-valuemax"]() {
+          return Number.isFinite(max()) ? max() : undefined;
+        },
+        get ["aria-valuenow"]() {
+          return (focused() ? parse(raw()) : value()) ?? undefined;
+        }
+      }), undefined, false), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.suffix;
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$escape(local.suffix));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.clearable && raw() && !rest.disabled && !rest.readOnly;
+        },
+        get children() {
+          return _$ssr(_tmpl$4, _$ssrAttribute("aria-label", _$escape(local.clearLabel ?? messages().clear, true), false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return local.showSteppers ?? true;
+        },
+        get children() {
+          return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(local.increaseLabel ?? messages().increaseValue, true), false), _$ssrAttribute("disabled", rest.disabled || local.disableSteppers || value() !== null && value() !== undefined && value() >= max(), true));
+        }
+      })));
+    }
+  });
+}
+export default NumberInput;
+//# sourceMappingURL=NumberInput.js.map