@lets-events/react 6.0.0 → 6.1.0

package/src/components/Calendar/styledComponents.ts

@@ -0,0 +1,195 @@
+import { Dialog as Calendaradix } from "@radix-ui/themes";
+
+import { styled } from "../../styles"
+
+export const CalendarStyled = styled('div', {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    maxWidth: '200px',
+    borderRadius: '$sm',
+})
+
+export const CalendarContentStyled = styled(Calendaradix.Content, {
+    fontFamily: '$default',
+    lineHeight: '$base',
+    fontSize: '$14',
+    width: '100%',
+    maxWidth: 'fit-content',
+    border: '1px solid $neutral300',
+    borderRadius: '$sm',
+    boxShadow: '0px 2px 8px 0px $shadow50',
+})
+
+export const CalendarFooterStyled = styled('div', {
+    borderTop: '2px solid $neutral100',
+    padding: '$4 $16',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '3rem',
+})
+
+export const DayPickerWrapperStyled = styled('div', {
+    '.rt-TextFieldInput': {
+        fontFamily: '$default',
+        fontSize: '$14',
+        color: '$dark500',
+    },
+    '.rdp-root': {
+        padding: '$16',
+    },
+    '.rdp-today .rdp-day_button': {
+        color: '$brand500',
+        textDecoration: 'underline',
+    },
+    '.rdp-day.rdp-disabled .rdp-day_button': {
+        color: '$dark400'
+    },
+    '.rdp-day_button': {
+        height: '32px',
+        width: '32px',
+        borderRadius: '$sm',
+        fontSize: '$14',
+        color: '$text',
+        backgroundColor: 'transparent',
+        border: '1px solid transparent',
+        transition: 'all 0.2s ease-in-out',
+        cursor: 'pointer',
+    },
+    '.rdp-day_button:hover': {
+        backgroundColor: '$dark100',
+        borderColor: '$brand500',
+    },
+    '.rdp-day.rdp-disabled .rdp-day_button:hover': {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+    },
+    '.rdp-nav': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    '.rdp-nav .rdp-chevron': {
+        display: 'none',
+    },
+    '.rdp-nav .rdp-button_previous': {
+        display: 'block',
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cg%20transform=\'scale(-1,1)%20translate(-32,0)\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/g%3E%3C/svg%3E")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '32px',
+        height: '32px',
+
+    },
+    '.rdp-nav .rdp-button_next': {
+        display: 'block',
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        width: '32px',
+        height: '32px',
+    },
+    '.rdp-nav .rdp-button_previous:hover': {
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
+        transition: 'all 0.2s ease-in-out',
+    },
+    '.rdp-nav .rdp-button_next:hover': {
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
+        transition: 'all 0.2s ease-in-out',
+    },
+    '.rdp-nav button': {
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+    },
+    '.rdp-month': {
+        marginTop: '-24px',
+    },
+    '.rdp-month_caption': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'calc(100% - 64px)',
+        margin: '0 auto',
+        columnGap: '12px',
+    },
+    '.rdp-dropdowns span, .rdp-caption_label': {
+        fontSize: '$16',
+        fontWeight: '$regular',
+        lineHeight: '$20',
+        textTransform: 'capitalize',
+    },
+    '.rdp-day.rdp-selected .rdp-day_button': {
+        backgroundColor: '$brand500',
+        color: '$neutral50',
+        borderColor: '$brand500',
+    },
+    '.rdp-dropdowns': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'calc(100% - 64px)',
+        columnGap: '12px',
+    },
+    '.rdp-dropdowns .rdp-caption_label': {
+        display: 'none',
+    },
+    '.rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown': {
+        border: 'none',
+        backgroundColor: 'transparent',
+        textTransform: 'capitalize',
+        height: '1.25rem',
+        position: 'relative',
+        fontFamily: '$default',
+        fontSize: '$16',
+        lineHeight: '1.25rem',
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        MozAppearance: 'none',
+        paddingRight: '1.25rem',
+        zIndex: '3',
+    },
+    '.rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active': {
+        border: 'none',
+        outline: 'none',
+        boxShadow: 'none',
+    },
+    '.rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus': {
+        border: 'none',
+    },
+    '.rdp-dropdown_root': {
+        position: 'relative'
+    },
+    '.rdp-dropdown_root::after': {
+        content: '',
+        height: '1.25rem',
+        width: '1.25rem',
+        position: 'absolute',
+        top: '0',
+        right: '0',
+        display: 'block',
+        backgroundColor: '$neutral50',
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'11\'%20height=\'20\'%20viewBox=\'0%200%2011%2020\'%20fill=\'none\'%3E%3Crect%20width=\'11\'%20height=\'20\'%20fill=\'white\'/%3E%3Cpath%20d=\'M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z\'%20fill=\'%23808289\'/%3E%3Cpath%20d=\'M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        borderRadius: '0.5rem',
+        zIndex: '2',
+    },
+    '.rdp-weekday': {
+        textTransform: 'uppercase',
+        fontWeight: '$regular',
+        fontSize: '0px',
+
+    },
+    '.rdp-weekday::first-letter': {
+        fontSize: '$14',
+    },
+    '.rdp-month_grid': {
+        marginTop: '$16',
+        paddingTop: '$16',
+        borderTop: '2px solid $neutral100',
+    },
+})

