@lets-events/react 8.0.0 → 9.0.0

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,31 +1,31 @@
-// 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/Calendar'
-export * from './components/TimePicker'
-export * from './components/Alert'
-export * from './components/Switch'
-export * from './components/Step'
-export * from './components/Card'
-export * from './components/TextareaField'
-
-// Layouts
-export * from './components/Flex'
-export * from './components/Box'
-export * from './components/Grid'
-export * from './components/Container'
-export * from './components/Section'
+// 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/Calendar'
+export * from './components/TimePicker'
+export * from './components/Alert'
+export * from './components/Switch'
+export * from './components/Step'
+export * from './components/Card'
+export * from './components/TextareaField'
+
+// Layouts
+export * from './components/Flex'
+export * from './components/Box'
+export * from './components/Grid'
+export * from './components/Container'
+export * from './components/Section'

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,
+  },
+})

package/src/types/typographyValues.ts

@@ -1,179 +1,179 @@
-export const typographyValues = {
-    displayLarge: {
-        fontSize: '$displayLarge',
-        lineHeight: '$displayLarge',
-        letterSpacing: '$displayLarge',
-
-    },
-    displayMedium: {
-        fontSize: '$displayMedium',
-        lineHeight: '$displayMedium',
-        letterSpacing: '$displayMedium',
-    },
-    displaySmall: {
-        fontSize: '$displaySmall',
-        lineHeight: '$displaySmall',
-        letterSpacing: '$displaySmall',
-    },
-    headline1: {
-        fontSize: '$headline1',
-        lineHeight: '$headline1',
-    },
-    headline2: {
-        fontSize: '$headline2',
-        lineHeight: '$headline2',
-    },
-    headline3: {
-        fontSize: '$headline3',
-        lineHeight: '$headline3',
-    },
-    headline4: {
-        fontSize: '$headline4',
-        lineHeight: '$headline4',
-    },
-    headline5: {
-        fontSize: '$headline5',
-        lineHeight: '$headline5',
-    },
-    headline6: {
-        fontSize: '$headline6',
-        lineHeight: '$headline6',
-    },
-    headline7: {
-        fontSize: '$headline7',
-        lineHeight: '$headline7',
-    },
-    headline8: {
-        fontSize: '$headline8',
-        lineHeight: '$headline8',
-    },
-    bodyXL: {
-        fontSize: '$bodyXL',
-        lineHeight: '$bodyXL',
-    },
-    bodyL: {
-        fontSize: '$bodyL',
-        lineHeight: '$bodyL',
-    },
-    bodyM: {
-        fontSize: '$bodyM',
-        lineHeight: '$bodyM',
-    },
-    bodyS: {
-        fontSize: '$bodyS',
-        lineHeight: '$bodyS',
-    },
-    bodyXS: {
-        fontSize: '$bodyXS',
-        lineHeight: '$bodyXS',
-    },
-    bodyXXS: {
-        fontSize: '$bodyXXS',
-        lineHeight: '$bodyXXS',
-    },
-    badgeLarge: {
-        fontSize: '$badgeLarge',
-        lineHeight: '$badgeLarge',
-    },
-    badgeMedium: {
-        fontSize: '$badgeMedium',
-        lineHeight: '$badgeMedium',
-    },
-    badgeSmall: {
-        fontSize: '$badgeSmall',
-        lineHeight: '$badgeSmall',
-    },
-    badgeExtraSmall: {
-        fontSize: '$badgeExtraSmall',
-        lineHeight: '$badgeExtraSmall',
-    },
-    tooltip: {
-        fontSize: '$tooltip',
-        lineHeight: '$tooltip',
-    },
-    popoversRegular: {
-        fontSize: '$popoversRegular',
-        lineHeight: '$popoversRegular',
-    },
-    captionLarge: {
-        fontSize: '$captionLarge',
-        lineHeight: '$captionLarge',
-    },
-    captionMedium: {
-        fontSize: '$captionMedium',
-        lineHeight: '$captionMedium',
-    },
-    captionSmall: {
-        fontSize: '$captionSmall',
-        lineHeight: '$captionSmall',
-    },
-    buttonLarge: {
-        fontSize: '$buttonLarge',
-        lineHeight: '$buttonLarge',
-    },
-    buttonMedium: {
-        fontSize: '$buttonMedium',
-        lineHeight: '$buttonMedium',
-    },
-    buttonSmall: {
-        fontSize: '$buttonSmall',
-        lineHeight: '$buttonSmall',
-    },
-    buttonExtraSmall: {
-        fontSize: '$buttonExtraSmall',
-        lineHeight: '$buttonExtraSmall',
-    },
-    labelLarge: {
-        fontSize: '$labelLarge',
-        lineHeight: '$labelLarge',
-    },
-    labelMedium: {
-        fontSize: '$labelMedium',
-        lineHeight: '$labelMedium',
-    },
-    labelSmall: {
-        fontSize: '$labelSmall',
-        lineHeight: '$labelSmall',
-    },
-    labelExtraSmall: {
-        fontSize: '$labelExtraSmall',
-        lineHeight: '$labelExtraSmall',
-    },
-
-}
-export const typographyButtonValues = {
-    buttonLarge: {
-        fontSize: '$buttonLarge',
-        lineHeight: '$buttonLarge',
-    },
-    buttonMedium: {
-        fontSize: '$buttonMedium',
-        lineHeight: '$buttonMedium',
-    },
-    buttonSmall: {
-        fontSize: '$buttonSmall',
-        lineHeight: '$buttonSmall',
-    },
-    buttonExtraSmall: {
-        fontSize: '$buttonExtraSmall',
-        lineHeight: '$buttonExtraSmall',
-    },
-}
-export const typographyLabelValues = {
-    labelLarge: {
-        fontSize: '$labelLarge',
-        lineHeight: '$labelLarge',
-    },
-    labelMedium: {
-        fontSize: '$labelMedium',
-        lineHeight: '$labelMedium',
-    },
-    labelSmall: {
-        fontSize: '$labelSmall',
-        lineHeight: '$labelSmall',
-    },
-    labelExtraSmall: {
-        fontSize: '$labelExtraSmall',
-        lineHeight: '$labelExtraSmall',
-    },
+export const typographyValues = {
+    displayLarge: {
+        fontSize: '$displayLarge',
+        lineHeight: '$displayLarge',
+        letterSpacing: '$displayLarge',
+
+    },
+    displayMedium: {
+        fontSize: '$displayMedium',
+        lineHeight: '$displayMedium',
+        letterSpacing: '$displayMedium',
+    },
+    displaySmall: {
+        fontSize: '$displaySmall',
+        lineHeight: '$displaySmall',
+        letterSpacing: '$displaySmall',
+    },
+    headline1: {
+        fontSize: '$headline1',
+        lineHeight: '$headline1',
+    },
+    headline2: {
+        fontSize: '$headline2',
+        lineHeight: '$headline2',
+    },
+    headline3: {
+        fontSize: '$headline3',
+        lineHeight: '$headline3',
+    },
+    headline4: {
+        fontSize: '$headline4',
+        lineHeight: '$headline4',
+    },
+    headline5: {
+        fontSize: '$headline5',
+        lineHeight: '$headline5',
+    },
+    headline6: {
+        fontSize: '$headline6',
+        lineHeight: '$headline6',
+    },
+    headline7: {
+        fontSize: '$headline7',
+        lineHeight: '$headline7',
+    },
+    headline8: {
+        fontSize: '$headline8',
+        lineHeight: '$headline8',
+    },
+    bodyXL: {
+        fontSize: '$bodyXL',
+        lineHeight: '$bodyXL',
+    },
+    bodyL: {
+        fontSize: '$bodyL',
+        lineHeight: '$bodyL',
+    },
+    bodyM: {
+        fontSize: '$bodyM',
+        lineHeight: '$bodyM',
+    },
+    bodyS: {
+        fontSize: '$bodyS',
+        lineHeight: '$bodyS',
+    },
+    bodyXS: {
+        fontSize: '$bodyXS',
+        lineHeight: '$bodyXS',
+    },
+    bodyXXS: {
+        fontSize: '$bodyXXS',
+        lineHeight: '$bodyXXS',
+    },
+    badgeLarge: {
+        fontSize: '$badgeLarge',
+        lineHeight: '$badgeLarge',
+    },
+    badgeMedium: {
+        fontSize: '$badgeMedium',
+        lineHeight: '$badgeMedium',
+    },
+    badgeSmall: {
+        fontSize: '$badgeSmall',
+        lineHeight: '$badgeSmall',
+    },
+    badgeExtraSmall: {
+        fontSize: '$badgeExtraSmall',
+        lineHeight: '$badgeExtraSmall',
+    },
+    tooltip: {
+        fontSize: '$tooltip',
+        lineHeight: '$tooltip',
+    },
+    popoversRegular: {
+        fontSize: '$popoversRegular',
+        lineHeight: '$popoversRegular',
+    },
+    captionLarge: {
+        fontSize: '$captionLarge',
+        lineHeight: '$captionLarge',
+    },
+    captionMedium: {
+        fontSize: '$captionMedium',
+        lineHeight: '$captionMedium',
+    },
+    captionSmall: {
+        fontSize: '$captionSmall',
+        lineHeight: '$captionSmall',
+    },
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
+
+}
+export const typographyButtonValues = {
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+}
+export const typographyLabelValues = {
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
 }

package/tsconfig.json

@@ -1,4 +1,4 @@
-{
-  "extends": "@lets-events/ts-config/react.json",
-  "include": ["src"]
+{
+  "extends": "@lets-events/ts-config/react.json",
+  "include": ["src"]
 }