@teach-in/react 1.0.0 → 1.2.0

package/dist/ui/inputs/select/index.js

@@ -36,39 +36,149 @@ __export(select_exports, {
 module.exports = __toCommonJS(select_exports);
 
 // src/ui/inputs/select/select.tsx
-var import_react = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_select = require("@heroui/select");
+var import_tailwind_variants = require("tailwind-variants");
+
+// src/ui/inputs/clear-button.tsx
+var import_react = __toESM(require("react"));
+var import_button = require("@heroui/button");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Select = import_react.default.forwardRef(
-  ({ value, items, onChange, selectionMode, ...props }, ref) => {
-    const isMultiple = selectionMode === "multiple";
-    const selectedKeys = import_react.default.useMemo(() => {
-      if (value == null) return /* @__PURE__ */ new Set();
-      return new Set(Array.isArray(value) ? value : [value]);
-    }, [value]);
-    const handleSelectionChange = import_react.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]
-    );
+var ClearButton = import_react.default.forwardRef(
+  ({ onClear }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_lucide_react.XIcon, { className: "size-4 text-default-500" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "TeachInUI.ClearButton";
+
+// src/ui/inputs/select/use-select.ts
+var import_react2 = require("react");
+function useSelect({
+  value,
+  onChange,
+  onClear,
+  selectionMode,
+  isClearable = true
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [internalValue, setInternalValue] = (0, import_react2.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_react2.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_react2.useCallback)(() => {
+    onClear == null ? void 0 : onClear();
+    handleChange(isMultiple ? [] : null);
+  }, [onClear, handleChange, isMultiple]);
+  const selectedKeys = (0, import_react2.useMemo)(() => {
+    if (currentValue == null) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(currentValue) ? currentValue : [currentValue]);
+  }, [currentValue]);
+  const handleSelectionChange = (0, import_react2.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_runtime2 = require("react/jsx-runtime");
+var selectWrapperVariants = (0, import_tailwind_variants.tv)({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
+});
+var Select = import_react3.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_runtime2.jsx)(
       import_select.Select,
       {
         ref,
+        classNames: {
+          ...classNames,
+          trigger: selectWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultSelectedKeys,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClearButton, { onClear: handleClear })
+        ] }),
         items,
         selectedKeys,
         selectionMode,
+        variant,
         onSelectionChange: handleSelectionChange,
         ...props,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { children: item.label }, item.key)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.SelectItem, { children: item.label }, item.key)
       }
     );
   }

package/dist/ui/inputs/select/index.mjs

@@ -2,7 +2,9 @@
 import "../../../chunk-AQ3ISJKU.mjs";
 import {
   Select
-} from "../../../chunk-3YOW5DEZ.mjs";
+} from "../../../chunk-VXYV37IM.mjs";
+import "../../../chunk-2UHA3DYG.mjs";
+import "../../../chunk-TUIN5YJW.mjs";
 export {
   Select
 };

package/dist/ui/inputs/select/select.d.ts

@@ -9,18 +9,22 @@ export type SelectProps = (BaseSelectProps & {
     selectionMode?: "single";
     value?: string;
     onChange?: (value: string | null) => void;
+    onClear?: () => void;
 }) | (BaseSelectProps & {
     selectionMode: "multiple";
     value?: string[];
     onChange?: (value: string[]) => void;
+    onClear?: () => void;
 });
 export declare const Select: React.ForwardRefExoticComponent<(Omit<BaseSelectProps & {
     selectionMode?: "single";
     value?: string;
     onChange?: (value: string | null) => void;
+    onClear?: () => void;
 }, "ref"> | Omit<BaseSelectProps & {
     selectionMode: "multiple";
     value?: string[];
     onChange?: (value: string[]) => void;
+    onClear?: () => void;
 }, "ref">) & React.RefAttributes<HTMLSelectElement>>;
 export {};

package/dist/ui/inputs/select/select.js

@@ -34,39 +34,149 @@ __export(select_exports, {
   Select: () => Select
 });
 module.exports = __toCommonJS(select_exports);
-var import_react = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_select = require("@heroui/select");
+var import_tailwind_variants = require("tailwind-variants");
+
+// src/ui/inputs/clear-button.tsx
+var import_react = __toESM(require("react"));
+var import_button = require("@heroui/button");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Select = import_react.default.forwardRef(
-  ({ value, items, onChange, selectionMode, ...props }, ref) => {
-    const isMultiple = selectionMode === "multiple";
-    const selectedKeys = import_react.default.useMemo(() => {
-      if (value == null) return /* @__PURE__ */ new Set();
-      return new Set(Array.isArray(value) ? value : [value]);
-    }, [value]);
-    const handleSelectionChange = import_react.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]
-    );
+var ClearButton = import_react.default.forwardRef(
+  ({ onClear }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_lucide_react.XIcon, { className: "size-4 text-default-500" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "TeachInUI.ClearButton";
+
+// src/ui/inputs/select/use-select.ts
+var import_react2 = require("react");
+function useSelect({
+  value,
+  onChange,
+  onClear,
+  selectionMode,
+  isClearable = true
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [internalValue, setInternalValue] = (0, import_react2.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_react2.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_react2.useCallback)(() => {
+    onClear == null ? void 0 : onClear();
+    handleChange(isMultiple ? [] : null);
+  }, [onClear, handleChange, isMultiple]);
+  const selectedKeys = (0, import_react2.useMemo)(() => {
+    if (currentValue == null) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(currentValue) ? currentValue : [currentValue]);
+  }, [currentValue]);
+  const handleSelectionChange = (0, import_react2.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_runtime2 = require("react/jsx-runtime");
+var selectWrapperVariants = (0, import_tailwind_variants.tv)({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
+});
+var Select = import_react3.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_runtime2.jsx)(
       import_select.Select,
       {
         ref,
+        classNames: {
+          ...classNames,
+          trigger: selectWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultSelectedKeys,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClearButton, { onClear: handleClear })
+        ] }),
         items,
         selectedKeys,
         selectionMode,
+        variant,
         onSelectionChange: handleSelectionChange,
         ...props,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { children: item.label }, item.key)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.SelectItem, { children: item.label }, item.key)
       }
     );
   }

