@chayns-components/devalue-slider 5.0.0-beta.734

package/lib/esm/components/slider/Slider.styles.js

@@ -0,0 +1,293 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const Container = styled(motion.div)``;
+export const Track = styled(motion.div)`
+    user-select: none;
+    position: relative;
+    z-index: 3;
+    height: ${_ref => {
+  let {
+    $height
+  } = _ref;
+  return $height;
+}}px;
+    border-radius: ${_ref2 => {
+  let {
+    $height
+  } = _ref2;
+  return $height / 2;
+}}px;
+    background-color: ${_ref3 => {
+  let {
+    $backgroundColor
+  } = _ref3;
+  return $backgroundColor;
+}};
+`;
+export const TrackBackground = styled(motion.div)`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: ${_ref4 => {
+  let {
+    $height
+  } = _ref4;
+  return $height / 2;
+}}px;
+    z-index: 2;
+`;
+export const Thumb = styled(motion.div)`
+    height: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size;
+}}px;
+    width: ${_ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return $size;
+}}px;
+    border-radius: 50%;
+    background-color: white;
+    left: ${_ref7 => {
+  let {
+    $size,
+    $trackHeight
+  } = _ref7;
+  return ($trackHeight - $size - 2) / 2;
+}}px;
+    bottom: ${_ref8 => {
+  let {
+    $size,
+    $trackHeight
+  } = _ref8;
+  return ($trackHeight - $size - 2) / 2 + 1;
+}}px;
+    position: absolute;
+    z-index: 3;
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;
+`;
+export const TrackText = styled(motion.div)`
+    position: absolute;
+    line-height: 1.15;
+    font-size: ${_ref9 => {
+  let {
+    $baseFontSize
+  } = _ref9;
+  return $baseFontSize;
+}}px;
+    font-weight: 700;
+    color: ${_ref10 => {
+  let {
+    $color
+  } = _ref10;
+  return $color;
+}};
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+    font-family:
+        Roboto Regular,
+        sans-serif;
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: normal;
+        font-weight: normal;
+        src:
+            local('Roboto Regular'),
+            local('Roboto Regular'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: italic;
+        font-weight: normal;
+        src:
+            local('Roboto Regular Italic'),
+            local('Roboto Regular-Italic'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: normal;
+        font-weight: bold;
+        src:
+            local('Roboto Regular Bold'),
+            local('Roboto Regular-Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: italic;
+        font-weight: bold;
+        src:
+            local('Roboto Regular Bold Italic'),
+            local('Roboto Regular-BoldItalic'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)
+                format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)
+                format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: normal;
+        font-weight: normal;
+        src:
+            local('Roboto Bold'),
+            local('Roboto Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: italic;
+        font-weight: normal;
+        src:
+            local('Roboto Bold Italic'),
+            local('Roboto Bold-Italic'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: normal;
+        font-weight: bold;
+        src:
+            local('Roboto Bold Bold'),
+            local('Roboto Bold-Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: italic;
+        font-weight: bold;
+        src:
+            local('Roboto Bold Bold Italic'),
+            local('Roboto Bold-BoldItalic'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+`;
+export const ThumbIconContainer = styled.div`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`;
+export const ThumbIcon = styled(motion.i).attrs(_ref11 => {
+  let {
+    icon
+  } = _ref11;
+  return {
+    className: `react-chayns-icon ${icon}`
+  };
+})`
+    font-size: 22px;
+    z-index: 1;
+    color: black;
+    padding: 5px;
+`;
+export const createThumbVariants = _ref12 => {
+  let {
+    thumbSize,
+    trackWidth,
+    scaleFactor
+  } = _ref12;
+  return {
+    base: {
+      x: 0,
+      backgroundColor: 'white',
+      transition: {
+        duration: 0.2
+      }
+    },
+    completed: {
+      x: (trackWidth - thumbSize * scaleFactor) / 2,
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      transition: {
+        duration: 0.3
+      }
+    },
+    leaving: {
+      scale: [1, 2.4, 1],
+      boxShadow: 'none'
+    }
+  };
+};
+export const THUMB_ICON_VARIANTS = {
+  base: {
+    x: [0, 8, 0, 8, 0],
+    transition: {
+      duration: 1,
+      ease: 'easeInOut',
+      repeat: Infinity,
+      repeatDelay: 5
+    }
+  },
+  dragging: {
+    x: 0
+  },
+  completed: {
+    opacity: 1,
+    transition: {
+      duration: 0
+    }
+  },
+  leaving: {
+    opacity: 1,
+    scale: [1, 2.4, 1],
+    transition: {
+      duration: 0.4,
+      ease: 'easeInOut'
+    }
+  }
+};
+//# sourceMappingURL=Slider.styles.js.map

