@lets-events/react 11.1.0 → 11.3.0

package/src/components/Grid.tsx

@@ -1,138 +1,138 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles'
-import { Grid as GridRadix } from "@radix-ui/themes";
-export const GridStyled = styled(GridRadix, {
-  display: 'grid',
-  variants: {
-    display: {
-      'grid': { display: 'grid' },
-      'inline-grid': { display: 'inline-grid' },
-    },
-    align: {
-      start: { alignItems: 'start' },
-      center: { alignItems: 'center' },
-      end: { alignItems: 'end' },
-      stretch: { alignItems: 'stretch' },
-    },
-    justify: {
-      start: { justifyContent: 'start' },
-      center: { justifyContent: 'center' },
-      end: { justifyContent: 'end' },
-      between: { justifyContent: 'space-between' },
-    },
-    flow: {
-      row: { gridAutoFlow: 'row' },
-      column: { gridAutoFlow: 'column' },
-      'row-dense': { gridAutoFlow: 'row dense' },
-      'column-dense': { gridAutoFlow: 'column dense' },
-    },
-    columns: {
-      1: { gridTemplateColumns: 'repeat(1, 1fr)' },
-      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
-      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
-      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
-      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
-      12: { gridTemplateColumns: 'repeat(12, 1fr)' },
-    },
-    rows: {
-      1: { gridTemplateRows: 'repeat(1, 1fr)' },
-      2: { gridTemplateRows: 'repeat(2, 1fr)' },
-      3: { gridTemplateRows: 'repeat(3, 1fr)' },
-      4: { gridTemplateRows: 'repeat(4, 1fr)' },
-      5: { gridTemplateRows: 'repeat(5, 1fr)' },
-      6: { gridTemplateRows: 'repeat(6, 1fr)' },
-      7: { gridTemplateRows: 'repeat(7, 1fr)' },
-      8: { gridTemplateRows: 'repeat(8, 1fr)' },
-      9: { gridTemplateRows: 'repeat(9, 1fr)' },
-      10: { gridTemplateRows: 'repeat(10, 1fr)' },
-      11: { gridTemplateRows: 'repeat(11, 1fr)' },
-      12: { gridTemplateRows: 'repeat(12, 1fr)' },
-      auto: { gridTemplateRows: 'auto' },
-    },
-    gap: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapX: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapY: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-  },
-  defaultVariants: {
-    gap: 10,
-  }
-
-})
-
-export type GridProps = ComponentProps<typeof GridStyled> & {
-  as?: ElementType
-  children: React.ReactNode,
-  areas?: string
-}
-
-
-export function Grid({ children, ...props }: GridProps) {
-  return (
-    <GridStyled {...props}>
-      {children}
-    </GridStyled>
-  )
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles'
+import { Grid as GridRadix } from "@radix-ui/themes";
+export const GridStyled = styled(GridRadix, {
+  display: 'grid',
+  variants: {
+    display: {
+      'grid': { display: 'grid' },
+      'inline-grid': { display: 'inline-grid' },
+    },
+    align: {
+      start: { alignItems: 'start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'end' },
+      stretch: { alignItems: 'stretch' },
+    },
+    justify: {
+      start: { justifyContent: 'start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'end' },
+      between: { justifyContent: 'space-between' },
+    },
+    flow: {
+      row: { gridAutoFlow: 'row' },
+      column: { gridAutoFlow: 'column' },
+      'row-dense': { gridAutoFlow: 'row dense' },
+      'column-dense': { gridAutoFlow: 'column dense' },
+    },
+    columns: {
+      1: { gridTemplateColumns: 'repeat(1, 1fr)' },
+      2: { gridTemplateColumns: 'repeat(2, 1fr)' },
+      3: { gridTemplateColumns: 'repeat(3, 1fr)' },
+      4: { gridTemplateColumns: 'repeat(4, 1fr)' },
+      6: { gridTemplateColumns: 'repeat(6, 1fr)' },
+      12: { gridTemplateColumns: 'repeat(12, 1fr)' },
+    },
+    rows: {
+      1: { gridTemplateRows: 'repeat(1, 1fr)' },
+      2: { gridTemplateRows: 'repeat(2, 1fr)' },
+      3: { gridTemplateRows: 'repeat(3, 1fr)' },
+      4: { gridTemplateRows: 'repeat(4, 1fr)' },
+      5: { gridTemplateRows: 'repeat(5, 1fr)' },
+      6: { gridTemplateRows: 'repeat(6, 1fr)' },
+      7: { gridTemplateRows: 'repeat(7, 1fr)' },
+      8: { gridTemplateRows: 'repeat(8, 1fr)' },
+      9: { gridTemplateRows: 'repeat(9, 1fr)' },
+      10: { gridTemplateRows: 'repeat(10, 1fr)' },
+      11: { gridTemplateRows: 'repeat(11, 1fr)' },
+      12: { gridTemplateRows: 'repeat(12, 1fr)' },
+      auto: { gridTemplateRows: 'auto' },
+    },
+    gap: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+  },
+  defaultVariants: {
+    gap: 10,
+  }
+
+})
+
+export type GridProps = ComponentProps<typeof GridStyled> & {
+  as?: ElementType
+  children: React.ReactNode,
+  areas?: string
+}
+
+
+export function Grid({ children, ...props }: GridProps) {
+  return (
+    <GridStyled {...props}>
+      {children}
+    </GridStyled>
+  )
 }

package/src/components/Icon.tsx

@@ -1,48 +1,48 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { fas } from "@fortawesome/free-solid-svg-icons";
-import { far } from "@fortawesome/free-regular-svg-icons";
-import { fab } from "@fortawesome/free-brands-svg-icons";
-import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-
-library.add(fas, far, fab);
-
-interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
-  name: IconName;
-  size?: 'xs' | 'sm' | 'md' | 'xl';
-  prefix?: IconPrefix;
-}
-
-export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
-  const sizeMap = {
-
-    'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
-    'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
-    'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
-    'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
-    undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
-  } as const;
-
-  return (
-    <FontAwesomeIcon
-      icon={[prefix, name]}
-      style={sizeMap[size]}
-      color={color}
-      className={className}
-      {...props}
-      width={sizeMap[size]?.width}
-      height={sizeMap[size]?.height}
-    />
-  );
-};
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  prefix: PropTypes.string,
-  size: PropTypes.string,
-  color: PropTypes.string,
-  className: PropTypes.string,
-};
-
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+
+library.add(fas, far, fab);
+
+interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
+  name: IconName;
+  size?: 'xs' | 'sm' | 'md' | 'xl';
+  prefix?: IconPrefix;
+}
+
+export const Icon = ({ name, prefix = "fas", size = "sm", color = "currentColor", className = "", ...props }: IconProps) => {
+  const sizeMap = {
+
+    'xs': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'sm': { width: '0.625rem', height: '0.625rem', fontSize: '0.625rem' },
+    'md': { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+    'xl': { width: '1rem', height: '1rem', fontSize: '1rem' },
+    undefined: { width: '0.75rem', height: '0.75rem', fontSize: '0.75rem' },
+  } as const;
+
+  return (
+    <FontAwesomeIcon
+      icon={[prefix, name]}
+      style={sizeMap[size]}
+      color={color}
+      className={className}
+      {...props}
+      width={sizeMap[size]?.width}
+      height={sizeMap[size]?.height}
+    />
+  );
+};
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  prefix: PropTypes.string,
+  size: PropTypes.string,
+  color: PropTypes.string,
+  className: PropTypes.string,
+};
+
 export default Icon;

