@shoplflow/base 0.32.46 → 0.33.0

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/dist/index.cjs CHANGED
@@ -2896,8 +2896,8 @@ var getDropdownStyleBySizeVar = (size2) => {
2896
2896
  var getDisabledStyle2 = (disabled) => {
2897
2897
  if (disabled) {
2898
2898
  return react$1.css`
2899
- opacity: 50%;
2900
2899
  cursor: not-allowed;
2900
+ background: ${exports.colorTokens.neutral100};
2901
2901
  `;
2902
2902
  }
2903
2903
  };
@@ -3833,6 +3833,7 @@ var StyledInputButton = styled6__default.default.div`
3833
3833
  ${({ disabled }) => disabled && react$1.css`
3834
3834
  background-color: ${exports.colorTokens.neutral100};
3835
3835
  cursor: not-allowed;
3836
+ color: ${exports.colorTokens.neutral350};
3836
3837
  `}
3837
3838
  `;
3838
3839
  var StyledInputButtonContent = styled6__default.default.input`
@@ -4145,6 +4146,9 @@ var SelectInputButton = (_a) => {
4145
4146
  setIsHovered(false);
4146
4147
  onMouseLeave && onMouseLeave(e);
4147
4148
  };
4149
+ const getTextColor = (disabled2) => {
4150
+ return disabled2 ? "neutral350" : "neutral700";
4151
+ };
4148
4152
  return /* @__PURE__ */ jsxRuntime.jsx(
4149
4153
  InputWrapper,
4150
4154
  __spreadProps(__spreadValues({
@@ -4159,9 +4163,9 @@ var SelectInputButton = (_a) => {
4159
4163
  }, rest), {
4160
4164
  "data-shoplflow": "SelectInputButton",
4161
4165
  children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { children: [
4162
- value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4166
+ value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: getTextColor(disabled), children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4163
4167
  /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
4164
- value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
4168
+ value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: getTextColor(disabled), children: [
4165
4169
  "+",
4166
4170
  value.length - 1
4167
4171
  ] }),
@@ -4625,6 +4629,12 @@ var Pagination = (_a) => {
4625
4629
  Pagination.SizeSelector = PaginationSizeSelector_default;
4626
4630
  exports.Pagination = Pagination;
4627
4631
  var getLabelStyleByStatus = (selected, disabled) => {
4632
+ if (disabled && selected) {
4633
+ return react$1.css`
4634
+ background-color: ${exports.colorTokens.neutral0};
4635
+ cursor: not-allowed;
4636
+ `;
4637
+ }
4628
4638
  if (disabled) {
4629
4639
  return react$1.css`
4630
4640
  cursor: not-allowed;
@@ -4731,6 +4741,12 @@ var ToggleInnerRadio = React3.forwardRef(
4731
4741
  if (selectedValue && selectedValue === value) {
4732
4742
  selected = true;
4733
4743
  }
4744
+ const getLabelColor = ({ selected: selected2, disabled: disabled2 }) => {
4745
+ if (selected2) {
4746
+ return disabled2 ? "neutral400" : "neutral700";
4747
+ }
4748
+ return "neutral500";
4749
+ };
4734
4750
  return /* @__PURE__ */ jsxRuntime.jsxs(StyledToggleInner, { disabled, type: "button", children: [
4735
4751
  /* @__PURE__ */ jsxRuntime.jsx(
4736
4752
  StyledToggleInnerInput,
@@ -4759,7 +4775,7 @@ var ToggleInnerRadio = React3.forwardRef(
4759
4775
  exports.Text,
4760
4776
  {
4761
4777
  lineClamp: 1,
4762
- color: selected ? "neutral700" : "neutral500",
4778
+ color: getLabelColor({ selected, disabled: Boolean(disabled) }),
4763
4779
  wordBreak: "break-all",
4764
4780
  typography: selected ? "body2_500" : "body2_400",
4765
4781
  children: label
package/dist/index.d.cts CHANGED
@@ -934,6 +934,7 @@ interface DropdownOptionProps {
934
934
  */
935
935
  option?: DropdownOptionVariantType;
936
936
  width?: CSSProperties['width'];
937
+ disabled?: boolean;
937
938
  }
938
939
  interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
939
940
  /**
package/dist/index.d.ts CHANGED
@@ -934,6 +934,7 @@ interface DropdownOptionProps {
934
934
  */
935
935
  option?: DropdownOptionVariantType;
936
936
  width?: CSSProperties['width'];
937
+ disabled?: boolean;
937
938
  }
938
939
  interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
939
940
  /**
package/dist/index.js CHANGED
@@ -2869,8 +2869,8 @@ var getDropdownStyleBySizeVar = (size2) => {
2869
2869
  var getDisabledStyle2 = (disabled) => {
2870
2870
  if (disabled) {
2871
2871
  return css`
2872
- opacity: 50%;
2873
2872
  cursor: not-allowed;
2873
+ background: ${colorTokens.neutral100};
2874
2874
  `;
2875
2875
  }
2876
2876
  };
@@ -3806,6 +3806,7 @@ var StyledInputButton = styled6.div`
3806
3806
  ${({ disabled }) => disabled && css`
3807
3807
  background-color: ${colorTokens.neutral100};
3808
3808
  cursor: not-allowed;
3809
+ color: ${colorTokens.neutral350};
3809
3810
  `}
3810
3811
  `;
3811
3812
  var StyledInputButtonContent = styled6.input`
@@ -4118,6 +4119,9 @@ var SelectInputButton = (_a) => {
4118
4119
  setIsHovered(false);
4119
4120
  onMouseLeave && onMouseLeave(e);
4120
4121
  };
4122
+ const getTextColor = (disabled2) => {
4123
+ return disabled2 ? "neutral350" : "neutral700";
4124
+ };
4121
4125
  return /* @__PURE__ */ jsx(
4122
4126
  InputWrapper,
4123
4127
  __spreadProps(__spreadValues({
@@ -4132,9 +4136,9 @@ var SelectInputButton = (_a) => {
4132
4136
  }, rest), {
4133
4137
  "data-shoplflow": "SelectInputButton",
4134
4138
  children: /* @__PURE__ */ jsxs(StyledSelectInputButton, { children: [
4135
- value && value.length > 0 && label ? /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, children: value[0][label] }) : /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4139
+ value && value.length > 0 && label ? /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: getTextColor(disabled), children: value[0][label] }) : /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4136
4140
  /* @__PURE__ */ jsxs(Stack_default.Horizontal, { align: "center", spacing: "spacing04", children: [
4137
- value && value.length > 1 && /* @__PURE__ */ jsxs(Text_default, { typography: "body1_400", color: "neutral700", children: [
4141
+ value && value.length > 1 && /* @__PURE__ */ jsxs(Text_default, { typography: "body1_400", color: getTextColor(disabled), children: [
4138
4142
  "+",
4139
4143
  value.length - 1
4140
4144
  ] }),
@@ -4598,6 +4602,12 @@ var Pagination = (_a) => {
4598
4602
  Pagination.SizeSelector = PaginationSizeSelector_default;
4599
4603
  var Pagination_default = Pagination;
4600
4604
  var getLabelStyleByStatus = (selected, disabled) => {
4605
+ if (disabled && selected) {
4606
+ return css`
4607
+ background-color: ${colorTokens.neutral0};
4608
+ cursor: not-allowed;
4609
+ `;
4610
+ }
4601
4611
  if (disabled) {
4602
4612
  return css`
4603
4613
  cursor: not-allowed;
@@ -4704,6 +4714,12 @@ var ToggleInnerRadio = forwardRef(
4704
4714
  if (selectedValue && selectedValue === value) {
4705
4715
  selected = true;
4706
4716
  }
4717
+ const getLabelColor = ({ selected: selected2, disabled: disabled2 }) => {
4718
+ if (selected2) {
4719
+ return disabled2 ? "neutral400" : "neutral700";
4720
+ }
4721
+ return "neutral500";
4722
+ };
4707
4723
  return /* @__PURE__ */ jsxs(StyledToggleInner, { disabled, type: "button", children: [
4708
4724
  /* @__PURE__ */ jsx(
4709
4725
  StyledToggleInnerInput,
@@ -4732,7 +4748,7 @@ var ToggleInnerRadio = forwardRef(
4732
4748
  Text_default,
4733
4749
  {
4734
4750
  lineClamp: 1,
4735
- color: selected ? "neutral700" : "neutral500",
4751
+ color: getLabelColor({ selected, disabled: Boolean(disabled) }),
4736
4752
  wordBreak: "break-all",
4737
4753
  typography: selected ? "body2_500" : "body2_400",
4738
4754
  children: label
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/base",
3
- "version": "0.32.46",
3
+ "version": "0.33.0",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",
@@ -91,7 +91,7 @@
91
91
  "react-dom": "^18.2.0",
92
92
  "simplebar-react": "^3.2.6",
93
93
  "@shoplflow/hada-assets": "^0.1.3",
94
- "@shoplflow/shopl-assets": "^0.11.5",
94
+ "@shoplflow/shopl-assets": "^0.12.0",
95
95
  "@shoplflow/utils": "^0.6.5"
96
96
  },
97
97
  "scripts": {