@popsure/dirty-swan 0.30.6 → 0.31.0

package/dist/esm/components/modal/bottomModal/index.js

@@ -5,8 +5,8 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import { u as useOnClose } from '../../../useOnClose-d818a54f.js';
 import { c as classnames } from '../../../index-e9e37a34.js';
 
-var css_248z = "@keyframes style-module_fade-in__1GZgs {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n}\n@keyframes style-module_fade-out__30Bns {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\n@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_close__1GERU {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n  position: relative;\n  background-color: white;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: 100%;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  top: 0;\n}\n.style-module_container--close__K506c {\n  animation-name: style-module_disappear-out__6pOVr;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n}";
-var styles = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH"};
+var css_248z = "@keyframes style-module_fade-in__1GZgs {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n}\n@keyframes style-module_fade-out__30Bns {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\n@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_close__1GERU {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n  position: relative;\n  background-color: white;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: 100%;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  top: 0;\n}\n.style-module_container--close__K506c {\n  animation-name: style-module_disappear-out__6pOVr;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n}\n\n@media (max-width: 34rem) {\n  .style-module_content__mq_IJ {\n    padding-bottom: 48px;\n  }\n}";
+var styles = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH","content":"style-module_content__mq_IJ"};
 styleInject(css_248z);
 
 var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";

package/dist/esm/components/segmentedControl/index.js

@@ -38,5 +38,5 @@ var SegmentedControl = function (_a) {
                     } }, void 0)] }), void 0) }), void 0));
 };
 