package/dist/ui/inputs/select/select.mjs

@@ -1,7 +1,9 @@
 "use client";
 import {
   Select
-} from "../../../chunk-3YOW5DEZ.mjs";
+} from "../../../chunk-VXYV37IM.mjs";
+import "../../../chunk-2UHA3DYG.mjs";
+import "../../../chunk-TUIN5YJW.mjs";
 export {
   Select
 };

package/dist/ui/inputs/select/use-select.d.ts

@@ -0,0 +1,17 @@
+interface UseSelectProps {
+    value?: string | string[];
+    defaultSelectedKeys?: "all" | Iterable<React.Key>;
+    onChange?: ((value: string | null) => void) | ((value: string[]) => void);
+    onClear?: () => void;
+    selectionMode?: "single" | "multiple";
+    isClearable?: boolean;
+}
+export declare function useSelect({ value, onChange, onClear, selectionMode, isClearable, }: UseSelectProps): {
+    currentValue: string | string[] | null;
+    hasValue: boolean;
+    selectedKeys: Set<string>;
+    handleSelectionChange: (keys: "all" | Set<React.Key>) => void;
+    handleClear: () => void;
+    showClearButton: boolean;
+};
+export {};

package/dist/ui/inputs/select/use-select.js

@@ -0,0 +1,85 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/inputs/select/use-select.ts
+var use_select_exports = {};
+__export(use_select_exports, {
+  useSelect: () => useSelect
+});
+module.exports = __toCommonJS(use_select_exports);
+var import_react = require("react");
+function useSelect({
+  value,
+  onChange,
+  onClear,
+  selectionMode,
+  isClearable = true
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [internalValue, setInternalValue] = (0, import_react.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_react.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_react.useCallback)(() => {
+    onClear == null ? void 0 : onClear();
+    handleChange(isMultiple ? [] : null);
+  }, [onClear, handleChange, isMultiple]);
+  const selectedKeys = (0, import_react.useMemo)(() => {
+    if (currentValue == null) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(currentValue) ? currentValue : [currentValue]);
+  }, [currentValue]);
+  const handleSelectionChange = (0, import_react.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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSelect
+});

package/dist/ui/inputs/select/use-select.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useSelect
+} from "../../../chunk-2UHA3DYG.mjs";
+export {
+  useSelect
+};

package/dist/ui/inputs/text/index.js

@@ -36,21 +36,158 @@ __export(text_exports, {
 module.exports = __toCommonJS(text_exports);
 
 // src/ui/inputs/text/text.tsx
-var import_react2 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/ui/inputs/input/input.tsx
-var import_react = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_input = require("@heroui/input");
+var import_tailwind_variants = require("tailwind-variants");
+
+// src/ui/inputs/clear-button.tsx
+var import_react = __toESM(require("react"));
+var import_button = require("@heroui/button");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Input = import_react.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.Input, { ref, ...props });
+var ClearButton = import_react.default.forwardRef(
+  ({ onClear }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_lucide_react.XIcon, { className: "size-4 text-default-500" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "TeachInUI.ClearButton";
+
+// src/ui/inputs/input/use-input.ts
+var import_react2 = require("react");
+function useInput({
+  value,
+  defaultValue,
+  onValueChange,
+  onClear,
+  isReadOnly,
+  isClearable = true,
+  ref
+}) {
+  const inputRef = (0, import_react2.useRef)(null);
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasValue = String(currentValue).length > 0;
+  const handleValueChange = (0, import_react2.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleClear = (0, import_react2.useCallback)(() => {
+    var _a;
+    onClear == null ? void 0 : onClear();
+    handleValueChange("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [onClear, handleValueChange]);
+  const mergedRef = (0, import_react2.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_runtime2 = require("react/jsx-runtime");
+var inputWrapperVariants = (0, import_tailwind_variants.tv)({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
 });
+var Input = import_react3.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_runtime2.jsx)(
+      import_input.Input,
+      {
+        ref: mergedRef,
+        classNames: {
+          ...classNames,
+          inputWrapper: inputWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultValue,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ClearButton, { onClear: handleClear })
+        ] }),
+        isReadOnly,
+        value: currentValue,
+        variant,
+        onValueChange: handleValueChange,
+        ...props
+      }
+    );
+  }
+);
 Input.displayName = "TeachInUI.Input";
 
 // src/ui/inputs/text/text.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Text = import_react2.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { ref, type: "text", ...props });
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Text = import_react4.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { ref, type: "text", ...props });
 });
 Text.displayName = "TeachInUI.Text";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/ui/inputs/text/index.mjs

@@ -2,9 +2,11 @@
 import "../../../chunk-DUQFM3QS.mjs";
 import {
   Text
-} from "../../../chunk-KTUGFQWJ.mjs";
+} from "../../../chunk-KTWHCUYV.mjs";
 import "../../../chunk-ZRHEFEFS.mjs";
-import "../../../chunk-V2G5QHZZ.mjs";
+import "../../../chunk-MCQGBAUS.mjs";
+import "../../../chunk-NSU66J5E.mjs";
+import "../../../chunk-TUIN5YJW.mjs";
 export {
   Text
 };