package/lib/esm/components/slider/Slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","names":["motion","styled","Container","div","Track","_ref","$height","_ref2","_ref3","$backgroundColor","TrackBackground","_ref4","Thumb","_ref5","$size","_ref6","_ref7","$trackHeight","_ref8","TrackText","_ref9","$baseFontSize","_ref10","$color","ThumbIconContainer","ThumbIcon","i","attrs","_ref11","icon","className","createThumbVariants","_ref12","thumbSize","trackWidth","scaleFactor","base","x","backgroundColor","transition","duration","completed","boxShadow","leaving","scale","THUMB_ICON_VARIANTS","ease","repeat","Infinity","repeatDelay","dragging","opacity"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion, Variant, Variants } from 'framer-motion';\nimport styled from 'styled-components';\n\ninterface IBaseVariant extends Variants {\n    base: Variant;\n}\n\ninterface IDraggingVariant extends Variants {\n    dragging: Variant;\n}\n\ninterface ICompletedVariant extends Variants {\n    completed: Variant;\n}\n\ninterface ILeavingVariant extends Variants {\n    leaving: Variant;\n}\n\nexport const Container = styled(motion.div)``;\n\nexport type TrackProps = {\n    $height: number;\n    $borderSize: number;\n    $backgroundColor: string;\n};\n\nexport const Track = styled(motion.div)<TrackProps>`\n    user-select: none;\n    position: relative;\n    z-index: 3;\n    height: ${({ $height }) => $height}px;\n    border-radius: ${({ $height }) => $height / 2}px;\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n`;\n\nexport const TrackBackground = styled(motion.div)<{ $height: number }>`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${({ $height }) => $height / 2}px;\n    z-index: 2;\n`;\n\nexport const Thumb = styled(motion.div)<{\n    $size: number;\n    $trackHeight: number;\n}>`\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    border-radius: 50%;\n    background-color: white;\n    left: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2}px;\n    bottom: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2 + 1}px;\n    position: absolute;\n    z-index: 3;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;\n`;\n\nexport const TrackText = styled(motion.div)<{ $color: string; $baseFontSize: number }>`\n    position: absolute;\n    line-height: 1.15;\n    font-size: ${({ $baseFontSize }) => $baseFontSize}px;\n    font-weight: 700;\n    color: ${({ $color }) => $color};\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    z-index: 1;\n    font-family:\n        Roboto Regular,\n        sans-serif;\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Regular'),\n            local('Roboto Regular'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Regular Italic'),\n            local('Roboto Regular-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold'),\n            local('Roboto Regular-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold Italic'),\n            local('Roboto Regular-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)\n                format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)\n                format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Bold'),\n            local('Roboto Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Bold Italic'),\n            local('Roboto Bold-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold'),\n            local('Roboto Bold-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold Italic'),\n            local('Roboto Bold-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n`;\n\nexport const ThumbIconContainer = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const ThumbIcon = styled(motion.i).attrs<{ icon: string }>(({ icon }) => ({\n    className: `react-chayns-icon ${icon}`,\n}))`\n    font-size: 22px;\n    z-index: 1;\n    color: black;\n    padding: 5px;\n`;\n\nexport type CreateThumbVariantsArgs = {\n    trackWidth: number;\n    thumbSize: number;\n    scaleFactor: number;\n};\n\nexport const createThumbVariants = ({\n    thumbSize,\n    trackWidth,\n    scaleFactor,\n}: CreateThumbVariantsArgs): IBaseVariant & ICompletedVariant & ILeavingVariant => ({\n    base: {\n        x: 0,\n        backgroundColor: 'white',\n        transition: { duration: 0.2 },\n    },\n    completed: {\n        x: (trackWidth - thumbSize * scaleFactor) / 2,\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n        transition: { duration: 0.3 },\n    },\n    leaving: {\n        scale: [1, 2.4, 1],\n        boxShadow: 'none',\n    },\n});\n\nexport const THUMB_ICON_VARIANTS: IBaseVariant &\n    IDraggingVariant &\n    ICompletedVariant &\n    ILeavingVariant = {\n    base: {\n        x: [0, 8, 0, 8, 0],\n        transition: {\n            duration: 1,\n            ease: 'easeInOut',\n            repeat: Infinity,\n            repeatDelay: 5,\n        },\n    },\n    dragging: {\n        x: 0,\n    },\n    completed: {\n        opacity: 1,\n        transition: { duration: 0 },\n    },\n    leaving: {\n        opacity: 1,\n        scale: [1, 2.4, 1],\n        transition: { duration: 0.4, ease: 'easeInOut' },\n    },\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAA2B,eAAe;AACzD,OAAOC,MAAM,MAAM,mBAAmB;AAkBtC,OAAO,MAAMC,SAAS,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC,EAAE;AAQ7C,OAAO,MAAMC,KAAK,GAAGH,MAAM,CAACD,MAAM,CAACG,GAAG,CAAa;AACnD;AACA;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,qBAAqBC,KAAA;EAAA,IAAC;IAAED;EAAQ,CAAC,GAAAC,KAAA;EAAA,OAAKD,OAAO,GAAG,CAAC;AAAA;AACjD,wBAAwBE,KAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,KAAA;EAAA,OAAKC,gBAAgB;AAAA;AAClE,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGT,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AACtE;AACA;AACA;AACA,qBAAqBQ,KAAA;EAAA,IAAC;IAAEL;EAAQ,CAAC,GAAAK,KAAA;EAAA,OAAKL,OAAO,GAAG,CAAC;AAAA;AACjD;AACA,CAAC;AAED,OAAO,MAAMM,KAAK,GAAGX,MAAM,CAACD,MAAM,CAACG,GAAG,CAGpC;AACF,cAAcU,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA;AAClC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA;AACjC;AACA;AACA,YAAYE,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAAa,CAAC,GAAAD,KAAA;EAAA,OAAK,CAACC,YAAY,GAAGH,KAAK,GAAG,CAAC,IAAI,CAAC;AAAA;AACvE,cAAcI,KAAA;EAAA,IAAC;IAAEJ,KAAK;IAAEG;EAAa,CAAC,GAAAC,KAAA;EAAA,OAAK,CAACD,YAAY,GAAGH,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,SAAS,GAAGlB,MAAM,CAACD,MAAM,CAACG,GAAG,CAA4C;AACtF;AACA;AACA,iBAAiBiB,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAKC,aAAa;AAAA;AACrD;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGvB,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,SAAS,GAAGxB,MAAM,CAACD,MAAM,CAAC0B,CAAC,CAAC,CAACC,KAAK,CAAmBC,MAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,MAAA;EAAA,OAAM;IAC7EE,SAAS,EAAE,qBAAqBD,IAAI;EACxC,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,mBAAmB,GAAGC,MAAA;EAAA,IAAC;IAChCC,SAAS;IACTC,UAAU;IACVC;EACqB,CAAC,GAAAH,MAAA;EAAA,OAA0D;IAChFI,IAAI,EAAE;MACFC,CAAC,EAAE,CAAC;MACJC,eAAe,EAAE,OAAO;MACxBC,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAChC,CAAC;IACDC,SAAS,EAAE;MACPJ,CAAC,EAAE,CAACH,UAAU,GAAGD,SAAS,GAAGE,WAAW,IAAI,CAAC;MAC7CG,eAAe,EAAE,aAAa;MAC9BI,SAAS,EAAE,MAAM;MACjBH,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAChC,CAAC;IACDG,OAAO,EAAE;MACLC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MAClBF,SAAS,EAAE;IACf;EACJ,CAAC;AAAA,CAAC;AAEF,OAAO,MAAMG,mBAGM,GAAG;EAClBT,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClBE,UAAU,EAAE;MACRC,QAAQ,EAAE,CAAC;MACXM,IAAI,EAAE,WAAW;MACjBC,MAAM,EAAEC,QAAQ;MAChBC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,QAAQ,EAAE;IACNb,CAAC,EAAE;EACP,CAAC;EACDI,SAAS,EAAE;IACPU,OAAO,EAAE,CAAC;IACVZ,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAC9B,CAAC;EACDG,OAAO,EAAE;IACLQ,OAAO,EAAE,CAAC;IACVP,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBL,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEM,IAAI,EAAE;IAAY;EACnD;AACJ,CAAC","ignoreList":[]}

