@lets-events/react 11.0.1 → 11.0.3

package/dist/index.mjs

@@ -2660,7 +2660,7 @@ var InputAddon = styled(TextStyle, {
 });
 var maskFormat = format;
 var maskUnformat = unformat;
-function TextField(_a) {
+var TextField = (_a) => {
   var _b = _a, {
     children,
     isValid: isValid2,
@@ -2670,7 +2670,8 @@ function TextField(_a) {
     fontWeight,
     addon,
     textAlign = "left",
-    mask
+    mask,
+    ref
   } = _b, props = __objRest(_b, [
     "children",
     "isValid",
@@ -2680,7 +2681,8 @@ function TextField(_a) {
     "fontWeight",
     "addon",
     "textAlign",
-    "mask"
+    "mask",
+    "ref"
   ]);
   const maskRef = mask ? useMask(mask) : void 0;
   return /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
@@ -2694,7 +2696,14 @@ function TextField(_a) {
         typography,
         fontWeight,
         textAlign,
-        ref: maskRef
+        ref: (r) => {
+          if (!r) return;
+          if (maskRef) maskRef.current = r;
+          if (ref) {
+            if (typeof ref === "function") ref(r);
+            else ref.current = r;
+          }
+        }
       }, props), {
         style: addon ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" } : void 0,
         children: [
@@ -2715,7 +2724,7 @@ function TextField(_a) {
       })
     )
   ] });
-}
+};
 function TextFieldSlot(_a) {
   var _b = _a, {
     children,
@@ -8614,20 +8623,15 @@ function StepWrapper(_a) {
 }
 
 // src/components/Card.tsx
-import React5 from "react";
-import { Box as Box3, Card as CardRadix } from "@radix-ui/themes";
+import { Card as CardRadix } from "@radix-ui/themes";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var CardStyled = styled(CardRadix, {
-  display: "flex",
-  flexDirection: "column",
-  width: "370px",
   borderRadius: "$2xl",
   border: "1px solid $dark100",
-  overflow: "hidden",
   padding: "16px",
   defaultVariants: {
     color: "primary",
-    boxShadow: true
+    boxShadow: false
   },
   variants: {
     color: {
@@ -8654,18 +8658,9 @@ var CardStyled = styled(CardRadix, {
     }
   }
 });
-var CardContainer = styled(Box3, {
-  display: "flex",
-  flexDirection: "row"
-});
 function Card(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ jsx19(CardStyled, __spreadProps(__spreadValues({}, props), { children: React5.Children.map(children, (child) => {
-    if (React5.isValidElement(child)) {
-      return React5.cloneElement(child, { size: props.size });
-    }
-    return child;
-  }) }));
+  return /* @__PURE__ */ jsx19(CardStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/TextareaField.tsx
@@ -9224,7 +9219,6 @@ export {
   ButtonItemStyled,
   Calendar,
   Card,
-  CardContainer,
   CardStyled,
   CheckboxGroup,
   CheckboxGroupStyled,

package/package.json

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

package/src/components/Card.tsx

@@ -1,69 +1,48 @@
-import React from 'react'
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Box, Card as CardRadix } from '@radix-ui/themes'
+import React from "react";
+import { ComponentProps, ElementType } from "react";
+import { styled } from "../styles";
+import { Box, Card as CardRadix } from "@radix-ui/themes";
 
 export const CardStyled = styled(CardRadix, {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '370px',
-    borderRadius: '$2xl',
-    border: '1px solid $dark100',
-    overflow: 'hidden',
-    padding: '16px',
-    defaultVariants: {
-        color: 'primary',
-        boxShadow: true,
+  borderRadius: "$2xl",
+  border: "1px solid $dark100",
+  padding: "16px",
+  defaultVariants: {
+    color: "primary",
+    boxShadow: false,
+  },
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$dark50",
+        border: "1px solid $dark200",
+      },
+      disable: {
+        backgroundColor: "$grey50",
+        border: "1px solid $dark200",
+      },
+      error: {
+        backgroundColor: "$error50",
+        border: "1px solid $error600",
+      },
     },
-    variants: {
-        color: {
-            primary: {
-                backgroundColor: '$dark50',
-                border: '1px solid $dark200',
-            },
-            disable: {
-                backgroundColor: '$grey50',
-                border: '1px solid $dark200',
-            },
-            error: {
-                backgroundColor: '$error50',
-                border: '1px solid $error600',
-            }
-        },
-        boxShadow:{
-            true: {
-                boxShadow: '0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)',
-            },
-            false: {
-                boxShadow: 'none',
-            }
-        }
-    }
+    boxShadow: {
+      true: {
+        boxShadow:
+          "0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)",
+      },
+      false: {
+        boxShadow: "none",
+      },
+    },
+  },
 });
 
-
-
-export const CardContainer = styled(Box, {
-    display: 'flex',
-    flexDirection: 'row'
-})
-
 export type CardProps = ComponentProps<typeof CardStyled> & {
-    children: React.ReactNode
-    as?: ElementType
-}
-
-
+  children: React.ReactNode;
+  as?: ElementType;
+};
 
 export function Card({ asChild, children, ...props }: CardProps) {
-    return (
-        <CardStyled {...props}>
-            {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { size: props.size } as any)
-                }
-                return child
-            })}
-        </CardStyled>
-    )
+  return <CardStyled {...props}>{children}</CardStyled>;
 }

