@lets-events/react 7.0.1 → 7.2.0

package/src/components/Step.tsx

@@ -1,148 +1,164 @@
-import React, { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
+import React, { ComponentProps, ElementType } from "react";
+import { styled } from "../styles";
 import { Box, Tabs as StepRadix } from "@radix-ui/themes";
 
-export const StepStyled = styled('div', {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-
-})
+export const StepStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$gray100",
+  letterSpacing: "0px",
+});
 
 const StepTriggerStyled = styled(StepRadix.Trigger, {
-  all: 'unset',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontSize: '$16',
-  fontWeight: '$medium',
-
-
-  minWidth: '32px',
-  minHeight: '32px',
-  marginRight: '40px',
-
-
-  '&:last-of-type': {
+  all: "unset",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "$16",
+  fontWeight: "$medium",
+
+  minWidth: "32px",
+  minHeight: "32px",
+  marginRight: "40px",
+
+  "&:last-of-type": {
     marginRight: 0,
   },
 
-
-  '& > span:first-of-type': {
-    width: '32px',
-    height: '32px',
-    borderRadius: '$full',
-    backgroundColor: '$neutral50',
-    border: '1px solid $neutral200',
-    color: '$gray700',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+  "& > span:first-of-type": {
+    width: "32px",
+    height: "32px",
+    borderRadius: "$full",
+    backgroundColor: "$neutral50",
+    border: "1px solid $neutral200",
+    color: "$gray700",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     zIndex: 1,
-    position: 'relative',
-
+    position: "relative",
   },
 
-
   '&[data-state="active"] > span:first-of-type': {
-    backgroundColor: '$blue500',
-    borderColor: '$blue500',
-    color: 'white',
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white",
   },
 
-
-  '& > span:last-of-type': {
-    display: 'none',
+  "& > span:last-of-type": {
+    display: "none",
   },
 
-
-  '&:not(:first-of-type)::before': {
+  "&:not(:first-of-type)::before": {
     content: '""',
-    position: 'absolute',
-    top: '50%',
-    right: 'calc(100% + 4px)',
-    transform: 'translateY(-50%)',
-    width: '32px',
-    height: '8px',
-    borderRadius: '$sm',
-    backgroundColor: '$neutral50',
+    position: "absolute",
+    top: "50%",
+    right: "calc(100% + 4px)",
+    transform: "translateY(-50%)",
+    width: "32px",
+    height: "8px",
+    borderRadius: "$sm",
+    backgroundColor: "$neutral50",
     zIndex: 0,
   },
 
-
   '&[data-state="active"]::before': {
-    backgroundColor: '$blue500',
+    backgroundColor: "$blue500",
   },
 
   '&[data-filled="true"] > span:first-of-type': {
-    backgroundColor: '$blue500',
-    borderColor: '$blue500',
-    color: 'white',
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white",
   },
 
   '&[data-filled="true"]::before': {
-    backgroundColor: '$blue500',
+    backgroundColor: "$blue500",
   },
 });
 
 const StepListStyled = styled(StepRadix.List, {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  gap: '$4',
-
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "$4",
 });
 
 export type StepProps = ComponentProps<typeof StepStyled> & {
-  children: React.ReactNode,
-  defaultValue: number
-
-}
+  children: React.ReactNode;
+  defaultValue: number;
+};
 export function Step({ children, defaultValue, ...props }: StepProps) {
   return (
     <StepRadix.Root defaultValue={String(defaultValue)}>
-      <StepStyled {...props}>
-        {children}
-      </StepStyled>
+      <StepStyled {...props}>{children}</StepStyled>
     </StepRadix.Root>
-
-  )
+  );
 }
 
-export function StepTrigger({ value, children, currentStep, ...props }: { value: number, children: React.ReactNode | string, currentStep?: number, onClick: () => void }) {
-  const isActiveOrPrevious = currentStep !== undefined && value <= currentStep
-  console.log(isActiveOrPrevious, 'isActiveOrPrevius', currentStep)
+export function StepTrigger({
+  value,
+  children,
+  currentStep,
+  ...props
+}: {
+  value: number;
+  children: React.ReactNode | string;
+  currentStep?: number;
+  onClick: () => void;
+}) {
+  const isActiveOrPrevious = currentStep !== undefined && value <= currentStep;
   return (
-    <StepTriggerStyled data-filled={isActiveOrPrevious} value={String(value)} {...props}>{children}</StepTriggerStyled>
-  )
+    <StepTriggerStyled
+      data-filled={isActiveOrPrevious}
+      value={String(value)}
+      {...props}
+    >
+      {children}
+    </StepTriggerStyled>
+  );
 }
 
-export function StepContent({ value, children, ...props }: { value: number, children: React.ReactNode }) {
+export function StepContent({
+  value,
+  children,
+  ...props
+}: {
+  value: number;
+  children: React.ReactNode;
+}) {
   return (
     <StepRadix.Content value={String(value)} {...props}>
       {children}
     </StepRadix.Content>
-  )
+  );
 }
 
-export function StepList({ children, currentStep, ...props }: { children: React.ReactNode, currentStep: number }) {
+export function StepList({
+  children,
+  currentStep,
+  ...props
+}: {
+  children: React.ReactNode;
+  currentStep: number;
+}) {
   return (
     <StepListStyled {...props}>
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child) && child.type === StepTrigger) {
-          return React.cloneElement(child, { currentStep } as any)
+          return React.cloneElement(child, { currentStep } as any);
         }
-        return child
+        return child;
       })}
     </StepListStyled>
