@lets-events/react 11.3.0 → 11.4.0

package/src/components/Drawer/styledComponents.ts

@@ -1,46 +1,46 @@
-import { styled } from "../../styles";
-
-export const DrawerOverlayStyled = styled("div", {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  width: "100vw",
-  height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1000,
-});
-
-export const DrawerContainerStyled = styled("div", {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
-  background: "$neutral50",
-  display: "flex",
-  flexDirection: "column",
-  boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
-  overflowY: "auto",
-});
-
-export const DrawerHeaderDiv = styled("div", {
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
-  position: "relative",
-});
-export const DrawerHeaderTitle = styled("h2", {
-  fontSize: "1.125rem",
-  fontWeight: "400",
-  fontFamily: "Work Sans",
-  color: "$dark800",
-  margin: "0",
-});
-export const DrawerHeaderCloseButton = styled("button", {
-  background: "none",
-  border: "none",
-  cursor: "pointer",
-});
+import { styled } from "../../styles";
+
+export const DrawerOverlayStyled = styled("div", {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  width: "100vw",
+  height: "100vh",
+  background: "rgba(0, 0, 0, 0.4)",
+  zIndex: 1000,
+});
+
+export const DrawerContainerStyled = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  maxWidth: "calc(100% - 2rem)",
+  height: "100%",
+  background: "$neutral50",
+  display: "flex",
+  flexDirection: "column",
+  boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
+  padding: "1.5rem 0",
+  overflowY: "auto",
+});
+
+export const DrawerHeaderDiv = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderBottom: "1px solid $neutral300",
+  padding: "0 1.5rem 1rem",
+  position: "relative",
+});
+export const DrawerHeaderTitle = styled("h2", {
+  fontSize: "1.125rem",
+  fontWeight: "400",
+  fontFamily: "Work Sans",
+  color: "$dark800",
+  margin: "0",
+});
+export const DrawerHeaderCloseButton = styled("button", {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+});

package/src/components/Dropdown.tsx

