@teach-in/react 1.1.0 → 1.2.0

package/dist/ui/form/index.js

@@ -38,6 +38,7 @@ __export(form_exports, {
   Form: () => Form,
   InputField: () => InputField,
   RadioField: () => RadioField,
+  SearchField: () => SearchField,
   SelectField: () => SelectField,
   SwitchField: () => SwitchField,
   TextField: () => TextField,
@@ -83,58 +84,361 @@ var DatePicker = import_react3.default.forwardRef(
 DatePicker.displayName = "TeachInUI.DatePicker";
 
 // src/ui/inputs/email/email.tsx
-var import_react5 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/ui/inputs/input/input.tsx
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_input = require("@heroui/input");
+var import_tailwind_variants = require("tailwind-variants");
+
+// src/ui/inputs/clear-button.tsx
+var import_react4 = __toESM(require("react"));
+var import_button = require("@heroui/button");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Input = import_react4.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_input.Input, { ref, ...props });
+var ClearButton = import_react4.default.forwardRef(
+  ({ onClear }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_button.Button,
+      {
+        ref,
+        isIconOnly: true,
+        "aria-label": "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
+        as: "span",
+        className: "opacity-0 transition-opacity group-hover:opacity-100",
+        color: "default",
+        radius: "full",
+        size: "sm",
+        tabIndex: 0,
+        variant: "light",
+        onPress: onClear,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XIcon, { className: "size-4 text-default-500" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "TeachInUI.ClearButton";
+
+// src/ui/inputs/input/use-input.ts
+var import_react5 = require("react");
+function useInput({
+  value,
+  defaultValue,
+  onValueChange,
+  onClear,
+  isReadOnly,
+  isClearable = true,
+  ref
+}) {
+  const inputRef = (0, import_react5.useRef)(null);
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasValue = String(currentValue).length > 0;
+  const handleValueChange = (0, import_react5.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleClear = (0, import_react5.useCallback)(() => {
+    var _a;
+    onClear == null ? void 0 : onClear();
+    handleValueChange("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [onClear, handleValueChange]);
+  const mergedRef = (0, import_react5.useCallback)(
+    (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const showClearButton = hasValue && !isReadOnly && isClearable;
+  return {
+    inputRef,
+    currentValue,
+    hasValue,
+    handleValueChange,
+    handleClear,
+    mergedRef,
+    showClearButton
+  };
+}
+
+// src/ui/inputs/input/input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var inputWrapperVariants = (0, import_tailwind_variants.tv)({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
 });
+var Input = import_react6.default.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onClear,
+    onValueChange,
+    variant,
+    classNames,
+    endContent,
+    isReadOnly,
+    isClearable,
+    ...props
+  }, ref) => {
+    const { currentValue, handleValueChange, handleClear, mergedRef, showClearButton } = useInput({
+      value,
+      defaultValue,
+      onValueChange,
+      onClear,
+      isReadOnly,
+      isClearable,
+      ref
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_input.Input,
+      {
+        ref: mergedRef,
+        classNames: {
+          ...classNames,
+          inputWrapper: inputWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultValue,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ClearButton, { onClear: handleClear })
+        ] }),
+        isReadOnly,
+        value: currentValue,
+        variant,
+        onValueChange: handleValueChange,
+        ...props
+      }
+    );
+  }
+);
 Input.displayName = "TeachInUI.Input";
 
 // src/ui/inputs/email/email.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Email = import_react5.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, { ref, autoComplete: "email", type: "email", ...props });
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Email = import_react7.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, { ref, autoComplete: "email", type: "email", ...props });
 });
 Email.displayName = "TeachInUI.Email";
 
+// src/ui/inputs/search/search.tsx
+var import_react9 = __toESM(require("react"));
+var import_lucide_react2 = require("lucide-react");
+var import_button2 = require("@heroui/button");
+var import_tailwind_variants2 = require("tailwind-variants");
+
+// src/ui/inputs/search/use-search.ts
+var import_react8 = require("react");
+function useSearch({ value, onSearch, onCancel, onKeyDown }) {
+  const handleKeyDown = (0, import_react8.useCallback)(
+    (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSearch == null ? void 0 : onSearch(event.target.value);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel == null ? void 0 : onCancel();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    },
+    [onSearch, onCancel, onKeyDown]
+  );
+  const hasValue = value !== void 0 && String(value).length > 0;
+  const handleSearchClick = (0, import_react8.useCallback)(() => {
+    if (hasValue) {
+      onSearch == null ? void 0 : onSearch(value);
+    }
+  }, [value, onSearch]);
+  return {
+    handleKeyDown,
+    handleSearchClick,
+    hasValue
+  };
+}
+
+// src/ui/inputs/search/search.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var searchIconVariants = (0, import_tailwind_variants2.tv)({
+  base: "size-5 shrink-0",
+  variants: {
+    variant: {
+      faded: "text-default-400",
+      flat: "text-default-foreground",
+      bordered: "text-default-400",
+      underlined: "text-default-foreground"
+    }
+  }
+});
+var Search = import_react9.default.forwardRef(
+  ({ variant = "bordered", radius = "full", value, onSearch, onCancel, onKeyDown, ...props }, ref) => {
+    const { handleKeyDown, handleSearchClick, hasValue } = useSearch({
+      value,
+      onSearch,
+      onCancel,
+      onKeyDown
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Input,
+      {
+        ref,
+        radius,
+        startContent: onSearch ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_button2.Button,
+          {
+            isIconOnly: true,
+            "aria-label": "\u041F\u043E\u0438\u0441\u043A",
+            isDisabled: !hasValue,
+            radius: "full",
+            size: "sm",
+            variant: "light",
+            onPress: handleSearchClick,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.SearchIcon, { className: searchIconVariants({ variant }) })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.SearchIcon, { className: searchIconVariants({ variant }) }),
+        value,
+        variant,
+        onKeyDown: handleKeyDown,
+        ...props
+      }
+    );
+  }
+);
+Search.displayName = "TeachInUI.Search";
+
 // src/ui/inputs/select/select.tsx