-  )
+  );
 }
 
-export function StepWrapper({ children, ...props }: { children: React.ReactNode }) {
-  return (
-    <Box {...props}>
-      {children}
-    </Box>
-  )
-}
+export function StepWrapper({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+}) {
+  return <Box {...props}>{children}</Box>;
+}

package/src/components/Text.tsx

@@ -15,18 +15,16 @@ export const TextStyle = styled(TextRadix, {
       medium: { fontWeight: '$medium' },
       semibold: { fontWeight: '$semibold' },
       bold: { fontWeight: '$bold' },
-    }
-  }
+    },
+  },
 })
 
 export type TextProps = ComponentProps<typeof TextStyle> & {
-  as?: ElementType,
+  as?: ElementType
   asChild?: boolean
   css?: CSS
 }
 
 export function Text({ ...props }: TextProps) {
-  return (
-    <TextStyle {...props} />
-  )
-}
+  return <TextStyle {...props} />
+}

package/src/components/TextField.tsx

@@ -1,15 +1,15 @@
-import { ComponentProps } from 'react'
+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 { 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',
-  padding: '0',
   borderRadius: '$sm',
   boxSizing: 'border-box',
   color: '$dark500',
@@ -18,8 +18,9 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
   display: 'flex',
   width: '100%',
   alignItems: 'center',
-
-  'input': {
+  padding: '0 $14',
+  gap: '$14',
+  input: {
     order: 1,
     outline: 'none',
     border: 'none',
@@ -27,7 +28,6 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     width: '100%',
     font: 'inherit',
     textAlign: 'left',
-    padding: '0 $14'
   },
 
   '&:has(input:focus)': {
@@ -70,7 +70,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
           border: '1px solid $error100',
           cursor: 'not-allowed',
         },
-      }
+      },
     },
 
     typography: typographyValues,
@@ -87,7 +87,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     },
     isValid: {
       true: {},
-      false: {}
+      false: {},
     },
   },
 
@@ -98,7 +98,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
         border: '1px solid $error400',
         color: '$error400',
         backgroundColor: '$error50',
-        'input': {
+        input: {
           '&::placeholder': {
             color: '$error400',
           },
@@ -108,7 +108,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
           border: '2px solid $error400',
         },
         '&:has(input:disabled)': {
-          'input': {
+          input: {
             backgroundColor: '$error50',
           },
           backgroundColor: '$error50',
@@ -116,7 +116,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
           border: '1px solid $error100',
           cursor: 'not-allowed',
         },
-      }
+      },
     },
     {
       isValid: true,
@@ -130,8 +130,8 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
           border: '1px solid $dark200',
           cursor: 'not-allowed',
         },
-      }
-    }
+      },
+    },
   ],
 })
 
@@ -139,6 +139,7 @@ export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  padding: 4,
 
   variants: {
     typography: typographyValues,
@@ -152,12 +153,12 @@ export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
       left: { textAlign: 'left' },
       right: { textAlign: 'right' },
       center: { textAlign: 'center' },
-    }
-  }
+    },
+  },
 })
 
 export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?:string
+  addon?: ReactNode
   placeholder?: string
   children?: React.ReactNode
   isValid?: boolean
@@ -165,32 +166,41 @@ export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
   typography?: string
   fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
   textAlign?: 'left' | 'right' | 'center'
+  mask?: MaskOptions
 }
 
-export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
+export 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'
 }
 
-
 const InputAddon = styled(TextStyle, {
   boxSizing: 'border-box',
   border: '1px solid $dark300',
-  height: '$40', 
-  padding: '0',
+  height: '$40',
+  padding: '0  $12',
+  margin: '0 auto',
+
   color: '$dark600',
+  whiteSpace: 'nowrap',
   borderRadius: '$sm 0px 0px $sm',
   borderRightWidth: '0px',
-  margin: 'auto 0',
   display: 'flex',
-  alignItems: 'center'
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  lineHeight: 1,
 })
