@shoplflow/base 0.42.14 → 0.42.16
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 +30 -9
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +30 -9
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -2164,7 +2164,7 @@ var MinusButton = React3.forwardRef((_a, ref) => {
|
|
|
2164
2164
|
});
|
|
2165
2165
|
MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
|
|
2166
2166
|
exports.MinusButton = MinusButton;
|
|
2167
|
-
var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
2167
|
+
var getStylesByStyleVariant = (styleVariant, isSelected, isHovered, readOnly) => {
|
|
2168
2168
|
const domain = exports.getDomain();
|
|
2169
2169
|
const primaryColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary300;
|
|
2170
2170
|
const primaryHoverColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary400;
|
|
@@ -2177,7 +2177,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2177
2177
|
& > svg > path {
|
|
2178
2178
|
fill: ${exports.colorTokens.neutral0};
|
|
2179
2179
|
}
|
|
2180
|
-
${isHovered && react$1.css`
|
|
2180
|
+
${isHovered && !readOnly && react$1.css`
|
|
2181
2181
|
border: 1.5px solid ${primaryHoverColor};
|
|
2182
2182
|
background: ${primaryHoverColor};
|
|
2183
2183
|
`}
|
|
@@ -2187,7 +2187,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2187
2187
|
background: ${exports.colorTokens.neutral200};
|
|
2188
2188
|
border: 1.5px solid ${exports.colorTokens.neutral200};
|
|
2189
2189
|
border-radius: 4px;
|
|
2190
|
-
${isHovered && react$1.css`
|
|
2190
|
+
${isHovered && !readOnly && react$1.css`
|
|
2191
2191
|
border: 1.5px solid ${exports.colorTokens.neutral300};
|
|
2192
2192
|
background: ${exports.colorTokens.neutral300};
|
|
2193
2193
|
`}
|
|
@@ -2205,7 +2205,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2205
2205
|
& > svg > path {
|
|
2206
2206
|
fill: ${exports.colorTokens.primary300};
|
|
2207
2207
|
}
|
|
2208
|
-
${isHovered && react$1.css`
|
|
2208
|
+
${isHovered && !readOnly && react$1.css`
|
|
2209
2209
|
border: 1.5px solid ${exports.colorTokens.primary400};
|
|
2210
2210
|
& > svg > path {
|
|
2211
2211
|
fill: ${exports.colorTokens.primary400};
|
|
@@ -2220,7 +2220,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2220
2220
|
& > svg > path {
|
|
2221
2221
|
fill: ${exports.colorTokens.neutral200};
|
|
2222
2222
|
}
|
|
2223
|
-
${isHovered && react$1.css`
|
|
2223
|
+
${isHovered && !readOnly && react$1.css`
|
|
2224
2224
|
border: 1.5px solid ${exports.colorTokens.neutral300};
|
|
2225
2225
|
& > svg > path {
|
|
2226
2226
|
fill: ${exports.colorTokens.neutral300};
|
|
@@ -2249,8 +2249,8 @@ var StyledCheckbox = styled6__default.default.label`
|
|
|
2249
2249
|
background: ${exports.colorTokens.neutral200};
|
|
2250
2250
|
border-radius: 4px;
|
|
2251
2251
|
box-sizing: border-box;
|
|
2252
|
-
cursor: pointer;
|
|
2253
|
-
${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
|
|
2252
|
+
cursor: ${({ readOnly }) => readOnly ? "default" : "pointer"};
|
|
2253
|
+
${({ styleVar, isSelected, isHovered, readOnly }) => getStylesByStyleVariant(styleVar, isSelected, isHovered, readOnly)};
|
|
2254
2254
|
${({ disabled }) => getDisabledStyle(disabled)}
|
|
2255
2255
|
`;
|
|
2256
2256
|
var Container3 = styled6__default.default.button`
|
|
@@ -2265,7 +2265,27 @@ var Container3 = styled6__default.default.button`
|
|
|
2265
2265
|
exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
|
|
2266
2266
|
var Checkbox = React3.forwardRef(
|
|
2267
2267
|
(_a, ref) => {
|
|
2268
|
-
var _b = _a, {
|
|
2268
|
+
var _b = _a, {
|
|
2269
|
+
defaultSelected,
|
|
2270
|
+
isSelected,
|
|
2271
|
+
disabled,
|
|
2272
|
+
onMouseEnter,
|
|
2273
|
+
onClick,
|
|
2274
|
+
onMouseLeave,
|
|
2275
|
+
readOnly,
|
|
2276
|
+
styleVar = "PRIMARY",
|
|
2277
|
+
id
|
|
2278
|
+
} = _b, rest = __objRest(_b, [
|
|
2279
|
+
"defaultSelected",
|
|
2280
|
+
"isSelected",
|
|
2281
|
+
"disabled",
|
|
2282
|
+
"onMouseEnter",
|
|
2283
|
+
"onClick",
|
|
2284
|
+
"onMouseLeave",
|
|
2285
|
+
"readOnly",
|
|
2286
|
+
"styleVar",
|
|
2287
|
+
"id"
|
|
2288
|
+
]);
|
|
2269
2289
|
const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
|
|
2270
2290
|
const [isHovered, toggleHovered] = React3.useState(false);
|
|
2271
2291
|
const handleMouseLeave = (e) => {
|
|
@@ -2293,7 +2313,7 @@ var Checkbox = React3.forwardRef(
|
|
|
2293
2313
|
type: "button",
|
|
2294
2314
|
"data-shoplflow": "Checkbox",
|
|
2295
2315
|
children: [
|
|
2296
|
-
/* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
|
|
2316
|
+
/* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id, readOnly }, rest), { ref })),
|
|
2297
2317
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2298
2318
|
StyledCheckbox,
|
|
2299
2319
|
{
|
|
@@ -2301,6 +2321,7 @@ var Checkbox = React3.forwardRef(
|
|
|
2301
2321
|
htmlFor: id,
|
|
2302
2322
|
isHovered,
|
|
2303
2323
|
isSelected: selected,
|
|
2324
|
+
readOnly,
|
|
2304
2325
|
disabled,
|
|
2305
2326
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2306
2327
|
"path",
|
package/dist/index.d.cts
CHANGED
|
@@ -1416,7 +1416,7 @@ declare type DayCalendarType = {
|
|
|
1416
1416
|
handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
|
|
1417
1417
|
};
|
|
1418
1418
|
declare type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
|
|
1419
|
-
declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className'> & DayDatepickerOptionProps;
|
|
1419
|
+
declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className' | 'onMonthChange' | 'onYearChange'> & DayDatepickerOptionProps;
|
|
1420
1420
|
declare type DayDatepickerOptionProps = {
|
|
1421
1421
|
/**
|
|
1422
1422
|
* 캘린더 타입
|
package/dist/index.d.ts
CHANGED
|
@@ -1416,7 +1416,7 @@ declare type DayCalendarType = {
|
|
|
1416
1416
|
handleDayRangeChange: (dates: [Date | null, Date | null]) => void;
|
|
1417
1417
|
};
|
|
1418
1418
|
declare type DayDatepickerSizeVariantType = $Values<typeof DayDatepickerSizeVariants>;
|
|
1419
|
-
declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className'> & DayDatepickerOptionProps;
|
|
1419
|
+
declare type DayDatepickerProps = Pick<DatePickerProps, 'highlightDates' | 'startDate' | 'endDate' | 'locale' | 'selectedDates' | 'selected' | 'children' | 'excludeDates' | 'calendarStartDay' | 'fixedHeight' | 'className' | 'onMonthChange' | 'onYearChange'> & DayDatepickerOptionProps;
|
|
1420
1420
|
declare type DayDatepickerOptionProps = {
|
|
1421
1421
|
/**
|
|
1422
1422
|
* 캘린더 타입
|
package/dist/index.js
CHANGED
|
@@ -2137,7 +2137,7 @@ var MinusButton = forwardRef((_a, ref) => {
|
|
|
2137
2137
|
});
|
|
2138
2138
|
MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
|
|
2139
2139
|
var MinusButton_default = MinusButton;
|
|
2140
|
-
var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
2140
|
+
var getStylesByStyleVariant = (styleVariant, isSelected, isHovered, readOnly) => {
|
|
2141
2141
|
const domain = getDomain();
|
|
2142
2142
|
const primaryColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary300;
|
|
2143
2143
|
const primaryHoverColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary400;
|
|
@@ -2150,7 +2150,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2150
2150
|
& > svg > path {
|
|
2151
2151
|
fill: ${colorTokens.neutral0};
|
|
2152
2152
|
}
|
|
2153
|
-
${isHovered && css`
|
|
2153
|
+
${isHovered && !readOnly && css`
|
|
2154
2154
|
border: 1.5px solid ${primaryHoverColor};
|
|
2155
2155
|
background: ${primaryHoverColor};
|
|
2156
2156
|
`}
|
|
@@ -2160,7 +2160,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2160
2160
|
background: ${colorTokens.neutral200};
|
|
2161
2161
|
border: 1.5px solid ${colorTokens.neutral200};
|
|
2162
2162
|
border-radius: 4px;
|
|
2163
|
-
${isHovered && css`
|
|
2163
|
+
${isHovered && !readOnly && css`
|
|
2164
2164
|
border: 1.5px solid ${colorTokens.neutral300};
|
|
2165
2165
|
background: ${colorTokens.neutral300};
|
|
2166
2166
|
`}
|
|
@@ -2178,7 +2178,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2178
2178
|
& > svg > path {
|
|
2179
2179
|
fill: ${colorTokens.primary300};
|
|
2180
2180
|
}
|
|
2181
|
-
${isHovered && css`
|
|
2181
|
+
${isHovered && !readOnly && css`
|
|
2182
2182
|
border: 1.5px solid ${colorTokens.primary400};
|
|
2183
2183
|
& > svg > path {
|
|
2184
2184
|
fill: ${colorTokens.primary400};
|
|
@@ -2193,7 +2193,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
|
|
|
2193
2193
|
& > svg > path {
|
|
2194
2194
|
fill: ${colorTokens.neutral200};
|
|
2195
2195
|
}
|
|
2196
|
-
${isHovered && css`
|
|
2196
|
+
${isHovered && !readOnly && css`
|
|
2197
2197
|
border: 1.5px solid ${colorTokens.neutral300};
|
|
2198
2198
|
& > svg > path {
|
|
2199
2199
|
fill: ${colorTokens.neutral300};
|
|
@@ -2222,8 +2222,8 @@ var StyledCheckbox = styled6.label`
|
|
|
2222
2222
|
background: ${colorTokens.neutral200};
|
|
2223
2223
|
border-radius: 4px;
|
|
2224
2224
|
box-sizing: border-box;
|
|
2225
|
-
cursor: pointer;
|
|
2226
|
-
${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
|
|
2225
|
+
cursor: ${({ readOnly }) => readOnly ? "default" : "pointer"};
|
|
2226
|
+
${({ styleVar, isSelected, isHovered, readOnly }) => getStylesByStyleVariant(styleVar, isSelected, isHovered, readOnly)};
|
|
2227
2227
|
${({ disabled }) => getDisabledStyle(disabled)}
|
|
2228
2228
|
`;
|
|
2229
2229
|
var Container3 = styled6.button`
|
|
@@ -2238,7 +2238,27 @@ var Container3 = styled6.button`
|
|
|
2238
2238
|
var CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
|
|
2239
2239
|
var Checkbox = forwardRef(
|
|
2240
2240
|
(_a, ref) => {
|
|
2241
|
-
var _b = _a, {
|
|
2241
|
+
var _b = _a, {
|
|
2242
|
+
defaultSelected,
|
|
2243
|
+
isSelected,
|
|
2244
|
+
disabled,
|
|
2245
|
+
onMouseEnter,
|
|
2246
|
+
onClick,
|
|
2247
|
+
onMouseLeave,
|
|
2248
|
+
readOnly,
|
|
2249
|
+
styleVar = "PRIMARY",
|
|
2250
|
+
id
|
|
2251
|
+
} = _b, rest = __objRest(_b, [
|
|
2252
|
+
"defaultSelected",
|
|
2253
|
+
"isSelected",
|
|
2254
|
+
"disabled",
|
|
2255
|
+
"onMouseEnter",
|
|
2256
|
+
"onClick",
|
|
2257
|
+
"onMouseLeave",
|
|
2258
|
+
"readOnly",
|
|
2259
|
+
"styleVar",
|
|
2260
|
+
"id"
|
|
2261
|
+
]);
|
|
2242
2262
|
const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
|
|
2243
2263
|
const [isHovered, toggleHovered] = useState(false);
|
|
2244
2264
|
const handleMouseLeave = (e) => {
|
|
@@ -2266,7 +2286,7 @@ var Checkbox = forwardRef(
|
|
|
2266
2286
|
type: "button",
|
|
2267
2287
|
"data-shoplflow": "Checkbox",
|
|
2268
2288
|
children: [
|
|
2269
|
-
/* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
|
|
2289
|
+
/* @__PURE__ */ jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id, readOnly }, rest), { ref })),
|
|
2270
2290
|
/* @__PURE__ */ jsx(
|
|
2271
2291
|
StyledCheckbox,
|
|
2272
2292
|
{
|
|
@@ -2274,6 +2294,7 @@ var Checkbox = forwardRef(
|
|
|
2274
2294
|
htmlFor: id,
|
|
2275
2295
|
isHovered,
|
|
2276
2296
|
isSelected: selected,
|
|
2297
|
+
readOnly,
|
|
2277
2298
|
disabled,
|
|
2278
2299
|
children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsx(
|
|
2279
2300
|
"path",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/base",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.16",
|
|
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.23",
|
|
94
93
|
"@shoplflow/hada-assets": "^0.1.8",
|
|
94
|
+
"@shoplflow/shopl-assets": "^0.12.23",
|
|
95
95
|
"@shoplflow/utils": "^0.7.0"
|
|
96
96
|
},
|
|
97
97
|
"scripts": {
|