package/src/components/MenuDropdown/index.tsx

@@ -0,0 +1,30 @@
+import { ComponentProps, ReactNode, useState } from "react";
+import {
+  MenuDropdownContainerStyled,
+  TriggerButtonStyled,
+  MenuItemsContainerStyled,
+} from "./styledComponents";
+import Icon from "../Icon";
+
+export type MenuDropdownProps = ComponentProps<
+  typeof MenuDropdownContainerStyled
+> & {
+  children: ReactNode;
+};
+
+export function MenuDropdown({ children }: MenuDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  function handleMenuDropdown() {
+    setIsOpen(!isOpen);
+  }
+  return (
+    <MenuDropdownContainerStyled>
+      <TriggerButtonStyled onClick={handleMenuDropdown}>
+        <Icon name="ellipsis" size="xl" color="#FFFFFF" />
+      </TriggerButtonStyled>
+      {isOpen && (
+        <MenuItemsContainerStyled>{children}</MenuItemsContainerStyled>
+      )}
+    </MenuDropdownContainerStyled>
+  );
+}

package/src/components/MenuDropdown/styledComponents.ts

@@ -0,0 +1,31 @@
+import { styled } from "../../styles";
+
+export const MenuDropdownContainerStyled = styled("div", {
+  position: "relative",
+  width: "fit-content",
+});
+export const TriggerButtonStyled = styled("button", {
+  backgroundColor: "$brand500",
+  boxShadow: "0px 4px 4px 0px #23354314",
+  borderRadius: "$full",
+  border: "none",
+  height: "1.875rem",
+  width: "1.875rem",
+  cursor: "pointer",
+});
+export const MenuItemsContainerStyled = styled("div", {
+  position: "absolute",
+  right: 0,
+  top: "2.125rem",
+  zIndex: "999",
+  width: "fit-content",
+  minWidth: "5rem",
+  background: "#fff",
+  maxWidth: "18.75rem",
+  margin: "auto",
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.0784313725)",
+  border: "1px solid $dark300",
+  borderRadius: "0.5rem",
+  padding: "0.5rem 0",
+  height: "fit-content",
+});

