@teach-in/react 1.3.0 → 1.5.0

package/dist/chunk-2UHA3DYG.mjs

@@ -0,0 +1,62 @@
+"use client";
+
+// src/ui/inputs/select/use-select.ts
+import { useCallback, useMemo, useState } from "react";
+function useSelect({
+  value,
+  onChange,
+  onClear,
+  selectionMode,
+  isClearable = true
+}) {
+  const isMultiple = selectionMode === "multiple";
+  const [internalValue, setInternalValue] = 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 = 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 = useCallback(() => {
+    onClear == null ? void 0 : onClear();
+    handleChange(isMultiple ? [] : null);
+  }, [onClear, handleChange, isMultiple]);
+  const selectedKeys = useMemo(() => {
+    if (currentValue == null) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(currentValue) ? currentValue : [currentValue]);
+  }, [currentValue]);
+  const handleSelectionChange = 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
+  };
+}
+
+export {
+  useSelect
+};

package/dist/{chunk-LJIVY6GU.mjs → chunk-46SKVFMZ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "./chunk-V2G5QHZZ.mjs";
+} from "./chunk-MCQGBAUS.mjs";
 
 // src/ui/inputs/email/email.tsx
 import React from "react";

package/dist/{chunk-JDFRAN4S.mjs → chunk-5FFWQB7D.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "./chunk-V2G5QHZZ.mjs";
+} from "./chunk-MCQGBAUS.mjs";
 
 // src/ui/form/rhf/fields/input-field.tsx
 import { Controller, useFormContext } from "react-hook-form";
@@ -13,7 +13,17 @@ function InputField({ name, ...props }) {
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx(Input, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...props,
+          ...field,
+          ref,
+          errorMessage: error == null ? void 0 : error.message,
+          isInvalid: !!error,
+          onValueChange: field.onChange
+        }
+      )
     }
   );
 }

package/dist/{chunk-544SDU73.mjs → chunk-BBUPZCY6.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   semanticColors
-} from "./chunk-AFVGHUW2.mjs";
+} from "./chunk-YZB4VBX7.mjs";
 import {
   commonColors
 } from "./chunk-5WDV3PDI.mjs";

package/dist/chunk-C2VWADF5.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+// src/ui/inputs/search/use-search.ts
+import { useCallback } from "react";
+function useSearch({ value, onSearch, onCancel, onKeyDown }) {
+  const handleKeyDown = 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 = useCallback(() => {
+    if (hasValue) {
+      onSearch == null ? void 0 : onSearch(value);
+    }
+  }, [value, onSearch]);
+  return {
+    handleKeyDown,
+    handleSearchClick,
+    hasValue
+  };
+}
+
+export {
+  useSearch
+};

package/dist/{chunk-NLHQDWUK.mjs → chunk-CKJ5U5Q4.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Select
-} from "./chunk-3YOW5DEZ.mjs";
+} from "./chunk-VXYV37IM.mjs";
 
 // src/ui/form/rhf/fields/select-field.tsx
 import { Controller, useFormContext } from "react-hook-form";

package/dist/chunk-CUEG2BFV.mjs

@@ -0,0 +1,34 @@
+"use client";
+import {
+  Search
+} from "./chunk-SEJXJZSK.mjs";
+
+// src/ui/form/rhf/fields/search-field.tsx
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+function SearchField({ name, ...props }) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        Search,
+        {
+          ...props,
+          ...field,
+          ref,
+          errorMessage: error == null ? void 0 : error.message,
+          isInvalid: !!error,
+          onValueChange: field.onChange
+        }
+      )
+    }
+  );
+}
+SearchField.displayName = "TeachInUI.SearchField";
+
+export {
+  SearchField
+};

package/dist/chunk-GTE5VEBV.mjs