-export default SegmentedControl;
+export { SegmentedControl };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/segmentedControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n  title: string;\n  subtitle: string;\n}\n\nconst SegmentedControl = ({\n  className = '',\n  values,\n  selectedIndex,\n  onChange,\n}: {\n  className?: string;\n  values: Array<TitleWithSubtitle> | Array<string>;\n  selectedIndex: number;\n  onChange: (selectedIndex: number) => void;\n}) => {\n  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n    useState<{\n      left: number;\n      width: number;\n    }>({ left: 0, width: 0 });\n  const chipContainer = useRef<HTMLDivElement | null>(null);\n  const height = typeof values[0] === 'string' ? 48 : 66;\n\n  useEffect(() => {\n    const selectedChip = chipContainer.current?.children[\n      selectedIndex\n    ] as HTMLDivElement;\n    const left = selectedChip.offsetLeft;\n    const width = selectedChip.offsetWidth;\n    setSelectedChipBackgroundWidthLeft({ left, width });\n  }, [selectedIndex]);\n\n  return (\n    <div className={className}>\n      <div className={styles['background-container']}>\n        <div\n          ref={chipContainer}\n          className={styles['chip-container']}\n          style={{ height: `${height}px` }}\n        >\n          {values.map((value: TitleWithSubtitle | string, index: number) => {\n            return (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    onChange(index);\n                  }\n                }}\n                onClick={() => {\n                  onChange(index);\n                }}\n                className={styles.chip}\n                key={typeof value === 'string' ? value : value.title}\n              >\n                {typeof value === 'string' ? (\n                  <div\n                    className={`p-h4 ta-center ${\n                      selectedIndex === index ? '' : 'tc-primary-500'\n                    }`}\n                  >\n                    {value}\n                  </div>\n                ) : (\n                  <>\n                    <div\n                      className={`p-h4 ta-center ${\n                        selectedIndex === index ? '' : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.title}\n                    </div>\n                    <div\n                      className={`p-p--small ta-center ${\n                        selectedIndex === index\n                          ? 'tc-grey-500'\n                          : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.subtitle}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n        <div\n          className={styles['select-chip-background']}\n          style={{\n            width: `${selectedChipBackgroundWidthLeft.width}px`,\n            height: `${height - 16}px`,\n            left: `${selectedChipBackgroundWidthLeft.left}px`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAQM,gBAAgB,GAAG,UAAC,EAUzB;QATC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAOF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,sBAAK,SAAS,EAAE,SAAS,gBACvBC,uBAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,iBAC5CD,sBACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAK,MAAM,OAAI,EAAE,gBAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,sBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oCACrB,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,gBAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,YACF,KAENC,4BACED,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,CAAC,KAAK,YACR;oCACNA,sBACE,SAAS,EAAE,2BACT,aAAa,KAAK,KAAK;8CACnB,aAAa;8CACb,gBAAgB,CACpB,gBAED,KAAK,CAAC,QAAQ,YACX,YACL,CACJ,KA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,YACE;gBACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAK,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAK,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAK,+BAA+B,CAAC,IAAI,OAAI;qBAClD,WACD,aACE,YACF,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n  title: string;\n  subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n  className?: string;\n  values: Array<TitleWithSubtitle> | Array<string>;\n  selectedIndex: number;\n  onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n  className = '',\n  values,\n  selectedIndex,\n  onChange,\n}: SegmentedControlProps) => {\n  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n    useState<{\n      left: number;\n      width: number;\n    }>({ left: 0, width: 0 });\n  const chipContainer = useRef<HTMLDivElement | null>(null);\n  const height = typeof values[0] === 'string' ? 48 : 66;\n\n  useEffect(() => {\n    const selectedChip = chipContainer.current?.children[\n      selectedIndex\n    ] as HTMLDivElement;\n    const left = selectedChip.offsetLeft;\n    const width = selectedChip.offsetWidth;\n    setSelectedChipBackgroundWidthLeft({ left, width });\n  }, [selectedIndex]);\n\n  return (\n    <div className={className}>\n      <div className={styles['background-container']}>\n        <div\n          ref={chipContainer}\n          className={styles['chip-container']}\n          style={{ height: `${height}px` }}\n        >\n          {values.map((value: TitleWithSubtitle | string, index: number) => {\n            return (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    onChange(index);\n                  }\n                }}\n                onClick={() => {\n                  onChange(index);\n                }}\n                className={styles.chip}\n                key={typeof value === 'string' ? value : value.title}\n              >\n                {typeof value === 'string' ? (\n                  <div\n                    className={`p-h4 ta-center ${\n                      selectedIndex === index ? '' : 'tc-primary-500'\n                    }`}\n                  >\n                    {value}\n                  </div>\n                ) : (\n                  <>\n                    <div\n                      className={`p-h4 ta-center ${\n                        selectedIndex === index ? '' : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.title}\n                    </div>\n                    <div\n                      className={`p-p--small ta-center ${\n                        selectedIndex === index\n                          ? 'tc-grey-500'\n                          : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.subtitle}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n        <div\n          className={styles['select-chip-background']}\n          style={{\n            width: `${selectedChipBackgroundWidthLeft.width}px`,\n            height: `${height - 16}px`,\n            left: `${selectedChipBackgroundWidthLeft.left}px`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport { SegmentedControl };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAeM,gBAAgB,GAAG,UAAC,EAKF;QAJtB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAEF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,sBAAK,SAAS,EAAE,SAAS,gBACvBC,uBAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,iBAC5CD,sBACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAK,MAAM,OAAI,EAAE,gBAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,sBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oCACrB,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,gBAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,YACF,KAENC,4BACED,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,CAAC,KAAK,YACR;oCACNA,sBACE,SAAS,EAAE,2BACT,aAAa,KAAK,KAAK;8CACnB,aAAa;8CACb,gBAAgB,CACpB,gBAED,KAAK,CAAC,QAAQ,YACX,YACL,CACJ,KA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,YACE;gBACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAK,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAK,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAK,+BAA+B,CAAC,IAAI,OAAI;qBAClD,WACD,aACE,YACF,EACN;AACJ;;;;"}

package/dist/esm/components/segmentedControl/index.stories.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SegmentedControl } from './index.js';
+import '../../tslib.es6-5bc94358.js';
+import '../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/SegmentedControl',
+    component: SegmentedControl,
+    argTypes: {
+        values: {
+            description: 'Array containing the text that needs to be displayed',
+            table: {
+                type: {
+                    summary: 'string[] OR { title: string; subtitle: string;}[]'
+                },
+            },
+        },
+        selectedIndex: {
+            description: 'The currently selected index',
+        },
+        onChange: {
+            action: true,
+            table: {
+                category: "Callbacks",
+            },
+        },
+    },
+    args: {
+        values: ['Earth', 'Sun', 'Moon'],
+        selectedIndex: 0,
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
+            },
+        },
+    },
+};
+var SegmentedControlStory = function (_a) {
+    var onChange = _a.onChange, selectedIndex = _a.selectedIndex, values = _a.values;
+    var _b = useState(selectedIndex), index = _b[0], setIndex = _b[1];
+    var handleOnChange = function (newIndex) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+        setIndex(newIndex);
+    };
+    return (jsx(SegmentedControl, { values: values, selectedIndex: index, onChange: handleOnChange }, void 0));
+};
+SegmentedControlStory.storyName = "SegmentedControl";
+var SegmentedControlWithSubtitle = function (_a) {
+    var onChange = _a.onChange, selectedIndex = _a.selectedIndex; _a.values;
+    var _b = useState(selectedIndex), index = _b[0], setIndex = _b[1];
+    var handleOnChange = function (newIndex) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+        setIndex(newIndex);
+    };
+    return (jsx(SegmentedControl, { values: [
+            { title: 'Basic', subtitle: '€288,65' },
+            { title: 'Premium', subtitle: '€288,65' },
+        ], selectedIndex: index, onChange: handleOnChange }, void 0));
+};
+
+export default story;
+export { SegmentedControlStory, SegmentedControlWithSubtitle };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/segmentedControl/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/segmentedControl/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { SegmentedControl, SegmentedControlProps } from '.';\n\nconst story = {\n  title: 'JSX/SegmentedControl',\n  component: SegmentedControl,\n  argTypes: {\n    values: {\n      description: 'Array containing the text that needs to be displayed',\n      table: {\n        type: { \n          summary: 'string[] OR { title: string; subtitle: string;}[]'\n        },\n      },\n    },\n    selectedIndex: {\n      description: 'The currently selected index',\n    },\n    onChange: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n  },\n  args: {\n    values: ['Earth', 'Sun', 'Moon'],\n    selectedIndex: 0,\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',\n      },\n    },\n  },\n};\n\nexport const SegmentedControlStory = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={values}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nSegmentedControlStory.storyName = \"SegmentedControl\";\n\nexport const SegmentedControlWithSubtitle = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={[\n        { title: 'Basic', subtitle: '€288,65' },\n        { title: 'Premium', subtitle: '€288,65' },\n      ]}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,CAAC;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,sHAAsH;aAClI;SACF;KACF;EACD;IAEW,qBAAqB,GAAG,UAAC,EAId;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,MAAM,YAAA;IAEA,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ,EAAE;AAEF,qBAAqB,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAExC,4BAA4B,GAAG,UAAC,EAIrB;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA;IAGP,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE;YACN,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC1C,EACD,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ;;;;;"}

package/dist/esm/components/segmentedControl/index.test.js

@@ -1,7 +1,7 @@
 import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender } from '../../customRender-4157fcff.js';
-import SegmentedControl from './index.js';
+import { SegmentedControl } from './index.js';
 import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-e7f67fd8.js';

package/dist/esm/components/segmentedControl/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/segmentedControl/index.test.tsx"],"sourcesContent":["import { render } from '../../util/testUtils';\n\nimport SegmentedControl from '.';\n\nconst setup = (onChange: (selectedIndex: number) => void = () => {}) => {\n  return render(\n    <SegmentedControl\n      values={['kg', 'lbs']}\n      onChange={onChange}\n      selectedIndex={0}\n    />\n  );\n};\n\ndescribe('SegmentedControl component', () => {\n  it('Should provide the index of the clicked button', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // click first button\n    await user.click(buttons[0]);\n\n    // click second button\n    await user.click(buttons[1]);\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n\n  it('Should provide the index of the selected button on key down', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // focus first button and select with keyboard\n    buttons[0].focus();\n    await user.keyboard('{enter}');\n\n    // focus second button and select with keyboard\n    buttons[1].focus();\n    await user.keyboard('{enter}');\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAG,UAAC,QAAoD;IAApD,yBAAA,EAAA,0BAAoD;IACjE,OAAOA,YAAM,CACXC,IAAC,gBAAgB,IACf,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EACrB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,WAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,4BAA4B,EAAE;IACrC,EAAE,CAAC,gDAAgD,EAAE;;;;;oBAC7C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;;oBAG7B,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;oBAE7B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE;;;;;oBAC1D,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;;oBAG/B,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;oBAE/B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/segmentedControl/index.test.tsx"],"sourcesContent":["import { render } from '../../util/testUtils';\n\nimport { SegmentedControl } from '.';\n\nconst setup = (onChange: (selectedIndex: number) => void = () => {}) => {\n  return render(\n    <SegmentedControl\n      values={['kg', 'lbs']}\n      onChange={onChange}\n      selectedIndex={0}\n    />\n  );\n};\n\ndescribe('SegmentedControl component', () => {\n  it('Should provide the index of the clicked button', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // click first button\n    await user.click(buttons[0]);\n\n    // click second button\n    await user.click(buttons[1]);\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n\n  it('Should provide the index of the selected button on key down', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // focus first button and select with keyboard\n    buttons[0].focus();\n    await user.keyboard('{enter}');\n\n    // focus second button and select with keyboard\n    buttons[1].focus();\n    await user.keyboard('{enter}');\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAG,UAAC,QAAoD;IAApD,yBAAA,EAAA,0BAAoD;IACjE,OAAOA,YAAM,CACXC,IAAC,gBAAgB,IACf,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EACrB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,WAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,4BAA4B,EAAE;IACrC,EAAE,CAAC,gDAAgD,EAAE;;;;;oBAC7C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;;oBAG7B,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;oBAE7B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE;;;;;oBAC1D,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;;oBAG/B,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;oBAE/B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;AACL,CAAC,CAAC"}