@lets-events/react 6.1.0 → 7.0.0

package/src/components/Calendar/index.tsx

@@ -1,34 +1,35 @@
-import React, { ComponentProps, useEffect, useState } from 'react'
-import { DayPicker } from 'react-day-picker';
-import { ptBR } from 'date-fns/locale';
+import React, { ComponentProps, useEffect, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
 import { Dialog as Calendaradix } from "@radix-ui/themes";
-import { parse, isValid, format, addYears } from 'date-fns';
-import { Button } from '../Button';
-import { Box } from '../Box';
-import { TextField, TextFieldSlot } from '../TextField';
-import Icon from '../Icon';
+import { parse, isValid, format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
 import {
   CalendarContentStyled,
   CalendarFooterStyled,
   CalendarStyled,
-  DayPickerWrapperStyled
-} from './styledComponents';
+  DayPickerWrapperStyled,
+  CalendarTitleStyled,
+} from "./styledComponents";
 
 export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
-  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"
-  selected: Date | undefined
-  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>
-  action?: boolean
-  actionText?: string
-  onAction?: () => void
-}
+  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+  selected: Date | undefined;
+  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  action?: boolean;
+  actionText?: string;
+  onAction?: () => void;
+};
 
 function formatToDateMask(value: string): string {
-  const numeric = value.replace(/\D/g, '').slice(0, 8)
-  const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/)
-  if (!parts) return ''
-  const [, day, month, year] = parts
-  return [day, month, year].filter(Boolean).join('/')
+  const numeric = value.replace(/\D/g, "").slice(0, 8);
+  const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
+  if (!parts) return "";
+  const [, day, month, year] = parts;
+  return [day, month, year].filter(Boolean).join("/");
 }
 
 export function Calendar({
@@ -40,34 +41,34 @@ export function Calendar({
   onAction,
   ...props
 }: CalendarProps) {
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState("");
 
-  const today = new Date()
-  const maxDate = addYears(today, 20)
+  const today = new Date();
+  const maxDate = addYears(today, 20);
 
   useEffect(() => {
-    console.log('selected', selected)
+    console.log("selected", selected);
     if (selected) {
-      setInputValue(format(selected, 'dd/MM/yyyy'))
+      setInputValue(format(selected, "dd/MM/yyyy"));
     } else {
-      setInputValue('')
+      setInputValue("");
     }
-  }, [selected])
+  }, [selected]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const masked = formatToDateMask(e.target.value)
-    setInputValue(masked)
+    const masked = formatToDateMask(e.target.value);
+    setInputValue(masked);
 
-    const parsed = parse(masked, 'dd/MM/yyyy', new Date())
+    const parsed = parse(masked, "dd/MM/yyyy", new Date());
     if (isValid(parsed)) {
-      setSelected(parsed)
+      setSelected(parsed);
     } else {
-      console.warn('Data inválida inserida no input:', masked)
+      console.warn("Data inválida inserida no input:", masked);
     }
-  }
+  };
 
   return (
-    <Calendaradix.Root >
+    <Calendaradix.Root>
       <CalendarStyled {...props}>
         <Calendaradix.Trigger>
           <TextField
@@ -78,12 +79,13 @@ export function Calendar({
             inputMode="numeric"
           >
             <TextFieldSlot>
-              <Icon name="calendar" size={'xl'} />
+              <Icon name="calendar" size={"xl"} />
             </TextFieldSlot>
           </TextField>
         </Calendaradix.Trigger>
 
         <CalendarContentStyled>
+          <CalendarTitleStyled>Calendário</CalendarTitleStyled>
           <Box>
             <DayPickerWrapperStyled>
               <DayPicker
@@ -104,13 +106,13 @@ export function Calendar({
             <CalendarFooterStyled>
               <Calendaradix.Close>
                 <Button
-                  variant='text'
-                  color='brand'
+                  variant="text"
+                  color="brand"
                   onClick={onAction}
-                  typography='buttonMedium'
-                  fontWeight='medium'
+                  typography="buttonMedium"
+                  fontWeight="medium"
                 >
-                  {actionText ?? 'Aplicar'}
+                  {actionText ?? "Aplicar"}
                 </Button>
               </Calendaradix.Close>
             </CalendarFooterStyled>
@@ -118,5 +120,5 @@ export function Calendar({
         </CalendarContentStyled>
       </CalendarStyled>
     </Calendaradix.Root>
-  )
+  );
 }

package/src/components/Calendar/styledComponents.ts

@@ -9,7 +9,9 @@ export const CalendarStyled = styled('div', {
     maxWidth: '200px',
     borderRadius: '$sm',
 })
-
+export const CalendarTitleStyled = styled(Calendaradix.Title, {
+    display: 'none',
+})
 export const CalendarContentStyled = styled(Calendaradix.Content, {
     fontFamily: '$default',
     lineHeight: '$base',

package/src/components/Flex.tsx

@@ -29,6 +29,7 @@ export const FlexStyled = styled(FlexRadix, {
       'column-reverse': { flexDirection: 'column-reverse' },
     },
     gap: {
+      0: { gap: '0px' },
       2: { gap: '$2' },
       4: { gap: '$4' },
       6: { gap: '$6' },

package/src/components/TextField.tsx

@@ -3,27 +3,31 @@ 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';
 
 export const TextFieldStyled = styled(TextFieldRadix.Root, {
   height: '$40',
   fontFamily: '$default',
-  padding: '$12 $14',
+  padding: '0',
   borderRadius: '$sm',
   boxSizing: 'border-box',
   color: '$dark500',
   border: '1px solid $dark300',
   position: 'relative',
   display: 'flex',
+  width: '100%',
+  alignItems: 'center',
 
   'input': {
     order: 1,
-    border: 'none',
     outline: 'none',
-    padding: 0,
+    border: 'none',
     margin: 0,
     width: '100%',
     font: 'inherit',
-    textAlign: 'inherit',
+    textAlign: 'left',
+    padding: '0 $14'
   },
 
   '&:has(input:focus)': {
@@ -153,6 +157,7 @@ export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
 })
 
 export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
+  addon?:string
   placeholder?: string
   children?: React.ReactNode
   isValid?: boolean
@@ -173,6 +178,20 @@ export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'c
   textAlign?: 'left' | 'right' | 'center'
 }
 
+
+const InputAddon = styled(TextStyle, {
+  boxSizing: 'border-box',
+  border: '1px solid $dark300',
+  height: '$40', 
+  padding: '0',
+  color: '$dark600',
+  borderRadius: '$sm 0px 0px $sm',
+  borderRightWidth: '0px',
+  margin: 'auto 0',
+  display: 'flex',
+  alignItems: 'center'
+})
+
 export function TextField({
   children,
   isValid,
@@ -180,33 +199,40 @@ export function TextField({
   color,
   typography,
   fontWeight,
+  addon,
   textAlign = 'right',
   ...props
 }: TextFieldProps) {
   return (
-    <TextFieldStyled
-      color={color}
-      isValid={isValid}
-      name={name}
-      typography={typography}
-      fontWeight={fontWeight}
-      textAlign={textAlign}
-      {...props}
-    >
-      {children}
-      {isValid && (
-        <TextFieldSlot
+    <Flex gap={'0'} css={{width: '100%'}}>
+      {!!addon && (
+        <InputAddon typography="labelSmall">{addon}</InputAddon>
+      )}
+      <TextFieldStyled
+        color={color}
+        isValid={isValid}
+        name={name}
+        typography={typography}
+        fontWeight={fontWeight}
+        textAlign={textAlign}
+        style={!!addon ? {borderTopLeftRadius:'0px', borderBottomLeftRadius: '0px'}: undefined}
+        {...props}
+        >
+        {children}
+        {isValid && (
+          <TextFieldSlot
           position='flex-end'
           name={name}
           color={color as TextFieldSlotProps['color']}
           typography={typography}
           fontWeight={fontWeight}
           textAlign={textAlign}
-        >
-          <Icon name='check' />
-        </TextFieldSlot>
-      )}
-    </TextFieldStyled>
+          >
+            <Icon name='check' />
+          </TextFieldSlot>
+        )}
+      </TextFieldStyled>
+    </Flex>
   )
 }
 

package/src/components/TimePicker.tsx

@@ -1,118 +1,184 @@
-import React, { useCallback, useState } from 'react'
-import { Dialog as TimePickerRadix } from '@radix-ui/themes'
-import { Box } from './Box'
-import { Button } from './Button'
-import { TextField, TextFieldSlot } from './TextField'
-import { Text } from './Text'
-import Icon from './Icon'
-import { styled } from '../styles'
+import React, { useCallback, useState } from "react";
+import { Dialog as TimePickerRadix } from "@radix-ui/themes";
+import { Box } from "./Box";
+import { Button } from "./Button";
+import { TextField, TextFieldSlot } from "./TextField";
+import { Text } from "./Text";
+import Icon from "./Icon";
+import { styled } from "../styles";
 
-export const TimePickerStyled = styled('div', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  fontSize: '$14',
-  maxWidth: '200px',
-  borderRadius: '$sm',
-})
+export const TimePickerStyled = styled("div", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$14",
+  maxWidth: "200px",
+  borderRadius: "$sm",
+});
+export const TimePickerTitleStyled = styled(TimePickerRadix.Title, {
+  display: "none",
+});
 export const TimePickerDialogStyled = styled(TimePickerRadix.Content, {
-  width: '100%',
-  maxWidth: '8.875rem',
-  border: '1px solid $neutral300',
-  borderRadius: '$sm',
-  boxShadow: '0px 2px 8px 0px $shadow50',
-})
-export const TimePickerFooterStyled = styled('div', {
-  borderTop: '2px solid $neutral100',
-  padding: '$4 $16',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '3rem',
-})
-export const TimerPickerContentStyled = styled('div', {
-  display: 'flex',
-  gap: '$16',
-  alignItems: 'center',
-  padding: '$16 $16 $8 ',
-  '& > div:nth-child(2)': {
-    order: 2
-  }
-})
+  width: "100%",
+  maxWidth: "8.875rem",
+  border: "1px solid $neutral300",
+  borderRadius: "$sm",
+  boxShadow: "0px 2px 8px 0px $shadow50",
+});
+export const TimePickerFooterStyled = styled("div", {
+  borderTop: "2px solid $neutral100",
+  padding: "$4 $16",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "3rem",
+});
+export const TimerPickerContentStyled = styled("div", {
+  display: "flex",
+  gap: "$16",
+  alignItems: "center",
+  padding: "$16 $16 $8 ",
+  "& > div:nth-child(2)": {
+    order: 2,
+  },
+});
 export type TimePickerProps = {
-  selected: string | undefined
-  setSelected: React.Dispatch<React.SetStateAction<string | undefined>>
-}
+  selected: string | undefined;
+  setSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
 
 export function TimePicker({ selected, setSelected }: TimePickerProps) {
-  const [hours, setHours] = useState('00')
-  const [minutes, setMinutes] = useState('00')
+  const [hours, setHours] = useState("00");
+  const [minutes, setMinutes] = useState("00");
 
-  const pad = (num: number) => String(num).padStart(2, '0')
+  const pad = (num: number) => String(num).padStart(2, "0");
 
-  const handleInputValue = useCallback((time: string) => {
-    setSelected(time)
-  }, [setSelected])
+  const handleInputValue = useCallback(
+    (time: string) => {
+      setSelected(time);
+    },
+    [setSelected]
+  );
 
-  const handleIncrement = useCallback((type: 'hours' | 'minutes') => {
-    if (type === 'hours') {
-      const next = (parseInt(hours) + 1) % 24
-      setHours(pad(next))
-    } else {
-      const next = (parseInt(minutes) + 1) % 60
-      setMinutes(pad(next))
-    }
-  }, [hours, minutes])
+  const handleIncrement = useCallback(
+    (type: "hours" | "minutes") => {
+      if (type === "hours") {
+        const next = (parseInt(hours) + 1) % 24;
+        setHours(pad(next));
+      } else {
+        const next = (parseInt(minutes) + 1) % 60;
+        setMinutes(pad(next));
+      }
+    },
+    [hours, minutes]
+  );
 
-  const handleDecrement = useCallback((type: 'hours' | 'minutes') => {
-    if (type === 'hours') {
-      const prev = (parseInt(hours) - 1 + 24) % 24
-      setHours(pad(prev))
-    } else {
-      const prev = (parseInt(minutes) - 1 + 60) % 60
-      setMinutes(pad(prev))
-    }
-  }, [hours, minutes])
+  const handleDecrement = useCallback(
+    (type: "hours" | "minutes") => {
+      if (type === "hours") {
+        const prev = (parseInt(hours) - 1 + 24) % 24;
+        setHours(pad(prev));
+      } else {
+        const prev = (parseInt(minutes) - 1 + 60) % 60;
+        setMinutes(pad(prev));
+      }
+    },
+    [hours, minutes]
+  );
 
   return (
     <TimePickerRadix.Root>
-      <TimePickerStyled >
+      <TimePickerStyled>
         <TimePickerRadix.Trigger>
-          <TextField value={selected} readOnly type="text" placeholder="00:00" typography="labelSmall" fontWeight="regular">
+          <TextField
+            value={selected}
+            readOnly
+            type="text"
+            placeholder="00:00"
+            typography="labelSmall"
+            fontWeight="regular"
+          >
             <TextFieldSlot>
               <Icon name="clock" size="xl" />
             </TextFieldSlot>
           </TextField>
         </TimePickerRadix.Trigger>
         <TimePickerDialogStyled>
+          <TimePickerTitleStyled>Horário</TimePickerTitleStyled>
           <TimerPickerContentStyled>
-            {['hours', 'minutes'].map((unit) => (
-              <Box key={unit} style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-                <Button variant='text' onClick={() => handleIncrement(unit as 'hours' | 'minutes')}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-                    <path d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z" fill="white" />
-                    <path d="M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z" fill="#808289" />
+            {["hours", "minutes"].map((unit) => (
+              <Box
+                key={unit}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  variant="text"
+                  onClick={() => handleIncrement(unit as "hours" | "minutes")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                  >
+                    <path
+                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z"
+                      fill="#808289"
+                    />
                   </svg>
                 </Button>
-                <TextField value={unit === 'hours' ? hours : minutes} onChange={(e) => handleInputValue(e.target.value)} type="text" placeholder="00" typography="labelSmall" fontWeight="regular" textAlign="center" style={{ padding: '4px' }} />
+                <TextField
+                  value={unit === "hours" ? hours : minutes}
+                  onChange={(e) => handleInputValue(e.target.value)}
+                  type="text"
+                  placeholder="00"
+                  typography="labelSmall"
+                  fontWeight="regular"
+                  textAlign="center"
+                  style={{ padding: "4px" }}
+                />
 
-                <Button variant='text' onClick={() => handleDecrement(unit as 'hours' | 'minutes')}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-                    <path d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z" fill="white" />
-                    <path d="M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z" fill="#808289" />
+                <Button
+                  variant="text"
+                  onClick={() => handleDecrement(unit as "hours" | "minutes")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                  >
+                    <path
+                      d="M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z"
+                      fill="#808289"
+                    />
                   </svg>
                 </Button>
               </Box>
             ))}
-            <Text >:</Text>
+            <Text>:</Text>
           </TimerPickerContentStyled>
           <TimePickerFooterStyled>
             <TimePickerRadix.Close>
               <Button
-                variant='text'
-                color='brand'
+                variant="text"
+                color="brand"
                 onClick={() => handleInputValue(`${hours}:${minutes}`)}
-                typography='buttonMedium'
-                fontWeight='medium'
+                typography="buttonMedium"
+                fontWeight="medium"
               >
                 Aplicar
               </Button>
@@ -121,5 +187,5 @@ export function TimePicker({ selected, setSelected }: TimePickerProps) {
         </TimePickerDialogStyled>
       </TimePickerStyled>
     </TimePickerRadix.Root>
-  )
+  );
 }