-var import_react6 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_select = require("@heroui/select");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Select = import_react6.default.forwardRef(
-  ({ value, items, onChange, selectionMode, ...props }, ref) => {
-    const isMultiple = selectionMode === "multiple";
-    const selectedKeys = import_react6.default.useMemo(() => {
-      if (value == null) return /* @__PURE__ */ new Set();
-      return new Set(Array.isArray(value) ? value : [value]);
-    }, [value]);
-    const handleSelectionChange = import_react6.default.useCallback(
-      (keys) => {
-        var _a;
-        if (keys === "all") return;
-        const selected = Array.from(keys).filter((key) => typeof key === "string");
-        if (isMultiple) {
-          onChange == null ? void 0 : onChange(selected);
-        } else {
-          onChange == null ? void 0 : onChange((_a = selected[0]) != null ? _a : null);
-        }
-      },
-      [onChange, isMultiple]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_tailwind_variants3 = require("tailwind-variants");
+
+// src/ui/inputs/select/use-select.ts
+var import_react10 = require("react");
+function useSelect({
+  value,
+  onChange,
+  onClear,
+  selectionMode,
+  isClearable = true
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [internalValue, setInternalValue] = (0, import_react10.useState)(
+    isMultiple ? [] : null
+  );
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasValue = currentValue != null && (Array.isArray(currentValue) ? currentValue.length > 0 : currentValue !== "");
+  const handleChange = (0, import_react10.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      if (isMultiple) {
+        onChange == null ? void 0 : onChange(newValue);
+      } else {
+        onChange == null ? void 0 : onChange(newValue);
+      }
+    },
+    [isControlled, onChange, isMultiple]
+  );
+  const handleClear = (0, import_react10.useCallback)(() => {
+    onClear == null ? void 0 : onClear();
+    handleChange(isMultiple ? [] : null);
+  }, [onClear, handleChange, isMultiple]);
+  const selectedKeys = (0, import_react10.useMemo)(() => {
+    if (currentValue == null) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(currentValue) ? currentValue : [currentValue]);
+  }, [currentValue]);
+  const handleSelectionChange = (0, import_react10.useCallback)(
+    (keys) => {
+      var _a;
+      if (keys === "all") return;
+      const selected = Array.from(keys).filter((key) => typeof key === "string");
+      handleChange(isMultiple ? selected : (_a = selected[0]) != null ? _a : null);
+    },
+    [handleChange, isMultiple]
+  );
+  const showClearButton = hasValue && isClearable;
+  return {
+    currentValue,
+    hasValue,
+    selectedKeys,
+    handleSelectionChange,
+    handleClear,
+    showClearButton
+  };
+}
+
+// src/ui/inputs/select/select.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var selectWrapperVariants = (0, import_tailwind_variants3.tv)({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
+});
+var Select = import_react11.default.forwardRef(
+  ({
+    value,
+    defaultSelectedKeys,
+    items,
+    onChange,
+    selectionMode,
+    onClear,
+    variant,
+    classNames,
+    endContent,
+    isClearable,
+    ...props
+  }, ref) => {
+    const { selectedKeys, handleSelectionChange, handleClear, showClearButton } = useSelect({
+      value,
+      onChange,
+      onClear,
+      selectionMode,
+      isClearable
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_select.Select,
       {
         ref,
+        classNames: {
+          ...classNames,
+          trigger: selectWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultSelectedKeys,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClearButton, { onClear: handleClear })
+        ] }),
         items,
         selectedKeys,
         selectionMode,
+        variant,
         onSelectionChange: handleSelectionChange,
         ...props,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_select.SelectItem, { children: item.label }, item.key)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_select.SelectItem, { children: item.label }, item.key)
       }
     );
   }
