design-zystem 1.0.288 → 1.0.290

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +10 -0
  2. package/dist/index.d.ts +10 -0
  3. package/dist/index.js +13 -1
  4. package/dist/index.mjs +13 -1
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -98,6 +98,8 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
98
98
  overflowY?: string;
99
99
  /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
100
100
  position?: string;
101
+ /** Explicit min-width. `minWidth="0"` lets a flex row shrink below its content size. */
102
+ minWidth?: string;
101
103
  style?: CSSProperties;
102
104
  className?: string;
103
105
  }
@@ -120,8 +122,12 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
120
122
  minWidth?: string;
121
123
  /** Explicit height, wins over `fullHeight`. `height="auto"` beats the default `fit-content` so the column can stretch. */
122
124
  height?: string;
125
+ /** Ceiling height. `maxHeight="none"` removes the default 100% cap; `maxHeight="400px"` creates a scrollable region when paired with `overflowY="auto"`. */
126
+ maxHeight?: string;
123
127
  /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
124
128
  minHeight?: string;
129
+ /** `flex-shrink` factor. `flexShrink="0"` prevents the column from shrinking below its explicit `width`. */
130
+ flexShrink?: string;
125
131
  /** Cross-axis alignment of the column itself, e.g. `stretch` to match the height of its siblings. */
126
132
  alignSelf?: string;
127
133
  /** Horizontal overflow; the column shows overflowing content by default. */