package/lib/esm/components/timer/Timer.js

@@ -0,0 +1,50 @@
+import { format, intervalToDuration } from 'date-fns';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { vibrate } from 'chayns-api';
+import { Container } from './Timer.styles';
+const Timer = _ref => {
+  let {
+    devalueTime,
+    color,
+    textColor = 'white'
+  } = _ref;
+  const [distance, setDistance] = useState(intervalToDuration({
+    start: devalueTime,
+    end: new Date()
+  }));
+  const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);
+  const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDistance(intervalToDuration({
+        start: devalueTime,
+        end: new Date()
+      }));
+    }, 500);
+    return () => clearInterval(interval);
+  }, [devalueTime]);
+  const handlePointerDownCapture = useCallback(() => {
+    void vibrate({
+      pattern: [50],
+      iOSFeedbackVibration: 7
+    });
+  }, []);
+  const label = useMemo(() => {
+    let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
+    if (distance.minutes) {
+      text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
+    }
+    return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', format(devalueTime, 'HH:mm'));
+  }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);
+  return /*#__PURE__*/React.createElement(Container, {
+    $baseFontSize: 17,
+    $borderSize: 2,
+    $height: 50,
+    $color: color,
+    $textColor: textColor,
+    $backgroundColor: color,
+    onPointerDownCapture: handlePointerDownCapture
+  }, label);
+};
+export default Timer;
+//# sourceMappingURL=Timer.js.map

