@lets-events/react 12.7.1 → 12.7.3

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,125 +1,123 @@
-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',
-    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
-    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",
+  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: "$badgeExtraSmall",
+      },
+      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;
+  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,62 +1,62 @@
-import { ComponentProps, useMemo } from "react";
-import { ButtonStyled, SpinningDiv } from "./styledComponents";
-import { Button as ButtonRadix } from "@radix-ui/themes";
-import type { VariantProps } from "@stitches/react";
-import Icon, { IconProps } from "../Icon";
-import { Flex } from "../Flex";
-
-type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
-export interface ButtonProps
-  extends ComponentProps<typeof ButtonStyled>,
-    ButtonVariantProps {
-  asChild?: boolean;
-  loading?: boolean;
-}
-
-export function Button({ asChild, children, loading, ...props }: ButtonProps) {
-  const Component = asChild ? ButtonRadix : "button";
-  const { size, disabled } = props;
-
-  const spinnerSize = useMemo((): IconProps["size"] => {
-    switch (size) {
-      case "small":
-        return "sm";
-      case "extraSmall":
-        return "xs";
-      case "medium":
-        return "md";
-      case "large":
-        return "xl";
-      default:
-        return "md";
-    }
-  }, [size]);
-
-  return (
-    <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
-      <div style={{ position: "relative" }}>
-        <Flex
-          justify={"center"}
-          align={"center"}
-          css={{ visibility: loading ? "hidden" : undefined }}
-        >
-          {children}
-        </Flex>
-        {loading && (
-          <div
-            style={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
-          >
-            <SpinningDiv>
-              <Icon name="circle-notch" size={spinnerSize} />
-            </SpinningDiv>
-          </div>
-        )}
-      </div>
-    </ButtonStyled>
-  );
-}
+import { ComponentProps, useMemo } from "react";
+import { ButtonStyled, SpinningDiv } from "./styledComponents";
+import { Button as ButtonRadix } from "@radix-ui/themes";
+import type { VariantProps } from "@stitches/react";
+import Icon, { IconProps } from "../Icon";
+import { Flex } from "../Flex";
+
+type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
+export interface ButtonProps
+  extends ComponentProps<typeof ButtonStyled>,
+    ButtonVariantProps {
+  asChild?: boolean;
+  loading?: boolean;
+}
+
+export function Button({ asChild, children, loading, ...props }: ButtonProps) {
+  const Component = asChild ? ButtonRadix : "button";
+  const { size, disabled } = props;
+
+  const spinnerSize = useMemo((): IconProps["size"] => {
+    switch (size) {
+      case "small":
+        return "sm";
+      case "extraSmall":
+        return "xs";
+      case "medium":
+        return "md";
+      case "large":
+        return "xl";
+      default:
+        return "md";
+    }
+  }, [size]);
+
+  return (
+    <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
+      <div style={{ position: "relative" }}>
+        <Flex
+          justify={"center"}
+          align={"center"}
+          css={{ visibility: loading ? "hidden" : undefined }}
+        >
+          {children}
+        </Flex>
+        {loading && (
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <SpinningDiv>
+              <Icon name="circle-notch" size={spinnerSize} />
+            </SpinningDiv>
+          </div>
+        )}
+      </div>
+    </ButtonStyled>
+  );
+}