@lets-events/react 5.0.0 → 6.0.0

package/src/components/Modal.tsx

@@ -1,109 +1,109 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-import { Dialog as ModalRadix } from "@radix-ui/themes";
-import { Button } from './Button';
-import Icon from './Icon';
-import { Box } from './Box';
-import { Flex } from './Flex';
-export const ModalStyled = styled('div', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  fontSize: '$13',
-  borderRadius: '$sm',
-})
-
-export const ModalContentStyled = styled(ModalRadix.Content, {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  fontSize: '$13',
-  maxWidth: '502px',
-  width: '100%',
-  border: '1px solid $neutral',
-  borderRadius: '$2xl',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
-})
-const ModalHeaderStyled = styled('div', {
-  borderBottom: '1px solid $neutral300',
-  padding: '$16 $24',
-  textAlign: 'center',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-})
-
-const ModalIconClose = styled(Icon, {
-  position: 'absolute',
-  right: '$24',
-  cursor: 'pointer'
-})
-
-const ModalFooterStyled = styled('div', {
-  borderTop: '1px solid $neutral300',
-  padding: '$16 $24',
-
-  '.modal-footer-flex': {
-    justifyContent: 'flex-end'
-  }
-})
-
-export const ModalTitleStyled = styled(ModalRadix.Title, {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  fontSize: '$18',
-  fontWeight: 'medium',
-  fontStyle: 'normal',
-  textTransform: 'uppercase'
-})
-
-export type ModalProps = ComponentProps<typeof ModalStyled> & {
-  trigger: React.ReactNode,
-  title?: string
-  children: React.ReactNode,
-  cancel?: boolean
-  cancelText?: string,
-  action?: boolean
-  actionText?: string;
-  onAction?: () => void;
-}
-export function Modal({ children, title, trigger, cancel, cancelText, action, actionText, onAction, ...props }: ModalProps) {
-  return (
-    <ModalRadix.Root>
-      <ModalStyled {...props}>
-        <ModalRadix.Trigger>
-          {trigger}
-        </ModalRadix.Trigger>
-
-        <ModalContentStyled>
-          <ModalHeaderStyled>
-            {title && <ModalTitleStyled>{title}</ModalTitleStyled>}
-            <ModalRadix.Close>
-              <ModalIconClose name='close' size='xl' />
-            </ModalRadix.Close>
-          </ModalHeaderStyled>
-          <Box>
-            {children}
-          </Box>
-          {cancel || action ? (
-            <ModalFooterStyled>
-              <Flex gap="10" justify="end" width={'100%'} className='modal-footer-flex'>
-
-                {action && onAction && (
-                  <ModalRadix.Close>
-                    <Button variant='contained' color='brand' onClick={onAction}>{actionText ? actionText : 'Salvar'}</Button>
-                  </ModalRadix.Close>
-                )}
-                {cancel && (
-                  <ModalRadix.Close>
-                    <Button variant="outlined" color="neutral">
-                      {cancelText ? cancelText : 'cancelar'}
-                    </Button>
-                  </ModalRadix.Close>
-                )}
-              </Flex>
-            </ModalFooterStyled>) : null}
-        </ModalContentStyled>
-      </ModalStyled>
-    </ModalRadix.Root>
-  )
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { Dialog as ModalRadix } from "@radix-ui/themes";
+import { Button } from './Button';
+import Icon from './Icon';
+import { Box } from './Box';
+import { Flex } from './Flex';
+export const ModalStyled = styled('div', {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$13',
+  borderRadius: '$sm',
+})
+
+export const ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$13',
+  maxWidth: '502px',
+  width: '100%',
+  border: '1px solid $neutral',
+  borderRadius: '$2xl',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
+})
+const ModalHeaderStyled = styled('div', {
+  borderBottom: '1px solid $neutral300',
+  padding: '$16 $24',
+  textAlign: 'center',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+const ModalIconClose = styled(Icon, {
+  position: 'absolute',
+  right: '$24',
+  cursor: 'pointer'
+})
+
+const ModalFooterStyled = styled('div', {
+  borderTop: '1px solid $neutral300',
+  padding: '$16 $24',
+
+  '.modal-footer-flex': {
+    justifyContent: 'flex-end'
+  }
+})
+
+export const ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  fontSize: '$18',
+  fontWeight: 'medium',
+  fontStyle: 'normal',
+  textTransform: 'uppercase'
+})
+
+export type ModalProps = ComponentProps<typeof ModalStyled> & {
+  trigger: React.ReactNode,
+  title?: string
+  children: React.ReactNode,
+  cancel?: boolean
+  cancelText?: string,
+  action?: boolean
+  actionText?: string;
+  onAction?: () => void;
+}
+export function Modal({ children, title, trigger, cancel, cancelText, action, actionText, onAction, ...props }: ModalProps) {
+  return (
+    <ModalRadix.Root>
+      <ModalStyled {...props}>
+        <ModalRadix.Trigger>
+          {trigger}
+        </ModalRadix.Trigger>
+
+        <ModalContentStyled>
+          <ModalHeaderStyled>
+            {title && <ModalTitleStyled>{title}</ModalTitleStyled>}
+            <ModalRadix.Close>
+              <ModalIconClose name='close' size='xl' />
+            </ModalRadix.Close>
+          </ModalHeaderStyled>
+          <Box>
+            {children}
+          </Box>
+          {cancel || action ? (
+            <ModalFooterStyled>
+              <Flex gap="10" justify="end" width={'100%'} className='modal-footer-flex'>
+
+                {action && onAction && (
+                  <ModalRadix.Close>
+                    <Button variant='contained' color='brand' onClick={onAction}>{actionText ? actionText : 'Salvar'}</Button>
+                  </ModalRadix.Close>
+                )}
+                {cancel && (
+                  <ModalRadix.Close>
+                    <Button variant="outlined" color="neutral">
+                      {cancelText ? cancelText : 'cancelar'}
+                    </Button>
+                  </ModalRadix.Close>
+                )}
+              </Flex>
+            </ModalFooterStyled>) : null}
+        </ModalContentStyled>
+      </ModalStyled>
+    </ModalRadix.Root>
+  )
 }

