@lets-events/react 4.0.0 → 5.0.0

package/src/components/Section.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Section as SectionRadix } from '@radix-ui/themes';
+
+export const SectionStyled = styled(SectionRadix, {
+  variants: {
+    size: {
+      xs: { maxWidth: '576px' },
+      sm: { minWidth: '577px', maxWidth: '767px' },
+      md: { mixWidth: '768px', maxWidth: '991px' },
+      lg: { mixWidth: '992px', maxWidth: '1199px' },
+      xl: { mixWidth: '1200px', maxWidth: '1399px' },
+      xxl: { mixWidth: '1400px' },
+      responsive: { width: '100%', maxWidth: '100%', minWidth: '100%' }
+    },
+    display: {
+      none: { display: 'none' },
+      initial: { display: 'initial' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    display: 'initial'
+  },
+});
+
+export type SectionProps = ComponentProps<typeof SectionStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Section({ children, ...props }: SectionProps) {
+  return <SectionStyled {...props}>{children}</SectionStyled>;
+}

package/src/components/Step.tsx

@@ -0,0 +1,148 @@
+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',
+
+})
+
+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': {
+    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',
+    zIndex: 1,
+    position: 'relative',
+
+  },
+
+
+  '&[data-state="active"] > span:first-of-type': {
+    backgroundColor: '$blue500',
+    borderColor: '$blue500',
+    color: 'white',
+  },
+
+
+  '& > span:last-of-type': {
+    display: 'none',
+  },
+
+
+  '&: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',
+    zIndex: 0,
+  },
+
+
+  '&[data-state="active"]::before': {
+    backgroundColor: '$blue500',
+  },
+
+  '&[data-filled="true"] > span:first-of-type': {
+    backgroundColor: '$blue500',
+    borderColor: '$blue500',
+    color: 'white',
+  },
+
+  '&[data-filled="true"]::before': {
+    backgroundColor: '$blue500',
+  },
+});
+
+const StepListStyled = styled(StepRadix.List, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '$4',
+
+});
+
+export type StepProps = ComponentProps<typeof StepStyled> & {
+  children: React.ReactNode,
+  defaultValue: number
+
+}
+export function Step({ children, defaultValue, ...props }: StepProps) {
+  return (
+    <StepRadix.Root defaultValue={String(defaultValue)}>
+      <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)
+  return (
+    <StepTriggerStyled data-filled={isActiveOrPrevious} value={String(value)} {...props}>{children}</StepTriggerStyled>
+  )
+}
+
+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 }) {
+  return (
+    <StepListStyled {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === StepTrigger) {
+          return React.cloneElement(child, { currentStep } as any)
+        }
+        return child
+      })}
+    </StepListStyled>
+  )
+}
+
+export function StepWrapper({ children, ...props }: { children: React.ReactNode }) {
+  return (
+    <Box {...props}>
+      {children}
+    </Box>
+  )
+}

package/src/components/Switch.tsx

