@teach-in/react 0.3.0 → 1.0.0

package/dist/ui/index.js

@@ -74,6 +74,7 @@ __export(ui_exports, {
   FormatTime: () => Time,
   Grid: () => Grid,
   Header: () => Header2,
+  Image: () => Image,
   Input: () => Input,
   InputField: () => InputField,
   Link: () => Link,
@@ -88,6 +89,7 @@ __export(ui_exports, {
   PageContent: () => PageContent,
   PageLoading: () => PageLoading,
   Pagination: () => Pagination,
+  Popover: () => Popover,
   Progress: () => Progress,
   Radio: () => Radio,
   RadioField: () => RadioField,
@@ -144,7 +146,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var BaseButton = (0, import_system.extendVariants)(import_button.Button, {
   variants: {
     size: {
-      lg: "px-6 min-w-20 h-14 text-base gap-2 rounded-large"
+      lg: "px-6 min-w-20 h-14 text-base gap-2"
     }
   },
   defaultVariants: {
@@ -201,61 +203,87 @@ var User = import_react4.default.forwardRef((props, ref) => {
 });
 User.displayName = "TeachInUI.User";
 
-// src/ui/feedback/alert/alert.tsx
+// src/ui/data/image/image.tsx
 var import_react5 = __toESM(require("react"));
-var import_alert = require("@heroui/alert");
+var import_image = require("@heroui/image");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Alert = import_react5.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_alert.Alert, { ref, title: children, ...props });
+var Image = import_react5.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_image.Image, { ref, ...props });
+});
+Image.displayName = "TeachInUI.Image";
+
+// src/ui/feedback/alert/alert.tsx
+var import_react6 = __toESM(require("react"));
+var import_alert = require("@heroui/alert");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Alert = import_react6.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_alert.Alert, { ref, title: children, ...props });
 });
 Alert.displayName = "TeachInUI.Alert";
 
 // src/ui/feedback/chip/chip.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_chip = require("@heroui/chip");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Chip = import_react6.default.forwardRef(({ variant = "flat", ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_chip.Chip, { ref, variant, ...props });
+
+// src/utils/extend-variants.ts
+var import_system2 = require("@heroui/system");
+var extendVariants2 = (component, config) => {
+  return (0, import_system2.extendVariants)(component, config);
+};
+
+// src/ui/feedback/chip/chip.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChipCustom = extendVariants2(import_chip.Chip, {
+  variants: {
+    variant: {
+      bordered: { base: "border-1" },
+      faded: { base: "border-1" },
+      dot: { base: "border-1" }
+    }
+  }
+});
+var Chip = import_react7.default.forwardRef(({ variant = "flat", ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChipCustom, { ref, variant, ...props });
 });
 Chip.displayName = "TeachInUI.Chip";
 
 // src/ui/feedback/progress/progress.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_progress = require("@heroui/progress");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Progress = import_react7.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_progress.Progress, { ref, ...props });
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Progress = import_react8.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_progress.Progress, { ref, ...props });
 });
 Progress.displayName = "TeachInUI.Progress";
 
 // src/ui/feedback/progress/circular-progress.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_progress2 = require("@heroui/progress");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var CircularProgress = import_react8.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_progress2.CircularProgress, { ref, ...props });
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var CircularProgress = import_react9.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_progress2.CircularProgress, { ref, ...props });
 });
 CircularProgress.displayName = "TeachInUI.CircularProgress";
 
 // src/ui/feedback/spinner/spinner.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_spinner = require("@heroui/spinner");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Spinner = import_react9.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_spinner.Spinner, { ref, ...props });
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Spinner = import_react10.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_spinner.Spinner, { ref, ...props });
 });
 Spinner.displayName = "TeachInUI.Spinner";
 
 // src/ui/feedback/toast/toast.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_toast = require("@heroui/toast");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Toast = import_react10.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_toast.Toast, { ref, ...props });
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Toast = import_react11.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_toast.Toast, { ref, ...props });
 });
 Toast.displayName = "TeachInUI.Toast";
 var ToastProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_toast.ToastProvider, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_toast.ToastProvider, { ...props });
 };
 ToastProvider.displayName = "TeachInUI.ToastProvider";
 var useToast = (...args) => (0, import_toast.useToast)(...args);