@@ -142,54 +446,64 @@ var Select = import_react6.default.forwardRef(
 Select.displayName = "TeachInUI.Select";
 
 // src/ui/inputs/switch/switch.tsx
-var import_react7 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_switch = require("@heroui/switch");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = import_react7.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_switch.Switch, { ref, ...props });
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Switch = import_react12.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_switch.Switch, { ref, ...props });
 });
 Switch.displayName = "TeachInUI.Switch";
 
 // src/ui/inputs/radio/radio-group.tsx
-var import_react8 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_radio = require("@heroui/radio");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var RadioGroup = import_react8.default.forwardRef(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RadioGroup = import_react13.default.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radio.RadioGroup, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radio.RadioGroup, { ref, ...props });
   }
 );
 RadioGroup.displayName = "TeachInUI.RadioGroup";
 
 // src/ui/inputs/text/text.tsx
-var import_react9 = __toESM(require("react"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Text = import_react9.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Input, { ref, type: "text", ...props });
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Text = import_react14.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Input, { ref, type: "text", ...props });
 });
 Text.displayName = "TeachInUI.Text";
 
 // src/ui/inputs/textarea/textarea.tsx
-var import_input5 = require("@heroui/input");
-var import_react10 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Textarea = import_react10.default.forwardRef(
+var import_input6 = require("@heroui/input");
+var import_react15 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Textarea = import_react15.default.forwardRef(
   ({ minRows = 4, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_input5.Textarea, { ref, minRows, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_input6.Textarea, { ref, minRows, ...props });
   }
 );
 Textarea.displayName = "TeachInUI.Textarea";
 
 // src/ui/form/rhf/fields/input-field.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function InputField({ name, ...props }) {
   const { control } = (0, import_react_hook_form.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_react_hook_form.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Input, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Input,
+        {
+          ...props,
+          ...field,
+          ref,
+          errorMessage: error == null ? void 0 : error.message,
+          isInvalid: !!error,
+          onValueChange: field.onChange
+        }
+      )
     }
   );
 }
@@ -197,15 +511,15 @@ InputField.displayName = "TeachInUI.InputField";
 
 // src/ui/form/rhf/fields/text-field.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function TextField({ name, ...props }) {
   const { control } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_hook_form2.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
     }
   );
 }
@@ -213,31 +527,57 @@ TextField.displayName = "TeachInUI.TextField";
 
 // src/ui/form/rhf/fields/email-field.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function EmailField({ name, ...props }) {
   const { control } = (0, import_react_hook_form3.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_react_hook_form3.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Email, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Email, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
     }
   );
 }
 EmailField.displayName = "TeachInUI.EmailField";
 
