@lets-events/react 12.3.10 → 12.4.1

package/src/components/CheckboxGroup.tsx

@@ -1,176 +1,176 @@
-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": {
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23004ED2'/%3E%3C/svg%3E\")",
-    content: "",
-    width: "1rem",
-    height: "1rem",
-    position: "absolute",
-    top: "-1px",
-    right: "-2px",
-    zIndex: 2,
-    backgroundRepeat: "no-repeat",
-  },
-  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]:before": {
-          backgroundImage:
-            "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%2326A743'/%3E%3C/svg%3E\")",
-        },
-      },
-      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]:before": {
-          backgroundImage:
-            "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23DB3644'/%3E%3C/svg%3E\")",
-        },
-      },
-    },
-    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",
-        },
-      },
-    },
-
-    {
-      color: "blue",
-      disabled: true,
-      css: {
-        "label button": {
-          borderColor: "$brand100",
-          backgroundColor: "$dark50",
-        },
-      },
-    },
-
-    {
-      color: "success",
-      disabled: true,
-      css: {
-        "label button": {
-          borderColor: "$success100",
-          backgroundColor: "$dark50",
-        },
-      },
-    },
-
-    {
-      color: "error",
-      disabled: true,
-      css: {
-        "label button": {
-          borderColor: "$error100",
-          backgroundColor: "$dark50",
-        },
-      },
-    },
-  ],
-  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>;
-}
+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": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23004ED2'/%3E%3C/svg%3E\")",
+    content: "",
+    width: "1rem",
+    height: "1rem",
+    position: "absolute",
+    top: "-1px",
+    right: "-2px",
+    zIndex: 2,
+    backgroundRepeat: "no-repeat",
+  },
+  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]:before": {
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%2326A743'/%3E%3C/svg%3E\")",
+        },
+      },
+      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]:before": {
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%200C0.896875%200%200%200.896875%200%202V12C0%2013.1031%200.896875%2014%202%2014H12C13.1031%2014%2014%2013.1031%2014%2012V2C14%200.896875%2013.1031%200%2012%200H2ZM10.5312%205.53125L6.53125%209.53125C6.2375%209.825%205.7625%209.825%205.47188%209.53125L3.47187%207.53125C3.17812%207.2375%203.17812%206.7625%203.47187%206.47188C3.76562%206.18125%204.24062%206.17813%204.53125%206.47188L6%207.94063L9.46875%204.46875C9.7625%204.175%2010.2375%204.175%2010.5281%204.46875C10.8187%204.7625%2010.8219%205.2375%2010.5281%205.52812L10.5312%205.53125Z'%20fill='%23DB3644'/%3E%3C/svg%3E\")",
+        },
+      },
+    },
+    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",
+        },
+      },
+    },
+
+    {
+      color: "blue",
+      disabled: true,
+      css: {
+        "label button": {
+          borderColor: "$brand100",
+          backgroundColor: "$dark50",
+        },
+      },
+    },
+
+    {
+      color: "success",
+      disabled: true,
+      css: {
+        "label button": {
+          borderColor: "$success100",
+          backgroundColor: "$dark50",
+        },
+      },
+    },
+
+    {
+      color: "error",
+      disabled: true,
+      css: {
+        "label button": {
+          borderColor: "$error100",
+          backgroundColor: "$dark50",
+        },
+      },
+    },
+  ],
+  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/Divider.tsx

@@ -1,7 +1,7 @@
-import { styled } from "../styles";
-
-export const Divider = styled("div", {
-  backgroundColor: "$dark300",
-  width: "100%",
-  height: "1px",
-});
+import { styled } from "../styles";
+
+export const Divider = styled("div", {
+  backgroundColor: "$dark300",
+  width: "100%",
+  height: "1px",
+});

package/src/components/DoubleCalendar/index.tsx