@@ -1,167 +1,167 @@
-import { ComponentProps, ElementType } from 'react'
-import { Theme, DropdownMenu as DropdownMenuRadix } from '@radix-ui/themes'
-import { styled } from '../styles'
-import { typographyLabelValues } from '../types/typographyValues'
-
-const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
-  fontFamily: '$default',
-  color: '$dark600',
-  letterSpacing: '0px',
-  padding: '$8 $12',
-  '&:hover, &:focus': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    outline: 'none',
-    cursor: 'pointer',
-  },
-  variants: {
-    typography: typographyLabelValues,
-    fontWeight: {
-      regular: { fontWeight: '$regular' },
-      medium: { fontWeight: '$medium' },
-      semibold: { fontWeight: '$semibold' },
-      bold: { fontWeight: '$bold' },
-    }
-  },
-})
-
-const DropdownMenuStyled = styled('div', {
-  fontFamily: '$default',
-  color: '$dark600',
-  letterSpacing: '0px',
-  cursor: 'pointer',
-  border: '1px solid $dark300',
-  borderRadius: '$xs',
-  padding: '$8 $12',
-  width: 'calc(100% - 24px)',
-  display: 'flex',
-  'button': {
-    fontFamily: '$default',
-    color: '$dark600',
-    letterSpacing: '0px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    width: '100%',
-    outline: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '$8',
-    cursor: 'pointer',
-    'svg': {
-      marginLeft: 'auto',
-    },
-  },
-  variants: {
-    typography: {
-      labelLarge: {
-        'button': {
-          fontSize: '$labelLarge',
-          lineHeight: '$labelLarge',
-        }
-      },
-      labelMedium: {
-        'button': {
-          fontSize: '$labelMedium',
-          lineHeight: '$labelMedium',
-        }
-      },
-      labelSmall: {
-        'button': {
-          fontSize: '$labelSmall',
-          lineHeight: '$labelSmall',
-        }
-      },
-      labelExtraSmall: {
-        'button': {
-          fontSize: '$labelExtraSmall',
-          lineHeight: '$labelExtraSmall',
-        }
-      },
-    },
-    fontWeight: {
-      regular: { 'button': { fontWeight: '$regular' } },
-      medium: { 'button': { fontWeight: '$medium' } },
-      semibold: { 'button': { fontWeight: '$semibold' } },
-      bold: { 'button': { fontWeight: '$bold' } },
-    },
-  },
-})
-
-const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
-  background: 'white',
-  padding: '$8 $12',
-  border: '1px solid $dark300',
-  borderRadius: '$xs',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
-  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
-  minWidth: '100%',
-  marginTop: '3px',
-})
-
-
-
-export type DropdownMenuProps = ComponentProps<typeof DropdownMenuRadix.Root> & {
-  as?: ElementType
-  placeholder?: string
-  fontWeight: 'regular' | 'medium' | 'semibold' | 'bold'
-  typography: 'labelExtraSmall' | 'labelSmall' | 'labelMedium' | 'labelLarge'
-  children: React.ReactNode
-}
-
-export type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuItemStyled> & {
-  as?: ElementType
-  value: string
-  typography: DropdownMenuProps['typography']
-  fontWeight: DropdownMenuProps['fontWeight']
-}
-
-/* Componente principal */
-export function DropdownMenu({
-  children,
-  placeholder,
-  typography,
-  fontWeight,
-  ...props
-}: DropdownMenuProps) {
-  return (
-    <Theme>
-      <DropdownMenuRadix.Root {...props}>
-        <DropdownMenuStyled typography={typography} fontWeight={fontWeight}>
-          <DropdownMenuRadix.Trigger>
-            <button aria-label={placeholder || 'Filtrar'}>
-              <span>{placeholder || 'Filtrar'}</span>
-              <DropdownMenuRadix.TriggerIcon />
-            </button>
-          </DropdownMenuRadix.Trigger>
-          <DropdownMenuContentStyled
-            avoidCollisions={false}
-            align="start"
-            alignOffset={-14}
-          >
-            <DropdownMenuRadix.Group>
-              {children}
-            </DropdownMenuRadix.Group>
-          </DropdownMenuContentStyled>
-        </DropdownMenuStyled>
-      </DropdownMenuRadix.Root>
-    </Theme>
-  )
-}
-
-/* Componente de item */
-export function DropdownMenuItem({
-  children,
-  typography,
-  fontWeight,
-  ...props
-}: DropdownMenuItemProps) {
-  return (
-    <DropdownMenuItemStyled
-      typography={typography}
-      fontWeight={fontWeight}
-      {...props}
-    >
-      {children}
-    </DropdownMenuItemStyled>
-  )
-}
+import { ComponentProps, ElementType } from 'react'
+import { Theme, DropdownMenu as DropdownMenuRadix } from '@radix-ui/themes'
+import { styled } from '../styles'
+import { typographyLabelValues } from '../types/typographyValues'
+
+const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  padding: '$8 $12',
+  '&:hover, &:focus': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+  },
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: '$regular' },
+      medium: { fontWeight: '$medium' },
+      semibold: { fontWeight: '$semibold' },
+      bold: { fontWeight: '$bold' },
+    }
+  },
+})
+
+const DropdownMenuStyled = styled('div', {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  cursor: 'pointer',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  padding: '$8 $12',
+  width: 'calc(100% - 24px)',
+  display: 'flex',
+  'button': {
+    fontFamily: '$default',
+    color: '$dark600',
+    letterSpacing: '0px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    width: '100%',
+    outline: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    'svg': {
+      marginLeft: 'auto',
+    },
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        'button': {
+          fontSize: '$labelLarge',
+          lineHeight: '$labelLarge',
+        }
+      },
+      labelMedium: {
+        'button': {
+          fontSize: '$labelMedium',
+          lineHeight: '$labelMedium',
+        }
+      },
+      labelSmall: {
+        'button': {
+          fontSize: '$labelSmall',
+          lineHeight: '$labelSmall',
+        }
+      },
+      labelExtraSmall: {
+        'button': {
+          fontSize: '$labelExtraSmall',
+          lineHeight: '$labelExtraSmall',
+        }
+      },
+    },
+    fontWeight: {
+      regular: { 'button': { fontWeight: '$regular' } },
+      medium: { 'button': { fontWeight: '$medium' } },
+      semibold: { 'button': { fontWeight: '$semibold' } },
+      bold: { 'button': { fontWeight: '$bold' } },
+    },
+  },
+})
+
+const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
+  background: 'white',
+  padding: '$8 $12',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
+  minWidth: '100%',
+  marginTop: '3px',
+})
+
+
+
+export type DropdownMenuProps = ComponentProps<typeof DropdownMenuRadix.Root> & {
+  as?: ElementType
+  placeholder?: string
+  fontWeight: 'regular' | 'medium' | 'semibold' | 'bold'
+  typography: 'labelExtraSmall' | 'labelSmall' | 'labelMedium' | 'labelLarge'
+  children: React.ReactNode
+}
+
+export type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuItemStyled> & {
+  as?: ElementType
+  value: string
+  typography: DropdownMenuProps['typography']
+  fontWeight: DropdownMenuProps['fontWeight']
+}
+
+/* Componente principal */
+export function DropdownMenu({
+  children,
+  placeholder,
+  typography,
+  fontWeight,
+  ...props
+}: DropdownMenuProps) {
+  return (
+    <Theme>
+      <DropdownMenuRadix.Root {...props}>
+        <DropdownMenuStyled typography={typography} fontWeight={fontWeight}>
+          <DropdownMenuRadix.Trigger>
+            <button aria-label={placeholder || 'Filtrar'}>
+              <span>{placeholder || 'Filtrar'}</span>
+              <DropdownMenuRadix.TriggerIcon />
+            </button>
+          </DropdownMenuRadix.Trigger>
+          <DropdownMenuContentStyled
+            avoidCollisions={false}
+            align="start"
+            alignOffset={-14}
+          >
+            <DropdownMenuRadix.Group>
+              {children}
+            </DropdownMenuRadix.Group>
+          </DropdownMenuContentStyled>
+        </DropdownMenuStyled>
+      </DropdownMenuRadix.Root>
+    </Theme>
+  )
+}
+
+/* Componente de item */
+export function DropdownMenuItem({
+  children,
+  typography,
+  fontWeight,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuItemStyled
+      typography={typography}
+      fontWeight={fontWeight}
+      {...props}
+    >
+      {children}
+    </DropdownMenuItemStyled>
+  )
+}