@@ -0,0 +1,68 @@
+"use client";
+
+// src/ui/inputs/switch/favorite-switch.tsx
+import { useSwitch } from "@heroui/switch";
+import { BookmarkIcon } from "lucide-react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var bookmarkVariants = tv({
+  base: "stroke-default-400 group-hover:fill-primary-100 group-hover:stroke-default-400",
+  variants: {
+    size: {
+      sm: "size-6",
+      md: "size-8",
+      lg: "size-10"
+    },
+    isSelected: {
+      true: "stroke-primary fill-primary-100"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var wrapperVariants = tv({
+  base: "flex cursor-pointer items-center justify-center rounded-sm bg-transparent!",
+  variants: {
+    size: {
+      sm: "h-8 w-8",
+      md: "h-10 w-10",
+      lg: "h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function FavoriteSwitch({ isSelected, onValueChange, size }) {
+  const { Component, slots, getBaseProps, getInputProps, getWrapperProps } = useSwitch({
+    isSelected,
+    onValueChange
+  });
+  return /* @__PURE__ */ jsxs(Component, { ...getBaseProps(), children: [
+    /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("input", { ...getInputProps() }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...getWrapperProps(),
+        className: slots.wrapper({
+          class: wrapperVariants({ size })
+        }),
+        children: /* @__PURE__ */ jsx(
+          BookmarkIcon,
+          {
+            absoluteStrokeWidth: true,
+            className: bookmarkVariants({ isSelected, size }),
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  FavoriteSwitch
+};

package/dist/{chunk-CETCW7DS.mjs → chunk-IU2JYI7W.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Text
-} from "./chunk-KTUGFQWJ.mjs";
+} from "./chunk-KTWHCUYV.mjs";
 
 // src/ui/form/rhf/fields/text-field.tsx
 import { Controller, useFormContext } from "react-hook-form";

package/dist/{chunk-KTUGFQWJ.mjs → chunk-KTWHCUYV.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Input
-} from "./chunk-V2G5QHZZ.mjs";
+} from "./chunk-MCQGBAUS.mjs";
 
 // src/ui/inputs/text/text.tsx
 import React from "react";

package/dist/chunk-MCQGBAUS.mjs

@@ -0,0 +1,73 @@
+"use client";
+import {
+  useInput
+} from "./chunk-NSU66J5E.mjs";
+import {
+  ClearButton
+} from "./chunk-TUIN5YJW.mjs";
+
+// src/ui/inputs/input/input.tsx
+import React from "react";
+import { Input as HeroUIInput } from "@heroui/input";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputWrapperVariants = tv({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
+});
+var Input = React.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__ */ jsx(
+      HeroUIInput,
+      {
+        ref: mergedRef,
+        classNames: {
+          ...classNames,
+          inputWrapper: inputWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultValue,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ jsx(ClearButton, { onClear: handleClear })
+        ] }),
+        isReadOnly,
+        value: currentValue,
+        variant,
+        onValueChange: handleValueChange,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "TeachInUI.Input";
+
+export {
+  Input
+};

package/dist/chunk-NSU66J5E.mjs

@@ -0,0 +1,59 @@
+"use client";
+
+// src/ui/inputs/input/use-input.ts
+import { useCallback, useRef, useState } from "react";
+function useInput({
+  value,
+  defaultValue,
+  onValueChange,
+  onClear,
+  isReadOnly,
+  isClearable = true,
+  ref
+}) {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasValue = String(currentValue).length > 0;
+  const handleValueChange = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleClear = useCallback(() => {
+    var _a;
+    onClear == null ? void 0 : onClear();
+    handleValueChange("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [onClear, handleValueChange]);
+  const mergedRef = 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
+  };
+}
+
+export {
+  useInput
+};

package/dist/{chunk-UFYLYN5Z.mjs → chunk-QFWSQOF6.mjs}

@@ -1,4 +1,10 @@
 "use client";
+import {
+  cn
+} from "./chunk-LOMRTWX5.mjs";
+import {
+  extendVariants
+} from "./chunk-7BTEKEON.mjs";
 
 // src/ui/surface/card/card.tsx
 import React from "react";
@@ -9,8 +15,20 @@ import {
   CardFooter as HeroUICardFooter
 } from "@heroui/card";
 import { jsx } from "react/jsx-runtime";
-var Root = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(HeroUICard, { ref, ...props, children });
+var CardBase = extendVariants(HeroUICard, {
+  variants: {
+    radius: {
+      sm: { base: "rounded-lg" },
+      md: { base: "rounded-2xl" },
+      lg: { base: "rounded-3xl" }
+    }
+  },
+  defaultVariants: {
+    shadow: "none"
+  }
+});
+var Root = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(CardBase, { ref, className: cn("bg-default-100", className), ...props, children });
 });
 Root.displayName = "TeachInUI.Card.Root";
 var Header = React.forwardRef(({ children, ...props }, ref) => {

package/dist/{chunk-R7LDL5CU.mjs → chunk-R46SWVWL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Email
-} from "./chunk-LJIVY6GU.mjs";
+} from "./chunk-46SKVFMZ.mjs";
 
 // src/ui/form/rhf/fields/email-field.tsx
 import { Controller, useFormContext } from "react-hook-form";

package/dist/{chunk-WFNNN6WU.mjs → chunk-RPIOTLYT.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   semanticColors
-} from "./chunk-AFVGHUW2.mjs";
+} from "./chunk-YZB4VBX7.mjs";
 
 // src/ui/theme/theme.ts
 import { heroui } from "@heroui/theme";

package/dist/chunk-SEJXJZSK.mjs

@@ -0,0 +1,64 @@
+"use client";
+import {
+  useSearch
+} from "./chunk-C2VWADF5.mjs";
+import {
+  Input
+} from "./chunk-MCQGBAUS.mjs";
+
+// src/ui/inputs/search/search.tsx
+import React from "react";
+import { SearchIcon } from "lucide-react";
+import { Button } from "@heroui/button";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var searchIconVariants = 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 = React.forwardRef(
+  ({ variant = "bordered", radius = "full", value, onSearch, onCancel, onKeyDown, ...props }, ref) => {
+    const { handleKeyDown, handleSearchClick, hasValue } = useSearch({
+      value,
+      onSearch,
+      onCancel,
+      onKeyDown
+    });
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        radius,
+        startContent: onSearch ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            isIconOnly: true,
+            "aria-label": "\u041F\u043E\u0438\u0441\u043A",
+            isDisabled: !hasValue,
+            radius: "full",
+            size: "sm",
+            variant: "light",
+            onPress: handleSearchClick,
+            children: /* @__PURE__ */ jsx(SearchIcon, { className: searchIconVariants({ variant }) })
+          }
+        ) : /* @__PURE__ */ jsx(SearchIcon, { className: searchIconVariants({ variant }) }),
+        value,
+        variant,
+        onKeyDown: handleKeyDown,
+        ...props
+      }
+    );
+  }
+);
+Search.displayName = "TeachInUI.Search";
+
+export {
+  Search
+};

package/dist/chunk-TUIN5YJW.mjs

@@ -0,0 +1,33 @@
+"use client";
+
+// src/ui/inputs/clear-button.tsx
+import React from "react";
+import { Button } from "@heroui/button";
+import { XIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var ClearButton = React.forwardRef(
+  ({ onClear }, ref) => {
+    return /* @__PURE__ */ jsx(
+      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__ */ jsx(XIcon, { className: "size-4 text-default-500" })
+      }
+    );
+  }
+);
+ClearButton.displayName = "TeachInUI.ClearButton";
+
+export {
+  ClearButton
+};

package/dist/chunk-UQAG7TKJ.mjs

@@ -0,0 +1 @@
+"use client";

package/dist/chunk-VXYV37IM.mjs

@@ -0,0 +1,74 @@
+"use client";
+import {
+  useSelect
+} from "./chunk-2UHA3DYG.mjs";
+import {
+  ClearButton
+} from "./chunk-TUIN5YJW.mjs";
+
+// src/ui/inputs/select/select.tsx
+import React from "react";
+import { Select as HeroUISelect, SelectItem as HeroUISelectItem } from "@heroui/select";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var selectWrapperVariants = tv({
+  variants: {
+    variant: {
+      flat: "",
+      underlined: "",
+      bordered: "border-1",
+      faded: "border-1"
+    }
+  }
+});
+var Select = React.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__ */ jsx(
+      HeroUISelect,
+      {
+        ref,
+        classNames: {
+          ...classNames,
+          trigger: selectWrapperVariants({ variant }),
+          innerWrapper: "group"
+        },
+        defaultSelectedKeys,
+        endContent: (endContent || showClearButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          endContent,
+          showClearButton && /* @__PURE__ */ jsx(ClearButton, { onClear: handleClear })
+        ] }),
+        items,
+        selectedKeys,
+        selectionMode,
+        variant,
+        onSelectionChange: handleSelectionChange,
+        ...props,
+        children: (item) => /* @__PURE__ */ jsx(HeroUISelectItem, { children: item.label }, item.key)
+      }
+    );
+  }
+);
+Select.displayName = "TeachInUI.Select";
+
+export {
+  Select
+};

package/dist/{chunk-J3OZNLTZ.mjs → chunk-WG4IPOHE.mjs}

@@ -4,10 +4,10 @@
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 var bento = tv({
-  base: "rounded-xl p-6 transition-colors",
+  base: "p-8 transition-colors",
   variants: {
     color: {
-      default: "bg-default-50 text-default-700",
+      default: "bg-content1 text-foreground",
       primary: "bg-primary-50 text-primary-700",
       secondary: "bg-secondary-50 text-secondary-700",
       success: "bg-success-50 text-success-700",
@@ -16,9 +16,9 @@ var bento = tv({
     },
     radius: {
       none: "rounded-none",
-      sm: "rounded-md",
-      md: "rounded-lg",
-      lg: "rounded-xl",
+      sm: "rounded-lg",
+      md: "rounded-2xl",
+      lg: "rounded-3xl",
       full: "rounded-full"
     },
     shadow: {