@lets-events/react 7.0.1 → 7.2.0

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@7.0.1 build
+> @lets-events/react@7.2.0 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
+CJS dist/index.js 296.69 KB
+CJS ⚡️ Build success in 280ms
+ESM dist/index.mjs 289.05 KB
+ESM ⚡️ Build success in 302ms
 DTS Build start
-CJS dist/index.js 266.35 KB
-CJS ⚡️ Build success in 319ms
-ESM dist/index.mjs 258.88 KB
-ESM ⚡️ Build success in 321ms
-DTS ⚡️ Build success in 6592ms
-DTS dist/index.d.mts 325.81 KB
-DTS dist/index.d.ts  325.81 KB
+DTS ⚡️ Build success in 7060ms
+DTS dist/index.d.mts 326.74 KB
+DTS dist/index.d.ts  326.74 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 7.2.0
+
+### Minor Changes
+
+- Textarea and Input Mask
+
+## 7.1.0
+
+### Minor Changes
+
+- Component Calendar and TimePicker refactored
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -5,10 +5,11 @@ 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 } from 'react';
+import react__default, { ComponentProps, ElementType, ReactNode } 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, Dialog, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { CSS } from '@stitches/react';
+import { MaskOptions, format, unformat } from '@react-input/mask';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -2674,7 +2675,7 @@ declare const TextFieldSlotStyled: _stitches_react_types_styled_component.Styled
     zIndex: "zIndices";
 }, {}>>;
 type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-    addon?: string;
+    addon?: ReactNode;
     placeholder?: string;
     children?: React.ReactNode;
     isValid?: boolean;
@@ -2682,18 +2683,21 @@ type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
     typography?: string;
     fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
     textAlign?: 'left' | 'right' | 'center';
+    mask?: MaskOptions;
 };
 type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
     placeholder?: string;
     children?: React.ReactNode;
     position?: 'flex-start' | 'flex-end';
     onClick?: () => void;
-    color?: "error" | "success" | undefined;
+    color?: 'error' | 'success' | undefined;
     typography?: string;
     fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
     textAlign?: 'left' | 'right' | 'center';
 };