package/lib/esm/components/timer/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.js","names":["format","intervalToDuration","React","useCallback","useEffect","useMemo","useState","vibrate","Container","Timer","_ref","devalueTime","color","textColor","distance","setDistance","start","end","Date","minutesShowValue","minutes","toString","secondsShowValue","seconds","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import { format, intervalToDuration } from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);\n    const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: new Date(),\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n        if (distance.minutes) {\n            text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n        }\n\n        return text\n            .replace('##MINUTES##', minutesShowValue)\n            .replace('##SECONDS##', secondsShowValue)\n            .replace('##TIME##', format(devalueTime, 'HH:mm'));\n    }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            {label}\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,kBAAkB,QAAQ,UAAU;AACrD,OAAOC,KAAK,IAAuBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAE3F,SAASC,OAAO,QAAQ,YAAY;AAEpC,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,MAAMC,KAAoC,GAAGC,IAAA,IAAiD;EAAA,IAAhD;IAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS,GAAG;EAAQ,CAAC,GAAAH,IAAA;EACrF,MAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGT,QAAQ,CACpCL,kBAAkB,CAAC;IACfe,KAAK,EAAEL,WAAW;IAClBM,GAAG,EAAE,IAAIC,IAAI,CAAC;EAClB,CAAC,CACL,CAAC;EACD,MAAMC,gBAAgB,GAAGd,OAAO,CAAC,MAAM,CAACS,QAAQ,CAACM,OAAO,IAAI,CAAC,EAAEC,QAAQ,CAAC,CAAC,EAAE,CAACP,QAAQ,CAACM,OAAO,CAAC,CAAC;EAC9F,MAAME,gBAAgB,GAAGjB,OAAO,CAAC,MAAM,CAACS,QAAQ,CAACS,OAAO,IAAI,CAAC,EAAEF,QAAQ,CAAC,CAAC,EAAE,CAACP,QAAQ,CAACS,OAAO,CAAC,CAAC;EAE9FnB,SAAS,CAAC,MAAM;IACZ,MAAMoB,QAAQ,GAAGC,WAAW,CAAC,MAAM;MAC/BV,WAAW,CACPd,kBAAkB,CAAC;QACfe,KAAK,EAAEL,WAAW;QAClBM,GAAG,EAAE,IAAIC,IAAI,CAAC;MAClB,CAAC,CACL,CAAC;IACL,CAAC,EAAE,GAAG,CAAC;IACP,OAAO,MAAMQ,aAAa,CAACF,QAAQ,CAAC;EACxC,CAAC,EAAE,CAACb,WAAW,CAAC,CAAC;EAEjB,MAAMgB,wBAAwB,GAAGxB,WAAW,CAAC,MAAM;IAC/C,KAAKI,OAAO,CAAC;MAAEqB,OAAO,EAAE,CAAC,EAAE,CAAC;MAAEC,oBAAoB,EAAE;IAAE,CAAC,CAAC;EAC5D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,KAAK,GAAGzB,OAAO,CAAC,MAAM;IACxB,IAAI0B,IAAI,GAAG,qCAAqC;IAChD,IAAIjB,QAAQ,CAACM,OAAO,EAAE;MAClBW,IAAI,GAAG,sDAAsD;IACjE;IAEA,OAAOA,IAAI,CACNC,OAAO,CAAC,aAAa,EAAEb,gBAAgB,CAAC,CACxCa,OAAO,CAAC,aAAa,EAAEV,gBAAgB,CAAC,CACxCU,OAAO,CAAC,UAAU,EAAEhC,MAAM,CAACW,WAAW,EAAE,OAAO,CAAC,CAAC;EAC1D,CAAC,EAAE,CAACG,QAAQ,CAACM,OAAO,EAAED,gBAAgB,EAAEG,gBAAgB,EAAEX,WAAW,CAAC,CAAC;EAEvE,oBACIT,KAAA,CAAA+B,aAAA,CAACzB,SAAS;IACN0B,aAAa,EAAE,EAAG;IAClBC,WAAW,EAAE,CAAE;IACfC,OAAO,EAAE,EAAG;IACZC,MAAM,EAAEzB,KAAM;IACd0B,UAAU,EAAEzB,SAAU;IACtB0B,gBAAgB,EAAE3B,KAAM;IACxB4B,oBAAoB,EAAEb;EAAyB,GAE9CG,KACM,CAAC;AAEpB,CAAC;AAED,eAAerB,KAAK","ignoreList":[]}