@@ -266,12 +294,12 @@ var getToastQueue = (...args) => (0, import_toast.getToastQueue)(...args);
 var isToastClosing = (...args) => (0, import_toast.isToastClosing)(...args);
 
 // src/ui/feedback/tooltip/tooltip.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_tooltip = require("@heroui/tooltip");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Tooltip = import_react11.default.forwardRef(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Tooltip = import_react12.default.forwardRef(
   ({ placement = "bottom", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_tooltip.Tooltip, { ref, placement, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tooltip.Tooltip, { ref, placement, ...props });
   }
 );
 Tooltip.displayName = "TeachInUI.Tooltip";
@@ -280,87 +308,99 @@ Tooltip.displayName = "TeachInUI.Tooltip";
 var import_react_hook_form = require("react-hook-form");
 
 // src/ui/inputs/autocomplete/autocomplete.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_autocomplete = require("@heroui/autocomplete");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Autocomplete = import_react12.default.forwardRef(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Autocomplete = import_react13.default.forwardRef(
   ({ items, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_autocomplete.Autocomplete, { ref, items, ...props, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_autocomplete.AutocompleteItem, { children: item.label }, item.key) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_autocomplete.Autocomplete, { ref, items, ...props, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_autocomplete.AutocompleteItem, { children: item.label }, item.key) });
   }
 );
 Autocomplete.displayName = "TeachInUI.Autocomplete";
 
 // src/ui/inputs/checkbox/checkbox.tsx
 var import_checkbox = require("@heroui/checkbox");
-var import_react13 = __toESM(require("react"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = import_react13.default.forwardRef(
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Checkbox = import_react14.default.forwardRef(
   ({ label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_checkbox.Checkbox, { ref, ...props, children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_checkbox.Checkbox, { ref, ...props, children: label });
   }
 );
 Checkbox.displayName = "TeachInUI.Checkbox";
 
 // src/ui/inputs/checkbox/checkbox-group.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_checkbox2 = require("@heroui/checkbox");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CheckboxGroup = import_react14.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_checkbox2.CheckboxGroup, { ref, ...props }));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CheckboxGroup = import_react15.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_checkbox2.CheckboxGroup, { ref, ...props }));
 CheckboxGroup.displayName = "TeachInUI.CheckboxGroup";
 
 // src/ui/inputs/date-picker/date-picker.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_date_picker = require("@heroui/date-picker");
 var import_i18n = require("@react-aria/i18n");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var DatePicker = import_react15.default.forwardRef(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DatePicker = import_react16.default.forwardRef(
   ({ locale, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_i18n.I18nProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_date_picker.DatePicker, { ref, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_i18n.I18nProvider, { locale, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_date_picker.DatePicker, { ref, ...props }) });
   }
 );
 DatePicker.displayName = "TeachInUI.DatePicker";
 
 // src/ui/inputs/email/email.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/ui/inputs/input/input.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_input = require("@heroui/input");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Input = import_react16.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_input.Input, { ref, ...props });
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Input = import_react17.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_input.Input, { ref, ...props });
 });
 Input.displayName = "TeachInUI.Input";
 
 // src/ui/inputs/email/email.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Email = import_react17.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input, { ref, autoComplete: "email", type: "email", ...props });
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Email = import_react18.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input, { ref, autoComplete: "email", type: "email", ...props });
 });
 Email.displayName = "TeachInUI.Email";
 
 // src/ui/inputs/select/select.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_select = require("@heroui/select");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Select = import_react18.default.forwardRef(
