@k2b/ui 0.1.0-rc.0

package/dist/ssr/inputs/SpecialInputs.js

@@ -0,0 +1,116 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { fuzzy } from "@k2b/stdlib";
+import { createMemo } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import { resolveMaybeAccessor } from "./field-contract";
+import { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from "./icon-options";
+import { Select } from "./Select";
+export function IconInput(props) {
+  const messages = useUiMessages();
+  const options = () => props.options ?? DEFAULT_ICON_OPTIONS;
+  const groups = () => props.groups ?? (props.options === undefined ? DEFAULT_ICON_GROUPS : undefined);
+  const filterOptions = (source, query) => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) {
+      return [...source].sort((left, right) => String(left.label).localeCompare(String(right.label), undefined, {
+        sensitivity: "base"
+      }));
+    }
+    return fuzzy.filter(normalized, source, {
+      // Cloud's key is `[label, ...keywords]`. Including `value` as well put
+      // the literal "ti ti-" in front of every entry, so short queries matched
+      // the whole catalogue and fuzzy scores were skewed. The bare glyph name
+      // is already the first keyword (see `icon()` in ./icon-options), so
+      // nothing is lost by dropping it.
+      key: option => {
+        const keywords = "keywords" in option && Array.isArray(option.keywords) ? option.keywords.join(" ") : "";
+        return `${String(option.label)} ${keywords}`.toLowerCase();
+      },
+      limit: props.searchLimit ?? 50
+    }).map(match => match.item);
+  };
+  const selectedOption = createMemo(() => options().find(option => option.value === resolveMaybeAccessor(props.value)));
+  return _$createComponent(Select, {
+    get id() {
+      return props.id;
+    },
+    get name() {
+      return props.name;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get ["aria-label"]() {
+      return props["aria-label"];
+    },
+    get ["aria-describedby"]() {
+      return props["aria-describedby"];
+    },
+    get placeholder() {
+      return props.placeholder ?? messages().pickIcon;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get required() {
+      return props.required;
+    },
+    get clearable() {
+      return props.clearable ?? true;
+    },
+    get value() {
+      return resolveMaybeAccessor(props.value);
+    },
+    get selectedOption() {
+      return selectedOption();
+    },
+    get onValueChange() {
+      return props.onValueChange;
+    },
+    get onValueCommit() {
+      return props.onValueCommit;
+    },
+    get options() {
+      return [...options()];
+    },
+    get groups() {
+      return groups();
+    },
+    get defaultGroup() {
+      return props.defaultGroup ?? (props.options === undefined ? "recommended" : undefined);
+    },
+    get groupsAriaLabel() {
+      return props.groupsAriaLabel ?? messages().filterIcons;
+    },
+    get allGroupLabel() {
+      return props.allGroupLabel;
+    },
+    get viewToggle() {
+      return props.viewToggle ?? true;
+    },
+    get defaultView() {
+      return props.defaultView ?? "grid";
+    },
+    get gridSize() {
+      return props.gridSize ?? "sm";
+    },
+    searchable: true,
+    filterOptions: filterOptions,
+    get searchPlaceholder() {
+      return messages().search;
+    },
+    get icon() {
+      return selectedOption()?.icon ?? "ti ti-icons";
+    }
+  });
+}
+//# sourceMappingURL=SpecialInputs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fuzzy","createMemo","useUiMessages","resolveMaybeAccessor","DEFAULT_ICON_GROUPS","DEFAULT_ICON_OPTIONS","Select","IconInput","props","messages","options","groups","undefined","filterOptions","source","query","normalized","trim","toLowerCase","sort","left","right","String","label","localeCompare","sensitivity","filter","key","option","keywords","Array","isArray","join","limit","searchLimit","map","match","item","selectedOption","find","value","_$createComponent","id","name","class","description","error","aria-label","aria-describedby","placeholder","pickIcon","disabled","required","clearable","onValueChange","onValueCommit","defaultGroup","groupsAriaLabel","filterIcons","allGroupLabel","viewToggle","defaultView","gridSize","searchable","searchPlaceholder","search","icon"],"sources":["inputs/SpecialInputs.tsx"],"sourcesContent":["import { fuzzy } from \"@k2b/stdlib\";\nimport { createMemo, type JSX } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from \"./icon-options\";\nimport { Select, type SelectGridSize, type SelectGroup, type SelectOption, type SelectView } from \"./Select\";\n\nexport type IconOption = SelectOption & { keywords?: readonly string[] };\nexport type IconInputProps = ValueFieldProps<string | null> & {\n  options?: readonly IconOption[];\n  placeholder?: string;\n  clearable?: boolean;\n  searchLimit?: number;\n  groups?: readonly SelectGroup[];\n  defaultGroup?: string;\n  groupsAriaLabel?: string;\n  allGroupLabel?: string;\n  viewToggle?: boolean;\n  defaultView?: SelectView;\n  gridSize?: SelectGridSize;\n  name?: string;\n};\n\nexport function IconInput(props: IconInputProps): JSX.Element {\n  const messages = useUiMessages();\n  const options = () => props.options ?? DEFAULT_ICON_OPTIONS;\n  const groups = () => props.groups ?? (props.options === undefined ? DEFAULT_ICON_GROUPS : undefined);\n  const filterOptions = (source: readonly SelectOption[], query: string): readonly SelectOption[] => {\n    const normalized = query.trim().toLowerCase();\n    if (!normalized) {\n      return [...source].sort((left, right) => String(left.label).localeCompare(String(right.label), undefined, { sensitivity: \"base\" }));\n    }\n    return fuzzy\n      .filter(normalized, source, {\n        // Cloud's key is `[label, ...keywords]`. Including `value` as well put\n        // the literal \"ti ti-\" in front of every entry, so short queries matched\n        // the whole catalogue and fuzzy scores were skewed. The bare glyph name\n        // is already the first keyword (see `icon()` in ./icon-options), so\n        // nothing is lost by dropping it.\n        key: (option) => {\n          const keywords = \"keywords\" in option && Array.isArray(option.keywords) ? option.keywords.join(\" \") : \"\";\n          return `${String(option.label)} ${keywords}`.toLowerCase();\n        },\n        limit: props.searchLimit ?? 50,\n      })\n      .map((match) => match.item);\n  };\n  const selectedOption = createMemo(() => options().find((option) => option.value === resolveMaybeAccessor(props.value)));\n\n  return (\n    <Select\n      id={props.id}\n      name={props.name}\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={props.error}\n      aria-label={props[\"aria-label\"]}\n      aria-describedby={props[\"aria-describedby\"]}\n      placeholder={props.placeholder ?? messages().pickIcon}\n      disabled={props.disabled}\n      required={props.required}\n      clearable={props.clearable ?? true}\n      value={resolveMaybeAccessor(props.value)}\n      selectedOption={selectedOption()}\n      onValueChange={props.onValueChange}\n      onValueCommit={props.onValueCommit}\n      options={[...options()]}\n      groups={groups()}\n      defaultGroup={props.defaultGroup ?? (props.options === undefined ? \"recommended\" : undefined)}\n      groupsAriaLabel={props.groupsAriaLabel ?? messages().filterIcons}\n      allGroupLabel={props.allGroupLabel}\n      viewToggle={props.viewToggle ?? true}\n      defaultView={props.defaultView ?? \"grid\"}\n      gridSize={props.gridSize ?? \"sm\"}\n      searchable\n      filterOptions={filterOptions}\n      searchPlaceholder={messages().search}\n      icon={selectedOption()?.icon ?? \"ti ti-icons\"}\n    />\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/Switch.js

@@ -0,0 +1,62 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } 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-field__description\">", "</span>"],
+  _tmpl$2 = ["<p", " class=\"k2b-field__error\" role=\"alert\" aria-live=\"polite\">", "</p>"],
+  _tmpl$3 = ["<div class=\"", "\"", "><label class=\"k2b-switch\">", "<span class=\"k2b-switch__track\" aria-hidden=\"true\"><span class=\"k2b-switch__thumb\"></span></span>", "</label>", "", "</div>"],
+  _tmpl$4 = "<span class=\"k2b-field__required\" aria-hidden=\"true\">*</span>",
+  _tmpl$5 = ["<span", " class=\"k2b-switch__label\">", "", "</span>"];
+import { Show, splitProps } from "solid-js";
+import { createFieldMeta, fieldControlAria } from "../internal/field";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+export function Switch(props) {
+  const [local, rest] = splitProps(props, ["label", "onValueChange", "onValueCommit", "value"]);
+  const meta = createFieldMeta(props.id);
+  const checked = () => resolveMaybeAccessor(local.value) ?? false;
+  const error = () => resolveMaybeAccessor(props.error);
+  return _$ssr(_tmpl$3, `k2b-switch-field ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-disabled", rest.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("input", _$mergeProps({
+    get id() {
+      return meta.controlId;
+    },
+    get name() {
+      return props.name;
+    },
+    type: "checkbox",
+    role: "switch",
+    get checked() {
+      return checked();
+    },
+    get disabled() {
+      return rest.disabled;
+    },
+    get required() {
+      return rest.required;
+    }
+  }, () => fieldControlAria(meta, props)), undefined, false), local.label && _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(meta.labelId, true), false), _$escape(local.label), _$escape(_$createComponent(Show, {
+    get when() {
+      return rest.required;
+    },
+    get children() {
+      return _$ssr(_tmpl$4);
+    }
+  }))), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.description;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$ssrAttribute("id", _$escape(meta.descriptionId, true), false), _$escape(props.description));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return error();
+    },
+    get children() {
+      return _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(meta.errorId, true), false), _$escape(error()));
+    }
+  })));
+}
+export default Switch;
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Show","splitProps","createFieldMeta","fieldControlAria","commitFieldValue","resolveMaybeAccessor","Switch","props","local","rest","meta","id","checked","value","error","_$ssr","_tmpl$3","_$escape","class","_$ssrAttribute","disabled","undefined","_$ssrElement","_$mergeProps","controlId","name","type","role","required","label","_tmpl$5","labelId","_$createComponent","when","children","_tmpl$4","description","_tmpl$","descriptionId","_tmpl$2","errorId"],"sources":["inputs/Switch.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport { createFieldMeta, fieldControlAria } from \"../internal/field\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\n\nexport type SwitchProps = ValueFieldProps<boolean> & {\n  name?: string;\n};\n\nexport function Switch(props: SwitchProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"label\", \"onValueChange\", \"onValueCommit\", \"value\"]);\n  const meta = createFieldMeta(props.id);\n  const checked = () => resolveMaybeAccessor(local.value) ?? false;\n  const error = () => resolveMaybeAccessor(props.error);\n\n  return (\n    <div\n      class={`k2b-switch-field ${props.class ?? \"\"}`}\n      data-disabled={rest.disabled ? \"true\" : undefined}\n      data-invalid={error() ? \"true\" : undefined}\n    >\n      <label class=\"k2b-switch\">\n        <input\n          id={meta.controlId}\n          name={props.name}\n          type=\"checkbox\"\n          role=\"switch\"\n          checked={checked()}\n          disabled={rest.disabled}\n          required={rest.required}\n          {...fieldControlAria(meta, props)}\n          onChange={(event) => commitFieldValue(local, event.currentTarget.checked)}\n        />\n        <span class=\"k2b-switch__track\" aria-hidden=\"true\">\n          <span class=\"k2b-switch__thumb\" />\n        </span>\n        {local.label && (\n          <span id={meta.labelId} class=\"k2b-switch__label\">\n            {local.label}\n            <Show when={rest.required}>\n              <span class=\"k2b-field__required\" aria-hidden=\"true\">\n                *\n              </span>\n            </Show>\n          </span>\n        )}\n      </label>\n      <Show when={props.description}>\n        <span id={meta.descriptionId} class=\"k2b-field__description\">\n          {props.description}\n        </span>\n      </Show>\n      <Show when={error()}>\n        <p id={meta.errorId} class=\"k2b-field__error\" role=\"alert\" aria-live=\"polite\">\n          {error()}\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAAA,SAAmBA,IAAI,EAAEC,UAAU,QAAQ,UAAU;AACrD,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,mBAAmB;AAErE,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,kBAAkB;AAMzE,OAAO,SAASC,MAAMA,CAACC,KAAkB,EAAe;EACtD,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGR,UAAU,CAACM,KAAK,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;EAC7F,MAAMG,IAAI,GAAGR,eAAe,CAACK,KAAK,CAACI,EAAE,CAAC;EACtC,MAAMC,OAAO,GAAGA,CAAA,KAAMP,oBAAoB,CAACG,KAAK,CAACK,KAAK,CAAC,IAAI,KAAK;EAChE,MAAMC,KAAK,GAAGA,CAAA,KAAMT,oBAAoB,CAACE,KAAK,CAACO,KAAK,CAAC;EAErD,OAAAC,KAAA,CAAAC,OAAA,EAEW,oBAAAC,QAAA,CAAoBV,KAAK,CAACW,KAAK,IAAI,EAAE,SAAE,EAAAC,cAAA,kBAC/BV,IAAI,CAACW,QAAQ,GAAG,MAAM,GAAAH,QAAA,CAAGI,SAAS,kBAAAF,cAAA,iBACnCL,KAAK,CAAC,CAAC,GAAG,MAAM,GAAAG,QAAA,CAAGI,SAAS,iBAAAC,YAAA,UAAAC,YAAA;IAAA,IAItCZ,EAAEA,CAAA;MAAA,OAAED,IAAI,CAACc,SAAS;IAAA;IAAA,IAClBC,IAAIA,CAAA;MAAA,OAAElB,KAAK,CAACkB,IAAI;IAAA;IAChBC,IAAI,EAAC,UAAU;IACfC,IAAI,EAAC,QAAQ;IAAA,IACbf,OAAOA,CAAA;MAAA,OAAEA,OAAO,CAAC,CAAC;IAAA;IAAA,IAClBQ,QAAQA,CAAA;MAAA,OAAEX,IAAI,CAACW,QAAQ;IAAA;IAAA,IACvBQ,QAAQA,CAAA;MAAA,OAAEnB,IAAI,CAACmB,QAAQ;IAAA;EAAA,SACnBzB,gBAAgB,CAACO,IAAI,EAAEH,KAAK,CAAC,GAAAc,SAAA,UAMlCb,KAAK,CAACqB,KAAK,IAAAd,KAAA,CAAAe,OAAA,EAAAX,cAAA,OAAAF,QAAA,CACAP,IAAI,CAACqB,OAAO,iBAAAd,QAAA,CACnBT,KAAK,CAACqB,KAAK,GAAAZ,QAAA,CAAAe,iBAAA,CACXhC,IAAI;IAAA,IAACiC,IAAIA,CAAA;MAAA,OAAExB,IAAI,CAACmB,QAAQ;IAAA;IAAA,IAAAM,SAAA;MAAA,OAAAnB,KAAA,CAAAoB,OAAA;IAAA;EAAA,IAM5B,EAAAlB,QAAA,CAAAe,iBAAA,CAEFhC,IAAI;IAAA,IAACiC,IAAIA,CAAA;MAAA,OAAE1B,KAAK,CAAC6B,WAAW;IAAA;IAAA,IAAAF,SAAA;MAAA,OAAAnB,KAAA,CAAAsB,MAAA,EAAAlB,cAAA,OAAAF,QAAA,CACjBP,IAAI,CAAC4B,aAAa,iBAAArB,QAAA,CACzBV,KAAK,CAAC6B,WAAW;IAAA;EAAA,KAAAnB,QAAA,CAAAe,iBAAA,CAGrBhC,IAAI;IAAA,IAACiC,IAAIA,CAAA;MAAA,OAAEnB,KAAK,CAAC,CAAC;IAAA;IAAA,IAAAoB,SAAA;MAAA,OAAAnB,KAAA,CAAAwB,OAAA,EAAApB,cAAA,OAAAF,QAAA,CACVP,IAAI,CAAC8B,OAAO,iBAAAvB,QAAA,CAChBH,KAAK,CAAC,CAAC;IAAA;EAAA;AAKlB;AAEA,eAAeR,MAAM","ignoreList":[]}

package/dist/ssr/inputs/TagEditor.js

@@ -0,0 +1,280 @@
+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$ = ["<form class=\"k2b-tag-editor__form\"", "><div class=\"k2b-tag-editor__fields\">", "", "</div>", "<div class=\"k2b-tag-editor__form-actions\">", "", "</div></form>"],
+  _tmpl$2 = ["<p class=\"k2b-tag-editor__error\" role=\"alert\">", "</p>"],
+  _tmpl$3 = ["<ul class=\"k2b-tag-editor__list\">", "</ul>"],
+  _tmpl$4 = ["<div class=\"", "\"", ">", "", "</div>"],
+  _tmpl$5 = ["<p class=\"k2b-tag-editor__empty\">", "</p>"],
+  _tmpl$6 = ["<li class=\"k2b-tag-editor__row\">", "", "</li>"],
+  _tmpl$7 = "<i class=\"ti ti-pencil\" aria-hidden=\"true\"></i>",
+  _tmpl$8 = ["<span class=\"k2b-tag-editor__row-actions\">", "", "</span>"],
+  _tmpl$9 = "<i class=\"ti ti-trash\" aria-hidden=\"true\"></i>",
+  _tmpl$0 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>";
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { Button, IconButton } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
+import { Tag } from "../surfaces/Tag";
+import { ColorInput } from "./ChoiceInputs";
+import { TextInput } from "./TextInput";
+function EditorForm(props) {
+  const initialName = props.initial?.name ?? "";
+  const initialColor = props.initial?.color ?? props.defaultColor;
+  const [name, setName] = createSignal(initialName);
+  const [color, setColor] = createSignal(initialColor);
+  const [error, setError] = createSignal();
+  createEffect(() => props.onDirtyChange?.(name() !== initialName || color() !== initialColor));
+  onCleanup(() => props.onDirtyChange?.(false));
+  const submit = async event => {
+    event.preventDefault();
+    const normalized = name().trim();
+    if (!normalized || props.busy) return;
+    setError(undefined);
+    try {
+      await props.onSave({
+        name: normalized,
+        color: color()
+      });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : props.saveError);
+    }
+  };
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-busy", props.busy ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(TextInput, {
+    get label() {
+      return props.labels.name;
+    },
+    get placeholder() {
+      return props.labels.namePlaceholder;
+    },
+    value: name,
+    onValueChange: setName,
+    get disabled() {
+      return props.busy;
+    },
+    required: true,
+    autofocus: true
+  })), _$escape(_$createComponent(ColorInput, {
+    get ["aria-label"]() {
+      return props.labels.color;
+    },
+    value: color,
+    onValueChange: setColor,
+    onValueCommit: setColor,
+    get disabled() {
+      return props.busy;
+    },
+    compact: true
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return error();
+    },
+    children: message => _$ssr(_tmpl$2, _$escape(message()))
+  })), _$escape(_$createComponent(Button, {
+    type: "submit",
+    size: "sm",
+    get loading() {
+      return props.busy;
+    },
+    get disabled() {
+      return !name().trim();
+    },
+    get children() {
+      return props.labels.save;
+    }
+  })), _$escape(_$createComponent(Button, {
+    type: "button",
+    size: "sm",
+    variant: "ghost",
+    get disabled() {
+      return props.busy;
+    },
+    get onClick() {
+      return props.onCancel;
+    },
+    get children() {
+      return props.labels.cancel;
+    }
+  })));
+}
+
+/** Controlled tag manager. Persistence, authorization, confirmation, and toasts stay with the consumer. */
+export function TagEditor(props) {
+  const messages = useUiMessages();
+  const [mode, setMode] = createSignal(null);
+  const [busyId, setBusyId] = createSignal(null);
+  const [rowError, setRowError] = createSignal();
+  const labels = () => ({
+    create: messages().addTag,
+    empty: messages().noTagsYet,
+    name: messages().name,
+    namePlaceholder: messages().tagName,
+    color: messages().color,
+    save: messages().save,
+    cancel: messages().cancel,
+    edit: messages().edit,
+    remove: messages().delete,
+    ...props.labels
+  });
+  const defaultColor = () => props.defaultColor ?? "#6b7280";
+  const run = async (id, action) => {
+    if (busyId()) return;
+    setBusyId(id);
+    setRowError(undefined);
+    try {
+      await action();
+      setMode(null);
+    } catch (cause) {
+      setRowError({
+        id,
+        message: cause instanceof Error ? cause.message : messages().tagActionFailed
+      });
+      throw cause;
+    } finally {
+      setBusyId(null);
+    }
+  };
+  return _$ssr(_tmpl$4, `k2b-tag-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.items.length > 0;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$5, _$escape(labels().empty));
+    },
+    get children() {
+      return _$ssr(_tmpl$3, _$escape(_$createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: item => _$ssr(_tmpl$6, _$escape(_$createComponent(Show, {
+          get when() {
+            return mode() === item.id && props.onUpdate;
+          },
+          get fallback() {
+            return [_$createComponent(Tag, {
+              get color() {
+                return item.color;
+              },
+              get children() {
+                return item.name;
+              }
+            }), _$ssr(_tmpl$8, _$escape(_$createComponent(Show, {
+              get when() {
+                return props.onUpdate;
+              },
+              get children() {
+                return _$createComponent(IconButton, {
+                  size: "xs",
+                  variant: "ghost",
+                  get label() {
+                    return `${labels().edit} ${item.name}`;
+                  },
+                  get disabled() {
+                    return props.disabled || Boolean(busyId());
+                  },
+                  onClick: () => setMode(item.id),
+                  get children() {
+                    return _$ssr(_tmpl$7);
+                  }
+                });
+              }
+            })), _$escape(_$createComponent(Show, {
+              get when() {
+                return props.onDelete;
+              },
+              children: remove => _$createComponent(IconButton, {
+                size: "xs",
+                variant: "ghost",
+                get label() {
+                  return `${labels().remove} ${item.name}`;
+                },
+                get loading() {
+                  return busyId() === item.id;
+                },
+                get disabled() {
+                  return props.disabled || Boolean(busyId());
+                },
+                onClick: () => void run(item.id, () => remove()(item)).catch(() => undefined),
+                get children() {
+                  return _$ssr(_tmpl$9);
+                }
+              })
+            })))];
+          },
+          get children() {
+            return _$createComponent(EditorForm, {
+              initial: item,
+              get labels() {
+                return labels();
+              },
+              get defaultColor() {
+                return defaultColor();
+              },
+              get busy() {
+                return busyId() === item.id;
+              },
+              get saveError() {
+                return messages().tagCouldNotBeSaved;
+              },
+              onCancel: () => setMode(null),
+              get onDirtyChange() {
+                return props.onDirtyChange;
+              },
+              onSave: value => run(item.id, () => props.onUpdate?.(item, value))
+            });
+          }
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return rowError()?.id === item.id && mode() !== item.id ? rowError() : undefined;
+          },
+          children: error => _$ssr(_tmpl$2, _$escape(error().message))
+        })))
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.onCreate;
+    },
+    children: create => _$createComponent(Show, {
+      get when() {
+        return mode() === "create";
+      },
+      get fallback() {
+        return _$createComponent(Button, {
+          size: "xs",
+          variant: "subtle",
+          get disabled() {
+            return props.disabled || Boolean(busyId());
+          },
+          onClick: () => setMode("create"),
+          get children() {
+            return [_$ssr(_tmpl$0), labels().create];
+          }
+        });
+      },
+      get children() {
+        return _$createComponent(EditorForm, {
+          get labels() {
+            return labels();
+          },
+          get defaultColor() {
+            return defaultColor();
+          },
+          get busy() {
+            return busyId() === "create";
+          },
+          get saveError() {
+            return messages().tagCouldNotBeSaved;
+          },
+          onCancel: () => setMode(null),
+          get onDirtyChange() {
+            return props.onDirtyChange;
+          },
+          onSave: value => run("create", () => create()(value))
+        });
+      }
+    })
+  })));
+}
+export default TagEditor;
+//# sourceMappingURL=TagEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createSignal","For","onCleanup","Show","Button","IconButton","useUiMessages","Tag","ColorInput","TextInput","EditorForm","props","initialName","initial","name","initialColor","color","defaultColor","setName","setColor","error","setError","onDirtyChange","submit","event","preventDefault","normalized","trim","busy","undefined","onSave","cause","Error","message","saveError","_$ssr","_tmpl$","_$ssrAttribute","_$escape","_$createComponent","label","labels","placeholder","namePlaceholder","value","onValueChange","disabled","required","autofocus","aria-label","onValueCommit","compact","when","children","_tmpl$2","type","size","loading","save","variant","onClick","onCancel","cancel","TagEditor","messages","mode","setMode","busyId","setBusyId","rowError","setRowError","create","addTag","empty","noTagsYet","tagName","edit","remove","delete","run","id","action","tagActionFailed","_tmpl$4","class","items","length","fallback","_tmpl$5","_tmpl$3","each","item","_tmpl$6","onUpdate","_tmpl$8","Boolean","_tmpl$7","onDelete","catch","_tmpl$9","tagCouldNotBeSaved","onCreate","_tmpl$0"],"sources":["inputs/TagEditor.tsx"],"sourcesContent":["import { createEffect, createSignal, For, type JSX, onCleanup, Show } from \"solid-js\";\nimport { Button, IconButton } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Tag } from \"../surfaces/Tag\";\nimport { ColorInput } from \"./ChoiceInputs\";\nimport { TextInput } from \"./TextInput\";\n\nexport type TagEditorItem = {\n  id: string;\n  name: string;\n  color?: string | null;\n};\n\nexport type TagEditorValue = {\n  name: string;\n  color: string;\n};\n\nexport type TagEditorLabels = {\n  create: string;\n  empty: string;\n  name: string;\n  namePlaceholder: string;\n  color: string;\n  save: string;\n  cancel: string;\n  edit: string;\n  remove: string;\n};\n\nexport type TagEditorProps<T extends TagEditorItem = TagEditorItem> = {\n  items: readonly T[];\n  onCreate?: (value: TagEditorValue) => void | Promise<void>;\n  onUpdate?: (item: T, value: TagEditorValue) => void | Promise<void>;\n  onDelete?: (item: T) => void | Promise<void>;\n  labels?: Partial<TagEditorLabels>;\n  defaultColor?: string;\n  disabled?: boolean;\n  onDirtyChange?: (dirty: boolean) => void;\n  class?: string;\n};\n\ntype EditorFormProps = {\n  initial?: TagEditorItem;\n  labels: TagEditorLabels;\n  defaultColor: string;\n  busy: boolean;\n  saveError: string;\n  onCancel: () => void;\n  onDirtyChange?: (dirty: boolean) => void;\n  onSave: (value: TagEditorValue) => Promise<void>;\n};\n\nfunction EditorForm(props: EditorFormProps): JSX.Element {\n  const initialName = props.initial?.name ?? \"\";\n  const initialColor = props.initial?.color ?? props.defaultColor;\n  const [name, setName] = createSignal(initialName);\n  const [color, setColor] = createSignal(initialColor);\n  const [error, setError] = createSignal<string>();\n\n  createEffect(() => props.onDirtyChange?.(name() !== initialName || color() !== initialColor));\n  onCleanup(() => props.onDirtyChange?.(false));\n\n  const submit = async (event: SubmitEvent) => {\n    event.preventDefault();\n    const normalized = name().trim();\n    if (!normalized || props.busy) return;\n    setError(undefined);\n    try {\n      await props.onSave({ name: normalized, color: color() });\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : props.saveError);\n    }\n  };\n\n  return (\n    <form class=\"k2b-tag-editor__form\" aria-busy={props.busy ? \"true\" : undefined} onSubmit={submit}>\n      <div class=\"k2b-tag-editor__fields\">\n        <TextInput\n          label={props.labels.name}\n          placeholder={props.labels.namePlaceholder}\n          value={name}\n          onValueChange={setName}\n          disabled={props.busy}\n          required\n          autofocus\n        />\n        <ColorInput\n          aria-label={props.labels.color}\n          value={color}\n          onValueChange={setColor}\n          onValueCommit={setColor}\n          disabled={props.busy}\n          compact\n        />\n      </div>\n      <Show when={error()}>\n        {(message) => (\n          <p class=\"k2b-tag-editor__error\" role=\"alert\">\n            {message()}\n          </p>\n        )}\n      </Show>\n      <div class=\"k2b-tag-editor__form-actions\">\n        <Button type=\"submit\" size=\"sm\" loading={props.busy} disabled={!name().trim()}>\n          {props.labels.save}\n        </Button>\n        <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={props.busy} onClick={props.onCancel}>\n          {props.labels.cancel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n\n/** Controlled tag manager. Persistence, authorization, confirmation, and toasts stay with the consumer. */\nexport function TagEditor<T extends TagEditorItem = TagEditorItem>(props: TagEditorProps<T>): JSX.Element {\n  const messages = useUiMessages();\n  const [mode, setMode] = createSignal<\"create\" | string | null>(null);\n  const [busyId, setBusyId] = createSignal<string | null>(null);\n  const [rowError, setRowError] = createSignal<{ id: string; message: string }>();\n  const labels = (): TagEditorLabels => ({\n    create: messages().addTag,\n    empty: messages().noTagsYet,\n    name: messages().name,\n    namePlaceholder: messages().tagName,\n    color: messages().color,\n    save: messages().save,\n    cancel: messages().cancel,\n    edit: messages().edit,\n    remove: messages().delete,\n    ...props.labels,\n  });\n  const defaultColor = () => props.defaultColor ?? \"#6b7280\";\n  const run = async (id: string, action: () => void | Promise<void>) => {\n    if (busyId()) return;\n    setBusyId(id);\n    setRowError(undefined);\n    try {\n      await action();\n      setMode(null);\n    } catch (cause) {\n      setRowError({ id, message: cause instanceof Error ? cause.message : messages().tagActionFailed });\n      throw cause;\n    } finally {\n      setBusyId(null);\n    }\n  };\n\n  return (\n    <div class={`k2b-tag-editor ${props.class ?? \"\"}`} data-disabled={props.disabled ? \"true\" : undefined}>\n      <Show when={props.items.length > 0} fallback={<p class=\"k2b-tag-editor__empty\">{labels().empty}</p>}>\n        <ul class=\"k2b-tag-editor__list\">\n          <For each={props.items}>\n            {(item) => (\n              <li class=\"k2b-tag-editor__row\">\n                <Show\n                  when={mode() === item.id && props.onUpdate}\n                  fallback={\n                    <>\n                      <Tag color={item.color}>{item.name}</Tag>\n                      <span class=\"k2b-tag-editor__row-actions\">\n                        <Show when={props.onUpdate}>\n                          <IconButton\n                            size=\"xs\"\n                            variant=\"ghost\"\n                            label={`${labels().edit} ${item.name}`}\n                            disabled={props.disabled || Boolean(busyId())}\n                            onClick={() => setMode(item.id)}\n                          >\n                            <i class=\"ti ti-pencil\" aria-hidden=\"true\" />\n                          </IconButton>\n                        </Show>\n                        <Show when={props.onDelete}>\n                          {(remove) => (\n                            <IconButton\n                              size=\"xs\"\n                              variant=\"ghost\"\n                              label={`${labels().remove} ${item.name}`}\n                              loading={busyId() === item.id}\n                              disabled={props.disabled || Boolean(busyId())}\n                              onClick={() => void run(item.id, () => remove()(item)).catch(() => undefined)}\n                            >\n                              <i class=\"ti ti-trash\" aria-hidden=\"true\" />\n                            </IconButton>\n                          )}\n                        </Show>\n                      </span>\n                    </>\n                  }\n                >\n                  <EditorForm\n                    initial={item}\n                    labels={labels()}\n                    defaultColor={defaultColor()}\n                    busy={busyId() === item.id}\n                    saveError={messages().tagCouldNotBeSaved}\n                    onCancel={() => setMode(null)}\n                    onDirtyChange={props.onDirtyChange}\n                    onSave={(value) => run(item.id, () => props.onUpdate?.(item, value))}\n                  />\n                </Show>\n                <Show when={rowError()?.id === item.id && mode() !== item.id ? rowError() : undefined}>\n                  {(error) => (\n                    <p class=\"k2b-tag-editor__error\" role=\"alert\">\n                      {error().message}\n                    </p>\n                  )}\n                </Show>\n              </li>\n            )}\n          </For>\n        </ul>\n      </Show>\n\n      <Show when={props.onCreate}>\n        {(create) => (\n          <Show\n            when={mode() === \"create\"}\n            fallback={\n              <Button size=\"xs\" variant=\"subtle\" disabled={props.disabled || Boolean(busyId())} onClick={() => setMode(\"create\")}>\n                <i class=\"ti ti-plus\" aria-hidden=\"true\" />\n                {labels().create}\n              </Button>\n            }\n          >\n            <EditorForm\n              labels={labels()}\n              defaultColor={defaultColor()}\n              busy={busyId() === \"create\"}\n              saveError={messages().tagCouldNotBeSaved}\n              onCancel={() => setMode(null)}\n              onDirtyChange={props.onDirtyChange}\n              onSave={(value) => run(\"create\", () => create()(value))}\n            />\n          </Show>\n        )}\n      </Show>\n    </div>\n  );\n}\n\nexport default TagEditor;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/inputs/TagsInput.js

@@ -0,0 +1,122 @@
+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-tags-input__values\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$2 = ["<div class=\"k2b-tags-input\"", "><span class=\"k2b-tags-input__icon\" aria-hidden=\"true\"><i class=\"", "\"></i><i class=\"", "\"></i></span>", "", "</div>"],
+  _tmpl$3 = ["<div", " class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"></div>"],
+  _tmpl$4 = ["<span class=\"k2b-tags-input__placeholder\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-tag\">", "</span>"],
+  _tmpl$6 = ["<input type=\"hidden\"", ">"];
+import { createEffect, createSignal, createUniqueId, Show } from "solid-js";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useUiMessages } from "../intl/messages";
+import { resolveMaybeAccessor } from "./field-contract";
+export function TagsInput(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  const announcementId = `k2b-tags-${createUniqueId()}`;
+  const error = () => resolveMaybeAccessor(props.error);
+  const placeholder = () => props.placeholder ?? messages().tagsPlaceholder;
+  const [focused, setFocused] = createSignal(false);
+  let focusStartValue = [];
+  const normalize = text => text.replace(/\s+/g, " ").trim();
+  const parseTags = text => {
+    const tags = [];
+    const seen = new Set();
+    const limit = props.maxTags === undefined ? Number.POSITIVE_INFINITY : Math.max(0, Math.floor(props.maxTags));
+    for (const rawTag of text.split(",")) {
+      const tag = normalize(rawTag);
+      if (!tag || seen.has(tag)) continue;
+      if (tags.length >= limit) break;
+      seen.add(tag);
+      tags.push(tag);
+    }
+    return tags;
+  };
+  const value = () => parseTags((resolveMaybeAccessor(props.value) ?? []).join(","));
+  const [draft, setDraft] = createSignal(value().join(", "));
+  createEffect(() => {
+    if (!focused()) setDraft(value().join(", "));
+  });
+  const announce = (previous, next) => {
+    const previousTags = new Set(previous);
+    const nextTags = new Set(next);
+    const added = next.filter(tag => !previousTags.has(tag));
+    const removed = previous.filter(tag => !nextTags.has(tag));
+    const announcement = document.getElementById(announcementId);
+    if (announcement) {
+      announcement.textContent = [added.length ? messages().tagsAdded({
+        tags: added.join(", ")
+      }) : "", removed.length ? messages().tagsRemoved({
+        tags: removed.join(", ")
+      }) : ""].filter(Boolean).join(" ");
+    }
+  };
+  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$2, _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false), `${_$escape(props.icon ?? "ti ti-tag", true)} k2b-tags-input__icon-idle`, `${_$escape(props.activeIcon ?? "ti ti-pencil", true)} k2b-tags-input__icon-active`, _$escape(_$createComponent(Show, {
+        get when() {
+          return !focused();
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$escape(_$createComponent(Show, {
+            get when() {
+              return value().length > 0;
+            },
+            get fallback() {
+              return _$ssr(_tmpl$4, _$escape(placeholder()));
+            },
+            get children() {
+              return value().map(tag => _$ssr(_tmpl$5, _$escape(tag)));
+            }
+          })));
+        }
+      })), _$ssrElement("input", _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        type: "text"
+      }, () => fieldControlAria(meta, props), {
+        get disabled() {
+          return props.disabled;
+        },
+        get placeholder() {
+          return focused() || value().length === 0 ? placeholder() : undefined;
+        },
+        get value() {
+          return draft();
+        }
+      }), undefined, false)), _$createComponent(Show, {
+        get when() {
+          return props.name;
+        },
+        children: name => _$ssr(_tmpl$6, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(value().join(","), true), false))
+      }), _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(announcementId, true), false))];
+    }
+  });
+}
+export default TagsInput;
+//# sourceMappingURL=TagsInput.js.map