@lets-events/react 11.2.0 → 11.3.0

package/src/components/Avatar.tsx

@@ -1,56 +1,56 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Avatar as AvatarRadix } from "@radix-ui/themes";
-export const AvatarStyled = styled(AvatarRadix, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      'xs': { width: '$24', height: '$24', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$10', },
-      'sm': { width: '$32', height: '$32', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$14', },
-      'md': { width: '$40', height: '$40', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$16', },
-      'lg': { width: '$48', height: '$48', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$18', },
-      'xl': { width: '$64', height: '$64', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$24', },
-    },
-    radii: {
-      full: { borderRadius: '$full' },
-    },
-    variant: {
-      'without-image': {
-        border: '1px solid $brand500',
-        backgroundColor: '$dark50',
-        color: '$dark700',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        lineHeight: 'normal',
-        textTransform: 'uppercase',
-
-      },
-      'with-image': {
-        border: 0,
-        'img': {
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          borderRadius: '$full',
-        }
-      },
-    }
-  },
-
-  defaultVariants: {
-    size: 'md',
-    radii: 'full',
-    variant: 'without-image'
-  },
-})
-
-export type AvatarProps = ComponentProps<typeof AvatarStyled> & {
-  as?: ElementType
-  fallback?: string
-  src?: string
-}
-export function Avatar({ asChild, ...props }: AvatarProps) {
-  return <AvatarStyled as={AvatarRadix} {...props} />
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Avatar as AvatarRadix } from "@radix-ui/themes";
+export const AvatarStyled = styled(AvatarRadix, {
+  fontFamily: '$default',
+  color: '$gray100',
+  letterSpacing: '0px',
+  variants: {
+    size: {
+      'xs': { width: '$24', height: '$24', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$10', },
+      'sm': { width: '$32', height: '$32', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$14', },
+      'md': { width: '$40', height: '$40', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$16', },
+      'lg': { width: '$48', height: '$48', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$18', },
+      'xl': { width: '$64', height: '$64', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '$24', },
+    },
+    radii: {
+      full: { borderRadius: '$full' },
+    },
+    variant: {
+      'without-image': {
+        border: '1px solid $brand500',
+        backgroundColor: '$dark50',
+        color: '$dark700',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: 'normal',
+        textTransform: 'uppercase',
+
+      },
+      'with-image': {
+        border: 0,
+        'img': {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          borderRadius: '$full',
+        }
+      },
+    }
+  },
+
+  defaultVariants: {
+    size: 'md',
+    radii: 'full',
+    variant: 'without-image'
+  },
+})
+
+export type AvatarProps = ComponentProps<typeof AvatarStyled> & {
+  as?: ElementType
+  fallback?: string
+  src?: string
+}
+export function Avatar({ asChild, ...props }: AvatarProps) {
+  return <AvatarStyled as={AvatarRadix} {...props} />
 }

package/src/components/Badge.tsx

@@ -1,128 +1,128 @@
-import React from 'react'
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Badge as BadgeRadix } from '@radix-ui/themes'
-export const BadgeStyled = styled(BadgeRadix, {
-    fontFamily: '$default',
-    borderRadius: '$sm',
-    verticalAlign: 'middle',
-    'svg': {
-        marginRight: '10px',
-    },
-    variants: {
-        color: {
-            primary: {
-                backgroundColor: '$brand100',
-                color: '$dark700',
-            },
-            dark: {
-                backgroundColor: '$dark700',
-                color: '$grey50',
-            },
-            light: {
-                backgroundColor: '$neutral200',
-                color: '$dark700',
-            },
-            red: {
-                backgroundColor: '$red100',
-                color: '$dark700',
-            },
-            green: {
-                backgroundColor: '$green100',
-                color: '$dark700',
-            },
-            yellow: {
-                backgroundColor: '$yellow100',
-                color: '$dark700',
-            },
-            orange: {
-                backgroundColor: '$orange100',
-                color: '$dark700',
-            },
-            blue: {
-                backgroundColor: '$blue100',
-                color: '$dark700',
-            },
-            pink: {
-                backgroundColor: '$pink100',
-                color: '$dark700',
-            },
-            purple: {
-                backgroundColor: '$purple100',
-                color: '$dark700',
-            },
-            grey: {
-                backgroundColor: '$grey200',
-                color: '$dark700',
-            },
-            disable: {
-                backgroundColor: '$neutral200',
-                color: '$grey500',
-            }
-
-
-        },
-        size: {
-            xs: {
-                padding: '$4 $6',
-                fontSize: '$badgeExtraSmall',
-                borderRadius: '$2xs',
-                lineHeight: '$bagdeExtraSmall',
-            },
-            sm: {
-                padding: '$4 $8',
-                fontSize: '$badgeSmall',
-                borderRadius: '$xs',
-                lineHeight: '$badgeSmall',
-            },
-            md: {
-                padding: '$8 $10',
-                fontSize: '$badgeMedium',
-                borderRadius: '$sm',
-                lineHeight: '$badgeMedium',
-            },
-            xl: {
-                padding: '$12 $12',
-                fontSize: '$badgeLarge',
-                borderRadius: '$sm',
-                lineHeight: '$badgeLarge',
-            },
-        },
-        fontWeight: {
-            regular: { fontWeight: '$regular' },
-            medium: { fontWeight: '$medium' },
-            semibold: { fontWeight: '$semibold' },
-            bold: { fontWeight: '$bold' },
-        },
-        radii: {
-            'full': {
-                borderRadius: '$full',
-            },
-        },
-    },
-
-    defaultVariants: {
-        size: 'md',
-        color: 'primary',
-        fontWeight: 'regular',
-    },
-})
-
-export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
-    as?: ElementType
-    icon?: boolean
-    size: 'md',
-    children: React.ReactNode
-}
-export function Badge({ asChild, children, ...props }: BadgeProps) {
-    return (
-        <BadgeStyled {...props}>
-            {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { size: props.size } as any)
-                }
-                return child
-            })}
-        </BadgeStyled>
-    )
-}
+import React from 'react'
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Badge as BadgeRadix } from '@radix-ui/themes'
+export const BadgeStyled = styled(BadgeRadix, {
+    fontFamily: '$default',
+    borderRadius: '$sm',
+    verticalAlign: 'middle',
+    'svg': {
+        marginRight: '10px',
+    },
+    variants: {
+        color: {
+            primary: {
+                backgroundColor: '$brand100',
+                color: '$dark700',
+            },
+            dark: {
+                backgroundColor: '$dark700',
+                color: '$grey50',
+            },
+            light: {
+                backgroundColor: '$neutral200',
+                color: '$dark700',
+            },
+            red: {
+                backgroundColor: '$red100',
+                color: '$dark700',
+            },
+            green: {
+                backgroundColor: '$green100',
+                color: '$dark700',
+            },
+            yellow: {
+                backgroundColor: '$yellow100',
+                color: '$dark700',
+            },
+            orange: {
+                backgroundColor: '$orange100',
+                color: '$dark700',
+            },
+            blue: {
+                backgroundColor: '$blue100',
+                color: '$dark700',
+            },
+            pink: {
+                backgroundColor: '$pink100',
+                color: '$dark700',
+            },
+            purple: {
+                backgroundColor: '$purple100',
+                color: '$dark700',
+            },
+            grey: {
+                backgroundColor: '$grey200',
+                color: '$dark700',
+            },
+            disable: {
+                backgroundColor: '$neutral200',
+                color: '$grey500',
+            }
+
+
+        },
+        size: {
+            xs: {
+                padding: '$4 $6',
+                fontSize: '$badgeExtraSmall',
+                borderRadius: '$2xs',
+                lineHeight: '$bagdeExtraSmall',
+            },
+            sm: {
+                padding: '$4 $8',
+                fontSize: '$badgeSmall',
+                borderRadius: '$xs',
+                lineHeight: '$badgeSmall',
+            },
+            md: {
+                padding: '$8 $10',
+                fontSize: '$badgeMedium',
+                borderRadius: '$sm',
+                lineHeight: '$badgeMedium',
+            },
+            xl: {
+                padding: '$12 $12',
+                fontSize: '$badgeLarge',
+                borderRadius: '$sm',
+                lineHeight: '$badgeLarge',
+            },
+        },
+        fontWeight: {
+            regular: { fontWeight: '$regular' },
+            medium: { fontWeight: '$medium' },
+            semibold: { fontWeight: '$semibold' },
+            bold: { fontWeight: '$bold' },
+        },
+        radii: {
+            'full': {
+                borderRadius: '$full',
+            },
+        },
+    },
+
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        fontWeight: 'regular',
+    },
+})
+
+export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
+    as?: ElementType
+    icon?: boolean
+    size: 'md',
+    children: React.ReactNode
+}
+export function Badge({ asChild, children, ...props }: BadgeProps) {
+    return (
+        <BadgeStyled {...props}>
+            {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { size: props.size } as any)
+                }
+                return child
+            })}
+        </BadgeStyled>
+    )
+}

package/src/components/Box.tsx

@@ -1,3 +1,3 @@
-import { Box as BoxRadix } from "@radix-ui/themes";
-export const Box = BoxRadix
-
+import { Box as BoxRadix } from "@radix-ui/themes";
+export const Box = BoxRadix
+

package/src/components/Button/index.tsx

@@ -1,13 +1,16 @@
-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} />
-}
+import { ComponentProps } from "react";
+import { ButtonStyled } from "./styledComponents";
+import { Button as ButtonRadix } from "@radix-ui/themes";
+import type { VariantProps } from "@stitches/react";
+
+type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
+export interface ButtonProps
+  extends ComponentProps<typeof ButtonStyled>,
+    ButtonVariantProps {
+  asChild?: boolean;
+}
+
+export function Button({ asChild, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : "button";
+  return <ButtonStyled as={Component} {...props} />;
+}