@k2b/ui 0.1.0-rc.0

package/dist/ssr/feedback/prompts.js

@@ -0,0 +1,703 @@
+import { ssrStyleProperty as _$ssrStyleProperty } 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";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<header class=\"k2b-dialog__header\">", "", "<button type=\"button\" class=\"k2b-dialog__close\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></header>"],
+  _tmpl$2 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$3 = "<span class=\"k2b-dialog__header-spacer\"></span>",
+  _tmpl$4 = ["<h2>", "</h2>"],
+  _tmpl$5 = ["<p>", "</p>"],
+  _tmpl$6 = ["<button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button>"],
+  _tmpl$7 = ["<form class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body k2b-prompt-form\">", "</div><footer class=\"k2b-dialog__actions\">", "<button type=\"submit\" class=\"k2b-button\"", ">", "</button></footer></form>"],
+  _tmpl$8 = ["<div class=\"k2b-prompt-form__info\">", "</div>"],
+  _tmpl$9 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$0 = ["<div", " class=\"k2b-prompt-search__list\" role=\"listbox\"", ">", "</div>"],
+  _tmpl$1 = ["<div class=\"k2b-prompt-search-shell\">", "<div class=\"k2b-prompt-search\"><label class=\"k2b-prompt-search__input\"><i", " aria-hidden=\"true\"></i><input", " type=\"search\" role=\"combobox\"", " aria-autocomplete=\"list\"", " spellcheck=\"false\" autocapitalize=\"off\" autocomplete=\"off\" autocorrect=\"off\">", "</label><div class=\"k2b-prompt-search__collapse\" style=\"", "\"><div class=\"k2b-prompt-search__results\">", "", "</div></div></div></div>"],
+  _tmpl$10 = ["<p class=\"k2b-prompt-search-shell__title\">", "</p>"],
+  _tmpl$11 = ["<div class=\"k2b-prompt-search__error\" role=\"status\" aria-live=\"polite\">", "</div>"],
+  _tmpl$12 = ["<p role=\"status\" aria-live=\"polite\">", "</p>"],
+  _tmpl$13 = ["<img", " alt>"],
+  _tmpl$14 = ["<span class=\"k2b-prompt-search__preview\">", "</span>"],
+  _tmpl$15 = ["<button type=\"button\"", " role=\"option\"", ">", "<span class=\"k2b-prompt-search__copy\"><strong>", "</strong>", "</span></button>"],
+  _tmpl$16 = ["<small>", "</small>"],
+  _tmpl$17 = ["<div class=\"k2b-prompt-copy\">", "</div>"],
+  _tmpl$18 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\"", ">", "</button></footer></div>"],
+  _tmpl$19 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button><button type=\"button\" class=\"k2b-button\"", ">", "</button></footer></div>"],
+  _tmpl$20 = ["<form class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body k2b-prompt-form\"><div class=\"k2b-prompt-copy\">", "</div>", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\" data-variant=\"secondary\">", "</button><button type=\"submit\" class=\"k2b-button\"", "", ">", "</button></footer></form>"],
+  _tmpl$21 = ["<code class=\"k2b-confirmation-phrase\">", "</code>"],
+  _tmpl$22 = ["<div class=\"k2b-dialog__panel k2b-dialog__stack\">", "", "</div>"],
+  _tmpl$23 = ["<div class=\"k2b-dialog__panel\">", "<div class=\"k2b-dialog__body\">", "</div><footer class=\"k2b-dialog__actions\"><button type=\"button\" class=\"k2b-button\">", "</button></footer></div>"];
+import { mutation, timed } from "@k2b/stdlib/solid";
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+import { Checkbox } from "../inputs/Checkbox";
+import { PinInput } from "../inputs/ChoiceInputs";
+import { DatePicker, DateTimePicker } from "../inputs/DatePicker";
+import { ImageInput } from "../inputs/FileInputs";
+import { NumberInput } from "../inputs/NumberInput";
+import { Select } from "../inputs/Select";
+import { TagsInput } from "../inputs/TagsInput";
+import { TextInput } from "../inputs/TextInput";
+import { resolveUiMessages } from "../intl/messages";
+import { dialogCore } from "./dialog-core";
+const isEmpty = value => value === undefined || value === null || value === "" || Array.isArray(value) && value.length === 0;
+export const createFormState = schema => {
+  const messages = resolveUiMessages();
+  const [values, setValues] = createStore({});
+  const [errors, setErrors] = createStore({});
+  for (const [key, field] of Object.entries(schema)) {
+    if (field.type !== "info" && "default" in field) setValues(key, field.default);
+  }
+  const validateField = (key, value) => {
+    const field = schema[key];
+    if (!field || field.type === "info") return null;
+    if (field.type === "boolean" && field.required && value !== true) return messages.required;
+    if (field.required && isEmpty(value)) return messages.required;
+    if ("validate" in field && field.validate) {
+      const customError = field.validate(value);
+      if (customError) return customError;
+    }
+    if (field.type === "text" && typeof value === "string" && value.length > 0) {
+      if (field.minLength !== undefined && value.length < field.minLength) return `minimum ${field.minLength} characters`;
+      if (field.maxLength !== undefined && value.length > field.maxLength) return `maximum ${field.maxLength} characters`;
+    }
+    if (field.type === "tags" && Array.isArray(value) && value.length > 0) {
+      if (field.minTags !== undefined && value.length < field.minTags) return `minimum ${field.minTags} tags`;
+      if (field.maxTags !== undefined && value.length > field.maxTags) return `maximum ${field.maxTags} tags`;
+    }
+    return null;
+  };
+  const updateField = (key, value) => {
+    setValues(key, value);
+    setErrors(key, validateField(key, value) ?? undefined);
+  };
+  const validateAll = () => {
+    let valid = true;
+    for (const [key, field] of Object.entries(schema)) {
+      if (field.type === "info") continue;
+      const error = validateField(key, values[key]);
+      setErrors(key, error ?? undefined);
+      if (error) valid = false;
+    }
+    return valid;
+  };
+  const reset = () => {
+    for (const [key, field] of Object.entries(schema)) {
+      if (field.type === "info") continue;
+      setValues(key, "default" in field ? field.default : undefined);
+      setErrors(key, undefined);
+    }
+  };
+  return {
+    values,
+    errors,
+    updateField,
+    validateAll,
+    reset
+  };
+};
+export const DialogHeader = props => _$ssr(_tmpl$, _$escape(_$createComponent(Show, {
+  get when() {
+    return props.icon;
+  },
+  children: icon => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(icon(), true), false))
+})), _$escape(_$createComponent(Show, {
+  get when() {
+    return props.title;
+  },
+  get fallback() {
+    return _$ssr(_tmpl$3);
+  },
+  children: title => _$ssr(_tmpl$4, _$escape(title()))
+})), _$ssrAttribute("aria-label", _$escape(resolveUiMessages().closeDialog, true), false));
+const panelClass = options => {
+  const size = options?.size ?? "medium";
+  const variant = options?.variant && options.variant !== "primary" ? ` k2b-dialog--${options.variant}` : "";
+  return `k2b-dialog k2b-dialog--${size}${variant}${options?.surface === "bare" ? " is-bare" : ""}`;
+};
+const contentClass = surface => surface === "bare" ? "k2b-dialog__viewport is-bare" : "k2b-dialog__viewport";
+const renderInfo = content => {
+  if (typeof content === "string") return _$ssr(_tmpl$5, _$escape(content));
+  if (typeof content === "function") return content();
+  return content;
+};
+const PromptControl = props => {
+  const label = props.field.label || undefined;
+  switch (props.field.type) {
+    case "text":
+      return _$createComponent(TextInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        get value() {
+          return String(props.value() ?? "");
+        },
+        onValueChange: value => props.update(value ?? undefined),
+        get onSubmit() {
+          return props.submit;
+        },
+        get multiline() {
+          return props.field.multiline;
+        },
+        get lines() {
+          return props.field.lines;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        },
+        get password() {
+          return props.field.password;
+        },
+        get markdown() {
+          return props.field.markdown;
+        },
+        get minLength() {
+          return props.field.minLength;
+        },
+        get maxLength() {
+          return props.field.maxLength;
+        }
+      });
+    case "number":
+      return _$createComponent(NumberInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        get value() {
+          return typeof props.value() === "number" ? props.value() : null;
+        },
+        onValueChange: value => props.update(value ?? undefined),
+        get min() {
+          return props.field.min;
+        },
+        get max() {
+          return props.field.max;
+        },
+        get step() {
+          return props.field.step;
+        }
+      });
+    case "image":
+      return _$createComponent(ImageInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => typeof props.value() === "string" ? props.value() : null,
+        onValueChange: value => props.update(value ?? undefined),
+        get round() {
+          return props.field.round;
+        },
+        get ["aria-label"]() {
+          return props.field.ariaLabel;
+        },
+        get accept() {
+          return props.field.accept;
+        }
+      });
+    case "pin":
+      return _$createComponent(PinInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => String(props.value() ?? ""),
+        get onValueChange() {
+          return props.update;
+        },
+        get length() {
+          return props.field.length;
+        },
+        get stretch() {
+          return props.field.stretch;
+        }
+      });
+    case "select":
+      return _$createComponent(Select, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => typeof props.value() === "string" ? props.value() : null,
+        onValueChange: value => props.update(value ?? undefined),
+        get options() {
+          return props.field.options;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        },
+        get clearable() {
+          return props.field.clearable;
+        }
+      });
+    case "tags":
+      return _$createComponent(TagsInput, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get placeholder() {
+          return props.field.placeholder;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => Array.isArray(props.value()) ? props.value() : [],
+        get onValueChange() {
+          return props.update;
+        },
+        get maxTags() {
+          return props.field.maxTags;
+        },
+        get icon() {
+          return props.field.icon;
+        },
+        get activeIcon() {
+          return props.field.activeIcon;
+        }
+      });
+    case "boolean":
+      return _$createComponent(Checkbox, {
+        label: label,
+        get description() {
+          return props.field.description;
+        },
+        get required() {
+          return props.field.required;
+        },
+        get error() {
+          return props.error;
+        },
+        value: () => Boolean(props.value()),
+        get onValueChange() {
+          return props.update;
+        }
+      });
+    case "datetime":
+      {
+        const pickerProps = {
+          label,
+          description: props.field.description,
+          required: props.field.required,
+          placeholder: props.field.placeholder,
+          error: props.error,
+          value: () => typeof props.value() === "string" ? props.value() : null,
+          onValueChange: value => props.update(value ?? ""),
+          clearable: true
+        };
+        return props.field.dateOnly ? _$createComponent(DatePicker, pickerProps) : _$createComponent(DateTimePicker, pickerProps);
+      }
+  }
+};
+const PromptFormDialog = props => {
+  const state = createFormState(props.config.fields);
+  const submit = () => {
+    if (state.validateAll()) props.close(state.values);
+  };
+  const handleSubmit = event => {
+    event.preventDefault();
+    submit();
+  };
+  return _$ssr(_tmpl$7, _$escape(_$createComponent(DialogHeader, {
+    get title() {
+      return props.config.title;
+    },
+    get icon() {
+      return props.config.icon;
+    },
+    close: () => props.close(null)
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return Object.entries(props.config.fields);
+    },
+    children: ([key, field]) => {
+      if (field.type === "info") return _$ssr(_tmpl$8, _$escape(renderInfo(field.content)));
+      return _$createComponent(PromptControl, {
+        field: field,
+        value: () => state.values[key],
+        update: value => state.updateField(key, value),
+        error: () => state.errors[key],
+        submit: submit
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.config.cancelText !== false;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$escape(props.config.cancelText || resolveUiMessages().cancel));
+    }
+  })), _$ssrAttribute("data-variant", _$escape(props.config.variant ?? "primary", true), false), _$escape(props.config.confirmText ?? resolveUiMessages().save));
+};
+const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
+  const [query, setQuery] = createSignal(options?.initialQuery ?? "");
+  const [items, setItems] = createSignal([]);
+  const [activeIndex, setActiveIndex] = createSignal(0);
+  const [hasLoaded, setHasLoaded] = createSignal(false);
+  const [failedPreviews, setFailedPreviews] = createStore({});
+  const [activeSearchQuery, setActiveSearchQuery] = createSignal("");
+  const rowRefs = new Map();
+  const searchId = `k2b-prompt-search-${createUniqueId()}`;
+  const listboxId = `${searchId}-listbox`;
+  const optionId = index => `${searchId}-option-${index}`;
+  const minQueryLength = options?.minQueryLength ?? 0;
+  const debounceMs = options?.debounceMs ?? 180;
+  const searchMutation = mutation.create({
+    onBefore: requestQuery => ({
+      requestQuery
+    }),
+    mutation: async (requestQuery, context) => {
+      const result = await resolver({
+        query: requestQuery,
+        abortSignal: context.abortSignal
+      });
+      return {
+        query: requestQuery,
+        items: (result ?? []).slice()
+      };
+    },
+    onSuccess: (result, context) => {
+      if (!context || context.requestQuery !== activeSearchQuery()) return;
+      setItems(result.items);
+      setActiveIndex(0);
+      setHasLoaded(true);
+    },
+    onError: (error, context) => {
+      if (!context || context.requestQuery !== activeSearchQuery() || error.name === "AbortError") return;
+      setItems([]);
+      setActiveIndex(0);
+      setHasLoaded(true);
+    }
+  });
+  const searchError = createMemo(() => {
+    const error = searchMutation.error();
+    if (!error || error.name === "AbortError") return null;
+    return error.message || resolveUiMessages().searchFailed;
+  });
+  const shouldShowResults = createMemo(() => {
+    if (query().trim().length < minQueryLength) return false;
+    return hasLoaded() || searchError() !== null || items().length > 0;
+  });
+  const emptyStateText = createMemo(() => {
+    if (!hasLoaded()) return options?.emptyText ?? resolveUiMessages().typeToSearch;
+    return options?.noResultsText ?? resolveUiMessages().noResults;
+  });
+  const {
+    debouncedFn: debounceSearch,
+    cancel: cancelDebounce
+  } = timed.debounce(nextQuery => {
+    setActiveSearchQuery(nextQuery);
+    searchMutation.abort();
+    void searchMutation.mutate(nextQuery);
+  }, debounceMs);
+  const execute = item => {
+    if (!item) return;
+    close(item);
+  };
+  const moveSelection = delta => {
+    const list = items();
+    if (list.length === 0) return;
+    setActiveIndex((activeIndex() + delta + list.length) % list.length);
+  };
+  createEffect(() => {
+    const list = items();
+    const maxIndex = list.length - 1;
+    if (maxIndex < 0) {
+      setActiveIndex(0);
+      return;
+    }
+    if (activeIndex() > maxIndex) setActiveIndex(maxIndex);
+    rowRefs.get(activeIndex())?.scrollIntoView({
+      block: "nearest"
+    });
+  });
+  createEffect(() => {
+    const nextQuery = query().trim();
+    setFailedPreviews({});
+    if (nextQuery.length < minQueryLength) {
+      cancelDebounce();
+      searchMutation.abort();
+      setItems([]);
+      setActiveIndex(0);
+      setHasLoaded(false);
+      setActiveSearchQuery("");
+      return;
+    }
+    debounceSearch(nextQuery);
+  });
+  onCleanup(() => {
+    cancelDebounce();
+    searchMutation.abort();
+  });
+  return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
+    get when() {
+      return options?.title;
+    },
+    children: title => _$ssr(_tmpl$10, _$escape(title()))
+  })), _$ssrAttribute("class", _$escape(options?.icon ?? "ti ti-search", true), false), _$ssrAttribute("id", _$escape(searchId, true), false), _$ssrAttribute("aria-label", _$escape(options?.ariaLabel ?? options?.title ?? resolveUiMessages().search, true), false), _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-expanded", _$escape(shouldShowResults(), true), false) + _$ssrAttribute("aria-activedescendant", shouldShowResults() && items().length > 0 ? _$escape(optionId(activeIndex()), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(searchMutation.loading(), true), false) + _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(options?.placeholder ?? resolveUiMessages().search, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return searchMutation.loading();
+    },
+    get children() {
+      return _$ssr(_tmpl$9);
+    }
+  })), _$ssrStyleProperty("height:", shouldShowResults() ? "var(--k2b-search-body-max)" : "0px") + _$ssrStyleProperty(";opacity:", shouldShowResults() ? "1" : "0"), _$escape(_$createComponent(Show, {
+    get when() {
+      return searchError();
+    },
+    children: message => _$ssr(_tmpl$11, _$escape(message()))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return items().length > 0;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$12, _$escape(emptyStateText()));
+    },
+    get children() {
+      return _$ssr(_tmpl$0, _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(resolveUiMessages().searchResults, true), false), _$escape(_$createComponent(For, {
+        get each() {
+          return items();
+        },
+        children: (item, index) => _$ssr(_tmpl$15, _$ssrAttribute("id", _$escape(optionId(index()), true), false), _$ssrAttribute("aria-selected", _$escape(activeIndex(), true) === _$escape(index(), true), false) + _$ssrAttribute("data-active", activeIndex() === index() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-description", item.desc ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+          get when() {
+            return item.previewUrl?.startsWith("/") || item.icon;
+          },
+          get children() {
+            return _$ssr(_tmpl$14, _$escape(_$createComponent(Show, {
+              get when() {
+                return item.previewUrl?.startsWith("/") && !failedPreviews[index()];
+              },
+              get fallback() {
+                return _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(item.icon ?? "ti ti-file", true), false));
+              },
+              get children() {
+                return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(item.previewUrl, true), false));
+              }
+            })));
+          }
+        })), _$escape(item.label), _$escape(_$createComponent(Show, {
+          get when() {
+            return item.desc;
+          },
+          children: description => _$ssr(_tmpl$16, _$escape(description()))
+        })))
+      })));
+    }
+  })));
+}, {
+  panelClassName: "k2b-dialog k2b-dialog--search is-bare",
+  contentClassName: "k2b-dialog__viewport is-search",
+  initialFocus: "first-input",
+  cancelBehavior: options?.cancelBehavior,
+  ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().search
+});
+const promptText = (content, defaultValue, options) => prompts.form({
+  ...options,
+  fields: {
+    message: {
+      type: "info",
+      content: () => _$ssr(_tmpl$17, _$escape(content))
+    },
+    value: {
+      type: "text",
+      label: false,
+      default: defaultValue || ""
+    }
+  }
+}).then(result => result?.value ?? null);
+const promptNumber = (content, defaultValue, options) => prompts.form({
+  ...options,
+  fields: {
+    message: {
+      type: "info",
+      content: () => _$ssr(_tmpl$17, _$escape(content))
+    },
+    value: {
+      type: "number",
+      label: false,
+      default: defaultValue || 0,
+      min: options?.min,
+      max: options?.max
+    }
+  }
+}).then(result => result?.value ?? null);
+export const prompts = {
+  alert: (content, options) => dialogCore.open(close => _$ssr(_tmpl$18, _$escape(_$createComponent(DialogHeader, {
+    get title() {
+      return options?.title || resolveUiMessages().info;
+    },
+    get icon() {
+      return options?.icon;
+    },
+    close: () => close()
+  })), _$escape(content), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$escape(options?.confirmText || resolveUiMessages().ok)), {
+    panelClassName: panelClass(options),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().info
+  }),
+  success: (content, options) => prompts.alert(content, {
+    ...options,
+    variant: "success",
+    title: options?.title ?? resolveUiMessages().success,
+    icon: options?.icon ?? "ti ti-check"
+  }),
+  confirm: (content, options) => {
+    const confirmationPhrase = options?.confirmationPhrase;
+    if (confirmationPhrase !== undefined && (confirmationPhrase.trim().length === 0 || /[\r\n\t]/.test(confirmationPhrase))) {
+      throw new Error("confirmationPhrase must be non-empty, visible, and single-line");
+    }
+    let confirmationInput;
+    return dialogCore.open(close => {
+      if (!confirmationPhrase) {
+        return _$ssr(_tmpl$19, _$escape(_$createComponent(DialogHeader, {
+          get title() {
+            return options?.title;
+          },
+          get icon() {
+            return options?.icon;
+          },
+          close: () => close(false)
+        })), _$escape(content), _$escape(options?.cancelText || resolveUiMessages().cancel), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$escape(options?.confirmText || resolveUiMessages().confirm));
+      }
+      const [confirmationValue, setConfirmationValue] = createSignal("");
+      const canConfirm = () => confirmationValue() === confirmationPhrase;
+      const submit = event => {
+        event.preventDefault();
+        if (canConfirm()) close(true);
+      };
+      return _$ssr(_tmpl$20, _$escape(_$createComponent(DialogHeader, {
+        get title() {
+          return options?.title;
+        },
+        get icon() {
+          return options?.icon;
+        },
+        close: () => close(false)
+      })), _$escape(content), _$escape(_$createComponent(TextInput, {
+        get label() {
+          return ["Type ", _$ssr(_tmpl$21, _$escape(confirmationPhrase)), " to confirm"];
+        },
+        value: confirmationValue,
+        onValueChange: setConfirmationValue,
+        autocomplete: "off",
+        autocapitalize: "off",
+        spellcheck: false,
+        monospace: true,
+        required: true
+      })), _$escape(options?.cancelText || resolveUiMessages().cancel), _$ssrAttribute("data-variant", _$escape(options?.variant ?? "primary", true), false), _$ssrAttribute("disabled", !canConfirm(), true), _$escape(options?.confirmText || resolveUiMessages().confirm));
+    }, {
+      panelClassName: panelClass(options),
+      contentClassName: contentClass(options?.surface),
+      initialFocus: confirmationPhrase ? () => confirmationInput ?? null : undefined,
+      cancelBehavior: options?.cancelBehavior,
+      ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().confirmation
+    });
+  },
+  prompt: promptText,
+  promptNumber,
+  form: async config => (await dialogCore.open(close => _$createComponent(PromptFormDialog, {
+    config: config,
+    close: value => close(value)
+  }), {
+    panelClassName: panelClass(config),
+    contentClassName: contentClass(),
+    cancelBehavior: config.cancelBehavior,
+    ariaLabel: config.ariaLabel ?? config.title ?? resolveUiMessages().form
+  })) ?? null,
+  dialog: (component, options) => dialogCore.open(close => {
+    const body = component(close);
+    if (options?.surface === "bare" && options.header === false) return body;
+    return _$ssr(_tmpl$22, _$escape(_$createComponent(Show, {
+      get when() {
+        return options?.header !== false;
+      },
+      get children() {
+        return _$createComponent(DialogHeader, {
+          get title() {
+            return options?.title;
+          },
+          get icon() {
+            return options?.icon;
+          },
+          close: () => close(undefined)
+        });
+      }
+    })), _$escape(body));
+  }, {
+    panelClassName: panelClass(options),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().dialog
+  }),
+  search: openSearchPrompt,
+  error: (content, options) => dialogCore.open(close => _$ssr(_tmpl$23, _$escape(_$createComponent(DialogHeader, {
+    get title() {
+      return options?.title ?? resolveUiMessages().error;
+    },
+    get icon() {
+      return options?.icon ?? "ti ti-alert-circle";
+    },
+    close: close
+  })), _$escape(content), _$escape(options?.confirmText || resolveUiMessages().close)), {
+    panelClassName: panelClass({
+      ...options,
+      variant: "danger"
+    }),
+    contentClassName: contentClass(options?.surface),
+    cancelBehavior: options?.cancelBehavior,
+    ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().error
+  })
+};
+//# sourceMappingURL=prompts.js.map