-  ({ value, items, onChange, ...props }, ref) => {
-    const selectedKeys = value != null ? /* @__PURE__ */ new Set([value]) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Select = import_react19.default.forwardRef(
+  ({ value, items, onChange, selectionMode, ...props }, ref) => {
+    const isMultiple = selectionMode === "multiple";
+    const selectedKeys = import_react19.default.useMemo(() => {
+      if (value == null) return /* @__PURE__ */ new Set();
+      return new Set(Array.isArray(value) ? value : [value]);
+    }, [value]);
+    const handleSelectionChange = import_react19.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_runtime19.jsx)(
       import_select.Select,
       {
         ref,
         items,
-        placeholder: " ",
         selectedKeys,
-        onSelectionChange: (keys) => {
-          const selected = Array.from(keys)[0];
-          if (typeof selected === "string") {
-            onChange == null ? void 0 : onChange(selected);
-          }
-        },
+        selectionMode,
+        onSelectionChange: handleSelectionChange,
         ...props,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_select.SelectItem, { children: item.label }, item.key)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_select.SelectItem, { children: item.label }, item.key)
       }
     );
   }
@@ -368,11 +408,11 @@ var Select = import_react18.default.forwardRef(
 Select.displayName = "TeachInUI.Select";
 
 // src/ui/inputs/switch/switch.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_switch = require("@heroui/switch");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Switch = import_react19.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_switch.Switch, { ref, ...props });
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Switch = import_react20.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_switch.Switch, { ref, ...props });
 });
 Switch.displayName = "TeachInUI.Switch";
 
@@ -380,7 +420,7 @@ Switch.displayName = "TeachInUI.Switch";
 var import_switch2 = require("@heroui/switch");
 var import_lucide_react = require("lucide-react");
 var import_tailwind_variants = require("tailwind-variants");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var bookmarkVariants = (0, import_tailwind_variants.tv)({
   base: "size-6 stroke-default-400 group-hover:fill-primary-100 group-hover:stroke-default-400",
   variants: {
@@ -394,16 +434,16 @@ function FavoriteSwitch({ isSelected, onValueChange }) {
     isSelected,
     onValueChange
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Component, { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sr-only", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ...getInputProps() }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Component, { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sr-only", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ...getInputProps() }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         ...getWrapperProps(),
         className: slots.wrapper({
           class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm !bg-transparent"
         }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react.Bookmark, { className: bookmarkVariants({ isSelected }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react.Bookmark, { className: bookmarkVariants({ isSelected }) })
       }
     )
   ] });
@@ -414,45 +454,45 @@ var import_radio = require("@heroui/radio");
 var Radio = Object.assign(import_radio.Radio, { displayName: "TeachInUI.Radio" });
 
 // src/ui/inputs/radio/radio-group.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_radio2 = require("@heroui/radio");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var RadioGroup = import_react20.default.forwardRef(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var RadioGroup = import_react21.default.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radio2.RadioGroup, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_radio2.RadioGroup, { ref, ...props });
   }
 );
 RadioGroup.displayName = "TeachInUI.RadioGroup";
 
 // src/ui/inputs/text/text.tsx
-var import_react21 = __toESM(require("react"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Text = import_react21.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Input, { ref, type: "text", ...props });
+var import_react22 = __toESM(require("react"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Text = import_react22.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Input, { ref, type: "text", ...props });
 });
 Text.displayName = "TeachInUI.Text";
 
 // src/ui/inputs/textarea/textarea.tsx
 var import_input5 = require("@heroui/input");
-var import_react22 = __toESM(require("react"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Textarea = import_react22.default.forwardRef(
+var import_react23 = __toESM(require("react"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Textarea = import_react23.default.forwardRef(
   ({ minRows = 4, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_input5.Textarea, { ref, minRows, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_input5.Textarea, { ref, minRows, ...props });
   }
 );
 Textarea.displayName = "TeachInUI.Textarea";
 
 // src/ui/form/rhf/fields/input-field.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function InputField({ name, ...props }) {
   const { control } = (0, import_react_hook_form.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_hook_form.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Input, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Input, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
     }
   );
 }
@@ -460,15 +500,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_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function TextField({ name, ...props }) {
   const { control } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_react_hook_form2.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
     }
   );
 }
@@ -476,15 +516,15 @@ TextField.displayName = "TeachInUI.TextField";
 
 // src/ui/form/rhf/fields/email-field.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EmailField({ name, ...props }) {
   const { control } = (0, import_react_hook_form3.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_react_hook_form3.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Email, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Email, { ...props, ...field, ref, errorMessage: error == null ? void 0 : error.message, isInvalid: !!error })
     }
   );
 }