@@ -589,8 +595,12 @@ declare const colors: {
589
595
  readonly badge_blue_bg: "#DBE9FE";
590
596
  readonly badge_green_text: "#17803D";
591
597
  readonly badge_green_bg: "#DCFCE7";
598
+ readonly badge_orange_text: "#C2410C";
599
+ readonly badge_orange_bg: "#FFF7ED";
592
600
  readonly badge_purple_text: "#7230DB";
593
601
  readonly badge_purple_bg: "#EDE9FE";
602
+ readonly badge_red_text: "#F44649";
603
+ readonly badge_red_bg: "#FCDDDE";
594
604
  readonly brown_50: "#EFEBE9";
595
605
  readonly brown_100: "#D7CCC8";
596
606
  readonly brown_300: "#A1887F";
package/dist/index.d.ts CHANGED
@@ -98,6 +98,8 @@ interface RowProps extends HTMLAttributes<HTMLDivElement> {
98
98
  overflowY?: string;
99
99
  /** Positioning scheme; `relative` makes the row the anchor of an absolutely positioned child. */
100
100
  position?: string;
101
+ /** Explicit min-width. `minWidth="0"` lets a flex row shrink below its content size. */
102
+ minWidth?: string;
101
103
  style?: CSSProperties;
102
104
  className?: string;
103
105
  }
@@ -120,8 +122,12 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
120
122
  minWidth?: string;
121
123
  /** Explicit height, wins over `fullHeight`. `height="auto"` beats the default `fit-content` so the column can stretch. */
122
124
  height?: string;
125
+ /** Ceiling height. `maxHeight="none"` removes the default 100% cap; `maxHeight="400px"` creates a scrollable region when paired with `overflowY="auto"`. */
126
+ maxHeight?: string;
123
127
  /** Floor height of a flex child; `minHeight="0"` lets it shrink below its content so an inner area can scroll. */
124
128
  minHeight?: string;
129
+ /** `flex-shrink` factor. `flexShrink="0"` prevents the column from shrinking below its explicit `width`. */
130
+ flexShrink?: string;
125
131
  /** Cross-axis alignment of the column itself, e.g. `stretch` to match the height of its siblings. */
126
132
  alignSelf?: string;
127
133
  /** Horizontal overflow; the column shows overflowing content by default. */
@@ -589,8 +595,12 @@ declare const colors: {
589
595
  readonly badge_blue_bg: "#DBE9FE";
590
596
  readonly badge_green_text: "#17803D";
591
597
  readonly badge_green_bg: "#DCFCE7";
598
+ readonly badge_orange_text: "#C2410C";
599
+ readonly badge_orange_bg: "#FFF7ED";
592
600
  readonly badge_purple_text: "#7230DB";
593
601
  readonly badge_purple_bg: "#EDE9FE";
602
+ readonly badge_red_text: "#F44649";
603
+ readonly badge_red_bg: "#FCDDDE";
594
604
  readonly brown_50: "#EFEBE9";
595
605
  readonly brown_100: "#D7CCC8";
596
606
  readonly brown_300: "#A1887F";
package/dist/index.js CHANGED
@@ -336,8 +336,12 @@ var colors = {
336
336
  badge_blue_bg: "#DBE9FE",
337
337
  badge_green_text: "#17803D",
338
338
  badge_green_bg: "#DCFCE7",
339
+ badge_orange_text: "#C2410C",
340
+ badge_orange_bg: "#FFF7ED",
339
341
  badge_purple_text: "#7230DB",
340
342
  badge_purple_bg: "#EDE9FE",
343
+ badge_red_text: "#F44649",
344
+ badge_red_bg: "#FCDDDE",
341
345
  // BROWN
342
346
  brown_50: "#EFEBE9",
343
347
  brown_100: "#D7CCC8",
@@ -485,6 +489,7 @@ var shouldForwardPropRow = (prop) => ![
485
489
  "fullwidth",
486
490
  "margin",
487
491
  "width",
492
+ "minWidth",
488
493
  "wrap",
489
494
  "backgroundColor",
490
495
  "flex",
@@ -504,6 +509,7 @@ var StyledRow = import_styled_components4.default.div.withConfig({
504
509
  ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
505
510
  ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
506
511
  width: ${(props) => props.width || "100%"};
512
+ ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
507
513
  max-height: ${(props) => props.maxHeight || "100%"};
508
514
  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
509
515
  background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -540,7 +546,9 @@ var shouldForwardPropCol = (prop) => ![
540
546
  "width",
541
547
  "minWidth",
542
548
  "height",
549
+ "maxHeight",
543
550
  "minHeight",
551
+ "flexShrink",
544
552
  "alignSelf",
545
553
  "overflowX",
546
554
  "overflowY",
@@ -567,9 +575,13 @@ var StyledCol = import_styled_components5.default.div.withConfig({
567
575
  ` : ""}
568
576
  ${(props) => props.overflowWrap ? `overflow-wrap: ${props.overflowWrap};` : ""}
569
577
  ${(props) => props.position ? `position: ${props.position};` : ""}
570
- max-height: 100%;
578
+ max-height: ${(props) => {
579
+ var _a;
580
+ return (_a = props.maxHeight) != null ? _a : "100%";
581
+ }};
571
582
  height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
572
583
  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
584
+ ${(props) => props.flexShrink !== void 0 ? `flex-shrink: ${props.flexShrink};` : ""}
573
585
  width: ${(props) => props.width || (props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content")};
574
586
  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
575
587
  ${(props) => props.alignSelf ? `align-self: ${props.alignSelf};` : ""}
package/dist/index.mjs CHANGED
@@ -197,8 +197,12 @@ var colors = {
197
197
  badge_blue_bg: "#DBE9FE",
198
198
  badge_green_text: "#17803D",
199
199
  badge_green_bg: "#DCFCE7",
200
+ badge_orange_text: "#C2410C",
201
+ badge_orange_bg: "#FFF7ED",
200
202
  badge_purple_text: "#7230DB",
201
203
  badge_purple_bg: "#EDE9FE",
204
+ badge_red_text: "#F44649",
205
+ badge_red_bg: "#FCDDDE",
202
206
  // BROWN
203
207
  brown_50: "#EFEBE9",
204
208
  brown_100: "#D7CCC8",
@@ -346,6 +350,7 @@ var shouldForwardPropRow = (prop) => ![
346
350
  "fullwidth",
347
351
  "margin",
348
352
  "width",
353
+ "minWidth",
349
354
  "wrap",
350
355
  "backgroundColor",
351
356
  "flex",
@@ -365,6 +370,7 @@ var StyledRow = styled4.div.withConfig({
365
370
  ${(props) => props.overflowX ? `overflow-x: ${props.overflowX};` : ""}
366
371
  ${(props) => props.overflowY ? `overflow-y: ${props.overflowY};` : ""}
367
372
  width: ${(props) => props.width || "100%"};
373
+ ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
368
374
  max-height: ${(props) => props.maxHeight || "100%"};
369
375
  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
370
376
  background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -401,7 +407,9 @@ var shouldForwardPropCol = (prop) => ![
401
407
  "width",
402
408
  "minWidth",
403
409
  "height",
410
+ "maxHeight",
404
411
  "minHeight",
412
+ "flexShrink",
405
413
  "alignSelf",
406
414
  "overflowX",
407
415
  "overflowY",
@@ -428,9 +436,13 @@ var StyledCol = styled5.div.withConfig({
428
436
  ` : ""}
429
437
  ${(props) => props.overflowWrap ? `overflow-wrap: ${props.overflowWrap};` : ""}
430
438
  ${(props) => props.position ? `position: ${props.position};` : ""}
431
- max-height: 100%;
439
+ max-height: ${(props) => {
440
+ var _a;
441
+ return (_a = props.maxHeight) != null ? _a : "100%";
442
+ }};
432
443
  height: ${(props) => props.height || (props.fullHeight ? "100%" : "fit-content")};
433
444
  ${(props) => props.minHeight ? `min-height: ${props.minHeight};` : ""}
445
+ ${(props) => props.flexShrink !== void 0 ? `flex-shrink: ${props.flexShrink};` : ""}
434
446
  width: ${(props) => props.width || (props.fullWidth ? "100%" : props.size ? `${props.size / 12 * 100}%` : "fit-content")};
435
447
  ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""}
436
448
  ${(props) => props.alignSelf ? `align-self: ${props.alignSelf};` : ""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.288",
3
+ "version": "1.0.290",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",