@lets-events/react 12.1.4 → 12.1.6

package/dist/index.js

@@ -2034,7 +2034,7 @@ var QuillComponent_exports = {};
 __export(QuillComponent_exports, {
   default: () => QuillComponent_default
 });
-var import_react20, import_react_quilljs, import_quill_snow, import_jsx_runtime50, QuillComponent, QuillComponent_default;
+var import_react20, import_react_quilljs, import_quill_snow, import_jsx_runtime51, QuillComponent, QuillComponent_default;
 var init_QuillComponent = __esm({
   "src/components/RichEditor/QuillComponent.tsx"() {
     "use strict";
@@ -2046,7 +2046,7 @@ var init_QuillComponent = __esm({
     init_useToast();
     init_uploadService();
     init_styledComponents();
-    import_jsx_runtime50 = require("react/jsx-runtime");
+    import_jsx_runtime51 = require("react/jsx-runtime");
     QuillComponent = ({
       value = "",
       onChange,
@@ -2265,9 +2265,9 @@ var init_QuillComponent = __esm({
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(QuillEditor, { style: { position: "relative" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: quillRef }),
-        showVideoModal && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(QuillEditor, { style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: quillRef }),
+        showVideoModal && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             ref: videoModalRef,
@@ -2284,15 +2284,15 @@ var init_QuillComponent = __esm({
               zIndex: 1e3,
               width: "fit-content"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex2, { gap: 8, align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex2, { gap: 8, align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 Text,
                 {
                   style: { fontSize: "14px", fontWeight: "500", color: "#333" },
                   children: "V\xEDdeo:"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "input",
                 {
                   type: "text",
@@ -2316,7 +2316,7 @@ var init_QuillComponent = __esm({
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "button",
                 {
                   onClick: handleVideoSubmit,
@@ -2337,7 +2337,7 @@ var init_QuillComponent = __esm({
             ] })
           }
         ),
-        showLinkModal && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        showLinkModal && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             ref: linkModalRef,
@@ -2354,15 +2354,15 @@ var init_QuillComponent = __esm({
               zIndex: 1e3,
               width: "fit-content"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex2, { gap: 8, align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex2, { gap: 8, align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 Text,
                 {
                   style: { fontSize: "14px", fontWeight: "500", color: "#333" },
                   children: "Link:"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "input",
                 {
                   type: "text",
@@ -2387,7 +2387,7 @@ var init_QuillComponent = __esm({
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "button",
                 {
                   onClick: handleLinkSubmit,
@@ -2487,6 +2487,7 @@ __export(index_exports, {
   StepTrigger: () => StepTrigger,
   StepWrapper: () => StepWrapper,
   Switch: () => Switch,
+  SwitchFormField: () => SwitchFormField,
   SwitchStyled: () => SwitchStyled,
   Text: () => Text,
   TextAreaFormField: () => TextAreaFormField,
@@ -2503,6 +2504,7 @@ __export(index_exports, {
   TimePickerDropdownStyled: () => TimePickerDropdownStyled,
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerFormField: () => TimePickerFormField,
+  TimePickerIconButton: () => TimePickerIconButton,
   TimePickerStyled: () => TimePickerStyled,
   TimerPickerContentStyled: () => TimerPickerContentStyled,
   ToastItem: () => ToastItem,
@@ -9092,6 +9094,7 @@ init_styles();
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -9115,7 +9118,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -9199,6 +9202,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -9280,7 +9286,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9352,7 +9358,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -11662,15 +11668,53 @@ var CheckboxGroupFormField = ({
   ] });
 };
 
-// src/components/FormFields/EmailFormField.tsx
+// src/components/FormFields/SwitchFormField.tsx
+var import_react_hook_form11 = require("react-hook-form");
+init_Flex();
+init_Text();
 var import_jsx_runtime49 = require("react/jsx-runtime");
+var SwitchFormField = ({
+  name,
+  label,
+  defaultValue = false,
+  watch = false
+}) => {
+  const {
+    control,
+    watch: watchForm
+  } = (0, import_react_hook_form11.useFormContext)();
+  if (watch) {
+    watchForm(name);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex2, { justify: "between", style: { margin: "1rem 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { typography: "labelMedium", fontWeight: "regular", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_react_hook_form11.Controller,
+      {
+        control,
+        name,
+        defaultValue,
+        render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          Switch,
+          {
+            checked: field.value,
+            onCheckedChange: field.onChange
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/FormFields/EmailFormField.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var EmailFormField = ({
   name,
   label,
   required,
   placeholder
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     TextFormField,
     {
       name,
@@ -11684,12 +11728,12 @@ var EmailFormField = ({
 };
 
 // src/components/FormFields/RichEditorFormField.tsx
-var import_react_hook_form11 = require("react-hook-form");
+var import_react_hook_form12 = require("react-hook-form");
 init_Flex();
 
 // src/components/RichEditor/RichEditor.tsx
 var import_react21 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var QuillComponent2 = (0, import_react21.lazy)(() => Promise.resolve().then(() => (init_QuillComponent(), QuillComponent_exports)));
 var RichEditor = (props) => {
   const [isClient, setIsClient] = (0, import_react21.useState)(false);
@@ -11697,12 +11741,12 @@ var RichEditor = (props) => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react21.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(QuillComponent2, __spreadValues({}, props)) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react21.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuillComponent2, __spreadValues({}, props)) }) }) });
 };
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -11717,7 +11761,7 @@ var RichEditorFormField = (_a) => {
     "validate",
     "validationErrorMessage"
   ]);
-  const { field, fieldState } = (0, import_react_hook_form11.useController)({
+  const { field, fieldState } = (0, import_react_hook_form12.useController)({
     name,
     rules: {
       required: required ? validationErrorMessage : false,
@@ -11733,8 +11777,8 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex2, { direction: "column", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "column", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       FormLabel,
       {
         name,
@@ -11743,7 +11787,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -11751,15 +11795,15 @@ var RichEditorFormField = (_a) => {
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
-var import_react_hook_form12 = require("react-hook-form");
+var import_react_hook_form13 = require("react-hook-form");
 init_Flex();
 var import_react22 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -11791,7 +11835,7 @@ var CalendarFormField = (_a) => {
     },
     [validate, required, validationErrorMessage]
   );
-  const { field, fieldState } = (0, import_react_hook_form12.useController)({
+  const { field, fieldState } = (0, import_react_hook_form13.useController)({
     name,
     rules: __spreadValues({
       required: required ? validationErrorMessage : false,
@@ -11806,8 +11850,8 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       FormLabel,
       {
         name,
@@ -11816,7 +11860,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Calendar,
       __spreadValues({
         selected,
@@ -11828,15 +11872,15 @@ var CalendarFormField = (_a) => {
         allowPastDates
       }, calendarProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
-var import_react_hook_form13 = require("react-hook-form");
+var import_react_hook_form14 = require("react-hook-form");
 init_Flex();
 var import_react23 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -11864,7 +11908,7 @@ var TimePickerFormField = (_a) => {
     },
     [validate, required, validationErrorMessage]
   );
-  const { field, fieldState } = (0, import_react_hook_form13.useController)({
+  const { field, fieldState } = (0, import_react_hook_form14.useController)({
     name,
     rules: __spreadValues({
       required: required ? validationErrorMessage : false,
@@ -11879,8 +11923,8 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       FormLabel,
       {
         name,
@@ -11889,7 +11933,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       TimePicker,
       __spreadValues({
         selected,
@@ -11900,7 +11944,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -12079,6 +12123,7 @@ init_uploadService();
   StepTrigger,
   StepWrapper,
   Switch,
+  SwitchFormField,
   SwitchStyled,
   Text,
   TextAreaFormField,
@@ -12095,6 +12140,7 @@ init_uploadService();
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/dist/index.mjs

@@ -6557,6 +6557,7 @@ import { useCallback, useRef as useRef5, useState as useState3 } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
+  width: "fit-content",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -6580,7 +6581,7 @@ var TimePickerDropdownStyled = styled("div", {
   position: "absolute",
   zIndex: 10,
   width: "100%",
-  maxWidth: "8.875rem",
+  maxWidth: "min-content",
   backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
@@ -6664,6 +6665,9 @@ var TimePickerButtonStyled = styled("button", {
     }
   }
 });
+var TimePickerIconButton = styled(Button, {
+  padding: "0 !important"
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -6745,7 +6749,7 @@ function TimePicker({
                 },
                 children: [
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -6817,7 +6821,7 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ jsx14(
-                    Button,
+                    TimePickerIconButton,
                     {
                       type: "button",
                       variant: "text",
@@ -9094,15 +9098,51 @@ var CheckboxGroupFormField = ({
   ] });
 };
 
+// src/components/FormFields/SwitchFormField.tsx
+import { useFormContext as useFormContext10, Controller as Controller5 } from "react-hook-form";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
+var SwitchFormField = ({
+  name,
+  label,
+  defaultValue = false,
+  watch = false
+}) => {
+  const {
+    control,
+    watch: watchForm
+  } = useFormContext10();
+  if (watch) {
+    watchForm(name);
+  }
+  return /* @__PURE__ */ jsxs23(Flex, { justify: "between", style: { margin: "1rem 0" }, children: [
+    /* @__PURE__ */ jsx44(Text, { typography: "labelMedium", fontWeight: "regular", children: label }),
+    /* @__PURE__ */ jsx44(
+      Controller5,
+      {
+        control,
+        name,
+        defaultValue,
+        render: ({ field }) => /* @__PURE__ */ jsx44(
+          Switch,
+          {
+            checked: field.value,
+            onCheckedChange: field.onChange
+          }
+        )
+      }
+    )
+  ] });
+};
+
 // src/components/FormFields/EmailFormField.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var EmailFormField = ({
   name,
   label,
   required,
   placeholder
 }) => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     TextFormField,
     {
       name,
@@ -9120,7 +9160,7 @@ import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/RichEditor.tsx
 import { lazy, useEffect as useEffect6, useState as useState7, Suspense } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var QuillComponent = lazy(() => import("./QuillComponent-A5KIFPCL.mjs"));
 var RichEditor = (props) => {
   const [isClient, setIsClient] = useState7(false);
@@ -9128,12 +9168,12 @@ var RichEditor = (props) => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
-  return /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(ToastProvider, { children: /* @__PURE__ */ jsx45(Suspense, { fallback: null, children: /* @__PURE__ */ jsx45(QuillComponent, __spreadValues({}, props)) }) }) });
+  return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(ToastProvider, { children: /* @__PURE__ */ jsx46(Suspense, { fallback: null, children: /* @__PURE__ */ jsx46(QuillComponent, __spreadValues({}, props)) }) }) });
 };
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
-import { jsx as jsx46, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -9164,8 +9204,8 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ jsxs23(Flex, { direction: "column", children: [
-    label && /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs24(Flex, { direction: "column", children: [
+    label && /* @__PURE__ */ jsx47(
       FormLabel,
       {
         name,
@@ -9174,7 +9214,7 @@ var RichEditorFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(
       RichEditor_default,
       __spreadProps(__spreadValues({}, props), {
         value: field.value,
@@ -9182,14 +9222,14 @@ var RichEditorFormField = (_a) => {
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ jsx46(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx47(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/CalendarFormField.tsx
 import { useController as useController4 } from "react-hook-form";
 import { useCallback as useCallback4 } from "react";
-import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -9236,8 +9276,8 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ jsxs24(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs25(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ jsx48(
       FormLabel,
       {
         name,
@@ -9246,7 +9286,7 @@ var CalendarFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(
       Calendar,
       __spreadValues({
         selected,
@@ -9258,14 +9298,14 @@ var CalendarFormField = (_a) => {
         allowPastDates
       }, calendarProps)
     ),
-    /* @__PURE__ */ jsx47(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx48(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TimePickerFormField.tsx
 import { useController as useController5 } from "react-hook-form";
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -9308,8 +9348,8 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ jsxs25(Flex, { direction: "column", style: { flex: "1" }, children: [
-    label && /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs26(Flex, { direction: "column", style: { flex: "1" }, children: [
+    label && /* @__PURE__ */ jsx49(
       FormLabel,
       {
         name,
@@ -9318,7 +9358,7 @@ var TimePickerFormField = (_a) => {
         haveError
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49(
       TimePicker,
       __spreadValues({
         selected,
@@ -9329,7 +9369,7 @@ var TimePickerFormField = (_a) => {
         hasError: haveError
       }, timePickerProps)
     ),
-    /* @__PURE__ */ jsx48(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx49(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -9503,6 +9543,7 @@ export {
   StepTrigger,
   StepWrapper,
   Switch,
+  SwitchFormField,
   SwitchStyled,
   Text,
   TextAreaFormField,
@@ -9519,6 +9560,7 @@ export {
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerFormField,
+  TimePickerIconButton,
   TimePickerStyled,
   TimerPickerContentStyled,
   ToastItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.1.4",
+  "version": "12.1.6",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/FormFields/SwitchFormField.tsx

@@ -0,0 +1,46 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Flex } from "../Flex";
+import { Switch } from "../Switch";
+import { Text } from "../Text";
+
+
+export type SwitchFormFieldProps = {
+    name: string;
+    label: string;
+    defaultValue?: boolean;
+    watch?: boolean;
+};
+
+export const SwitchFormField = ({
+    name,
+    label,
+    defaultValue = false,
+    watch = false,
+}: SwitchFormFieldProps) => {
+    const {
+        control,
+        watch: watchForm,
+    } = useFormContext();
+
+    if (watch) {
+        watchForm(name);
+    }
+    return (
+        <Flex justify="between" style={{ margin: '1rem 0' }}>
+            <Text typography="labelMedium" fontWeight="regular">
+                {label}
+            </Text>
+            <Controller
+                control={control}
+                name={name}
+                defaultValue={defaultValue}
+                render={({ field }) => (
+                    <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                    />
+                )}
+            />
+        </Flex>
+    );
+};