package/src/components/TextField.tsx

@@ -23,6 +23,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
     margin: 0,
     width: '100%',
     font: 'inherit',
+    textAlign: 'inherit',
   },
 
   '&:has(input:focus)': {
@@ -75,6 +76,11 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
       semibold: { fontWeight: '$semibold' },
       bold: { fontWeight: '$bold' },
     },
+    textAlign: {
+      left: { textAlign: 'left' },
+      center: { textAlign: 'center' },
+      right: { textAlign: 'right' },
+    },
     isValid: {
       true: {},
       false: {}
@@ -137,6 +143,11 @@ export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
       medium: { fontWeight: '$medium' },
       semibold: { fontWeight: '$semibold' },
       bold: { fontWeight: '$bold' },
+    },
+    textAlign: {
+      left: { textAlign: 'left' },
+      right: { textAlign: 'right' },
+      center: { textAlign: 'center' },
     }
   }
 })
@@ -148,6 +159,7 @@ export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
   name?: string
   typography?: string
   fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
+  textAlign?: 'left' | 'right' | 'center'
 }
 
 export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
@@ -158,6 +170,7 @@ export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'c
   color?: "error" | "success" | undefined
   typography?: string
   fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold'
+  textAlign?: 'left' | 'right' | 'center'
 }
 
 export function TextField({
@@ -167,6 +180,7 @@ export function TextField({
   color,
   typography,
   fontWeight,
+  textAlign = 'right',
   ...props
 }: TextFieldProps) {
   return (
@@ -176,6 +190,7 @@ export function TextField({
       name={name}
       typography={typography}
       fontWeight={fontWeight}
+      textAlign={textAlign}
       {...props}
     >
       {children}
@@ -186,6 +201,7 @@ export function TextField({
           color={color as TextFieldSlotProps['color']}
           typography={typography}
           fontWeight={fontWeight}
+          textAlign={textAlign}
         >
           <Icon name='check' />
         </TextFieldSlot>
@@ -200,11 +216,13 @@ export function TextFieldSlot({
   onClick,
   typography = 'bodyXS',
   fontWeight = 'regular',
+  textAlign = 'right',
   ...props
 }: TextFieldSlotProps) {
   const sharedStyles = {
     typography,
     fontWeight,
+    textAlign,
     ...props,
     color: undefined,
   }
@@ -216,6 +234,7 @@ export function TextFieldSlot({
         position: 'absolute',
         left: position === 'flex-end' ? 'none' : 15,
         right: position === 'flex-start' ? 'none' : 15,
+        textAlign: textAlign,
         padding: 13,
         zIndex: 2,
         top: 0,
@@ -233,6 +252,7 @@ export function TextFieldSlot({
         order: position === 'flex-start' ? 0 : 2,
         marginLeft: position === 'flex-start' ? 0 : 15,
         marginRight: position === 'flex-end' ? 0 : 15,
+        textAlign: textAlign,
       }}
     >
       {children}

package/src/components/TimePicker.tsx

@@ -0,0 +1,125 @@
+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 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
+  }
+})
+export type TimePickerProps = {
+  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 pad = (num: number) => String(num).padStart(2, '0')
+
+  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 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 >
+        <TimePickerRadix.Trigger>
+          <TextField value={selected} readOnly type="text" placeholder="00:00" typography="labelSmall" fontWeight="regular">
+            <TextFieldSlot>
+              <Icon name="clock" size="xl" />
+            </TextFieldSlot>
+          </TextField>
+        </TimePickerRadix.Trigger>
+        <TimePickerDialogStyled>
+          <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" />
+                  </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' }} />
+
+                <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>
+          </TimerPickerContentStyled>
+          <TimePickerFooterStyled>
+            <TimePickerRadix.Close>
+              <Button
+                variant='text'
+                color='brand'
+                onClick={() => handleInputValue(`${hours}:${minutes}`)}
+                typography='buttonMedium'
+                fontWeight='medium'
+              >
+                Aplicar
+              </Button>
+            </TimePickerRadix.Close>
+          </TimePickerFooterStyled>
+        </TimePickerDialogStyled>
+      </TimePickerStyled>
+    </TimePickerRadix.Root>
+  )
+}

package/src/index.tsx

@@ -15,6 +15,8 @@ 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'