@lets-events/react 11.3.0 → 11.4.1

package/src/components/CheckboxGroup.tsx

@@ -1,214 +1,196 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
-import { typographyLabelValues } from "../types/typographyValues";
-
-export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
-  fontFamily: '$default',
-  'svg': {
-    display: 'none'
-  },
-  '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: '2px',
-    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',
-    zIndex: 2,
-  },
-  'label button[data-state=checked]:after': {
-    backgroundColor: '$brand500',
-    content: '',
-    height: '$16',
-    width: '$16',
-    position: 'absolute',
-    top: '-2px',
-    right: '-2px',
-    borderRadius: '2px',
-    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 CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
-  placeholder?: string
-  children?: React.ReactNode
-  color?: string
-  disabled?: boolean
-}
-
-export type CheckboxItemProps = {
-  children?: React.ReactNode
-  value: string,
-  style?: React.CSSProperties
-}
-
-export function CheckboxGroup({
-  children,
-
-  ...props
-}: CheckboxGroupProps) {
-  return (
-    <CheckboxGroupStyled {...props}>
-      {children}
-    </CheckboxGroupStyled>
-  )
-}
-
-
-export function CheckboxItem({
-  children,
-
-  ...props
-}: CheckboxItemProps) {
-  return (
-    <CheckboxGroupRadix.Item {...props}>
-      {children}
-    </CheckboxGroupRadix.Item>
-  )
-}
-
-
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
+import { typographyLabelValues } from "../types/typographyValues";
+
+export const CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
+  fontFamily: "$default",
+  svg: {
+    display: "none",
+  },
+  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: "2px",
+    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",
+    zIndex: 2,
+  },
+  "label button[data-state=checked]:after": {
+    backgroundColor: "$brand500",
+    content: "",
+    height: "$16",
+    width: "$16",
+    position: "absolute",
+    top: "-2px",
+    right: "-2px",
+    borderRadius: "2px",
+    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,
+  },
+});
+
+const StyledItem = styled(CheckboxGroupRadix.Item, {});
+
+export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupStyled> & {
+  placeholder?: string;
+  children?: React.ReactNode;
+  color?: string;
+  disabled?: boolean;
+};
+
+export type CheckboxItemProps = ComponentProps<typeof StyledItem> & {
+  children?: React.ReactNode;
+  value: string;
+  style?: React.CSSProperties;
+};
+
+export function CheckboxGroup({ children, ...props }: CheckboxGroupProps) {
+  return <CheckboxGroupStyled {...props}>{children}</CheckboxGroupStyled>;
+}
+
+export function CheckboxItem({ children, ...props }: CheckboxItemProps) {
+  return <StyledItem {...props}>{children}</StyledItem>;
+}

package/src/components/Container.tsx

@@ -1,40 +1,40 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles';
-import { Container as ContainerRadix } from '@radix-ui/themes';
-
-export const ContainerStyled = styled(ContainerRadix, {
-  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' },
-    },
-    align: {
-      left: { marginLeft: 0, marginRight: 'auto' },
-      center: { marginLeft: 'auto', marginRight: 'auto' },
-      right: { marginLeft: 'auto', marginRight: 0 },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    align: 'left',
-    display: 'initial'
-  },
-});
-
-export type ContainerProps = ComponentProps<typeof ContainerStyled> & {
-  as?: ElementType;
-  children: React.ReactNode;
-};
-
-export function Container({ children, ...props }: ContainerProps) {
-  return <ContainerStyled {...props}>{children}</ContainerStyled>;
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Container as ContainerRadix } from '@radix-ui/themes';
+
+export const ContainerStyled = styled(ContainerRadix, {
+  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' },
+    },
+    align: {
+      left: { marginLeft: 0, marginRight: 'auto' },
+      center: { marginLeft: 'auto', marginRight: 'auto' },
+      right: { marginLeft: 'auto', marginRight: 0 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    align: 'left',
+    display: 'initial'
+  },
+});
+
+export type ContainerProps = ComponentProps<typeof ContainerStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Container({ children, ...props }: ContainerProps) {
+  return <ContainerStyled {...props}>{children}</ContainerStyled>;
 }

package/src/components/Drawer/index.tsx

@@ -1,48 +1,48 @@
-import { ComponentProps, ReactNode } from "react";
-import { colors, Colors } from "@lets-events/tokens";
-import Icon from "../Icon";
-import {
-  DrawerOverlayStyled,
-  DrawerContainerStyled,
-  DrawerHeaderDiv,
-  DrawerHeaderTitle,
-  DrawerHeaderCloseButton,
-} from "./styledComponents";
-
-export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
-  isOpen: boolean;
-  onClose: () => void;
-  width?: string;
-  backgroundColor?: keyof Colors;
-  title: string;
-  children?: ReactNode;
-};
-
-export function Drawer({
-  isOpen,
-  onClose,
-  width,
-  backgroundColor,
-  title,
-  children,
-}: DrawerProps) {
-  if (!isOpen) return null;
-  return (
-    <DrawerOverlayStyled>
-      <DrawerContainerStyled
-        style={{
-          width: width ?? "34.25rem",
-          backgroundColor: colors[backgroundColor ?? "neutral50"],
-        }}
-      >
-        <DrawerHeaderDiv>
-          <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
-          <DrawerHeaderCloseButton onClick={onClose}>
-            <Icon size={"xl"} color="$dark600" name="xmark" />
-          </DrawerHeaderCloseButton>
-        </DrawerHeaderDiv>
-        {children}
-      </DrawerContainerStyled>
-    </DrawerOverlayStyled>
-  );
-}
+import { ComponentProps, ReactNode } from "react";
+import { colors, Colors } from "@lets-events/tokens";
+import Icon from "../Icon";
+import {
+  DrawerOverlayStyled,
+  DrawerContainerStyled,
+  DrawerHeaderDiv,
+  DrawerHeaderTitle,
+  DrawerHeaderCloseButton,
+} from "./styledComponents";
+
+export type DrawerProps = ComponentProps<typeof DrawerOverlayStyled> & {
+  isOpen: boolean;
+  onClose: () => void;
+  width?: string;
+  backgroundColor?: keyof Colors;
+  title: string;
+  children?: ReactNode;
+};
+
+export function Drawer({
+  isOpen,
+  onClose,
+  width,
+  backgroundColor,
+  title,
+  children,
+}: DrawerProps) {
+  if (!isOpen) return null;
+  return (
+    <DrawerOverlayStyled>
+      <DrawerContainerStyled
+        style={{
+          width: width ?? "34.25rem",
+          backgroundColor: colors[backgroundColor ?? "neutral50"],
+        }}
+      >
+        <DrawerHeaderDiv>
+          <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+          <DrawerHeaderCloseButton onClick={onClose}>
+            <Icon size={"xl"} color="$dark600" name="xmark" />
+          </DrawerHeaderCloseButton>
+        </DrawerHeaderDiv>
+        {children}
+      </DrawerContainerStyled>
+    </DrawerOverlayStyled>
+  );
+}