@bolttech/atoms-segmented-control 0.15.0 → 0.16.1

package/README.md

@@ -64,17 +64,17 @@ export default App;
 
 The **SegmentedControl** component accepts the following props:
 
-| Prop           | Type     | Description                                        |
-| -------------- | -------- | -------------------------------------------------- |
-| `id`           | string   | The HTML `id` attribute for the segmented control. |
-| `dataTestId`   | string   | The data-testid attribute for testing purposes.    |
-| `value`        | string   | The currently selected option value.               |
-| `options`      | Option[] | An array of option objects to be displayed.        |
-| `fullWidth`    | boolean  | Boolean representing if should take full width.    |
-| `errorMessage` | string   | An optional error message to display.              |
-| `onChange`     | function | A callback function triggered on option change.    |
-| `onBlur`       | function | A callback function triggered on blur event.       |
-| `onFocus`      | function | A callback function triggered on focus event.      |
+| Prop           | Type     | Description                                                                       |
+| -------------- | -------- | --------------------------------------------------------------------------------- |
+| `id`           | string   | The HTML `id` attribute for the segmented control.                                |
+| `dataTestId`   | string   | The data-testid attribute for testing purposes.                                   |
+| `value`        | string   | The currently selected option value.                                              |
+| `options`      | Option[] | An array of option objects to be displayed.                                       |
+| `fullWidth`    | boolean  | Boolean representing if should take the containers full width on desktop devices. |
+| `errorMessage` | string   | An optional error message to display.                                             |
+| `onChange`     | function | A callback function triggered on option change.                                   |
+| `onBlur`       | function | A callback function triggered on blur event.                                      |
+| `onFocus`      | function | A callback function triggered on focus event.                                     |
 
 ## Example
 

package/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var frontendFoundations = require('@bolttech/frontend-foundations');
 var styled = require('styled-components');
 var uiUtils = require('@bolttech/ui-utils');
 
@@ -1853,15 +1854,15 @@ const Option = /*#__PURE__*/styled__default["default"].button.withConfig({
   theme
 }) => `${theme.components.segmentControl.paddingVertical} ${theme.components.segmentControl.paddingVertical}`, ({
   theme
-}) => tokenToInteger(theme.components.segmentControl.gap) === 0 && styled.css(["&: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;}"]));
+}) => tokenToInteger(theme.components.segmentControl.gap) === 0 && styled.css(["&:last-of-type{border-left:0;}&:first-of-type:nth-last-child(3){border-right:0;}&:not(:first-of-type) + &:not(:last-of-type){border-right:0;border-left:0;}"]));
 const SegmentedControlContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-segmented-controlstyles__SegmentedControlContainer",
   componentId: "sc-1lpqq2u-1"
-})(["display:flex;flex-direction:column;gap:", ";", ";"], ({
+})(["display:flex;flex-direction:column;gap:", ";", ";@media only screen and (max-width:", "px){button{flex:1;}}"], ({
   theme
 }) => theme.tokens.padding.XS, ({
   $fullWidth
-}) => $fullWidth && styled.css(["button{flex:1;}"]));
+}) => $fullWidth && styled.css(["button{flex:1;}"]), frontendFoundations.ScreenSizes.SM.max);
 const SegmentedControlWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-segmented-controlstyles__SegmentedControlWrapper",
   componentId: "sc-1lpqq2u-2"

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/atoms-segmented-control",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@bolttech/default-theme": "0.1.0",
     "@bolttech/form-engine": "0.5.0",
-    "@bolttech/frontend-foundations": "0.2.0",
-    "@bolttech/ui-utils": "0.2.0",
+    "@bolttech/frontend-foundations": "0.3.1",
+    "@bolttech/ui-utils": "0.2.1",
     "react": "18.2.0",
     "styled-components": "6.1.1"
   },