@@ -0,0 +1,166 @@
+import React, { ComponentProps, useRef, useEffect, useState } from "react";
+import { useOnClickOutside } from "../../hooks/useOnClickOutside";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "date-fns/locale";
+import { format, addYears } from "date-fns";
+import { Button } from "../Button";
+import { Box } from "../Box";
+import { TextField, TextFieldSlot } from "../TextField";
+import Icon from "../Icon";
+import {
+    CalendarContentStyled,
+    CalendarFooterStyled,
+    CalendarStyled,
+    DayPickerWrapperStyled,
+    CalendarButtonStyled,
+} from "../Calendar/styledComponents";
+
+export type DateRange = { from?: Date; to?: Date } | undefined;
+
+export type DoubleCalendarProps = ComponentProps<typeof CalendarStyled> & {
+    calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    selected: DateRange;
+    setSelected: React.Dispatch<React.SetStateAction<DateRange>>;
+    position?: "top" | "bottom" | "top-right" | "bottom-right";
+    action?: boolean;
+    actionText?: string;
+    hasError?: boolean;
+    expand?: boolean;
+    allowPastDates?: boolean;
+    maxYearsFromNow?: number;
+};
+
+export function DoubleCalendar({
+    action,
+    actionText,
+    calendarLayout,
+    selected,
+    setSelected,
+    position = "bottom",
+    hasError,
+    expand,
+    allowPastDates = false,
+    maxYearsFromNow = 20,
+    ...props
+}: DoubleCalendarProps) {
+    const [startValue, setStartValue] = useState("");
+    const [endValue, setEndValue] = useState("");
+    const [showContainer, setShowCalendar] = useState(false);
+    const initialSelectedRef = useRef<DateRange | undefined>(undefined);
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useOnClickOutside(dropdownRef, () => {
+        setShowCalendar(false);
+    });
+    const today = new Date();
+    const maxDate = addYears(today, maxYearsFromNow);
+
+    useEffect(() => {
+        if (selected && selected.from) {
+            setStartValue(format(selected.from, "dd/MM/yyyy"));
+        } else {
+            setStartValue("");
+        }
+
+        if (selected && selected.to) {
+            setEndValue(format(selected.to, "dd/MM/yyyy"));
+        } else {
+            setEndValue("");
+        }
+    }, [selected]);
+
+    return (
+        <div>
+            <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
+                <CalendarButtonStyled
+                    expand={expand}
+                    type="button"
+                    onClick={() =>
+                        setShowCalendar((prev) => {
+                            const next = !prev;
+                            if (!prev) initialSelectedRef.current = selected;
+                            return next;
+                        })
+                    }
+                >
+                    <div style={{ display: "flex", gap: "8px", width: "100%" }}>
+                        <TextField
+                            placeholder="00/00/0000 - 00/00/0000"
+                            type="text"
+                            value={`${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`}
+                            readOnly
+                            inputMode="numeric"
+                            textAlign={"right"}
+                            color={hasError ? "error" : "default"}
+                        >
+                            <TextFieldSlot>
+                                <Icon name="calendar" size={"xl"} />
+                            </TextFieldSlot>
+                        </TextField>
+                    </div>
+                </CalendarButtonStyled>
+
+                {showContainer && (
+                    <CalendarContentStyled position={position}>
+                        <Box>
+                            <DayPickerWrapperStyled>
+                                <DayPicker
+                                    mode="range"
+                                    numberOfMonths={2}
+                                    captionLayout={calendarLayout}
+                                    selected={selected as any}
+                                    onSelect={setSelected}
+                                    required
+                                    locale={ptBR}
+                                    disabled={allowPastDates ? undefined : { before: today }}
+                                    fromMonth={allowPastDates ? undefined : today}
+                                    toMonth={maxDate}
+                                />
+                            </DayPickerWrapperStyled>
+                        </Box>
+
+                        {action && (
+                            <CalendarFooterStyled>
+                                <div style={{ textAlign: "center", padding: "1rem" }}>
+                                    <span>
+                                        {`${selected?.from ? format(selected.from, "dd/MM/yyyy") : "00/00/0000"} — ${selected?.to ? format(selected.to, "dd/MM/yyyy") : "00/00/0000"}`}
+                                    </span>
+                                </div>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="neutral"
+                                    type="button"
+                                    onClick={() => {
+                                        setSelected(initialSelectedRef.current);
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="regular"
+                                >
+                                    Cancelar
+                                </Button>
+                                <Button
+                                    style={{ margin: "0 0.5rem" }}
+                                    variant="text"
+                                    color="brand"
+                                    type="button"
+                                    onClick={() => {
+                                        setShowCalendar(false);
+                                    }}
+                                    size={"medium"}
+                                    fontWeight="medium"
+                                >
+                                    {actionText ?? "Aplicar"}
+                                </Button>
+                            </CalendarFooterStyled>
+                        )}
+                    </CalendarContentStyled>
+                )}
+            </CalendarStyled>
+        </div>
+    );
+}
+
+export default DoubleCalendar;