-// src/ui/form/rhf/fields/textarea-field.tsx
+// src/ui/form/rhf/fields/search-field.tsx
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function TextareaField({ name, ...props }) {
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function SearchField({ name, ...props }) {
   const { control } = (0, import_react_hook_form4.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_react_hook_form4.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Search,
+        {
+          ...props,
+          ...field,
+          ref,
+          errorMessage: error == null ? void 0 : error.message,
+          isInvalid: !!error,
+          onValueChange: field.onChange
+        }
+      )
+    }
+  );
+}
+SearchField.displayName = "TeachInUI.SearchField";
+
+// src/ui/form/rhf/fields/textarea-field.tsx
+var import_react_hook_form5 = require("react-hook-form");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TextareaField({ name, ...props }) {
+  const { control } = (0, import_react_hook_form5.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_hook_form5.Controller,
+    {
+      control,
+      name,
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Textarea,
         {
           ...props,
@@ -253,16 +593,16 @@ function TextareaField({ name, ...props }) {
 TextareaField.displayName = "TeachInUI.TextareaField";
 
 // src/ui/form/rhf/fields/select-field.tsx
-var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react_hook_form6 = require("react-hook-form");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SelectField({ name, selectionMode, ...props }) {
-  const { control } = (0, import_react_hook_form5.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react_hook_form5.Controller,
+  const { control } = (0, import_react_hook_form6.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_hook_form6.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Select,
         {
           selectionMode,
@@ -279,16 +619,16 @@ function SelectField({ name, selectionMode, ...props }) {
 SelectField.displayName = "TeachInUI.SelectField";
 
 // src/ui/form/rhf/fields/autocomplete-field.tsx
-var import_react_hook_form6 = require("react-hook-form");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react_hook_form7 = require("react-hook-form");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function AutocompleteField({ name, ...props }) {
-  const { control } = (0, import_react_hook_form6.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_hook_form6.Controller,
+  const { control } = (0, import_react_hook_form7.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_hook_form7.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Autocomplete,
         {
           ...props,
@@ -304,16 +644,16 @@ function AutocompleteField({ name, ...props }) {
 AutocompleteField.displayName = "TeachInUI.AutocompleteField";
 
 // src/ui/form/rhf/fields/date-picker-field.tsx
-var import_react_hook_form7 = require("react-hook-form");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_hook_form8 = require("react-hook-form");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DatePickerField({ name, ...props }) {
-  const { control } = (0, import_react_hook_form7.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_hook_form7.Controller,
+  const { control } = (0, import_react_hook_form8.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_hook_form8.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         DatePicker,
         {
           ...props,
@@ -329,18 +669,18 @@ function DatePickerField({ name, ...props }) {
 DatePickerField.displayName = "TeachInUI.DatePickerField";
 
 // src/ui/form/rhf/fields/checkbox-field.tsx
-var import_react_hook_form8 = require("react-hook-form");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react_hook_form9 = require("react-hook-form");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function CheckboxField({ name, ...props }) {
-  const { control } = (0, import_react_hook_form8.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_react_hook_form8.Controller,
+  const { control } = (0, import_react_hook_form9.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_hook_form9.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Checkbox, { ...props, isSelected: field.value, onValueChange: field.onChange }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-tiny text-danger", children: error.message })
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Checkbox, { ...props, isSelected: field.value, onValueChange: field.onChange }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-tiny text-danger", children: error.message })
       ] })
     }
   );
@@ -348,18 +688,18 @@ function CheckboxField({ name, ...props }) {
 CheckboxField.displayName = "TeachInUI.CheckboxField";
 
 // src/ui/form/rhf/fields/switch-field.tsx
-var import_react_hook_form9 = require("react-hook-form");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react_hook_form10 = require("react-hook-form");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SwitchField({ name, ...props }) {
-  const { control } = (0, import_react_hook_form9.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_hook_form9.Controller,
+  const { control } = (0, import_react_hook_form10.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react_hook_form10.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Switch, { ...props, isSelected: field.value, onValueChange: field.onChange }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-tiny text-danger", children: error.message })
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Switch, { ...props, isSelected: field.value, onValueChange: field.onChange }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-tiny text-danger", children: error.message })
       ] })
     }
   );
@@ -367,16 +707,16 @@ function SwitchField({ name, ...props }) {
 SwitchField.displayName = "TeachInUI.SwitchField";
 
 // src/ui/form/rhf/fields/radio-field.tsx
-var import_react_hook_form10 = require("react-hook-form");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react_hook_form11 = require("react-hook-form");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function RadioField({ name, ...props }) {
-  const { control } = (0, import_react_hook_form10.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_hook_form10.Controller,
+  const { control } = (0, import_react_hook_form11.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react_hook_form11.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      render: ({ field: { ref, value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         RadioGroup,
         {
           ...props,
@@ -395,10 +735,10 @@ RadioField.displayName = "TeachInUI.RadioField";
 
 // src/ui/form/form.tsx
 var import_form = require("@heroui/form");
-var import_react11 = __toESM(require("react"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Form = import_react11.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_form.Form, { ref, ...props });
+var import_react16 = __toESM(require("react"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Form = import_react16.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_form.Form, { ref, ...props });
 });
 Form.displayName = "TeachInUI.Form";
 // Annotate the CommonJS export names for ESM import in node:
@@ -410,6 +750,7 @@ Form.displayName = "TeachInUI.Form";
   Form,
   InputField,
   RadioField,
+  SearchField,
   SelectField,
   SwitchField,
   TextField,