oddsgate-ds 1.0.88 → 1.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.88",
+  "version": "1.0.89",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -42,7 +42,7 @@
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",
@@ -80,6 +80,7 @@
   "dependencies": {
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-url": "^8.0.1",
+    "@washingtonpost/storybook-addon-web-vitals": "^0.3.0",
     "blaze-slider": "^1.9.3",
     "classnames": "^2.3.2",
     "formik": "^2.4.2",

package/src/components/atoms/Button/Button.theme.ts

@@ -113,6 +113,7 @@ export const StyledButton = styled.a<IButtonSC>`
         return css`
             ${fontSize('h5')};
             text-transform:uppercase;
+            padding: 0;
 
             ${props.$mode === "light" ? `
               color: ${colors.third50};

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -28,6 +28,7 @@ const CircularSlider = ({
   const contentHolder = useRef<HTMLDivElement>();
 
   const isMobile = isTouchDevice();
+  console.log(isMobile);
 
   const sliderSize = isMobile ? 2.6 : 1;
   const slideSize = isMobile ? 0.12 : 0.15;

package/src/components/organisms/CircularSlider/CircularSlider.theme.ts

@@ -54,6 +54,7 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
   transform-origin: center;
   transition: .3s linear all;
   filter: brightness(70%);
+  cursor: pointer;
 
   & img{
     height: 100%;

package/src/helpers/isTouchDevice.tsx

@@ -1,11 +1,35 @@
+import { useEffect, useRef, useState } from "react";
+
+import { responsiveMedia } from "@/styles/variables";
+
 const isTouchDevice = () => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const observedElementRef = document.querySelector('body > main');
+    if (observedElementRef) {
+      const observer = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          setDimensions({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          });
+        }
+      });
+
+      observer.observe(observedElementRef);
+
+      // Cleanup function
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+
+  console.log(dimensions);
+  return dimensions.width < parseInt(responsiveMedia);
 }
 
 
+
 export default isTouchDevice

package/src/styles/utilities.ts

@@ -184,6 +184,12 @@ export const utilities: {
       last: 6,
     },
   },
+  "gap": {
+    responsive: true,
+    property: "gap",
+    class: "gap",
+    values: spacers
+  },
   "margin": {
     responsive: true,
     property: "margin",