@bolttech/atoms-segmented-control 0.16.1 → 0.18.0

package/index.cjs

@@ -1842,7 +1842,7 @@ const tokenToInteger = token => Number(token.replace('px', ''));
 const Option = /*#__PURE__*/styled__default["default"].button.withConfig({
   displayName: "atoms-segmented-controlstyles__Option",
   componentId: "sc-1lpqq2u-0"
-})(["background-color:", ";border:1px solid ", ";padding:", ";cursor:pointer;", " *{cursor:pointer;}"], ({
+})(["background-color:", ";border:1px solid ", ";padding:", ";cursor:pointer;", " *{cursor:pointer;}", ";"], ({
   theme,
   $pressed,
   $hasError
@@ -1854,7 +1854,14 @@ 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(["&: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;}"]));
+}) => 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;}"]), ({
+  disabled,
+  $pressed
+}) => disabled && !$pressed && styled.css(["border:1px solid ", ";background-color:", ";cursor:default;*{cursor:default;}"], ({
+  theme
+}) => theme.components.segmentControl.border.color.disabled, ({
+  theme
+}) => theme.components.segmentControl.container.color.disabled));
 const SegmentedControlContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-segmented-controlstyles__SegmentedControlContainer",
   componentId: "sc-1lpqq2u-1"
@@ -1880,7 +1887,7 @@ const SegmentedControlWrapper = /*#__PURE__*/styled__default["default"].div.with
 const OptionLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   displayName: "atoms-segmented-controlstyles__OptionLabel",
   componentId: "sc-1lpqq2u-3"
-})(["color:", ";font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-decoration:", ";text-indent:", ";text-transform:", ";"], ({
+})(["color:", ";font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-decoration:", ";text-indent:", ";text-transform:", ";", ";"], ({
   theme,
   $pressed
 }) => $pressed ? theme.components.segmentControl.text.color.pressed : theme.components.segmentControl.text.color.default, ({
@@ -1897,7 +1904,11 @@ const OptionLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   theme
 }) => theme.components.segmentControl.fieldLabel.paragraphSpacing, ({
   theme
-}) => theme.components.segmentControl.fieldLabel.textCase);
+}) => theme.components.segmentControl.fieldLabel.textCase, ({
+  $disabled
+}) => $disabled && styled.css(["color:", ";"], ({
+  theme
+}) => theme.components.segmentControl.text.color.disabled));
 const LabelError = /*#__PURE__*/styled__default["default"].label.withConfig({
   displayName: "atoms-segmented-controlstyles__LabelError",
   componentId: "sc-1lpqq2u-4"
@@ -1939,12 +1950,18 @@ const SegmentedControl = /*#__PURE__*/react.forwardRef((_a, ref) => {
     });
     return options.map(option => jsxRuntime.jsx(Option, Object.assign({
       "data-testid": `segmentedcontrol-option-${option.value}`,
-      onClick: () => onClick(option.value),
+      onClick: () => {
+        if (!option.disabled) {
+          onClick(option.value);
+        }
+      },
       "$pressed": option.value === value,
       type: "button",
+      disabled: option.disabled,
       "$hasError": !!errorMessage
     }, uiUtils.applyDataAttributes(props, `option-${option.value}`), {
       children: jsxRuntime.jsx(OptionLabel, Object.assign({
+        "$disabled": option.disabled,
         "$pressed": option.value === value
       }, uiUtils.applyDataAttributes(props, `option-label-${option.label}`), {
         children: option.label

package/package.json

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

package/src/lib/atoms-segmented-control.d.ts

@@ -6,6 +6,7 @@ export declare const SegmentedControl: import("react").ForwardRefExoticComponent
     options: {
         label: string;
         value: string | number;
+        disabled?: boolean | undefined;
     }[];
     errorMessage?: string | undefined;
     fullWidth?: boolean | undefined;

package/src/lib/atoms-segmented-control.styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 /// <reference types="react" />
+import 'styled-components';
 export declare const Option: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $pressed: boolean;
     $hasError: boolean;
@@ -281,6 +282,7 @@ export declare const SegmentedControlWrapper: import("styled-components").IStyle
 }>;
 export declare const OptionLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $pressed: boolean;
+    $disabled: boolean | undefined;
 }>>;
 export declare const LabelError: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLLabelElement> | undefined;

package/src/lib/atoms-segmented-control.type.d.ts

@@ -7,6 +7,7 @@ export type SegmentedControlProps = DefaultProps & {
     options: {
         label: string;
         value: string | number;
+        disabled?: boolean;
     }[];
     errorMessage?: string;
     fullWidth?: boolean;