package/src/components/TextField.tsx

@@ -1,89 +1,89 @@
-import { ComponentProps, ReactNode } from 'react'
-import { styled } from '../styles'
-import { TextField as TextFieldRadix } from '@radix-ui/themes'
-import Icon from './Icon'
-import { typographyValues } from '../types/typographyValues'
-import { TextStyle } from './Text'
-import { Flex } from './Flex'
-import { format, MaskOptions, useMask, unformat } from '@react-input/mask'
+import React, { ComponentProps, ReactNode } from "react";
+import { styled } from "../styles";
+import { TextField as TextFieldRadix } from "@radix-ui/themes";
+import Icon from "./Icon";
+import { typographyValues } from "../types/typographyValues";
+import { TextStyle } from "./Text";
+import { Flex } from "./Flex";
+import { format, MaskOptions, useMask, unformat } from "@react-input/mask";
 
 export const TextFieldStyled = styled(TextFieldRadix.Root, {
-  height: '$40',
-  fontFamily: '$default',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  color: '$dark500',
-  border: '1px solid $dark300',
-  position: 'relative',
-  display: 'flex',
-  width: '100%',
-  alignItems: 'center',
-  padding: '0 $14',
-  gap: '$14',
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0 $14",
+  gap: "$14",
   input: {
     order: 1,
-    outline: 'none',
-    border: 'none',
+    outline: "none",
+    border: "none",
     margin: 0,
-    width: '100%',
-    font: 'inherit',
-    textAlign: 'left',
+    width: "100%",
+    font: "inherit",
+    textAlign: "left",
   },
 
-  '&:has(input:focus)': {
-    border: '2px solid $brand300',
+  "&:has(input:focus)": {
+    border: "2px solid $brand300",
   },
-  '&:has(input:disabled)': {
-    backgroundColor: '$dark100',
-    color: '$dark400',
-    border: '1px solid $dark200',
-    cursor: 'not-allowed',
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
   },
 
   variants: {
     color: {
       default: {
-        color: '$dark400',
-        border: '1px solid $dark200',
-        '&:has(input:focus)': {
-          border: '2px solid $brand300',
+        color: "$dark400",
+        border: "1px solid $dark200",
+        "&:has(input:focus)": {
+          border: "2px solid $brand300",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$dark100',
-          color: '$dark400',
-          border: '1px solid $dark200',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed",
         },
       },
       error: {
-        border: '1px solid $error400',
-        color: '$error400',
-        'input::placeholder': {
-          color: '$error400',
+        border: "1px solid $error400",
+        color: "$error400",
+        "input::placeholder": {
+          color: "$error400",
         },
-        '&:has(input:focus)': {
-          border: '2px solid $error400',
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$error50',
-          color: '$error300',
-          border: '1px solid $error100',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
         },
       },
     },
 
     typography: typographyValues,
     fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
     textAlign: {
-      left: { textAlign: 'left' },
-      center: { textAlign: 'center' },
-      right: { textAlign: 'right' },
+      left: { textAlign: "left" },
+      center: { textAlign: "center" },
+      right: { textAlign: "right" },
     },
     isValid: {
       true: {},
@@ -95,114 +95,114 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     {
       isValid: false,
       css: {
-        border: '1px solid $error400',
-        color: '$error400',
-        backgroundColor: '$error50',
+        border: "1px solid $error400",
+        color: "$error400",
+        backgroundColor: "$error50",
         input: {
-          '&::placeholder': {
-            color: '$error400',
+          "&::placeholder": {
+            color: "$error400",
           },
-          backgroundColor: '$error50',
+          backgroundColor: "$error50",
         },
-        '&:has(input:focus)': {
-          border: '2px solid $error400',
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
         },
-        '&:has(input:disabled)': {
+        "&:has(input:disabled)": {
           input: {
-            backgroundColor: '$error50',
+            backgroundColor: "$error50",
           },
-          backgroundColor: '$error50',
-          color: '$error300',
-          border: '1px solid $error100',
-          cursor: 'not-allowed',
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
         },
       },
     },
     {
       isValid: true,
       css: {
-        '&:has(input:focus)': {
-          border: '2px solid $success500',
+        "&:has(input:focus)": {
+          border: "2px solid $success500",
         },
-        '&:has(input:disabled)': {
-          backgroundColor: '$dark100',
-          color: '$dark400',
-          border: '1px solid $dark200',
-          cursor: 'not-allowed',
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed",
         },
       },
     },
   ],
-})
+});
 
 export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
   padding: 4,
 
   variants: {
     typography: typographyValues,
     fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
     textAlign: {
-      left: { textAlign: 'left' },
-      right: { textAlign: 'right' },
-      center: { textAlign: 'center' },
+      left: { textAlign: "left" },
+      right: { textAlign: "right" },
+      center: { textAlign: "center" },
     },
   },
-})
+});
 
 export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?: ReactNode
-  placeholder?: string
-  children?: React.ReactNode
-  isValid?: boolean
-  name?: string
-  typography?: string
-  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
-  textAlign?: 'left' | 'right' | 'center'
-  mask?: MaskOptions
-}
+  addon?: ReactNode;
+  placeholder?: string;
+  children?: React.ReactNode;
+  isValid?: boolean;
+  name?: string;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+  mask?: MaskOptions;
+};
 
 export type TextFieldSlotProps = Omit<
   ComponentProps<typeof TextFieldStyled>,
