@axenstudio/axen-form 0.1.1

package/dist/fields/AutocompleteField/AutocompleteField.cjs

@@ -0,0 +1,242 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+const AutocompleteField_module = require("./AutocompleteField.module.css.cjs");
+const DEBOUNCE_MS = 400;
+function AutocompleteField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options: staticOptions,
+  fetchOptions,
+  optionLabel,
+  form
+}) {
+  const [inputText, setInputText] = react.useState("");
+  const [filteredOptions, setFilteredOptions] = react.useState(
+    staticOptions ?? []
+  );
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const [loading, setLoading] = react.useState(false);
+  const abortRef = react.useRef(null);
+  const debounceRef = react.useRef(void 0);
+  const listRef = react.useRef(null);
+  const wrapperRef = react.useRef(null);
+  const getOptionLabel = react.useCallback(
+    (opt) => {
+      if (optionLabel) {
+        const val = opt[optionLabel];
+        return typeof val === "string" || typeof val === "number" ? String(val) : opt.label;
+      }
+      return opt.label;
+    },
+    [optionLabel]
+  );
+  react.useEffect(() => {
+    if (value != null && value !== "") {
+      const allOpts = staticOptions ?? filteredOptions;
+      const match = allOpts.find((o) => o.value === value);
+      if (match) setInputText(getOptionLabel(match));
+    } else {
+      setInputText("");
+    }
+  }, [value]);
+  const doSearch = react.useCallback(
+    (query) => {
+      var _a;
+      if (fetchOptions) {
+        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setLoading(true);
+        fetchOptions(query, controller.signal).then((results) => {
+          if (!controller.signal.aborted) {
+            setFilteredOptions(results);
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const filtered = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q)
+        );
+        setFilteredOptions(filtered);
+      }
+    },
+    [fetchOptions, staticOptions, getOptionLabel]
+  );
+  const handleInputChange = react.useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      form.setFieldValue(name, "");
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [form, name, doSearch]
+  );
+  const selectOption = react.useCallback(
+    (opt) => {
+      form.setFieldValue(name, opt.value);
+      setInputText(getOptionLabel(opt));
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, getOptionLabel]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown") {
+          setIsOpen(true);
+          doSearch(inputText);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+            selectOption(filteredOptions[activeIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [isOpen, activeIndex, filteredOptions, inputText, selectOption, doSearch]
+  );
+  const handleBlur = react.useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  react.useEffect(() => {
+    return () => {
+      var _a;
+      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const listboxId = `${name}-listbox`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.inputWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...aria,
+          type: "text",
+          name,
+          value: inputText,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          onFocus: () => {
+            if (inputText) {
+              doSearch(inputText);
+            }
+            setIsOpen(true);
+          },
+          placeholder,
+          disabled,
+          readOnly,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })
+    ] }),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: listboxId,
+        ref: listRef,
+        role: "listbox",
+        className: AutocompleteField_module.default.dropdown,
+        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: `${name}-opt-${i}`,
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": i === activeIndex,
+            "aria-disabled": opt.disabled,
+            className: fieldUtils.cx(
+              AutocompleteField_module.default.option,
+              i === activeIndex && AutocompleteField_module.default.optionActive,
+              opt.disabled && AutocompleteField_module.default.optionDisabled
+            ),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              if (!opt.disabled) selectOption(opt);
+            },
+            children: getOptionLabel(opt)
+          },
+          opt.value
+        ))
+      }
+    ),
+    isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutocompleteField_module.default.noResults, children: "No results found" }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.AutocompleteField = AutocompleteField;

package/dist/fields/AutocompleteField/AutocompleteField.d.ts