@@ -492,15 +532,15 @@ EmailField.displayName = "TeachInUI.EmailField";
 
 // src/ui/form/rhf/fields/textarea-field.tsx
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function TextareaField({ name, ...props }) {
   const { control } = (0, import_react_hook_form4.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_react_hook_form4.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Textarea,
         {
           ...props,
@@ -517,17 +557,18 @@ TextareaField.displayName = "TeachInUI.TextareaField";
 
 // src/ui/form/rhf/fields/select-field.tsx
 var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function SelectField({ name, ...props }) {
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function SelectField({ name, selectionMode, ...props }) {
   const { control } = (0, import_react_hook_form5.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_react_hook_form5.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Select,
         {
+          selectionMode,
           value: field.value,
           onChange: (value) => field.onChange(value),
           ...props,
@@ -542,15 +583,15 @@ SelectField.displayName = "TeachInUI.SelectField";
 
 // src/ui/form/rhf/fields/autocomplete-field.tsx
 var import_react_hook_form6 = require("react-hook-form");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function AutocompleteField({ name, ...props }) {
   const { control } = (0, import_react_hook_form6.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_react_hook_form6.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Autocomplete,
         {
           ...props,
@@ -567,15 +608,15 @@ 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_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function DatePickerField({ name, ...props }) {
   const { control } = (0, import_react_hook_form7.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_react_hook_form7.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      render: ({ field: { ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         DatePicker,
         {
           ...props,
@@ -592,17 +633,17 @@ DatePickerField.displayName = "TeachInUI.DatePickerField";
 
 // src/ui/form/rhf/fields/checkbox-field.tsx
 var import_react_hook_form8 = require("react-hook-form");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function CheckboxField({ name, ...props }) {
   const { control } = (0, import_react_hook_form8.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_react_hook_form8.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Checkbox, { ...props, isSelected: field.value, onValueChange: field.onChange }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-tiny text-danger", children: error.message })
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Checkbox, { ...props, isSelected: field.value, onValueChange: field.onChange }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-tiny text-danger", children: error.message })
       ] })
     }
   );
@@ -611,17 +652,17 @@ CheckboxField.displayName = "TeachInUI.CheckboxField";
 
 // src/ui/form/rhf/fields/switch-field.tsx
 var import_react_hook_form9 = require("react-hook-form");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SwitchField({ name, ...props }) {
   const { control } = (0, import_react_hook_form9.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_react_hook_form9.Controller,
     {
       control,
       name,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Switch, { ...props, isSelected: field.value, onValueChange: field.onChange }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-tiny text-danger", children: error.message })
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Switch, { ...props, isSelected: field.value, onValueChange: field.onChange }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-tiny text-danger", children: error.message })
       ] })
     }
   );
@@ -630,15 +671,15 @@ SwitchField.displayName = "TeachInUI.SwitchField";
 
 // src/ui/form/rhf/fields/radio-field.tsx
 var import_react_hook_form10 = require("react-hook-form");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function RadioField({ name, ...props }) {
   const { control } = (0, import_react_hook_form10.useFormContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_react_hook_form10.Controller,
     {
       control,
       name,
-      render: ({ field: { ref, value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      render: ({ field: { ref, value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         RadioGroup,
         {
           ...props,
@@ -657,15 +698,15 @@ RadioField.displayName = "TeachInUI.RadioField";
 
 // src/ui/form/form.tsx
 var import_form = require("@heroui/form");
-var import_react23 = __toESM(require("react"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Form = import_react23.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_form.Form, { ref, ...props });
+var import_react24 = __toESM(require("react"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Form = import_react24.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_form.Form, { ref, ...props });
 });
 Form.displayName = "TeachInUI.Form";
 
 // src/ui/format/datetime.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var defaultFormat = {
   day: "numeric",
   month: "long",
@@ -681,15 +722,15 @@ function Datetime({
   fallback = "\u2014"
 }) {
   const formatter = new Intl.DateTimeFormat(locale, format);
-  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: fallback });
+  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fallback });
   const date = value instanceof Date ? value : new Date(value);
-  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: formatter.format(date) });
+  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: formatter.format(date) });
 }
 Datetime.displayName = "TeachInUI.FormatDatetime";
 
 // src/ui/format/date.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var defaultFormat2 = {
   day: "numeric",
   month: "long",
@@ -702,15 +743,15 @@ function DateFormat({
   fallback = "\u2014"
 }) {
   const formatter = new Intl.DateTimeFormat(locale, format);
-  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fallback });
+  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
   const date = value instanceof Date ? value : new Date(value);
-  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: formatter.format(date) });
+  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: formatter.format(date) });
 }
 DateFormat.displayName = "TeachInUI.FormatDate";
 
 // src/ui/format/time.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var defaultFormat3 = {
   hour: "2-digit",
   minute: "2-digit"
@@ -722,15 +763,15 @@ function Time({
   fallback = "\u2014"
 }) {
   const formatter = new Intl.DateTimeFormat(locale, format);
-  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
+  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: fallback });
   const date = value instanceof Date ? value : new Date(value);
-  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: formatter.format(date) });
+  if (isNaN(date.getTime())) return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: formatter.format(date) });
 }
 Time.displayName = "TeachInUI.FormatTime";
 
 // src/ui/format/currency.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Currency({
   amount,
   currency = "RUB",
@@ -745,23 +786,23 @@ function Currency({
       maximumFractionDigits: decimals
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: formatter.format(amount) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: formatter.format(amount) });
 }
 Currency.displayName = "TeachInUI.FormatCurrency";
 
 // src/ui/format/number.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Number({ value, decimals, locale = "ru-RU" }) {
   const formatter = new Intl.NumberFormat(locale, {
     minimumFractionDigits: decimals != null ? decimals : 0,
     maximumFractionDigits: decimals != null ? decimals : 2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: formatter.format(value) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: formatter.format(value) });
 }
 Number.displayName = "TeachInUI.FormatNumber";
 
 // src/ui/format/percent.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Percent({
   value,
   decimals = 1,
