@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 +20 -4
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +20 -4
- package/package.json +2 -2
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:
|
|
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
|
|
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
package/dist/index.d.ts
CHANGED
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:
|
|
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
|
|
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.
|
|
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.
|
|
94
|
+
"@shoplflow/shopl-assets": "^0.12.0",
|
|
95
95
|
"@shoplflow/utils": "^0.6.5"
|
|
96
96
|
},
|
|
97
97
|
"scripts": {
|