@@ -0,0 +1,6 @@
+import { AutocompleteOption, FieldComponentProps } from '../../types';
+export declare function AutocompleteField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, form, }: FieldComponentProps & {
+    fetchOptions?: (query: string, signal?: AbortSignal) => Promise<AutocompleteOption[]>;
+    optionLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AutocompleteField.d.ts.map

package/dist/fields/AutocompleteField/AutocompleteField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAgPA"}

package/dist/fields/AutocompleteField/AutocompleteField.js

@@ -0,0 +1,242 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import localStyles from "./AutocompleteField.module.css.js";
+const DEBOUNCE_MS = 400;
+function AutocompleteField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options: staticOptions,
+  fetchOptions,
+  optionLabel,
+  form
+}) {
+  const [inputText, setInputText] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(
+    staticOptions ?? []
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [loading, setLoading] = useState(false);
+  const abortRef = useRef(null);
+  const debounceRef = useRef(void 0);
+  const listRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const getOptionLabel = useCallback(
+    (opt) => {
+      if (optionLabel) {
+        const val = opt[optionLabel];
+        return typeof val === "string" || typeof val === "number" ? String(val) : opt.label;
+      }
+      return opt.label;
+    },
+    [optionLabel]
+  );
+  useEffect(() => {
+    if (value != null && value !== "") {
+      const allOpts = staticOptions ?? filteredOptions;
+      const match = allOpts.find((o) => o.value === value);
+      if (match) setInputText(getOptionLabel(match));
+    } else {
+      setInputText("");
+    }
+  }, [value]);
+  const doSearch = useCallback(
+    (query) => {
+      var _a;
+      if (fetchOptions) {
+        (_a = abortRef.current) == null ? void 0 : _a.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setLoading(true);
+        fetchOptions(query, controller.signal).then((results) => {
+          if (!controller.signal.aborted) {
+            setFilteredOptions(results);
+            setLoading(false);
+          }
+        }).catch((err) => {
+          if (!controller.signal.aborted && err.name !== "AbortError") {
+            setFilteredOptions([]);
+            setLoading(false);
+          }
+        });
+      } else {
+        const q = query.toLowerCase();
+        const filtered = (staticOptions ?? []).filter(
+          (opt) => getOptionLabel(opt).toLowerCase().includes(q)
+        );
+        setFilteredOptions(filtered);
+      }
+    },
+    [fetchOptions, staticOptions, getOptionLabel]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const query = e.target.value;
+      setInputText(query);
+      setIsOpen(true);
+      setActiveIndex(-1);
+      form.setFieldValue(name, "");
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSearch(query), DEBOUNCE_MS);
+    },
+    [form, name, doSearch]
+  );
+  const selectOption = useCallback(
+    (opt) => {
+      form.setFieldValue(name, opt.value);
+      setInputText(getOptionLabel(opt));
+      setIsOpen(false);
+      setActiveIndex(-1);
+    },
+    [form, name, getOptionLabel]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown") {
+          setIsOpen(true);
+          doSearch(inputText);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+            selectOption(filteredOptions[activeIndex]);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          setActiveIndex(-1);
+          break;
+      }
+    },
+    [isOpen, activeIndex, filteredOptions, inputText, selectOption, doSearch]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = abortRef.current) == null ? void 0 : _a.abort();
+      clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const listboxId = `${name}-listbox`;
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: localStyles.inputWrap, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...aria,
+          type: "text",
+          name,
+          value: inputText,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          onFocus: () => {
+            if (inputText) {
+              doSearch(inputText);
+            }
+            setIsOpen(true);
+          },
+          placeholder,
+          disabled,
+          readOnly,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          className: cx(styles.input, error && styles.inputError)
+        }
+      ),
+      loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" })
+    ] }),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: listboxId,
+        ref: listRef,
+        role: "listbox",
+        className: localStyles.dropdown,
+        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${name}-opt-${i}`,
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": i === activeIndex,
+            "aria-disabled": opt.disabled,
+            className: cx(
+              localStyles.option,
+              i === activeIndex && localStyles.optionActive,
+              opt.disabled && localStyles.optionDisabled
+            ),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              if (!opt.disabled) selectOption(opt);
+            },
+            children: getOptionLabel(opt)
+          },
+          opt.value
+        ))
+      }
+    ),
+    isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsx("div", { className: localStyles.noResults, children: "No results found" }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  AutocompleteField
+};

package/dist/fields/AutocompleteField/AutocompleteField.module.css

@@ -0,0 +1,168 @@
+._inputWrap_1hzxx_1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._spinner_1hzxx_7 {
+  position: absolute;
+  right: 0.75rem;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--axen-color-border);
+  border-top-color: var(--axen-color-primary);
+  border-radius: 50%;
+  animation: _spin_1hzxx_7 0.6s linear infinite;
+}
+
+@keyframes _spin_1hzxx_7 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._spinner_1hzxx_7 {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+/* ── Dropdown ────────────────────────────────── */
+._dropdown_1hzxx_32 {
+  position: absolute;
+  z-index: var(--axen-z-dropdown);
+  width: 100%;
+  max-height: 240px;
+  margin: 0;
+  padding: var(--axen-space-xs) 0;
+  list-style: none;
+  overflow-y: auto;
+  background: var(--axen-color-bg);
+  border: var(--axen-border-width) solid var(--axen-color-border);
+  border-top: none;
+  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+._option_1hzxx_48 {
+  display: flex;
+  align-items: center;
+  padding: var(--axen-space-sm) var(--axen-field-padding-x);
+  font-size: var(--axen-font-size-md);
+  color: var(--axen-color-text);
+  cursor: pointer;
+  min-height: var(--axen-field-min-height);
+  transition: background-color var(--axen-transition-fast);
+}
+
+._option_1hzxx_48:hover {
+  background-color: var(--axen-color-bg-hover);
+}
+
+._optionActive_1hzxx_63 {
+  background-color: var(--axen-color-primary-light);
+}
+
+._optionDisabled_1hzxx_67 {
+  color: var(--axen-color-text-disabled);
+  cursor: not-allowed;
+}
+
+._noResults_1hzxx_72 {
+  padding: var(--axen-space-sm) var(--axen-field-padding-x);
+  font-size: var(--axen-font-size-sm);
+  color: var(--axen-color-text-secondary);
+  border: var(--axen-border-width) solid var(--axen-color-border);
+  border-top: none;
+  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
+  background: var(--axen-color-bg);
+}
+
+/* ── Chip (used by multi) ────────────────────── */
+._chipWrap_1hzxx_83 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--axen-space-xs);
+  padding: var(--axen-space-xs);
+}
+
+._chip_1hzxx_83 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--axen-space-xs);
+  padding: 2px 8px;
+  font-size: var(--axen-font-size-xs);
+  color: var(--axen-color-text);
+  background-color: var(--axen-color-primary-light);
+  border-radius: var(--axen-border-radius-pill);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._chipRemove_1hzxx_105 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--axen-color-text-secondary);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+._chipRemove_1hzxx_105:hover {
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--axen-color-text);
+}
+
+._chipRemove_1hzxx_105:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+}
+
+/* ── Ghost text (predict) ────────────────────── */
+._predictWrap_1hzxx_131 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._ghostText_1hzxx_137 {
+  position: absolute;
+  left: var(--axen-field-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--axen-color-text-disabled);
+  font-family: var(--axen-font-family);
+  font-size: var(--axen-font-size-md);
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+._ghostHidden_1hzxx_150 {
+  visibility: hidden;
+  position: absolute;
+  white-space: pre;
+  font-family: var(--axen-font-family);
+  font-size: var(--axen-font-size-md);
+}
+
+/* ── Mobile adjustments ──────────────────────── */
+@media (max-width: 599px) {
+  ._dropdown_1hzxx_32 {
+    max-height: 200px;
+  }
+
+  ._option_1hzxx_48 {
+    min-height: 48px;
+    padding: var(--axen-space-sm) var(--axen-space-md);
+  }
+}

package/dist/fields/AutocompleteField/AutocompleteField.module.css.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const inputWrap = "_inputWrap_1hzxx_1";
+const spinner = "_spinner_1hzxx_7";
+const dropdown = "_dropdown_1hzxx_32";
+const option = "_option_1hzxx_48";
+const optionActive = "_optionActive_1hzxx_63";
+const optionDisabled = "_optionDisabled_1hzxx_67";
+const noResults = "_noResults_1hzxx_72";
+const chipWrap = "_chipWrap_1hzxx_83";
+const chip = "_chip_1hzxx_83";
+const chipRemove = "_chipRemove_1hzxx_105";
+const predictWrap = "_predictWrap_1hzxx_131";
+const ghostText = "_ghostText_1hzxx_137";
+const ghostHidden = "_ghostHidden_1hzxx_150";
+const localStyles = {
+  inputWrap,
+  spinner,
+  dropdown,
+  option,
+  optionActive,
+  optionDisabled,
+  noResults,
+  chipWrap,
+  chip,
+  chipRemove,
+  predictWrap,
+  ghostText,
+  ghostHidden
+};
+exports.chip = chip;
+exports.chipRemove = chipRemove;
+exports.chipWrap = chipWrap;
+exports.default = localStyles;
+exports.dropdown = dropdown;
+exports.ghostHidden = ghostHidden;
+exports.ghostText = ghostText;
+exports.inputWrap = inputWrap;
+exports.noResults = noResults;
+exports.option = option;
+exports.optionActive = optionActive;
+exports.optionDisabled = optionDisabled;
+exports.predictWrap = predictWrap;
+exports.spinner = spinner;