@@ -774,12 +815,12 @@ function Percent({
     maximumFractionDigits: decimals
   });
   const normalizedValue = unit === "percent" ? value / 100 : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: formatter.format(normalizedValue) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: formatter.format(normalizedValue) });
 }
 Percent.displayName = "TeachInUI.FormatPercent";
 
 // src/ui/format/plural.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Plural({
   count,
   one,
@@ -800,12 +841,12 @@ function Plural({
   };
   const selectedForm = forms[rule];
   const result = showCount ? `${count} ${selectedForm}` : selectedForm;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: result });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: result });
 }
 Plural.displayName = "TeachInUI.FormatPlural";
 
 // src/ui/format/duration.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Duration({
   minutes = 0,
   hours = 0,
@@ -827,26 +868,26 @@ function Duration({
   if (remainingMinutes > 0 || totalDays === 0 && totalHours === 0) {
     parts.push(compact ? `${remainingMinutes}\u043C` : `${remainingMinutes} \u043C\u0438\u043D`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: parts.join(" ") });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: parts.join(" ") });
 }
 Duration.displayName = "TeachInUI.FormatDuration";
 
 // src/ui/format/boolean.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Boolean({
   value,
   trueLabel = "\u0414\u0430",
   falseLabel = "\u041D\u0435\u0442",
   nullLabel = "\u2014"
 }) {
-  if (value === null || value === void 0) return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: nullLabel });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: value ? trueLabel : falseLabel });
+  if (value === null || value === void 0) return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: nullLabel });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: value ? trueLabel : falseLabel });
 }
 Boolean.displayName = "TeachInUI.FormatBoolean";
 
 // src/ui/surface/bento/bento.tsx
 var import_tailwind_variants2 = require("tailwind-variants");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var bento = (0, import_tailwind_variants2.tv)({
   base: "rounded-xl p-6 transition-colors",
   variants: {
@@ -884,28 +925,28 @@ var bento = (0, import_tailwind_variants2.tv)({
   }
 });
 var Bento = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: bento({ ...props, className }), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: bento({ ...props, className }), ...props });
 };
 Bento.displayName = "TeachInUI.Bento";
 
 // src/ui/surface/card/card.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_card = require("@heroui/card");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Root = import_react24.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_card.Card, { ref, ...props, children });
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Root = import_react25.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_card.Card, { ref, ...props, children });
 });
 Root.displayName = "TeachInUI.Card.Root";