package/lib/esm/components/timer/Timer.styles.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { Track } from '../slider/Slider.styles';
+export const Container = styled(Track)`
+    height: ${_ref => {
+  let {
+    $height
+  } = _ref;
+  return $height;
+}}px !important;
+    background-color: ${_ref2 => {
+  let {
+    $color
+  } = _ref2;
+  return $color;
+}};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 4.5vw;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+
+    @media (min-width: 450px) {
+        font-size: 4vw;
+    }
+
+    @media (min-width: 768px) {
+        font-size: 2vw;
+    }
+
+    @media (min-width: 1024px) {
+        font-size: 1.5vw;
+    }
+
+    @media (min-width: 1200px) {
+        font-size: 25px;
+    }
+`;
+//# sourceMappingURL=Timer.styles.js.map

package/lib/esm/components/timer/Timer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.styles.js","names":["styled","Track","Container","_ref","$height","_ref2","$color"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n    $color: string;\n    $textColor: string;\n    $baseFontSize: number;\n}>`\n    height: ${({ $height }) => $height}px !important;\n    background-color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    font-size: 4.5vw;\n    font-weight: 700;\n    cursor: pointer;\n    color: white;\n\n    @media (min-width: 450px) {\n        font-size: 4vw;\n    }\n\n    @media (min-width: 768px) {\n        font-size: 2vw;\n    }\n\n    @media (min-width: 1024px) {\n        font-size: 1.5vw;\n    }\n\n    @media (min-width: 1200px) {\n        font-size: 25px;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACC,KAAK,CAInC;AACF,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/hooks/design.js