-declare function TextField({ children, isValid, name, color, typography, fontWeight, addon, textAlign, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare const maskFormat: typeof format;
+declare const maskUnformat: typeof unformat;
+declare function TextField({ children, isValid, name, color, typography, fontWeight, addon, textAlign, mask, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 declare function TextFieldSlot({ children, position, onClick, typography, fontWeight, textAlign, ...props }: TextFieldSlotProps): react_jsx_runtime.JSX.Element;
 
 declare const RadioGroupStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<RadioGroup$1.RootProps & react.RefAttributes<HTMLDivElement>>, {
@@ -5759,11 +5763,11 @@ type CalendarProps = ComponentProps<typeof CalendarStyled> & {
     calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
     selected: Date | undefined;
     setSelected: react__default.Dispatch<react__default.SetStateAction<Date | undefined>>;
+    position?: "top" | "bottom";
     action?: boolean;
     actionText?: string;
-    onAction?: () => void;
 };
-declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, onAction, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ action, actionText, calendarLayout, selected, setSelected, position, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 declare const TimePickerStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
@@ -6135,7 +6139,7 @@ declare const TimePickerStyled: _stitches_react_types_styled_component.StyledCom
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerTitleStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<Dialog.TitleProps & react__default.RefAttributes<HTMLHeadingElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimePickerDropdownStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -6505,7 +6509,7 @@ declare const TimePickerTitleStyled: _stitches_react_types_styled_component.Styl
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerDialogStyled: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<Dialog.ContentProps & react__default.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimePickerFooterStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -6875,7 +6879,7 @@ declare const TimePickerDialogStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimePickerFooterStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TimerPickerContentStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -7245,7 +7249,16 @@ declare const TimePickerFooterStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const TimerPickerContentStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+type TimePickerProps = {
+    selected: string | undefined;
+    setSelected: react__default.Dispatch<react__default.SetStateAction<string | undefined>>;
+    position?: "bottom" | "top";
+};
+declare function TimePicker({ selected, setSelected, position, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+
+declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.ContentProps & react.RefAttributes<HTMLDivElement>>, {
+    color?: "info" | "warning" | "error" | "success" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -7615,14 +7628,8 @@ declare const TimerPickerContentStyled: _stitches_react_types_styled_component.S
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TimePickerProps = {
-    selected: string | undefined;
-    setSelected: react__default.Dispatch<react__default.SetStateAction<string | undefined>>;
-};
-declare function TimePicker({ selected, setSelected }: TimePickerProps): react_jsx_runtime.JSX.Element;
-
-declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.ContentProps & react.RefAttributes<HTMLDivElement>>, {
-    color?: "info" | "warning" | "error" | "success" | undefined;
+declare const AlertDialogCompleteStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.ContentProps & react.RefAttributes<HTMLDivElement>>, {
+    color?: undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -7993,9 +8000,7 @@ declare const AlertDialogSimpleStyled: _stitches_react_types_styled_component.St
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogCompleteStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.ContentProps & react.RefAttributes<HTMLDivElement>>, {
-    color?: undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.DescriptionProps & react.RefAttributes<HTMLParagraphElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -8365,7 +8370,7 @@ declare const AlertDialogCompleteStyled: _stitches_react_types_styled_component.
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.DescriptionProps & react.RefAttributes<HTMLParagraphElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.TitleProps & react.RefAttributes<HTMLHeadingElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -8735,7 +8740,7 @@ declare const AlertDialogDescriptionStyled: _stitches_react_types_styled_compone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<AlertDialog.TitleProps & react.RefAttributes<HTMLHeadingElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.StyledComponent<typeof Text, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9105,7 +9110,7 @@ declare const AlertDialogTitleStyled: _stitches_react_types_styled_component.Sty
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.StyledComponent<typeof Text, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialogRowStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9475,7 +9480,7 @@ declare const AlertDialogSubtitleStyled: _stitches_react_types_styled_component.
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialogRowStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const AlertDialoghrStyled: _stitches_react_types_styled_component.StyledComponent<"hr", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -9845,7 +9850,29 @@ declare const AlertDialogRowStyled: _stitches_react_types_styled_component.Style
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const AlertDialoghrStyled: _stitches_react_types_styled_component.StyledComponent<"hr", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+type AlertProps = {
+    trigger: React.ReactNode;
+    color?: "error" | "warning" | "success" | "info";
+    simpleAlert?: {
+        description: string;
+        cancel: boolean;
+    };
+    completAlert?: {
+        title?: string;
+        subtitle?: string;
+        description: string;
+        cancel: boolean;
+        cancelText?: string;
+        actionText?: string;
+        onAction?: () => void;
+    };
+};
+declare function Alert({ color, trigger, completAlert, simpleAlert, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+declare const SwitchStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
+    color?: "brand" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -10215,29 +10242,13 @@ declare const AlertDialoghrStyled: _stitches_react_types_styled_component.Styled
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type AlertProps = {
-    trigger: React.ReactNode;
-    color?: 'error' | 'warning' | 'success' | 'info';
-    simpleAlert?: {
-        description: string;
-        cancel: boolean;
-    };
-    completAlert?: {
-        title?: string;
-        subtitle?: string;
-        description: string;
-        cancel: boolean;
-        cancelText?: string;
-        actionText?: string;
-        onAction?: () => void;
-    };
+type SwitchProps = ComponentProps<typeof Switch$1> & {
+    color?: 'brand';
+    size?: 'sm' | 'md' | 'lg';
 };
-declare function Alert({ color, trigger, completAlert, simpleAlert, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+declare function Switch(props: SwitchProps): react_jsx_runtime.JSX.Element;
 
-declare const SwitchStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
-    color?: "brand" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StepStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -10607,13 +10618,32 @@ declare const SwitchStyled: _stitches_react_types_styled_component.StyledCompone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type SwitchProps = ComponentProps<typeof Switch$1> & {
-    color?: 'brand';
-    size?: 'sm' | 'md' | 'lg';
+type StepProps = ComponentProps<typeof StepStyled> & {
+    children: react__default.ReactNode;
+    defaultValue: number;
 };
-declare function Switch(props: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Step({ children, defaultValue, ...props }: StepProps): react_jsx_runtime.JSX.Element;
+declare function StepTrigger({ value, children, currentStep, ...props }: {
+    value: number;
+    children: react__default.ReactNode | string;
+    currentStep?: number;
+    onClick: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function StepContent({ value, children, ...props }: {
+    value: number;
+    children: react__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function StepList({ children, currentStep, ...props }: {
+    children: react__default.ReactNode;
+    currentStep: number;
+}): react_jsx_runtime.JSX.Element;
+declare function StepWrapper({ children, ...props }: {
+    children: react__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
 
-declare const StepStyled: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>, {
+    typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
         brand100: string;
@@ -10983,28 +11013,10 @@ declare const StepStyled: _stitches_react_types_styled_component.StyledComponent
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type StepProps = ComponentProps<typeof StepStyled> & {
-    children: react__default.ReactNode;
-    defaultValue: number;
+type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
+    limit: number;
 };
-declare function Step({ children, defaultValue, ...props }: StepProps): react_jsx_runtime.JSX.Element;
-declare function StepTrigger({ value, children, currentStep, ...props }: {
-    value: number;
-    children: react__default.ReactNode | string;
-    currentStep?: number;
-    onClick: () => void;
-}): react_jsx_runtime.JSX.Element;
-declare function StepContent({ value, children, ...props }: {
-    value: number;
-    children: react__default.ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function StepList({ children, currentStep, ...props }: {
-    children: react__default.ReactNode;
-    currentStep: number;
-}): react_jsx_runtime.JSX.Element;
-declare function StepWrapper({ children, ...props }: {
-    children: react__default.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function TextareaField({ maxLength, ...props }: TextareaFieldProps): react_jsx_runtime.JSX.Element;
 
 declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.FlexProps & react.RefAttributes<HTMLDivElement>>, {
     display?: "flex" | "inline-flex" | undefined;
@@ -12538,4 +12550,4 @@ type SectionProps = ComponentProps<typeof SectionStyled> & {
 };
 declare function Section({ children, ...props }: SectionProps): 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, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Grid, type GridProps, GridStyled, Icon, Modal, ModalContentStyled, type ModalProps, ModalStyled, ModalTitleStyled, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TextStyle, TimePicker, TimePickerDialogStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimePickerTitleStyled, TimerPickerContentStyled };
+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, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Grid, type GridProps, GridStyled, Icon, Modal, ModalContentStyled, type ModalProps, ModalStyled, ModalTitleStyled, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, maskFormat, maskUnformat };