-var Header = import_react24.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_card.CardHeader, { ref, ...props, children });
+var Header = import_react25.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_card.CardHeader, { ref, ...props, children });
 });
 Header.displayName = "TeachInUI.Card.Header";
-var Body = import_react24.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_card.CardBody, { ref, ...props, children });
+var Body = import_react25.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_card.CardBody, { ref, ...props, children });
 });
 Body.displayName = "TeachInUI.Card.Body";
-var Footer = import_react24.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_card.CardFooter, { ref, ...props, children });
+var Footer = import_react25.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_card.CardFooter, { ref, ...props, children });
 });
 Footer.displayName = "TeachInUI.Card.Footer";
 var Card = {
@@ -918,7 +959,7 @@ var Card = {
 // src/ui/layout/container/container.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_tailwind_variants3 = require("tailwind-variants");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var variants = (0, import_tailwind_variants3.tv)({
   base: "w-full mx-auto px-6",
   variants: {
@@ -938,58 +979,58 @@ var variants = (0, import_tailwind_variants3.tv)({
 });
 var Container = ({ children, asChild = false, className, size, ...props }) => {
   const Comp = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Comp, { className: cn(variants({ size }), className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Comp, { className: cn(variants({ size }), className), ...props, children });
 };
 Container.displayName = "TeachInUI.Container";
 
 // src/ui/layout/page/breadcrumbs.tsx
 var import_breadcrumbs = require("@heroui/breadcrumbs");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Breadcrumbs = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_breadcrumbs.Breadcrumbs, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_breadcrumbs.BreadcrumbItem, { href: item.href, isDisabled: item.href === void 0, children: item.label }, item.label)) });
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Breadcrumbs = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_breadcrumbs.Breadcrumbs, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_breadcrumbs.BreadcrumbItem, { href: item.href, isDisabled: item.href === void 0, children: item.label }, item.label)) });
 
 // src/ui/layout/page/page-content.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var Root2 = ({
   children,
   breadcrumbs = []
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-6", children: [
-  breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Breadcrumbs, { items: breadcrumbs }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-6", children: [
+  breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Breadcrumbs, { items: breadcrumbs }),
   children
 ] });
 Root2.displayName = "TeachInUI.PageContent.Root";