package/src/components/Modal.tsx

@@ -1,90 +1,90 @@
-import { ComponentProps } from "react";
-import { styled } from "../styles";
-import { Dialog as ModalRadix } from "radix-ui";
-import Icon from "./Icon";
-import { Box } from "./Box";
-import { Text } from "./Text";
-
-const ModalContentStyled = styled(ModalRadix.Content, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  maxWidth: "502px",
-  width: "100%",
-  border: "1px solid $neutral",
-  borderRadius: "$2xl",
-  boxShadow:
-    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  backgroundColor: "$dark50",
-  zIndex: '10001'
-});
-
-const ModalOverlay = styled(ModalRadix.Overlay, {
-  position: "fixed",
-  inset: 0,
-  opacity: 1,
-  backgroundColor: "rgba(0, 0, 0, .5)",
-  zIndex: '10000'
-});
-
-const ModalHeaderStyled = styled("div", {
-  borderBottom: "1px solid $neutral300",
-  padding: "$18 $24",
-  textAlign: "center",
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-const ModalIconClose = styled(Icon, {
-  position: "absolute",
-  right: "$24",
-  cursor: "pointer",
-});
-
-const ModalTitleStyled = styled(ModalRadix.Title, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$18",
-  fontWeight: "medium",
-  fontStyle: "normal",
-  textTransform: "uppercase",
-});
-
-export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
-  trigger?: React.ReactNode;
-  title?: string;
-  children: React.ReactNode;
-};
-
-export function Modal({ children, title, trigger, ...props }: ModalProps) {
-  return (
-    <ModalRadix.Root {...props}>
-      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
-      <ModalRadix.Portal>
-        <ModalOverlay>
-          <ModalContentStyled>
-            {title && (
-              <ModalHeaderStyled>
-                <ModalTitleStyled asChild>
-                  <Text typography={"headline6"} fontWeight={"medium"}>
-                    {title}
-                  </Text>
-                </ModalTitleStyled>
-                <ModalRadix.Close asChild>
-                  <ModalIconClose name="close" size="xl" />
-                </ModalRadix.Close>
-              </ModalHeaderStyled>
-            )}
-            <Box>{children}</Box>
-          </ModalContentStyled>
-        </ModalOverlay>
-      </ModalRadix.Portal>
-    </ModalRadix.Root>
-  );
-}
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { Dialog as ModalRadix } from "radix-ui";
+import Icon from "./Icon";
+import { Box } from "./Box";
+import { Text } from "./Text";
+
+const ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  maxWidth: "502px",
+  width: "100%",
+  border: "1px solid $neutral",
+  borderRadius: "$2xl",
+  boxShadow:
+    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: '10001'
+});
+
+const ModalOverlay = styled(ModalRadix.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: '10000'
+});
+
+const ModalHeaderStyled = styled("div", {
+  borderBottom: "1px solid $neutral300",
+  padding: "$18 $24",
+  textAlign: "center",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const ModalIconClose = styled(Icon, {
+  position: "absolute",
+  right: "$24",
+  cursor: "pointer",
+});
+
+const ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$18",
+  fontWeight: "medium",
+  fontStyle: "normal",
+  textTransform: "uppercase",
+});
+
+export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
+  trigger?: React.ReactNode;
+  title?: string;
+  children: React.ReactNode;
+};
+
+export function Modal({ children, title, trigger, ...props }: ModalProps) {
+  return (
+    <ModalRadix.Root {...props}>
+      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
+      <ModalRadix.Portal>
+        <ModalOverlay>
+          <ModalContentStyled>
+            {title && (
+              <ModalHeaderStyled>
+                <ModalTitleStyled asChild>
+                  <Text typography={"headline6"} fontWeight={"medium"}>
+                    {title}
+                  </Text>
+                </ModalTitleStyled>
+                <ModalRadix.Close asChild>
+                  <ModalIconClose name="close" size="xl" />
+                </ModalRadix.Close>
+              </ModalHeaderStyled>
+            )}
+            <Box>{children}</Box>
+          </ModalContentStyled>
+        </ModalOverlay>
+      </ModalRadix.Portal>
+    </ModalRadix.Root>
+  );
+}