@shoplflow/base 0.40.6 → 0.41.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
@@ -4168,7 +4168,7 @@ var StyledSelectInputButton = styled6__default.default.div`
4168
4168
  width: 100%;
4169
4169
  background: ${exports.colorTokens.neutral0};
4170
4170
  gap: 4px;
4171
- padding: 4px 4px 4px 12px;
4171
+ padding: ${({ sizeVar }) => sizeVar === "M" ? "4px 4px 4px 12px" : "0 8px"};
4172
4172
  cursor: pointer;
4173
4173
  ${({ disabled }) => disabled && react$1.css`
4174
4174
  background-color: ${exports.colorTokens.neutral100};
@@ -4187,7 +4187,8 @@ var SelectInputButton = (_a) => {
4187
4187
  placeholder,
4188
4188
  label,
4189
4189
  width = "100%",
4190
- rightSource
4190
+ rightSource,
4191
+ sizeVar = "M"
4191
4192
  } = _b, rest = __objRest(_b, [
4192
4193
  "disabled",
4193
4194
  "isSelected",
@@ -4199,7 +4200,8 @@ var SelectInputButton = (_a) => {
4199
4200
  "placeholder",
4200
4201
  "label",
4201
4202
  "width",
4202
- "rightSource"
4203
+ "rightSource",
4204
+ "sizeVar"
4203
4205
  ]);
4204
4206
  const [isHovered, setIsHovered] = React3.useState(false);
4205
4207
  const handleOnClick = (e) => {
@@ -4237,10 +4239,10 @@ var SelectInputButton = (_a) => {
4237
4239
  isFocused: isSelected,
4238
4240
  disabled,
4239
4241
  width,
4240
- minHeight: "40px"
4242
+ height: sizeVar === "M" ? "40px" : "32px"
4241
4243
  }, rest), {
4242
4244
  "data-shoplflow": "SelectInputButton",
4243
- children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { children: [
4245
+ children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { sizeVar, children: [
4244
4246
  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 }),
4245
4247
  /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
4246
4248
  value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: getTextColor(disabled), children: [
package/dist/index.d.cts CHANGED
@@ -1178,7 +1178,7 @@ declare const TextArea: TextAreaComponent;
1178
1178
 
1179
1179
  interface SelectInputButtonProps extends SelectInputButtonOptionProps {
1180
1180
  }
1181
- interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'onClick'>, DisableProps, RightElementProps, SelectedProps {
1181
+ interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'onClick'>, DisableProps, RightElementProps, SizeVariantProps<'S' | 'M'>, SelectedProps {
1182
1182
  width?: string;
1183
1183
  /**
1184
1184
  * Input의 placeholder를 설정합니다.
@@ -1202,7 +1202,7 @@ interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElem
1202
1202
  onClear?: (e: MouseEvent<HTMLButtonElement>) => void;
1203
1203
  }
1204
1204
 
1205
- declare const SelectInputButton: ({ disabled, isSelected, onMouseEnter, onMouseLeave, onClick, onClear, value, placeholder, label, width, rightSource, ...rest }: SelectInputButtonProps) => react_jsx_runtime.JSX.Element;
1205
+ declare const SelectInputButton: ({ disabled, isSelected, onMouseEnter, onMouseLeave, onClick, onClear, value, placeholder, label, width, rightSource, sizeVar, ...rest }: SelectInputButtonProps) => react_jsx_runtime.JSX.Element;
1206
1206
 
1207
1207
  interface MinusBoxProps extends MinusBoxOptionProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'> {
1208
1208
  }
package/dist/index.d.ts CHANGED
@@ -1178,7 +1178,7 @@ declare const TextArea: TextAreaComponent;
1178
1178
 
1179
1179
  interface SelectInputButtonProps extends SelectInputButtonOptionProps {
1180
1180
  }
1181
- interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'onClick'>, DisableProps, RightElementProps, SelectedProps {
1181
+ interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'onClick'>, DisableProps, RightElementProps, SizeVariantProps<'S' | 'M'>, SelectedProps {
1182
1182
  width?: string;
1183
1183
  /**
1184
1184
  * Input의 placeholder를 설정합니다.
@@ -1202,7 +1202,7 @@ interface SelectInputButtonOptionProps extends Omit<HTMLAttributes<HTMLLabelElem
1202
1202
  onClear?: (e: MouseEvent<HTMLButtonElement>) => void;
1203
1203
  }
1204
1204
 
1205
- declare const SelectInputButton: ({ disabled, isSelected, onMouseEnter, onMouseLeave, onClick, onClear, value, placeholder, label, width, rightSource, ...rest }: SelectInputButtonProps) => react_jsx_runtime.JSX.Element;
1205
+ declare const SelectInputButton: ({ disabled, isSelected, onMouseEnter, onMouseLeave, onClick, onClear, value, placeholder, label, width, rightSource, sizeVar, ...rest }: SelectInputButtonProps) => react_jsx_runtime.JSX.Element;
1206
1206
 
1207
1207
  interface MinusBoxProps extends MinusBoxOptionProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'> {
1208
1208
  }
package/dist/index.js CHANGED
@@ -4141,7 +4141,7 @@ var StyledSelectInputButton = styled6.div`
4141
4141
  width: 100%;
4142
4142
  background: ${colorTokens.neutral0};
4143
4143
  gap: 4px;
4144
- padding: 4px 4px 4px 12px;
4144
+ padding: ${({ sizeVar }) => sizeVar === "M" ? "4px 4px 4px 12px" : "0 8px"};
4145
4145
  cursor: pointer;
4146
4146
  ${({ disabled }) => disabled && css`
4147
4147
  background-color: ${colorTokens.neutral100};
@@ -4160,7 +4160,8 @@ var SelectInputButton = (_a) => {
4160
4160
  placeholder,
4161
4161
  label,
4162
4162
  width = "100%",
4163
- rightSource
4163
+ rightSource,
4164
+ sizeVar = "M"
4164
4165
  } = _b, rest = __objRest(_b, [
4165
4166
  "disabled",
4166
4167
  "isSelected",
@@ -4172,7 +4173,8 @@ var SelectInputButton = (_a) => {
4172
4173
  "placeholder",
4173
4174
  "label",
4174
4175
  "width",
4175
- "rightSource"
4176
+ "rightSource",
4177
+ "sizeVar"
4176
4178
  ]);
4177
4179
  const [isHovered, setIsHovered] = useState(false);
4178
4180
  const handleOnClick = (e) => {
@@ -4210,10 +4212,10 @@ var SelectInputButton = (_a) => {
4210
4212
  isFocused: isSelected,
4211
4213
  disabled,
4212
4214
  width,
4213
- minHeight: "40px"
4215
+ height: sizeVar === "M" ? "40px" : "32px"
4214
4216
  }, rest), {
4215
4217
  "data-shoplflow": "SelectInputButton",
4216
- children: /* @__PURE__ */ jsxs(StyledSelectInputButton, { children: [
4218
+ children: /* @__PURE__ */ jsxs(StyledSelectInputButton, { sizeVar, children: [
4217
4219
  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 }),
4218
4220
  /* @__PURE__ */ jsxs(Stack_default.Horizontal, { align: "center", spacing: "spacing04", children: [
4219
4221
  value && value.length > 1 && /* @__PURE__ */ jsxs(Text_default, { typography: "body1_400", color: getTextColor(disabled), children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/base",
3
- "version": "0.40.6",
3
+ "version": "0.41.0",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",
@@ -90,8 +90,8 @@
90
90
  "react-datepicker": "^7.3.0",
91
91
  "react-dom": "^18.2.0",
92
92
  "simplebar-react": "^3.2.6",
93
+ "@shoplflow/shopl-assets": "^0.12.15",
93
94
  "@shoplflow/hada-assets": "^0.1.3",
94
- "@shoplflow/shopl-assets": "^0.12.14",
95
95
  "@shoplflow/utils": "^0.6.5"
96
96
  },
97
97
  "scripts": {