-var Header2 = ({ children, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("header", { className: "flex items-center justify-between gap-4", role: "banner", ...others, children });
+var Header2 = ({ children, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("header", { className: "flex items-center justify-between gap-4", role: "banner", ...others, children });
 Header2.displayName = "TeachInUI.PageContent.Header";
 var Title = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h1", { className: "text-4xl leading-10 font-bold", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h1", { className: "text-4xl leading-10 font-bold", ...others, children });
 Title.displayName = "TeachInUI.PageContent.Title";
 var Actions = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
 Actions.displayName = "TeachInUI.PageContent.Actions";
-var Body2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col gap-6", children });
+var Body2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-col gap-6", children });
 Body2.displayName = "TeachInUI.PageContent.Body";
 var Section = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("section", { className: "flex flex-col gap-4", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("section", { className: "flex flex-col gap-4", ...others, children });
 Section.displayName = "TeachInUI.PageContent.Section";
 var SectionHeader = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center justify-between", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-between", ...others, children });
 SectionHeader.displayName = "TeachInUI.PageContent.SectionHeader";
 var SectionTitle = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "text-3xl leading-9 font-bold", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h2", { className: "text-3xl leading-9 font-bold", ...others, children });
 SectionTitle.displayName = "TeachInUI.PageContent.SectionTitle";
 var SectionActions = ({
   children,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex gap-2", role: "group", ...others, children });
 SectionActions.displayName = "TeachInUI.PageContent.SectionActions";
 var PageContent = {
   Root: Root2,
@@ -1004,18 +1045,18 @@ var PageContent = {
 };
 
 // src/ui/layout/page/page-loading.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var PageLoading = () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Spinner, {}) });
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var PageLoading = () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Spinner, {}) });
 PageLoading.displayName = "TeachInUI.PageLoading";
 
 // src/ui/layout/page/section-loading.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var SectionLoading = () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Spinner, {}) });
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var SectionLoading = () => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Spinner, {}) });
 SectionLoading.displayName = "TeachInUI.SectionLoading";
 
 // src/ui/layout/flex/flex.tsx
 var import_tailwind_variants4 = require("tailwind-variants");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var variants2 = (0, import_tailwind_variants4.tv)({
   base: "flex",
   variants: {
@@ -1063,13 +1104,13 @@ var variants2 = (0, import_tailwind_variants4.tv)({
   }
 });
 var Flex = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: variants2({ ...props, className }), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: variants2({ ...props, className }), ...props });
 };
 Flex.displayName = "TeachInUI.Flex";
 
 // src/ui/layout/grid/grid.tsx
 var import_tailwind_variants5 = require("tailwind-variants");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var variants3 = (0, import_tailwind_variants5.tv)({
   base: "grid",
   variants: {
@@ -1119,26 +1160,26 @@ var variants3 = (0, import_tailwind_variants5.tv)({
   }
 });
 var Grid = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: variants3({ ...props, className }), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: variants3({ ...props, className }), ...props });
 };
 Grid.displayName = "TeachInUI.Grid";
 
 // src/ui/layout/divider/divider.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_divider = require("@heroui/divider");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var Divider = import_react25.default.forwardRef((props, ref) => {
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Divider = import_react26.default.forwardRef((props, ref) => {
   const { ...restProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_divider.Divider, { ref, ...restProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_divider.Divider, { ref, ...restProps });
 });
 Divider.displayName = "TeachInUI.Divider";
 
 // src/ui/layout/scroll-shadow/scroll-shadow.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_scroll_shadow = require("@heroui/scroll-shadow");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var ScrollShadow = import_react26.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_scroll_shadow.ScrollShadow, { ref, ...props });
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var ScrollShadow = import_react27.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_scroll_shadow.ScrollShadow, { ref, ...props });
 });
 ScrollShadow.displayName = "TeachInUI.ScrollShadow";
 
@@ -1149,18 +1190,18 @@ var AccordionItem = Object.assign(import_accordion.AccordionItem, { displayName:
 
 // src/ui/navigation/link/link.tsx
 var import_link = require("@heroui/link");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Link({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_link.Link, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_link.Link, { ...props, children });
 }
 Link.displayName = "TeachInUI.Link";
 
 // src/ui/navigation/tabs/tabs.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_tabs = require("@heroui/tabs");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Root3 = import_react27.default.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tabs.Tabs, { ref, ...props, children });
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Root3 = import_react28.default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tabs.Tabs, { ref, ...props, children });
 });
 Root3.displayName = "TeachInUI.Tabs.Root";
 var Tab = Object.assign(import_tabs.Tab, {
@@ -1172,54 +1213,44 @@ var Tabs = {
 };
 
 // src/ui/navigation/navbar/navbar.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_navbar = require("@heroui/navbar");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var Navbar = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.Navbar, { ref, ...props });
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Navbar = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.Navbar, { ref, ...props });
 });
 Navbar.displayName = "TeachInUI.Navbar";
-var NavbarBrand = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarBrand, { ref, ...props });
+var NavbarBrand = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarBrand, { ref, ...props });
 });
 NavbarBrand.displayName = "TeachInUI.NavbarBrand";
-var NavbarContent = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarContent, { ref, ...props });
+var NavbarContent = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarContent, { ref, ...props });
 });
 NavbarContent.displayName = "TeachInUI.NavbarContent";