package/src/components/RadioGroup.tsx

@@ -1,204 +1,211 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
-
-export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
-  fontFamily: '$default',
-  letterSpacing: '0px',
-  fontSize: '$13',
-
-  'label': {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '$8',
-    cursor: 'pointer',
-    '&:focus button, &:hover button': {
-      transition: 'all 300ms ease-out',
-      boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
-    }
-  },
-  'label button': {
-    backgroundColor: '$white',
-    borderRadius: '$full',
-    height: '$16',
-    width: '$16',
-    position: 'relative',
-    border: '2px solid $dark300',
-    cursor: 'pointer',
-  },
-  'label button[data-state=checked]:before': {
-    backgroundColor: '$dark50',
-    content: '',
-    width: '8px',
-    height: '8px',
-    position: 'absolute',
-    top: '2px',
-    right: '2px',
-    borderRadius: '$full',
-    zIndex: 2,
-  },
-  'label button[data-state=checked]:after': {
-    backgroundColor: '$brand500',
-    content: '',
-    height: '$16',
-    width: '$16',
-    position: 'absolute',
-    top: '-2px',
-    right: '-2px',
-    borderRadius: '$full',
-    zIndex: 1,
-  },
-
-  variants: {
-    color: {
-      success: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
-          }
-        },
-        'label button': {
-          borderColor: '$green500',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$green500',
-        },
-      },
-      blue: {},
-      error: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
-          }
-        },
-        'label button': {
-          borderColor: '$error400',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$error600',
-        },
-      }
-    },
-    disabled: {
-      true: {
-        'label': {
-          cursor: 'not-allowed',
-          opacity: 0.5,
-          '&:focus button, &:hover button': {
-            boxShadow: 'none',
-          }
-        },
-        'label button': {
-          cursor: 'not-allowed',
-        }
-      },
-      false: {}
-    }
-  },
-
-  compoundVariants: [
-    {
-      color: 'blue',
-      disabled: false,
-      css: {
-        'label': {
-          '&:focus button, &:hover button': {
-            boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
-          }
-        },
-        'label button': {
-          borderColor: '$dark300',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$brand500',
-        },
-      }
-    },
-
-    {
-      color: 'blue',
-      disabled: true,
-      css: {
-        'label button': {
-          borderColor: '$brand100',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$brand100',
-        },
-      }
-    },
-
-    {
-      color: 'success',
-      disabled: true,
-      css: {
-        'label button': {
-          borderColor: '$success100',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$success100',
-        }
-      }
-    },
-
-    {
-      color: 'error',
-      disabled: true,
-      css: {
-        'label button': {
-          borderColor: '$error100',
-          backgroundColor: '$dark50',
-        },
-        'label button[data-state=checked]:after': {
-          backgroundColor: '$error100',
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    color: 'blue',
-    disabled: false
-  }
-})
-
-export type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
-  placeholder?: string
-  children?: React.ReactNode
-  color?: string
-  disabled?: boolean
-}
-
-export type RadioItemProps = {
-  children?: React.ReactNode
-  value: string
-}
-
-export function RadioGroup({
-  children,
-  disabled,
-  ...props
-}: RadioGroupProps) {
-  return (
-    <RadioGroupStyled
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </RadioGroupStyled>
-  )
-}
-
-export function RadioItem({
-  children,
-  ...props
-}: RadioItemProps) {
-  return (
-    <RadioGroupRadix.Item {...props}>
-      {children}
-    </RadioGroupRadix.Item>
-  )
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
+import { typographyLabelValues } from "../types/typographyValues";
+
+export const RadioGroupStyled = styled(RadioGroupRadix.Root, {
+  fontFamily: '$default',
+
+  'label': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    '&:focus button, &:hover button': {
+      transition: 'all 300ms ease-out',
+      boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+    }
+  },
+  'label button': {
+    backgroundColor: '$white',
+    borderRadius: '$full',
+    height: '$16',
+    width: '$16',
+    position: 'relative',
+    border: '2px solid $dark300',
+    cursor: 'pointer',
+  },
+  'label button[data-state=checked]:before': {
+    backgroundColor: '$dark50',
+    content: '',
+    width: '8px',
+    height: '8px',
+    position: 'absolute',
+    top: '2px',
+    right: '2px',
+    borderRadius: '$full',
+    zIndex: 2,
+  },
+  'label button[data-state=checked]:after': {
+    backgroundColor: '$brand500',
+    content: '',
+    height: '$16',
+    width: '$16',
+    position: 'absolute',
+    top: '-2px',
+    right: '-2px',
+    borderRadius: '$full',
+    zIndex: 1,
+  },
+  variants: {
+    color: {
+      success: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(38, 167, 67, 0.50)',
+          }
+        },
+        'label button': {
+          borderColor: '$green500',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$green500',
+        },
+      },
+      blue: {},
+      error: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(225, 86, 98, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$error400',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error600',
+        },
+      }
+    },
+    disabled: {
+      true: {
+        'label': {
+          cursor: 'not-allowed',
+          opacity: 0.5,
+          '&:focus button, &:hover button': {
+            boxShadow: 'none',
+          }
+        },
+        'label button': {
+          cursor: 'not-allowed',
+        }
+      },
+      false: {}
+    },
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    },
+  },
+
+  compoundVariants: [
+    {
+      color: 'blue',
+      disabled: false,
+      css: {
+        'label': {
+          '&:focus button, &:hover button': {
+            boxShadow: '0px 0px 0px 4px rgba(56, 129, 255, 0.50)'
+          }
+        },
+        'label button': {
+          borderColor: '$dark300',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand500',
+        },
+      }
+    },
+
+    {
+      color: 'blue',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$brand100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$brand100',
+        },
+      }
+    },
+
+    {
+      color: 'success',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$success100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$success100',
+        }
+      }
+    },
+
+    {
+      color: 'error',
+      disabled: true,
+      css: {
+        'label button': {
+          borderColor: '$error100',
+          backgroundColor: '$dark50',
+        },
+        'label button[data-state=checked]:after': {
+          backgroundColor: '$error100',
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    color: 'blue',
+    disabled: false
+  }
+})
+
+export type RadioGroupProps = ComponentProps<typeof RadioGroupStyled> & {
+  placeholder?: string
+  children?: React.ReactNode
+  color?: string
+  disabled?: boolean
+  typography?: string
+  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold',
+}
+
+export type RadioItemProps = {
+  children?: React.ReactNode
+  value: string
+}
+
+export function RadioGroup({
+  children,
+  disabled,
+  ...props
+}: RadioGroupProps) {
+  return (
+    <RadioGroupStyled
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </RadioGroupStyled>
+  )
+}
+
+export function RadioItem({
+  children,
+  ...props
+}: RadioItemProps) {
+  return (
+    <RadioGroupRadix.Item {...props}>
+      {children}
+    </RadioGroupRadix.Item>
+  )
 }