@@ -0,0 +1,109 @@
+import { Switch as RadixSwitch } from '@radix-ui/themes'
+import type { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const SwitchStyled = styled(RadixSwitch, {
+  all: 'unset',
+  borderRadius: '$full',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.3s',
+  cursor: 'pointer',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    borderRadius: '$full',
+    pointerEvents: 'none',
+    cursor: 'pointer',
+  },
+  'span': {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translate(0, -50%)',
+    borderRadius: '50%',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
+  },
+
+  '&[data-state="checked"] span': {
+    left: 'auto',
+    transform: 'translate(50%, -50%)',
+  },
+
+  variants: {
+    color: {
+      brand: {
+        '&::before': {
+          backgroundColor: '$brand50',
+        },
+        'span': {
+          backgroundColor: '$dark50',
+          borderColor: '$neutral300',
+        },
+        '&[data-state="checked"]  span': {
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+        },
+      }
+    },
+    size: {
+      sm: {
+        width: '32px',
+        height: '20px',
+        '&::before': {
+          width: '$32',
+          height: '$12',
+        },
+
+        'span': {
+          width: '$20',
+          height: '$20',
+        },
+      },
+      md: {
+        width: '40px',
+        height: '20px',
+        '&::before': {
+          width: '40px',
+          height: '16px',
+        },
+        'span': {
+          width: '24px',
+          height: '24px',
+        },
+      },
+      lg: {
+        width: '56px',
+        height: '32px',
+        '&::before': {
+          width: '56px',
+          height: '24px',
+        },
+        'span': {
+          width: '32px',
+          height: '32px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'brand',
+  },
+
+})
+export type SwitchProps = ComponentProps<typeof RadixSwitch> & {
+  color?: 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Switch(props: SwitchProps) {
+  return <SwitchStyled color="brand" defaultChecked {...props} />
+}

package/src/components/Text.tsx

@@ -1,26 +1,32 @@
 import { ComponentProps, ElementType } from 'react'
 import { styled } from '../styles'
 import { Text as TextRadix } from '@radix-ui/themes'
+import { CSS } from '@stitches/react'
 
-export const Text = styled(TextRadix, {
+export const TextStyle = styled(TextRadix, {
   fontFamily: '$default',
   lineHeight: '$base',
   color: '$gray100',
   letterSpacing: '$2',
   fontWeight: '$semibold',
+  fontSize: '$sm',
   variants: {
     size: {
       lg: { fontSize: '$56' },
       md: { fontSize: '$48' },
       sm: { fontSize: '$36' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
+    }
+  }
 })
 
-export type TextProps = ComponentProps<typeof Text> & {
-  as?: ElementType
+export type TextProps = ComponentProps<typeof TextStyle> & {
+  as?: ElementType,
+  asChild?: boolean
+  css?: CSS
 }
+
+export function Text({ ...props }: TextProps) {
+  return (
+    <TextStyle {...props} />
+  )
+}

package/src/index.tsx

@@ -1,23 +1,27 @@
+// Icon
 export * from './components/Icon'
+
+// Text
 export * from './components/Text'
-export * from './components/DisplayText'
-export * from './components/Headline'
-export * from './components/Subtitle'
-export * from './components/BodyText'
-export * from './components/Label'
-export * from './components/BadgeText'
-export * from './components/CaptionText'
-export * from './components/TooltipText'
 
+// Components
 export * from './components/Button'
 export * from './components/ButtonGroup'
 export * from './components/Avatar'
-export * from './components/Flex'
-export * from './components/Box'
 export * from './components/TextField'
 export * from './components/RadioGroup'
 export * from './components/CheckboxGroup'
 export * from './components/Filter'
 export * from './components/Dropdown'
 export * from './components/Badge'
+export * from './components/Modal'
+export * from './components/Alert'
+export * from './components/Switch'
+export * from './components/Step'
 
+// Layouts
+export * from './components/Flex'
+export * from './components/Box'
+export * from './components/Grid'
+export * from './components/Container'
+export * from './components/Section'

package/src/components/BadgeText.tsx

@@ -1,29 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from "@radix-ui/themes";
-export const BadgeText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$16', lineHeight: '$16', fontWeight: '$regular' },
-      2: { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
-      3: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-      4: { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
-      'xs': { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
-      'sm': { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-      'md': { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
-      'xl': { fontSize: '$16', lineHeight: '$16', fontWeight: '$regular' },
-    },
-
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type BadgeTextProps = ComponentProps<typeof BadgeText> & {
-  as?: ElementType
-}

package/src/components/BodyText.tsx

@@ -1,24 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from "@radix-ui/themes";
-export const BodyText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  fontWeight: '$regular',
-  variants: {
-    size: {
-      1: { fontSize: '$16', lineHeight: '$24' },
-      2: { fontSize: '$14', lineHeight: '$24' },
-      3: { fontSize: '$13', lineHeight: '$24' },
-      4: { fontSize: '$12', lineHeight: '$16' },
-    },
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type BodyTextProps = ComponentProps<typeof BodyText> & {
-  as?: ElementType
-}

package/src/components/CaptionText.tsx

@@ -1,16 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const CaptionText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  fontSize: '$14',
-  lineHeight: '$16',
-  fontWeight: '$regular',
-})
-
-export type CaptionTextProps = ComponentProps<typeof CaptionText> & {
-  as?: ElementType
-}

package/src/components/DisplayText.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const DisplayText = styled('p', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  color: '$gray100',
-  letterSpacing: '$2',
-  fontWeight: '$semibold',
-  variants: {
-    size: {
-      lg: { fontSize: '$56' },
-      md: { fontSize: '$48' },
-      sm: { fontSize: '$36' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export type DisplayTextProps = ComponentProps<typeof DisplayText> & {
-  as?: ElementType
-}

package/src/components/Headline.tsx

@@ -1,29 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Heading } from '@radix-ui/themes'
-
-export const Headline = styled(Heading, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$48', lineHeight: '$64', fontWeight: '$semibold' },
-      2: { fontSize: '$32', lineHeight: '$48', fontWeight: '$semibold' },
-      3: { fontSize: '$24', lineHeight: '$40', fontWeight: '$semibold' },
-      4: { fontSize: '$20', lineHeight: '$36', fontWeight: '$semibold' },
-      5: { fontSize: '$18', lineHeight: '$24', fontWeight: '$semibold' },
-      6: { fontSize: '$18', lineHeight: '$34', fontWeight: '$medium' },
-      7: { fontSize: '$16', lineHeight: '$32', fontWeight: '$semibold' },
-      8: { fontSize: '$16', lineHeight: '$32', fontWeight: '$medium' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type HeadlineProps = ComponentProps<typeof Headline> & {
-  as?: ElementType
-}

package/src/components/Label.tsx

@@ -1,28 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Label = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$18', lineHeight: '$22', fontWeight: '$semibold' },
-      2: { fontSize: '$14', lineHeight: '$16', fontWeight: '$medium' },
-      3: { fontSize: '$14', lineHeight: '$16', fontWeight: '$regular' },
-      4: { fontSize: '$13', lineHeight: '$16', fontWeight: '$semibold', letterSpacing: '2px' },
-      5: { fontSize: '$13', lineHeight: '$16', fontWeight: '$medium' },
-      6: { fontSize: '$13', lineHeight: '$16', fontWeight: '$regular' },
-      7: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-    },
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type LabelProps = ComponentProps<typeof Label> & {
-  as?: ElementType
-}

package/src/components/Subtitle.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Subtitle = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$20', lineHeight: '$36', fontWeight: '$regular' },
-      2: { fontSize: '$18', lineHeight: '$34', fontWeight: '$regular' },
-      3: { fontSize: '$16', lineHeight: '$32', fontWeight: '$regular' },
-      4: { fontSize: '$14', lineHeight: '$24', fontWeight: '$regular' },
-      5: { fontSize: '$14', lineHeight: '$16', fontWeight: '$semibold' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type SubtitleProps = ComponentProps<typeof Subtitle> & {
-  as?: ElementType
-}

package/src/components/TooltipText.tsx

@@ -1,15 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const TooltipText = styled('span', {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  fontSize: '$13',
-  lineHeight: '$16',
-  fontWeight: '$regular',
-})
-
-export interface TooltipTextProps extends ComponentProps<typeof TooltipText> {
-  as?: ElementType
-}