+export const maskFormat = format
+export const maskUnformat = unformat
 
 export function TextField({
   children,
@@ -200,14 +210,16 @@ export function TextField({
   typography,
   fontWeight,
   addon,
-  textAlign = 'right',
+  textAlign = 'left',
+  mask,
   ...props
 }: TextFieldProps) {
+  const maskRef = mask ? useMask(mask) : undefined
+
   return (
-    <Flex gap={'0'} css={{width: '100%'}}>
-      {!!addon && (
-        <InputAddon typography="labelSmall">{addon}</InputAddon>
-      )}
+    <Flex gap={'0'} css={{ width: '100%' }}>
+      {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
+
       <TextFieldStyled
         color={color}
         isValid={isValid}
@@ -215,20 +227,25 @@ export function TextField({
         typography={typography}
         fontWeight={fontWeight}
         textAlign={textAlign}
-        style={!!addon ? {borderTopLeftRadius:'0px', borderBottomLeftRadius: '0px'}: undefined}
+        ref={maskRef}
         {...props}
-        >
+        style={
+          addon
+            ? { borderTopLeftRadius: '0px', borderBottomLeftRadius: '0px' }
+            : undefined
+        }
+      >
         {children}
         {isValid && (
           <TextFieldSlot
-          position='flex-end'
-          name={name}
-          color={color as TextFieldSlotProps['color']}
-          typography={typography}
-          fontWeight={fontWeight}
-          textAlign={textAlign}
+            position="flex-end"
+            name={name}
+            color={color as TextFieldSlotProps['color']}
+            typography={typography}
+            fontWeight={fontWeight}
+            textAlign={textAlign}
           >
-            <Icon name='check' />
+            <Icon name="check" />
           </TextFieldSlot>
         )}
       </TextFieldStyled>
@@ -253,17 +270,14 @@ export function TextFieldSlot({
     color: undefined,
   }
 
-  return !!onClick ? (
+  return onClick ? (
     <TextFieldSlotStyled
       {...sharedStyles}
       style={{
-        position: 'absolute',
-        left: position === 'flex-end' ? 'none' : 15,
-        right: position === 'flex-start' ? 'none' : 15,
-        textAlign: textAlign,
-        padding: 13,
+        float: position === 'flex-start' ? 'left' : 'right',
+        order: position === 'flex-start' ? 0 : 2,
+        textAlign,
         zIndex: 2,
-        top: 0,
         cursor: 'pointer',
       }}
       onClick={() => onClick()}
@@ -276,9 +290,7 @@ export function TextFieldSlot({
       style={{
         float: position === 'flex-start' ? 'left' : 'right',
         order: position === 'flex-start' ? 0 : 2,
-        marginLeft: position === 'flex-start' ? 0 : 15,
-        marginRight: position === 'flex-end' ? 0 : 15,
-        textAlign: textAlign,
+        textAlign,
       }}
     >
       {children}

package/src/components/TextareaField.tsx

@@ -0,0 +1,101 @@
+import { TextArea as TextAreaRadix } from '@radix-ui/themes'
+import { styled } from '../styles'
+import { ComponentProps, useRef } from 'react'
+import { typographyValues } from '../types/typographyValues'
+import { Text } from './Text'
+
+export const TextareaFieldStyle = styled(TextAreaRadix, {
+  display: 'flex',
+  width: 'fit-content',
+  flex: 1,
+  textarea: {
+    width: '100%',
+    minHeight: '3.75rem',
+    border: 'none',
+    padding: '$12 $14',
+    fontFamily: '$default',
+    fontSize: '$16',
+    outline: 'none',
+    resize: 'vertical',
+  },
+  variants: {
+    typography: typographyValues,
+  },
+  defaultVariants: {
+    typography: 'bodyM',
+  },
+})
+
+export type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
+  limit: number
+}
+
+const TextareaContainer = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  overflow: 'hidden',
+  // width: '100%',
+  border: '1px solid',
+  borderColor: '$dark300',
+  borderRadius: '$2xs',
+
+  '&:has(textarea:focus)': {
+    border: '1px solid $brand300',
+  },
+  '&:has(textarea:disabled)': {
+    backgroundColor: '$dark100',
+    color: '$dark400',
+    border: '1px solid $dark200',
+    cursor: 'not-allowed',
+  },
+})
+
+const TextareaLimitIndicator = styled('div', {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  padding: '$12 $16',
+  borderTop: '1px solid $neutral300',
+  width: '100%',
+  flex: 1,
+  display: 'flex',
+  span: {
+    backgroundColor: '$neutral200',
+    color: '$neutral700',
+    borderRadius: '$2xs',
+    padding: '$4',
+  },
+})
+
+export function TextareaField({ maxLength, ...props }: TextareaFieldProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const badgeRef = useRef<HTMLSpanElement>(null)
+
+  if (!maxLength) {
+    return (
+      <TextareaContainer>
+        <TextareaFieldStyle {...props} ref={inputRef}></TextareaFieldStyle>
+      </TextareaContainer>
+    )
+  }
+  const handleInput = () => {
+    const remainingChars = maxLength - (inputRef?.current?.value.length || 0)
+    if (badgeRef.current) badgeRef.current.textContent = String(remainingChars)
+  }
+
+  return (
+    <TextareaContainer css={{ paddingBottom: '3.25rem' }}>
+      <TextareaFieldStyle
+        ref={inputRef}
+        onInput={handleInput}
+        maxLength={maxLength}
+        {...props}
+      ></TextareaFieldStyle>
+      <TextareaLimitIndicator>
+        <Text typography={'badgeMedium'} ref={badgeRef}>
+          {maxLength}
+        </Text>
+      </TextareaLimitIndicator>
+    </TextareaContainer>
+  )
+}