design-zystem 1.0.284 → 1.0.285
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.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +7 -1
- package/dist/index.mjs +7 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -34,6 +34,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
|
34
34
|
border?: string;
|
|
35
35
|
/** Colored left accent bar (status/score encoding), painted over the box border. */
|
|
36
36
|
borderColor?: string;
|
|
37
|
+
/** Colored halo around the box, for transient states (unsaved, selected, in error). */
|
|
38
|
+
shadowColor?: string;
|
|
37
39
|
style?: CSSProperties;
|
|
38
40
|
}
|
|
39
41
|
declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -34,6 +34,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
|
34
34
|
border?: string;
|
|
35
35
|
/** Colored left accent bar (status/score encoding), painted over the box border. */
|
|
36
36
|
borderColor?: string;
|
|
37
|
+
/** Colored halo around the box, for transient states (unsaved, selected, in error). */
|
|
38
|
+
shadowColor?: string;
|
|
37
39
|
style?: CSSProperties;
|
|
38
40
|
}
|
|
39
41
|
declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -375,6 +375,7 @@ var shouldForwardProp2 = (prop) => ![
|
|
|
375
375
|
"borderRadius",
|
|
376
376
|
"border",
|
|
377
377
|
"borderColor",
|
|
378
|
+
"shadowColor",
|
|
378
379
|
"height"
|
|
379
380
|
].includes(prop);
|
|
380
381
|
var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
|
|
@@ -388,7 +389,12 @@ var StyledBox = import_styled_components2.default.div.withConfig({ shouldForward
|
|
|
388
389
|
|
|
389
390
|
border-radius: ${(props) => props.borderRadius || "8px"};
|
|
390
391
|
|
|
391
|
-
box-shadow: ${(props) =>
|
|
392
|
+
box-shadow: ${(props) => {
|
|
393
|
+
const base = props.hasShadow === false ? "" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)";
|
|
394
|
+
if (!props.shadowColor) return base || "none";
|
|
395
|
+
const halo = `0 0 0 4px ${colors[props.shadowColor] || props.shadowColor}`;
|
|
396
|
+
return base ? `${halo}, ${base}` : halo;
|
|
397
|
+
}};
|
|
392
398
|
|
|
393
399
|
width: ${(props) => props.fullWidth ? "100%" : "auto"};
|
|
394
400
|
min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
|
package/dist/index.mjs
CHANGED
|
@@ -236,6 +236,7 @@ var shouldForwardProp2 = (prop) => ![
|
|
|
236
236
|
"borderRadius",
|
|
237
237
|
"border",
|
|
238
238
|
"borderColor",
|
|
239
|
+
"shadowColor",
|
|
239
240
|
"height"
|
|
240
241
|
].includes(prop);
|
|
241
242
|
var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
|
|
@@ -249,7 +250,12 @@ var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 }
|
|
|
249
250
|
|
|
250
251
|
border-radius: ${(props) => props.borderRadius || "8px"};
|
|
251
252
|
|
|
252
|
-
box-shadow: ${(props) =>
|
|
253
|
+
box-shadow: ${(props) => {
|
|
254
|
+
const base = props.hasShadow === false ? "" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)";
|
|
255
|
+
if (!props.shadowColor) return base || "none";
|
|
256
|
+
const halo = `0 0 0 4px ${colors[props.shadowColor] || props.shadowColor}`;
|
|
257
|
+
return base ? `${halo}, ${base}` : halo;
|
|
258
|
+
}};
|
|
253
259
|
|
|
254
260
|
width: ${(props) => props.fullWidth ? "100%" : "auto"};
|
|
255
261
|
min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
|