-  'color'
+  "color"
 > & {
-  placeholder?: string
-  children?: React.ReactNode
-  position?: 'flex-start' | 'flex-end'
-  onClick?: () => void
-  color?: 'error' | 'success' | undefined
-  typography?: string
-  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
-  textAlign?: 'left' | 'right' | 'center'
-}
+  placeholder?: string;
+  children?: React.ReactNode;
+  position?: "flex-start" | "flex-end";
+  onClick?: () => void;
+  color?: "error" | "success" | undefined;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+};
 
 const InputAddon = styled(TextStyle, {
-  boxSizing: 'border-box',
-  border: '1px solid $dark300',
-  height: '$40',
-  padding: '0  $12',
-  margin: '0 auto',
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+  height: "$40",
+  padding: "0  $12",
+  margin: "0 auto",
 
-  color: '$dark600',
-  whiteSpace: 'nowrap',
-  borderRadius: '$sm 0px 0px $sm',
-  borderRightWidth: '0px',
-  display: 'flex',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
+  color: "$dark600",
+  whiteSpace: "nowrap",
+  borderRadius: "$sm 0px 0px $sm",
+  borderRightWidth: "0px",
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
   lineHeight: 1,
-})
-export const maskFormat = format
-export const maskUnformat = unformat
+});
+export const maskFormat = format;
+export const maskUnformat = unformat;
 
-export function TextField({
+export const TextField = ({
   children,
   isValid,
   name,
@@ -210,14 +210,15 @@ export function TextField({
   typography,
   fontWeight,
   addon,
-  textAlign = 'left',
+  textAlign = "left",
   mask,
+  ref,
   ...props
-}: TextFieldProps) {
-  const maskRef = mask ? useMask(mask) : undefined
+}: TextFieldProps) => {
+  const maskRef = mask ? useMask(mask) : undefined;
 
   return (
-    <Flex gap={'0'} css={{ width: '100%' }}>
+    <Flex gap={"0"} css={{ width: "100%" }}>
       {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
 
       <TextFieldStyled
@@ -227,11 +228,18 @@ export function TextField({
         typography={typography}
         fontWeight={fontWeight}
         textAlign={textAlign}
-        ref={maskRef}
+        ref={(r) => {
+          if (!r) return;
+          if (maskRef) maskRef.current = r;
+          if (ref) {
+            if (typeof ref === "function") ref(r);
+            else ref.current = r;
+          }
+        }}
         {...props}
         style={
           addon
-            ? { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' }
+            ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" }
             : undefined
         }
       >
@@ -240,7 +248,7 @@ export function TextField({
           <TextFieldSlot
             position="flex-end"
             name={name}
-            color={color as TextFieldSlotProps['color']}
+            color={color as TextFieldSlotProps["color"]}
             typography={typography}
             fontWeight={fontWeight}
             textAlign={textAlign}
@@ -250,16 +258,16 @@ export function TextField({
         )}
       </TextFieldStyled>
     </Flex>
-  )
-}
+  );
+};
 
 export function TextFieldSlot({
   children,
-  position = 'flex-start',
+  position = "flex-start",
   onClick,
-  typography = 'bodyXS',
-  fontWeight = 'regular',
-  textAlign = 'right',
+  typography = "bodyXS",
+  fontWeight = "regular",
+  textAlign = "right",
   ...props
 }: TextFieldSlotProps) {
   const sharedStyles = {
@@ -268,17 +276,17 @@ export function TextFieldSlot({
     textAlign,
     ...props,
     color: undefined,
-  }
+  };
 
   return onClick ? (
     <TextFieldSlotStyled
       {...sharedStyles}
       style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
         textAlign,
         zIndex: 2,
-        cursor: 'pointer',
+        cursor: "pointer",
       }}
       onClick={() => onClick()}
     >
@@ -288,12 +296,12 @@ export function TextFieldSlot({
     <TextFieldSlotStyled
       {...sharedStyles}
       style={{
-        float: position === 'flex-start' ? 'left' : 'right',
-        order: position === 'flex-start' ? 0 : 2,
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
         textAlign,
       }}
     >
       {children}
     </TextFieldSlotStyled>
-  )
+  );
 }