@citygross/components 0.8.45 → 0.8.46

package/build/@types/components/SelectButton/SelectButton.d.ts

@@ -8,5 +8,4 @@ export declare type TSelectButton = {
     selected: number;
     width?: number;
 };
-declare const SelectButton: ({ items, selected, width }: TSelectButton) => JSX.Element;
-export default SelectButton;
+export declare const SelectButton: ({ items, selected, width }: TSelectButton) => JSX.Element;

package/build/cjs/components/src/components/SelectButton/SelectButton.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var SelectButton_styles = require('./SelectButton.styles.js');
+var designTokens = require('@citygross/design-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SelectButton = function (_a) {
+    var items = _a.items, selected = _a.selected, _b = _a.width, width = _b === void 0 ? designTokens.constants.selectButtonWidth : _b;
+    var _c = React.useState(selected), localSelected = _c[0], setSelected = _c[1];
+    return (React__default["default"].createElement(SelectButton_styles.SelectButtonContainer, { length: items === null || items === void 0 ? void 0 : items.length, selected: localSelected, width: width }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
+        var label = _a.label, onClick = _a.onClick;
+        return (React__default["default"].createElement(SelectButton_styles.SelectButton, { key: label, onClick: function () {
+                onClick && onClick();
+                setSelected(i);
+            }, selected: localSelected === i, width: width }, label));
+    })));
+};
+
+exports.SelectButton = SelectButton;
+//# sourceMappingURL=SelectButton.js.map

package/build/cjs/components/src/components/SelectButton/SelectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/SelectButton/SelectButton.styles.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
 var global_styles = require('../../shared/global.styles.js');
@@ -8,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"])), function (_a) {
+var SelectButtonContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
@@ -65,7 +67,7 @@ styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__
     var theme = _a.theme;
     return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.zIndex.low;
 });
-styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var SelectButton = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
@@ -95,4 +97,7 @@ styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib
         "&:active {\n      background-color: ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter, ";\n    }");
 }, global_styles.focusVisible);
 var templateObject_1, templateObject_2;
+
+exports.SelectButton = SelectButton;
+exports.SelectButtonContainer = SelectButtonContainer;
 //# sourceMappingURL=SelectButton.styles.js.map

package/build/cjs/components/src/components/SelectButton/SelectButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -88,9 +88,7 @@ var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
 var CartCard = require('./components/CartCard/CartCard.js');
 var PriceTag = require('./components/PriceTag/PriceTag.js');
 var Pill = require('./components/Pill/Pill.js');
-require('react');
-require('./components/SelectButton/SelectButton.styles.js');
-require('@citygross/design-tokens');
+var SelectButton = require('./components/SelectButton/SelectButton.js');
 
 
 
@@ -239,4 +237,5 @@ Object.defineProperty(exports, 'EPriceVariant', {
 });
 exports.PriceTag = PriceTag.PriceTag;
 exports.Pill = Pill.Pill;
+exports.SelectButton = SelectButton.SelectButton;
 //# sourceMappingURL=index.js.map

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SelectButton/SelectButton.js

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { SelectButtonContainer, SelectButton as SelectButton$1 } from './SelectButton.styles.js';
+import { constants } from '@citygross/design-tokens';
+
+var SelectButton = function (_a) {
+    var items = _a.items, selected = _a.selected, _b = _a.width, width = _b === void 0 ? constants.selectButtonWidth : _b;
+    var _c = useState(selected), localSelected = _c[0], setSelected = _c[1];
+    return (React.createElement(SelectButtonContainer, { length: items === null || items === void 0 ? void 0 : items.length, selected: localSelected, width: width }, items === null || items === void 0 ? void 0 : items.map(function (_a, i) {
+        var label = _a.label, onClick = _a.onClick;
+        return (React.createElement(SelectButton$1, { key: label, onClick: function () {
+                onClick && onClick();
+                setSelected(i);
+            }, selected: localSelected === i, width: width }, label));
+    })));
+};
+
+export { SelectButton };
+//# sourceMappingURL=SelectButton.js.map

package/build/es/components/src/components/SelectButton/SelectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SelectButton/SelectButton.styles.js

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 import { focusVisible } from '../../shared/global.styles.js';
 
-styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"])), function (_a) {
+var SelectButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: inline-flex;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n  z-index: ", ";\n\n  &:after {\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    content: '';\n    display: block;\n    top: 0;\n    bottom: 0;\n    left: ", ";\n    margin: ", ";\n    position: absolute;\n    transition: left 300ms ease;\n    width: ", ";\n    z-index: ", ";\n  }\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
@@ -59,7 +59,7 @@ styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ba
     var theme = _a.theme;
     return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.zIndex.low;
 });
-styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var SelectButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  border-radius: ", "px;\n  cursor: pointer;\n  font-weight: ", ";\n  font-size: ", "px;\n  height: ", "px;\n  width: ", "px;\n  outline: none;\n  text-align: center;\n  z-index: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
@@ -89,4 +89,6 @@ styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
         "&:active {\n      background-color: ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter, ";\n    }");
 }, focusVisible);
 var templateObject_1, templateObject_2;
+
+export { SelectButton, SelectButtonContainer };
 //# sourceMappingURL=SelectButton.styles.js.map

package/build/es/components/src/components/SelectButton/SelectButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -84,7 +84,5 @@ export { CartCardLabel } from './components/CartCardLabel/CartCardLabel.js';
 export { CartCard } from './components/CartCard/CartCard.js';
 export { EPriceVariant, PriceTag } from './components/PriceTag/PriceTag.js';
 export { Pill } from './components/Pill/Pill.js';
-import 'react';
-import './components/SelectButton/SelectButton.styles.js';
-import '@citygross/design-tokens';
+export { SelectButton } from './components/SelectButton/SelectButton.js';
 //# sourceMappingURL=index.js.map

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.45",
+  "version": "0.8.46",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "0e956f7a7dc80192c0577193ba7993d26441dce4"
+  "gitHead": "353925f7c4e1e21f2d01d4e8b6463697a0aa4fa7"
 }