@@ -0,0 +1,22 @@
+import { useTransform } from 'framer-motion';
+import { useEffect, useMemo, useState } from 'react';
+export const useThumbIcon = (x, iconColor) => {
+  const [icon, setIcon] = useState('fas fa-arrow-right');
+  const opacity = useTransform(x, [0, 5, 6, 200], [1, 0, 0, 1]);
+  const styles = useMemo(() => ({
+    opacity,
+    color: iconColor
+  }), [iconColor, opacity]);
+  useEffect(() => x.on('change', value => {
+    if (value > 5) {
+      setIcon('fas fa-check');
+    } else {
+      setIcon('fas fa-arrow-right');
+    }
+  }), [x]);
+  return useMemo(() => ({
+    icon,
+    styles
+  }), [icon, styles]);
+};
+//# sourceMappingURL=design.js.map

package/lib/esm/hooks/design.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design.js","names":["useTransform","useEffect","useMemo","useState","useThumbIcon","x","iconColor","icon","setIcon","opacity","styles","color","on","value"],"sources":["../../../src/hooks/design.ts"],"sourcesContent":["import { MotionStyle, MotionValue, useTransform } from 'framer-motion';\nimport { useEffect, useMemo, useState } from 'react';\n\nexport type UseThumbIconRes = {\n    icon: string;\n    styles: MotionStyle;\n};\nexport const useThumbIcon = (x: MotionValue<number>, iconColor: string): UseThumbIconRes => {\n    const [icon, setIcon] = useState('fas fa-arrow-right');\n    const opacity = useTransform(x, [0, 5, 6, 200], [1, 0, 0, 1]);\n    const styles = useMemo<MotionStyle>(\n        () => ({\n            opacity,\n            color: iconColor,\n        }),\n        [iconColor, opacity],\n    );\n\n    useEffect(\n        () =>\n            x.on('change', (value) => {\n                if (value > 5) {\n                    setIcon('fas fa-check');\n                } else {\n                    setIcon('fas fa-arrow-right');\n                }\n            }),\n        [x],\n    );\n\n    return useMemo(() => ({ icon, styles }), [icon, styles]);\n};\n"],"mappings":"AAAA,SAAmCA,YAAY,QAAQ,eAAe;AACtE,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAMpD,OAAO,MAAMC,YAAY,GAAGA,CAACC,CAAsB,EAAEC,SAAiB,KAAsB;EACxF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGL,QAAQ,CAAC,oBAAoB,CAAC;EACtD,MAAMM,OAAO,GAAGT,YAAY,CAACK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7D,MAAMK,MAAM,GAAGR,OAAO,CAClB,OAAO;IACHO,OAAO;IACPE,KAAK,EAAEL;EACX,CAAC,CAAC,EACF,CAACA,SAAS,EAAEG,OAAO,CACvB,CAAC;EAEDR,SAAS,CACL,MACII,CAAC,CAACO,EAAE,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACtB,IAAIA,KAAK,GAAG,CAAC,EAAE;MACXL,OAAO,CAAC,cAAc,CAAC;IAC3B,CAAC,MAAM;MACHA,OAAO,CAAC,oBAAoB,CAAC;IACjC;EACJ,CAAC,CAAC,EACN,CAACH,CAAC,CACN,CAAC;EAED,OAAOH,OAAO,CAAC,OAAO;IAAEK,IAAI;IAAEG;EAAO,CAAC,CAAC,EAAE,CAACH,IAAI,EAAEG,MAAM,CAAC,CAAC;AAC5D,CAAC","ignoreList":[]}

