@bolttech/atoms-segmented-control 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{index.js → index.cjs} +20 -12
- package/package.json +3 -5
package/{index.js → index.cjs}
RENAMED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var styled = require('styled-components');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
4
12
|
|
|
5
13
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
6
14
|
|
|
@@ -1619,7 +1627,7 @@ $({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign },
|
|
|
1619
1627
|
assign: assign
|
|
1620
1628
|
});
|
|
1621
1629
|
|
|
1622
|
-
const StyledAtomsSegmentedControl = /*#__PURE__*/
|
|
1630
|
+
const StyledAtomsSegmentedControl = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
1623
1631
|
displayName: "atoms-segmented-controlstyles__StyledAtomsSegmentedControl",
|
|
1624
1632
|
componentId: "sc-1lpqq2u-0"
|
|
1625
1633
|
})(["border-radius:", ";box-shadow:", ";display:flex;flex-direction:row;gap:", ";"], ({
|
|
@@ -1633,7 +1641,7 @@ const StyledAtomsSegmentedControl = /*#__PURE__*/styled.div.withConfig({
|
|
|
1633
1641
|
}) => `${shadow.lvl0.x} ${shadow.lvl0.y} ${shadow.lvl0.blur} ${shadow.lvl0.spread} ${shadow.lvl0.color}`, ({
|
|
1634
1642
|
theme
|
|
1635
1643
|
}) => theme.components.segmentControl.gap);
|
|
1636
|
-
const Option = /*#__PURE__*/
|
|
1644
|
+
const Option = /*#__PURE__*/styled__default["default"].button.withConfig({
|
|
1637
1645
|
displayName: "atoms-segmented-controlstyles__Option",
|
|
1638
1646
|
componentId: "sc-1lpqq2u-1"
|
|
1639
1647
|
})(["background-color:", ";border:1px solid ", ";padding:", ";:first-of-type{border-right:0;}:last-of-type{border-left:0;}:not(:first-of-type) +:not(:last-of-type){border-right:0;border-left:0;}"], ({
|
|
@@ -1645,7 +1653,7 @@ const Option = /*#__PURE__*/styled.button.withConfig({
|
|
|
1645
1653
|
}) => pressed ? theme.components.segmentControl.border.color.pressed : theme.components.segmentControl.border.color.default, ({
|
|
1646
1654
|
theme
|
|
1647
1655
|
}) => `${theme.components.segmentControl.paddingVertical} ${theme.components.segmentControl.paddingVertical}`);
|
|
1648
|
-
const OptionLabel = /*#__PURE__*/
|
|
1656
|
+
const OptionLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
|
|
1649
1657
|
displayName: "atoms-segmented-controlstyles__OptionLabel",
|
|
1650
1658
|
componentId: "sc-1lpqq2u-2"
|
|
1651
1659
|
})(["color:", ";font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-decoration:", ";text-indent:", ";text-transform:", ";"], ({
|
|
@@ -1668,30 +1676,30 @@ const OptionLabel = /*#__PURE__*/styled.label.withConfig({
|
|
|
1668
1676
|
}) => theme.components.segmentControl.fieldLabel.textCase);
|
|
1669
1677
|
|
|
1670
1678
|
function SegmentedControl(props) {
|
|
1671
|
-
const [value, setValue] = useState(props.selected || '');
|
|
1679
|
+
const [value, setValue] = react.useState(props.selected || '');
|
|
1672
1680
|
const onPressOption = valueSelected => {
|
|
1673
1681
|
setValue(valueSelected);
|
|
1674
1682
|
if (typeof props.onSelect === 'function') props.onSelect(valueSelected);
|
|
1675
1683
|
};
|
|
1676
1684
|
const renderOptions = () => {
|
|
1677
|
-
if (props.options.length < 1) return jsx("p", {
|
|
1685
|
+
if (props.options.length < 1) return jsxRuntime.jsx("p", {
|
|
1678
1686
|
children: "Two options at minimum are required."
|
|
1679
1687
|
});
|
|
1680
|
-
return props.options.map(option => jsx(Option, Object.assign({
|
|
1688
|
+
return props.options.map(option => jsxRuntime.jsx(Option, Object.assign({
|
|
1681
1689
|
"data-testid": `segmentedcontrol-option-${option.value}`,
|
|
1682
1690
|
onClick: () => onPressOption(option.value),
|
|
1683
1691
|
pressed: option.value === value
|
|
1684
1692
|
}, {
|
|
1685
|
-
children: jsx(OptionLabel, Object.assign({
|
|
1693
|
+
children: jsxRuntime.jsx(OptionLabel, Object.assign({
|
|
1686
1694
|
pressed: option.value === value
|
|
1687
1695
|
}, {
|
|
1688
1696
|
children: option.label
|
|
1689
1697
|
}))
|
|
1690
1698
|
}), `segmentedcontrol-option-${option.value}`));
|
|
1691
1699
|
};
|
|
1692
|
-
return jsx(StyledAtomsSegmentedControl, {
|
|
1700
|
+
return jsxRuntime.jsx(StyledAtomsSegmentedControl, {
|
|
1693
1701
|
children: renderOptions()
|
|
1694
1702
|
});
|
|
1695
1703
|
}
|
|
1696
1704
|
|
|
1697
|
-
|
|
1705
|
+
exports.SegmentedControl = SegmentedControl;
|
package/package.json
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolttech/atoms-segmented-control",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"type": "module",
|
|
3
|
+
"version": "0.1.7",
|
|
4
|
+
"main": "./index.cjs",
|
|
5
|
+
"type": "commonjs",
|
|
7
6
|
"types": "./src/index.d.ts",
|
|
8
7
|
"dependencies": {},
|
|
9
8
|
"peerDependencies": {
|
|
10
|
-
"@edirect/frontend-foundations": "0.0.27",
|
|
11
9
|
"react": "18.2.0",
|
|
12
10
|
"styled-components": "5.3.6"
|
|
13
11
|
}
|