@lets-events/react 11.3.0 → 11.4.1

package/src/components/Tooltip/index.tsx

@@ -1,67 +1,67 @@
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { styled } from '../../styles'
-import { Text } from '../Text'
-
-const TooltipProvider = TooltipPrimitive.Provider
-const TooltipRoot = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = styled(TooltipPrimitive.Content, {
-  backgroundColor: '$dark800',
-  color: '$neutral50',
-  borderRadius: '4px',
-  padding: '10px 15px',
-  fontSize: '14px',
-  lineHeight: 1,
-  zIndex: 100,
-  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
-  userSelect: 'none',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: 'slideDownAndFade',
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: 'slideLeftAndFade',
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: 'slideUpAndFade',
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: 'slideRightAndFade',
-  },
-})
-
-const TooltipArrow = styled(TooltipPrimitive.Arrow, {
-  fill: '$dark800',
-})
-
-export interface TooltipProps {
-  children: React.ReactNode
-  content: React.ReactNode
-  delayDuration?: number
-  side?: 'top' | 'right' | 'bottom' | 'left'
-}
-
-export function Tooltip({
-  children,
-  content,
-  delayDuration = 200,
-  side = 'top',
-}: TooltipProps) {
-  return (
-    <TooltipProvider>
-      <TooltipRoot delayDuration={delayDuration}>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent side={side} sideOffset={5}>
-          {typeof content === 'string' ? <Text typography={'tooltip'}>{content}</Text>:(content)}
-          <TooltipArrow />
-        </TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
-  )
-}
-
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { styled } from '../../styles'
+import { Text } from '../Text'
+
+const TooltipProvider = TooltipPrimitive.Provider
+const TooltipRoot = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: '$dark800',
+  color: '$neutral50',
+  borderRadius: '4px',
+  padding: '10px 15px',
+  fontSize: '14px',
+  lineHeight: 1,
+  zIndex: 100,
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: 'slideDownAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: 'slideLeftAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: 'slideUpAndFade',
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: 'slideRightAndFade',
+  },
+})
+
+const TooltipArrow = styled(TooltipPrimitive.Arrow, {
+  fill: '$dark800',
+})
+
+export interface TooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  delayDuration?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+export function Tooltip({
+  children,
+  content,
+  delayDuration = 200,
+  side = 'top',
+}: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipRoot delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={5}>
+          {typeof content === 'string' ? <Text typography={'tooltip'}>{content}</Text>:(content)}
+          <TooltipArrow />
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  )
+}
+
 export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } 

package/src/components/Tooltip/styles.ts

@@ -1,78 +1,78 @@
-import { keyframes } from '@stitches/react'
-import { styled } from '../../styles'
-
-const slideUpAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideRightAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-const slideDownAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideLeftAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-export const TooltipContentStyled = styled('div', {
-  fontFamily: '$default',
-  backgroundColor: '$dark700',
-  color: '$dark50',
-  borderRadius: '$sm',
-  padding: '$10 $14',
-  fontSize: '$13',
-  lineHeight: '$base',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
-  userSelect: 'none',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: `${slideDownAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: `${slideLeftAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: `${slideUpAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: `${slideRightAndFade}`,
-  },
-})
-
-export const TooltipArrow = styled('div', {
-  fill: '$dark700',
+import { keyframes } from '@stitches/react'
+import { styled } from '../../styles'
+
+const slideUpAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideRightAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+const slideDownAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideLeftAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+export const TooltipContentStyled = styled('div', {
+  fontFamily: '$default',
+  backgroundColor: '$dark700',
+  color: '$dark50',
+  borderRadius: '$sm',
+  padding: '$10 $14',
+  fontSize: '$13',
+  lineHeight: '$base',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: `${slideDownAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: `${slideLeftAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: `${slideUpAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: `${slideRightAndFade}`,
+  },
+})
+
+export const TooltipArrow = styled('div', {
+  fill: '$dark700',
 }) 

package/src/hooks/useOnClickOutside.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from "react";
-
-export function useOnClickOutside(ref: any, handler: () => void) {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      handler();
-    };
-
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref: any, handler: () => void) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}

package/src/index.tsx

@@ -1,42 +1,44 @@
-// Icon
-export * from "./components/Icon";
-
-// Text
-export * from "./components/Text";
-
-// Components
-export * from "./components/Button";
-export * from "./components/ButtonGroup";
-export * from "./components/Avatar";
-export * from "./components/TextField";
-export * from "./components/RadioGroup";
-export * from "./components/CheckboxGroup";
-export * from "./components/Filter";
-export * from "./components/Dropdown";
-export * from "./components/Badge";
-export * from "./components/Modal";
-export * from "./components/MenuDropdown";
-export * from "./components/Calendar";
-export * from "./components/Drawer";
-export * from "./components/TimePicker";
-export * from "./components/Alert";
-export * from "./components/Switch";
-export * from "./components/Step";
-export * from "./components/Card";
-export * from "./components/TextareaField";
-export * from "./components/Toast";
-export * from "./components/Tooltip";
-
-// Layouts
-export * from "./components/Flex";
-export * from "./components/Box";
-export * from "./components/Grid";
-export * from "./components/Container";
-export * from "./components/Section";
-
-//Form
-export * from "./components/FormFields/ErrorFormMessage";
-export * from "./components/FormFields/FormLabel";
-export * from "./components/FormFields/TextAreaFormField";
-export * from "./components/FormFields/TextFormField";
-export * from "./components/FormFields/Form";
+// Icon
+export * from "./components/Icon";
+
+// Text
+export * from "./components/Text";
+
+// Components
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/Avatar";
+export * from "./components/TextField";
+export * from "./components/RadioGroup";
+export * from "./components/CheckboxGroup";
+export * from "./components/Filter";
+export * from "./components/Dropdown";
+export * from "./components/Badge";
+export * from "./components/Modal";
+export * from "./components/MenuDropdown";
+export * from "./components/Calendar";
+export * from "./components/Drawer";
+export * from "./components/TimePicker";
+export * from "./components/Alert";
+export * from "./components/Switch";
+export * from "./components/Step";
+export * from "./components/Card";
+export * from "./components/TextareaField";
+export * from "./components/Toast";
+export * from "./components/Tooltip";
+export * from "./components/MultiSelect";
+
+// Layouts
+export * from "./components/Flex";
+export * from "./components/Box";
+export * from "./components/Grid";
+export * from "./components/Container";
+export * from "./components/Section";
+
+//Form
+export * from "./components/FormFields/ErrorFormMessage";
+export * from "./components/FormFields/FormLabel";
+export * from "./components/FormFields/TextAreaFormField";
+export * from "./components/FormFields/TextFormField";
+export * from "./components/FormFields/Form";
+export * from "./components/FormFields/MultiSelectFormField";

package/src/styles/index.ts

@@ -1,38 +1,38 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@lets-events/tokens'
-
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-    gap: 'space'
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fonts,
-    fontWeights,
-    lineHeights,
-    radii,
-    space,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@lets-events/tokens'
+
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+    gap: 'space'
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fonts,
+    fontWeights,
+    lineHeights,
+    radii,
+    space,
+  },
+})