package/lib/esm/index.js

@@ -0,0 +1,2 @@
+export { default as DevalueSlider } from './components/DevalueSlider';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","DevalueSlider"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as DevalueSlider } from './components/DevalueSlider';\nexport type {\n    DevalueSliderOnChangeHandler,\n    DevalueSliderOnCompleteHandler,\n    DevalueSliderOnDevalueHandler,\n    DevalueSliderProps,\n} from './components/DevalueSlider';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,4BAA4B","ignoreList":[]}

package/lib/esm/utils/common.js

@@ -0,0 +1,4 @@
+export const sleep = ms => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+//# sourceMappingURL=common.js.map

package/lib/esm/utils/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","names":["sleep","ms","Promise","resolve","setTimeout"],"sources":["../../../src/utils/common.ts"],"sourcesContent":["export const sleep = (ms: number) =>\n    new Promise((resolve) => {\n        setTimeout(resolve, ms);\n    });\n"],"mappings":"AAAA,OAAO,MAAMA,KAAK,GAAIC,EAAU,IAC5B,IAAIC,OAAO,CAAEC,OAAO,IAAK;EACrBC,UAAU,CAACD,OAAO,EAAEF,EAAE,CAAC;AAC3B,CAAC,CAAC","ignoreList":[]}

package/lib/types/components/DevalueSlider.d.ts

@@ -0,0 +1,46 @@
+import React, { type CSSProperties } from 'react';
+export type DevalueSliderOnDevalueHandlerResult = {
+    success: boolean;
+};
+export type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;
+export type DevalueSliderOnChangeHandler = (relativeValue: number) => void;
+export type DevalueSliderOnCompleteHandler = () => void;
+export type DevalueSliderProps = {
+    /**
+     * The basic color of the slider.
+     * This color is the background of the track before the slider is devalued.
+     */
+    backgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * The devalue color of the slider.
+     * This color fills the track from the left on user movement.
+     * This color is the background of the timer after the slider is devalued.
+     */
+    devalueBackgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * If this slider was devalued, provide the time when it was devalued.
+     * This will show a timer.
+     */
+    devalueTime?: Date;
+    /**
+     * Disables the slider and cancels any active drags.
+     */
+    isDisabled?: boolean;
+    /**
+     * This function is called when the slider is devalued.
+     */
+    onDevalue?: DevalueSliderOnDevalueHandler;
+    /**
+     * This function is called when the slider value changes.
+     * With this function you can keep track of the movement of the slider.
+     */
+    onChange?: DevalueSliderOnChangeHandler;
+    /**
+     * This function is called when the slider is completed.
+     * The slider is completed when the user devalues the slider
+     * and the animation is completed.
+     */
+    onComplete?: DevalueSliderOnCompleteHandler;
+};
+declare const DevalueSlider: React.FC<DevalueSliderProps>;
+export default DevalueSlider;

package/lib/types/components/slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { DevalueSliderProps } from '../DevalueSlider';
+export type SliderProps = {
+    color: NonNullable<DevalueSliderProps['backgroundColor']>;
+    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;
+    thumbSize?: number;
+    trackHeight?: number;
+    trackText?: string;
+    borderSize?: number;
+    onChange: DevalueSliderProps['onChange'];
+    onDevalue: DevalueSliderProps['onDevalue'];
+    onComplete: DevalueSliderProps['onComplete'];
+};
+export type SliderRef = {
+    disable: () => void;
+    enable: () => void;
+};
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;
+export default Slider;