@lets-events/react 12.7.2 → 12.8.0

package/src/components/Section.tsx

@@ -1,34 +1,34 @@
-import { ComponentProps, ElementType } from 'react';
-import { styled } from '../styles';
-import { Section as SectionRadix } from '@radix-ui/themes';
-
-export const SectionStyled = styled(SectionRadix, {
-  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' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    display: 'initial'
-  },
-});
-
-export type SectionProps = ComponentProps<typeof SectionStyled> & {
-  as?: ElementType;
-  children: React.ReactNode;
-};
-
-export function Section({ children, ...props }: SectionProps) {
-  return <SectionStyled {...props}>{children}</SectionStyled>;
+import { ComponentProps, ElementType } from 'react';
+import { styled } from '../styles';
+import { Section as SectionRadix } from '@radix-ui/themes';
+
+export const SectionStyled = styled(SectionRadix, {
+  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' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    display: 'initial'
+  },
+});
+
+export type SectionProps = ComponentProps<typeof SectionStyled> & {
+  as?: ElementType;
+  children: React.ReactNode;
+};
+
+export function Section({ children, ...props }: SectionProps) {
+  return <SectionStyled {...props}>{children}</SectionStyled>;
 }

package/src/components/Step.tsx

@@ -1,164 +1,164 @@
-import React, { ComponentProps, ElementType } from "react";
-import { styled } from "../styles";
-import { Box, Tabs as StepRadix } from "@radix-ui/themes";
-
-export const StepStyled = styled("div", {
-  fontFamily: "$default",
-  color: "$gray100",
-  letterSpacing: "0px",
-});
-
-const StepTriggerStyled = styled(StepRadix.Trigger, {
-  all: "unset",
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontSize: "$16",
-  fontWeight: "$medium",
-
-  minWidth: "32px",
-  minHeight: "32px",
-  marginRight: "40px",
-
-  "&:last-of-type": {
-    marginRight: 0,
-  },
-
-  "& > span:first-of-type": {
-    width: "32px",
-    height: "32px",
-    borderRadius: "$full",
-    backgroundColor: "$neutral50",
-    border: "1px solid $neutral200",
-    color: "$gray700",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1,
-    position: "relative",
-  },
-
-  '&[data-state="active"] > span:first-of-type': {
-    backgroundColor: "$blue500",
-    borderColor: "$blue500",
-    color: "white",
-  },
-
-  "& > span:last-of-type": {
-    display: "none",
-  },
-
-  "&:not(:first-of-type)::before": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    right: "calc(100% + 4px)",
-    transform: "translateY(-50%)",
-    width: "32px",
-    height: "8px",
-    borderRadius: "$sm",
-    backgroundColor: "$neutral50",
-    zIndex: 0,
-  },
-
-  '&[data-state="active"]::before': {
-    backgroundColor: "$blue500",
-  },
-
-  '&[data-filled="true"] > span:first-of-type': {
-    backgroundColor: "$blue500",
-    borderColor: "$blue500",
-    color: "white",
-  },
-
-  '&[data-filled="true"]::before': {
-    backgroundColor: "$blue500",
-  },
-});
-
-const StepListStyled = styled(StepRadix.List, {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  gap: "$4",
-});
-
-export type StepProps = ComponentProps<typeof StepStyled> & {
-  children: React.ReactNode;
-  defaultValue: number;
-};
-export function Step({ children, defaultValue, ...props }: StepProps) {
-  return (
-    <StepRadix.Root defaultValue={String(defaultValue)}>
-      <StepStyled {...props}>{children}</StepStyled>
-    </StepRadix.Root>
-  );
-}
-
-export function StepTrigger({
-  value,
-  children,
-  currentStep,
-  ...props
-}: {
-  value: number;
-  children: React.ReactNode | string;
-  currentStep?: number;
-  onClick: () => void;
-}) {
-  const isActiveOrPrevious = currentStep !== undefined && value <= currentStep;
-  return (
-    <StepTriggerStyled
-      data-filled={isActiveOrPrevious}
-      value={String(value)}
-      {...props}
-    >
-      {children}
-    </StepTriggerStyled>
-  );
-}
-
-export function StepContent({
-  value,
-  children,
-  ...props
-}: {
-  value: number;
-  children: React.ReactNode;
-}) {
-  return (
-    <StepRadix.Content value={String(value)} {...props}>
-      {children}
-    </StepRadix.Content>
-  );
-}
-
-export function StepList({
-  children,
-  currentStep,
-  ...props
-}: {
-  children: React.ReactNode;
-  currentStep: number;
-}) {
-  return (
-    <StepListStyled {...props}>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && child.type === StepTrigger) {
-          return React.cloneElement(child, { currentStep } as any);
-        }
-        return child;
-      })}
-    </StepListStyled>
-  );
-}
-
-export function StepWrapper({
-  children,
-  ...props
-}: {
-  children: React.ReactNode;
-}) {
-  return <Box {...props}>{children}</Box>;
-}
+import React, { ComponentProps, ElementType } from "react";
+import { styled } from "../styles";
+import { Box, Tabs as StepRadix } from "@radix-ui/themes";
+
+export const StepStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$gray100",
+  letterSpacing: "0px",
+});
+
+const StepTriggerStyled = styled(StepRadix.Trigger, {
+  all: "unset",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "$16",
+  fontWeight: "$medium",
+
+  minWidth: "32px",
+  minHeight: "32px",
+  marginRight: "40px",
+
+  "&:last-of-type": {
+    marginRight: 0,
+  },
+
+  "& > span:first-of-type": {
+    width: "32px",
+    height: "32px",
+    borderRadius: "$full",
+    backgroundColor: "$neutral50",
+    border: "1px solid $neutral200",
+    color: "$gray700",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    position: "relative",
+  },
+
+  '&[data-state="active"] > span:first-of-type': {
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white",
+  },
+
+  "& > span:last-of-type": {
+    display: "none",
+  },
+
+  "&:not(:first-of-type)::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    right: "calc(100% + 4px)",
+    transform: "translateY(-50%)",
+    width: "32px",
+    height: "8px",
+    borderRadius: "$sm",
+    backgroundColor: "$neutral50",
+    zIndex: 0,
+  },
+
+  '&[data-state="active"]::before': {
+    backgroundColor: "$blue500",
+  },
+
+  '&[data-filled="true"] > span:first-of-type': {
+    backgroundColor: "$blue500",
+    borderColor: "$blue500",
+    color: "white",
+  },
+
+  '&[data-filled="true"]::before': {
+    backgroundColor: "$blue500",
+  },
+});
+
+const StepListStyled = styled(StepRadix.List, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  gap: "$4",
+});
+
+export type StepProps = ComponentProps<typeof StepStyled> & {
+  children: React.ReactNode;
+  defaultValue: number;
+};
+export function Step({ children, defaultValue, ...props }: StepProps) {
+  return (
+    <StepRadix.Root defaultValue={String(defaultValue)}>
+      <StepStyled {...props}>{children}</StepStyled>
+    </StepRadix.Root>
+  );
+}
+
+export function StepTrigger({
+  value,
+  children,
+  currentStep,
+  ...props
+}: {
+  value: number;
+  children: React.ReactNode | string;
+  currentStep?: number;
+  onClick: () => void;
+}) {
+  const isActiveOrPrevious = currentStep !== undefined && value <= currentStep;
+  return (
+    <StepTriggerStyled
+      data-filled={isActiveOrPrevious}
+      value={String(value)}
+      {...props}
+    >
+      {children}
+    </StepTriggerStyled>
+  );
+}
+
+export function StepContent({
+  value,
+  children,
+  ...props
+}: {
+  value: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <StepRadix.Content value={String(value)} {...props}>
+      {children}
+    </StepRadix.Content>
+  );
+}
+
+export function StepList({
+  children,
+  currentStep,
+  ...props
+}: {
+  children: React.ReactNode;
+  currentStep: number;
+}) {
+  return (
+    <StepListStyled {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === StepTrigger) {
+          return React.cloneElement(child, { currentStep } as any);
+        }
+        return child;
+      })}
+    </StepListStyled>
+  );
+}
+
+export function StepWrapper({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+}) {
+  return <Box {...props}>{children}</Box>;
+}

