@lets-events/react 11.1.0 → 11.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.1.0 build
+> @lets-events/react@11.2.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 288.10 KB
-CJS ⚡️ Build success in 226ms
-ESM dist\index.mjs 279.22 KB
-ESM ⚡️ Build success in 227ms
+CJS dist\index.js 288.75 KB
+CJS ⚡️ Build success in 229ms
+ESM dist\index.mjs 279.75 KB
+ESM ⚡️ Build success in 230ms
 DTS Build start
-DTS ⚡️ Build success in 3563ms
-DTS dist\index.d.mts 348.93 KB
-DTS dist\index.d.ts  348.93 KB
+DTS ⚡️ Build success in 3614ms
+DTS dist\index.d.mts 349.19 KB
+DTS dist\index.d.ts  349.19 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 11.2.0
+
+### Minor Changes
+
+- Form component
+
 ## 11.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -5,14 +5,14 @@ import PropTypes from 'prop-types';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import react__default, { ComponentProps, ElementType, ReactNode } from 'react';
+import react__default, { ComponentProps, ElementType, ReactNode, JSX } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { Colors } from '@lets-events/tokens';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
+import { FieldError, Merge, FieldErrorsImpl, UseFormProps, SubmitHandler, FieldValues } from 'react-hook-form';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -13354,7 +13354,7 @@ declare function Section({ children, ...props }: SectionProps): react_jsx_runtim
 type ErrorFormMessageProps = {
     message?: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
 };
