@lets-events/react 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -32,6 +32,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/themes": "^3.2.1",
-    "@stitches/react": "^1.2.8"
+    "@stitches/react": "^1.2.8",
+    "react-day-picker": "^9.6.7"
   }
 }

package/src/components/Button/index.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react'
+import { ButtonStyled } from './styledComponents'
+import { Button as ButtonRadix } from '@radix-ui/themes'
+
+
+export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
+  asChild?: boolean,
+}
+
+export function Button({ asChild, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : 'button'
+  return <ButtonStyled as={Component} {...props} />
+}

package/src/components/Button/styledComponents.ts

@@ -0,0 +1,359 @@
+import { Button as ButtonRadix } from '@radix-ui/themes'
+import { typographyButtonValues } from '../../types/typographyValues'
+
+import { styled } from "../../styles"
+
+export const ButtonStyled = styled(ButtonRadix, {
+    fontFamily: '$default',
+    letterSpacing: 0,
+    border: 0,
+    transition: 'all 300ms ease-out',
+    cursor: 'pointer',
+    borderRadius: '$xs',
+    boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '$10',
+    padding: '$6 $16',
+    '&:disabled': {
+        cursor: 'not-allowed',
+        transition: 'none',
+    },
+    variants: {
+        color: {
+            brand: {},
+            neutral: {},
+            purple: {},
+        },
+        variant: {
+            text: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                padding: 0,
+                border: 0,
+            },
+            contained: {
+                '&:hover': {
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                },
+
+                '&:active': {
+                    borderWidth: '2px',
+                },
+                '&:disabled': {
+                    boxShadow: 'none',
+                }
+            },
+            outlined: {
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                '&:disabled': {
+                    color: '$neutral400',
+                    boxShadow: 'none',
+                }
+            }
+        },
+        typography: typographyButtonValues,
+        fontWeight: {
+            regular: { fontWeight: '$regular' },
+            medium: { fontWeight: '$medium' },
+            semibold: { fontWeight: '$semibold' },
+            bold: { fontWeight: '$bold' },
+        },
+        outlinedBgColor: {
+            neutral: {},
+            transparent: {},
+        },
+        radii: {
+            'full': {
+                borderRadius: '$full',
+            }
+        },
+    },
+
+    defaultVariants: {
+        variant: 'contained',
+        typography: 'buttonMedium',
+        color: 'brand',
+    },
+
+    compoundVariants: [
+        {
+            variant: 'text',
+            color: 'brand',
+            css: {
+                color: '$brand500',
+                '&:hover': { color: '$brand600' },
+                '&:focus': { color: '$brand700' },
+                '&:active': { color: '$brand500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+        {
+            variant: 'text',
+            color: 'neutral',
+            css: {
+                color: '$neutral600',
+                '&:hover': { color: '$neutral700' },
+                '&:focus': { color: '$neutral800' },
+                '&:active': { color: '$neutral500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+        {
+            variant: 'text',
+            color: 'purple',
+            css: {
+                color: '$purple500',
+                '&:hover': { color: '$purple600' },
+                '&:focus': { color: '$purple700' },
+                '&:active': { color: '$purple500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+        {
+            variant: 'text',
+            color: 'green',
+            css: {
+                color: '$green500',
+                '&:hover': { color: '$green600' },
+                '&:focus': { color: '$green700' },
+                '&:active': { color: '$green500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+        {
+            variant: 'text',
+            color: 'blue',
+            css: {
+                color: '$blue500',
+                '&:hover': { color: '$blue600' },
+                '&:focus': { color: '$blue700' },
+                '&:active': { color: '$blue500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+        {
+            variant: 'text',
+            color: 'red',
+            css: {
+                color: '$red500',
+                '&:hover': { color: '$red600' },
+                '&:focus': { color: '$red700' },
+                '&:active': { color: '$red500' },
+                '&:disabled': { color: '$dark400' },
+            }
+        },
+
+        // contained
+        {
+            variant: 'contained',
+            color: 'brand',
+            css: {
+                color: '$grey50',
+                backgroundColor: '$brand500',
+                borderWidth: '2px',
+                borderStyle: 'solid',
+                borderColor: 'transparent',
+                '&:hover': {
+                    borderColor: '$brand700',
+                    backgroundColor: '$blue600',
+                },
+                '&:focus': {
+                    backgroundColor: '$blue700',
+                },
+                '&:active': {
+                    borderColor: '$brand300',
+                    backgroundColor: '$blue500',
+                },
+                '&:disabled': {
+                    borderColor: '$brand50',
+                    backgroundColor: '$brand50',
+                    color: '$neutral400',
+                }
+            }
+        },
+        {
+            variant: 'contained',
+            color: 'neutral',
+            css: {
+                backgroundColor: '$neutral600',
+                color: '$grey50',
+                '&:hover': {
+                    backgroundColor: '$neutral700',
+                    borderColor: '$neutral800',
+                },
+                '&:focus': {
+                    backgroundColor: '$neutral800',
+                },
+                '&:active': {
+                    backgroundColor: '$neutral500',
+                    borderColor: '$neutral400',
+                },
+                '&:disabled': {
+                    backgroundColor: '$neutral50',
+                    borderColor: '$neutral200',
+                    color: '$neutral400',
+                }
+            }
+        },
+        {
+            variant: 'contained',
+            color: 'purple',
+            css: {
+                backgroundColor: '$purple500',
+                color: '$grey50',
+                '&:hover': {
+                    backgroundColor: '$purple600',
+                    borderColor: '$purple700',
+                },
+                '&:focus': {
+                    backgroundColor: '$purple700',
+                },
+                '&:active': {
+                    borderColor: '$purple300',
+                    backgroundColor: '$purple500',
+                },
+                '&:disabled': {
+                    borderColor: '$purple200',
+                    backgroundColor: '$purple200',
+                    color: '$neutral400',
+                }
+            }
+        },
+
+
+
+        // outlined
+        {
+            variant: 'outlined',
+            color: 'brand',
+            outlinedBgColor: 'neutral',
+            css: {
+                color: '$brand500',
+                border: '1px solid $brand300',
+                backgroundColor: '$grey50',
+                '&:hover': {
+                    borderColor: '$brand400',
+                    backgroundColor: '$brand50',
+                },
+                '&:focus': {
+                    borderColor: '$brand400',
+                    backgroundColor: '$brand50',
+                },
+                '&:disabled': {
+                    borderColor: '$brand200',
+                    backgroundColor: '$neutral200',
+                }
+            }
+        },
+        {
+            variant: 'outlined',
+            color: 'neutral',
+            outlinedBgColor: 'neutral',
+            css: {
+                color: '$neutral600',
+                border: '1px solid $neutral300',
+                backgroundColor: '$grey50',
+                '&:hover': {
+                    borderColor: '$neutral400',
+                    backgroundColor: '$grey100',
+                },
+                '&:focus': {
+                    borderColor: '$neutral400',
+                    backgroundColor: '$grey100',
+                },
+                '&:disabled': {
+                    borderColor: '$neutral200',
+                    backgroundColor: '$neutral200',
+                }
+            }
+        },
+        {
+            variant: 'outlined',
+            color: 'purple',
+            outlinedBgColor: 'neutral',
+            css: {
+                color: '$purple500',
+                backgroundColor: '$grey50',
+                border: '1px solid $purple300',
+                '&:hover': {
+                    borderColor: '$purple400',
+                    backgroundColor: '$purple50',
+                },
+                '&:focus': {
+                    borderColor: '$purple400',
+                    backgroundColor: '$purple50',
+                },
+                '&:disabled': {
+                    borderColor: '$purple200',
+                    backgroundColor: '$neutral200',
+                }
+            }
+        },
+        // outlined transparent
+        {
+            variant: 'outlined',
+            color: 'brand',
+            outlinedBgColor: 'transparent',
+            css: {
+                color: '$brand500',
+                border: '1px solid $brand300',
+                backgroundColor: 'transparent',
+                '&:hover': {
+                    borderColor: '$brand400',
+                    opacity: '0.8',
+                },
+                '&:focus': {
+                    borderColor: '$brand400',
+                },
+                '&:disabled': {
+                    borderColor: '$brand200',
+                }
+            }
+        },
+        {
+            variant: 'outlined',
+            color: 'neutral',
+            outlinedBgColor: 'transparent',
+            css: {
+                color: '$neutral600',
+                border: '1px solid $neutral300',
+                backgroundColor: 'transparent',
+                '&:hover': {
+                    borderColor: '$neutral400',
+                    opacity: '0.8',
+                },
+                '&:focus': {
+                    borderColor: '$neutral400',
+                },
+                '&:disabled': {
+                    borderColor: '$neutral200',
+                }
+            }
+        },
+        {
+            variant: 'outlined',
+            color: 'purple',
+            outlinedBgColor: 'transparent',
+            css: {
+                color: '$purple500',
+                backgroundColor: 'transparent',
+                border: '1px solid $purple300',
+                '&:hover': {
+                    borderColor: '$purple400',
+                    opacity: '0.8',
+                },
+                '&:focus': {
+                    borderColor: '$purple400',
+                },
+                '&:disabled': {
+                    borderColor: '$purple200',
+                }
+            }
+        },
+    ]
+})
+

package/src/components/ButtonGroup.tsx

@@ -41,7 +41,7 @@ export const ButtonGroupStyled = styled(Flex, {
       },
       contained: {
         [`& ${ButtonItemStyled}`]: {
-          borderWidth: '$1',
+          borderWidth: '1px',
           borderStyle: 'solid',
           '&:disabled': {
             boxShadow: 'none',
@@ -50,7 +50,7 @@ export const ButtonGroupStyled = styled(Flex, {
       },
       outlined: {
         [`& ${ButtonItemStyled}`]: {
-          borderWidth: '$1',
+          borderWidth: '1px',
           borderStyle: 'solid',
           '&:disabled': {
             color: '$neutral400',

package/src/components/Calendar/index.tsx

@@ -0,0 +1,122 @@
+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 {
+  CalendarContentStyled,
+  CalendarFooterStyled,
+  CalendarStyled,
+  DayPickerWrapperStyled
+} 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
+}
+
+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('/')
+}
+
+export function Calendar({
+  action,
+  actionText,
+  calendarLayout,
+  selected,
+  setSelected,
+  onAction,
+  ...props
+}: CalendarProps) {
+  const [inputValue, setInputValue] = useState('')
+
+  const today = new Date()
+  const maxDate = addYears(today, 20)
+
+  useEffect(() => {
+    console.log('selected', selected)
+    if (selected) {
+      setInputValue(format(selected, 'dd/MM/yyyy'))
+    } else {
+      setInputValue('')
+    }
+  }, [selected])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const masked = formatToDateMask(e.target.value)
+    setInputValue(masked)
+
+    const parsed = parse(masked, 'dd/MM/yyyy', new Date())
+    if (isValid(parsed)) {
+      setSelected(parsed)
+    } else {
+      console.warn('Data inválida inserida no input:', masked)
+    }
+  }
+
+  return (
+    <Calendaradix.Root >
+      <CalendarStyled {...props}>
+        <Calendaradix.Trigger>
+          <TextField
+            placeholder="00/00/0000"
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            inputMode="numeric"
+          >
+            <TextFieldSlot>
+              <Icon name="calendar" size={'xl'} />
+            </TextFieldSlot>
+          </TextField>
+        </Calendaradix.Trigger>
+
+        <CalendarContentStyled>
+          <Box>
+            <DayPickerWrapperStyled>
+              <DayPicker
+                mode="single"
+                captionLayout={calendarLayout}
+                selected={selected}
+                onSelect={setSelected}
+                required
+                locale={ptBR}
+                disabled={{ before: today }}
+                startMonth={today}
+                endMonth={maxDate}
+              />
+            </DayPickerWrapperStyled>
+          </Box>
+
+          {action && onAction && (
+            <CalendarFooterStyled>
+              <Calendaradix.Close>
+                <Button
+                  variant='text'
+                  color='brand'
+                  onClick={onAction}
+                  typography='buttonMedium'
+                  fontWeight='medium'
+                >
+                  {actionText ?? 'Aplicar'}
+                </Button>
+              </Calendaradix.Close>
+            </CalendarFooterStyled>
+          )}
+        </CalendarContentStyled>
+      </CalendarStyled>
+    </Calendaradix.Root>
+  )
+}