package/src/components/Switch.tsx

@@ -1,109 +1,109 @@
-import { Switch as RadixSwitch } from '@radix-ui/themes'
-import type { ComponentProps } from 'react'
-import { styled } from '../styles'
-
-export const SwitchStyled = styled(RadixSwitch, {
-  all: 'unset',
-  borderRadius: '$full',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  transition: 'all 0.3s',
-  cursor: 'pointer',
-
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    borderRadius: '$full',
-    pointerEvents: 'none',
-    cursor: 'pointer',
-  },
-  'span': {
-    position: 'absolute',
-    top: '50%',
-    left: 0,
-    transform: 'translate(0, -50%)',
-    borderRadius: '50%',
-    transition: 'all 0.3s',
-    cursor: 'pointer',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
-  },
-
-  '&[data-state="checked"] span': {
-    left: 'auto',
-    transform: 'translate(50%, -50%)',
-  },
-
-  variants: {
-    color: {
-      brand: {
-        '&::before': {
-          backgroundColor: '$brand50',
-        },
-        'span': {
-          backgroundColor: '$dark50',
-          borderColor: '$neutral300',
-        },
-        '&[data-state="checked"]  span': {
-          backgroundColor: '$brand500',
-          borderColor: '$brand500',
-        },
-      }
-    },
-    size: {
-      sm: {
-        width: '32px',
-        height: '20px',
-        '&::before': {
-          width: '$32',
-          height: '$12',
-        },
-
-        'span': {
-          width: '$20',
-          height: '$20',
-        },
-      },
-      md: {
-        width: '40px',
-        height: '20px',
-        '&::before': {
-          width: '40px',
-          height: '16px',
-        },
-        'span': {
-          width: '24px',
-          height: '24px',
-        },
-      },
-      lg: {
-        width: '56px',
-        height: '32px',
-        '&::before': {
-          width: '56px',
-          height: '24px',
-        },
-        'span': {
-          width: '32px',
-          height: '32px',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    color: 'brand',
-  },
-
-})
-export type SwitchProps = ComponentProps<typeof RadixSwitch> & {
-  color?: 'brand'
-  size?: 'sm' | 'md' | 'lg'
-}
-
-export function Switch(props: SwitchProps) {
-  return <SwitchStyled color="brand" defaultChecked {...props} />
+import { Switch as RadixSwitch } from '@radix-ui/themes'
+import type { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const SwitchStyled = styled(RadixSwitch, {
+  all: 'unset',
+  borderRadius: '$full',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: 'all 0.3s',
+  cursor: 'pointer',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    borderRadius: '$full',
+    pointerEvents: 'none',
+    cursor: 'pointer',
+  },
+  'span': {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translate(0, -50%)',
+    borderRadius: '50%',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
+  },
+
+  '&[data-state="checked"] span': {
+    left: 'auto',
+    transform: 'translate(50%, -50%)',
+  },
+
+  variants: {
+    color: {
+      brand: {
+        '&::before': {
+          backgroundColor: '$brand50',
+        },
+        'span': {
+          backgroundColor: '$dark50',
+          borderColor: '$neutral300',
+        },
+        '&[data-state="checked"]  span': {
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+        },
+      }
+    },
+    size: {
+      sm: {
+        width: '32px',
+        height: '20px',
+        '&::before': {
+          width: '$32',
+          height: '$12',
+        },
+
+        'span': {
+          width: '$20',
+          height: '$20',
+        },
+      },
+      md: {
+        width: '40px',
+        height: '20px',
+        '&::before': {
+          width: '40px',
+          height: '16px',
+        },
+        'span': {
+          width: '24px',
+          height: '24px',
+        },
+      },
+      lg: {
+        width: '56px',
+        height: '32px',
+        '&::before': {
+          width: '56px',
+          height: '24px',
+        },
+        'span': {
+          width: '32px',
+          height: '32px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    color: 'brand',
+  },
+
+})
+export type SwitchProps = ComponentProps<typeof RadixSwitch> & {
+  color?: 'brand'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Switch(props: SwitchProps) {
+  return <SwitchStyled color="brand" defaultChecked {...props} />
 }