-declare const ErrorFormMessage: ({ message }: ErrorFormMessageProps) => react_jsx_runtime.JSX.Element | null | undefined;
+declare const ErrorFormMessage: ({ message }: ErrorFormMessageProps) => react_jsx_runtime.JSX.Element | null;
 
 type FormLabelProps = {
     name: string;
@@ -13380,4 +13380,10 @@ type TextFormFieldProps = {
 };
 declare const TextFormField: ({ name, label, required, placeholder, }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, FormLabel, type FormLabelProps, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };
+type FormProps = UseFormProps & {
+    onSubmit: SubmitHandler<FieldValues>;
+    children: JSX.Element;
+};
+declare const Form: ({ onSubmit, children, ...props }: FormProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };

package/dist/index.d.ts

@@ -5,14 +5,14 @@ import PropTypes from 'prop-types';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import react__default, { ComponentProps, ElementType, ReactNode } from 'react';
+import react__default, { ComponentProps, ElementType, ReactNode, JSX } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { Colors } from '@lets-events/tokens';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
+import { FieldError, Merge, FieldErrorsImpl, UseFormProps, SubmitHandler, FieldValues } from 'react-hook-form';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -13354,7 +13354,7 @@ declare function Section({ children, ...props }: SectionProps): react_jsx_runtim
 type ErrorFormMessageProps = {
     message?: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
 };
-declare const ErrorFormMessage: ({ message }: ErrorFormMessageProps) => react_jsx_runtime.JSX.Element | null | undefined;
+declare const ErrorFormMessage: ({ message }: ErrorFormMessageProps) => react_jsx_runtime.JSX.Element | null;
 
 type FormLabelProps = {
     name: string;
@@ -13380,4 +13380,10 @@ type TextFormFieldProps = {
 };
 declare const TextFormField: ({ name, label, required, placeholder, }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, FormLabel, type FormLabelProps, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };
+type FormProps = UseFormProps & {
+    onSubmit: SubmitHandler<FieldValues>;
+    children: JSX.Element;
+};
+declare const Form: ({ onSubmit, children, ...props }: FormProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, Modal, type ModalProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1044,6 +1044,7 @@ __export(index_exports, {
   FilterItem: () => FilterItem,
   Flex: () => Flex2,
   FlexStyled: () => FlexStyled,
+  Form: () => Form,
   FormLabel: () => FormLabel,
   Grid: () => Grid,
   GridStyled: () => GridStyled,
@@ -9319,7 +9320,7 @@ var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var ErrorFormMessage = ({ message: message2 }) => {
-  if (!message2) return;
+  if (!message2) return null;
   if (typeof message2 !== "string") {
     return null;
   }
@@ -9428,6 +9429,16 @@ var TextFormField = ({
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/Form.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Form = (_a) => {
+  var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
+  const methods = (0, import_react_hook_form3.useForm)(props);
+  const { handleSubmit } = methods;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -9463,6 +9474,7 @@ var TextFormField = ({
   FilterItem,
   Flex,
   FlexStyled,
+  Form,
   FormLabel,
   Grid,
   GridStyled,

package/dist/index.mjs

@@ -9229,7 +9229,7 @@ import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 var ErrorFormMessage = ({ message: message2 }) => {
-  if (!message2) return;
+  if (!message2) return null;
   if (typeof message2 !== "string") {
     return null;
   }
@@ -9338,6 +9338,19 @@ var TextFormField = ({
     /* @__PURE__ */ jsx30(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/Form.tsx
+import {
+  FormProvider,
+  useForm
+} from "react-hook-form";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Form = (_a) => {
+  var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
+  const methods = useForm(props);
+  const { handleSubmit } = methods;
+  return /* @__PURE__ */ jsx31(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsx31("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+};
 export {
   Alert,
   AlertDialogCompleteStyled,
@@ -9372,6 +9385,7 @@ export {
   FilterItem,
   Flex2 as Flex,
   FlexStyled,
+  Form,
   FormLabel,
   Grid,
   GridStyled,

package/package.json

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

package/src/components/FormFields/ErrorFormMessage.tsx

@@ -19,7 +19,7 @@ export type ErrorFormMessageProps = {
 };
 
 export const ErrorFormMessage = ({ message }: ErrorFormMessageProps) => {
-  if (!message) return;
+  if (!message) return null;
 
   if (typeof message !== "string") {
     return null;

package/src/components/FormFields/Form.tsx

@@ -0,0 +1,25 @@
+import { JSX } from "react";
+import {
+  FormProvider,
+  useForm,
+  SubmitHandler,
+  FieldValues,
+  UseFormProps,
+} from "react-hook-form";
+
+export type FormProps = UseFormProps & {
+  onSubmit: SubmitHandler<FieldValues>;
+  children: JSX.Element;
+};
+
+export const Form = ({ onSubmit, children, ...props }: FormProps) => {
+  const methods = useForm(props);
+
+  const { handleSubmit } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>{children}</form>
+    </FormProvider>
+  );
+};

package/src/index.tsx

@@ -1,40 +1,40 @@
 // Icon
-export * from './components/Icon'
+export * from "./components/Icon";
 
 // Text
-export * from './components/Text'
+export * from "./components/Text";
 
 // Components
-export * from './components/Button'
-export * from './components/ButtonGroup'
-export * from './components/Avatar'
-export * from './components/TextField'
-export * from './components/RadioGroup'
-export * from './components/CheckboxGroup'
-export * from './components/Filter'
-export * from './components/Dropdown'
-export * from './components/Badge'
-export * from './components/Modal'
-export * from './components/Calendar'
-export * from './components/TimePicker'
-export * from './components/Alert'
-export * from './components/Switch'
-export * from './components/Step'
-export * from './components/Card'
-export * from './components/TextareaField'
-export * from './components/Toast'
-export * from './components/Tooltip'
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/Avatar";
+export * from "./components/TextField";
+export * from "./components/RadioGroup";
+export * from "./components/CheckboxGroup";
+export * from "./components/Filter";
+export * from "./components/Dropdown";
+export * from "./components/Badge";
+export * from "./components/Modal";
+export * from "./components/Calendar";
+export * from "./components/TimePicker";
+export * from "./components/Alert";
+export * from "./components/Switch";
+export * from "./components/Step";
+export * from "./components/Card";
+export * from "./components/TextareaField";
+export * from "./components/Toast";
+export * from "./components/Tooltip";
 
 // Layouts
-export * from './components/Flex'
-export * from './components/Box'
-export * from './components/Grid'
-export * from './components/Container'
-export * from './components/Section'
-
+export * from "./components/Flex";
+export * from "./components/Box";
+export * from "./components/Grid";
+export * from "./components/Container";
+export * from "./components/Section";
 
 //Form
-export * from './components/FormFields/ErrorFormMessage'
-export * from './components/FormFields/FormLabel'
-export * from './components/FormFields/TextAreaFormField'
-export * from './components/FormFields/TextFormField'
+export * from "./components/FormFields/ErrorFormMessage";
+export * from "./components/FormFields/FormLabel";
+export * from "./components/FormFields/TextAreaFormField";
+export * from "./components/FormFields/TextFormField";
+export * from "./components/FormFields/Form";