-var NavbarItem = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarItem, { ref, ...props });
+var NavbarItem = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarItem, { ref, ...props });
 });
 NavbarItem.displayName = "TeachInUI.NavbarItem";
-var NavbarMenu = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarMenu, { ref, ...props });
+var NavbarMenu = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarMenu, { ref, ...props });
 });
 NavbarMenu.displayName = "TeachInUI.NavbarMenu";
-var NavbarMenuItem = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarMenuItem, { ref, ...props });
+var NavbarMenuItem = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarMenuItem, { ref, ...props });
 });
 NavbarMenuItem.displayName = "TeachInUI.NavbarMenuItem";
-var NavbarMenuToggle = import_react28.default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_navbar.NavbarMenuToggle, { ref, ...props });
+var NavbarMenuToggle = import_react29.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_navbar.NavbarMenuToggle, { ref, ...props });
 });
 NavbarMenuToggle.displayName = "TeachInUI.NavbarMenuToggle";
 
 // src/ui/navigation/breadcrumbs/breadcrumbs.tsx
-var import_react29 = __toESM(require("react"));
 var import_breadcrumbs3 = require("@heroui/breadcrumbs");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var Breadcrumbs2 = import_react29.default.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_breadcrumbs3.Breadcrumbs, { ref, ...props });
-  }
-);
-Breadcrumbs2.displayName = "TeachInUI.Breadcrumbs";
-var BreadcrumbItem2 = import_react29.default.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_breadcrumbs3.BreadcrumbItem, { ref, ...props, children });
-  }
-);
-BreadcrumbItem2.displayName = "TeachInUI.BreadcrumbItem";
+var Breadcrumbs2 = Object.assign(import_breadcrumbs3.Breadcrumbs, { displayName: "TeachInUI.Breadcrumbs" });
+var BreadcrumbItem2 = Object.assign(import_breadcrumbs3.BreadcrumbItem, {
+  displayName: "TeachInUI.BreadcrumbItem"
+});
 
 // src/ui/overlays/modal/modal.tsx
 var import_modal = require("@heroui/modal");
@@ -1269,9 +1300,30 @@ var DropdownSection = Object.assign(import_dropdown.DropdownSection, {
   displayName: "TeachInUI.DropdownSection"
 });
 
-// src/ui/provider/ui-provider.tsx
-var import_system2 = require("@heroui/system");
+// src/ui/overlays/popover/popover.tsx
+var import_popover = require("@heroui/popover");
 var import_jsx_runtime60 = require("react/jsx-runtime");
+var Root5 = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_popover.Popover, { ...props, children });
+};
+Root5.displayName = "TeachInUI.Popover.Root";
+var Trigger = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_popover.PopoverTrigger, { ...props, children });
+};
+Trigger.displayName = "TeachInUI.Popover.Trigger";
+var Content2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_popover.PopoverContent, { ...props, children });
+};
+Content2.displayName = "TeachInUI.Popover.Content";
+var Popover = {
+  Root: Root5,
+  Trigger,
+  Content: Content2
+};
+
+// src/ui/provider/ui-provider.tsx
+var import_system3 = require("@heroui/system");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function UIProvider({
   children,
   locale = "ru-RU",
@@ -1279,9 +1331,9 @@ function UIProvider({
   navigate,
   toastProviderProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_system2.HeroUIProvider, { labelPlacement, locale, navigate, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_system3.HeroUIProvider, { labelPlacement, locale, navigate, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ToastProvider, { ...toastProviderProps })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ToastProvider, { ...toastProviderProps })
   ] });
 }
 
@@ -1706,6 +1758,7 @@ var theme = (0, import_theme.heroui)({
   FormatTime,
   Grid,
   Header,
+  Image,
   Input,
   InputField,
   Link,
@@ -1720,6 +1773,7 @@ var theme = (0, import_theme.heroui)({
   PageContent,
   PageLoading,
   Pagination,
+  Popover,
   Progress,
   Radio,
   RadioField,