design-zystem 1.0.264 → 1.0.266

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 +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +26 -7
  4. package/dist/index.mjs +26 -7
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -911,6 +911,11 @@ interface BannerAction {
911
911
  icon?: string;
912
912
  onClick?: () => void;
913
913
  }
914
+ interface BannerToggle {
915
+ checked: boolean;
916
+ onChange: (checked: boolean) => void;
917
+ disabled?: boolean;
918
+ }
914
919
  interface BannerProps {
915
920
  variant?: 'blue' | 'red';
916
921
  badge?: string;
@@ -918,8 +923,9 @@ interface BannerProps {
918
923
  subtitle?: string;
919
924
  message?: string;
920
925
  action?: BannerAction;
926
+ toggle?: BannerToggle;
921
927
  }
922
- declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
928
+ declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
923
929
 
924
930
  interface TooltipProps {
925
931
  children?: ReactNode;
package/dist/index.d.ts CHANGED
@@ -911,6 +911,11 @@ interface BannerAction {
911
911
  icon?: string;
912
912
  onClick?: () => void;
913
913
  }
914
+ interface BannerToggle {
915
+ checked: boolean;
916
+ onChange: (checked: boolean) => void;
917
+ disabled?: boolean;
918
+ }
914
919
  interface BannerProps {
915
920
  variant?: 'blue' | 'red';
916
921
  badge?: string;
@@ -918,8 +923,9 @@ interface BannerProps {
918
923
  subtitle?: string;
919
924
  message?: string;
920
925
  action?: BannerAction;
926
+ toggle?: BannerToggle;
921
927
  }
922
- declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
928
+ declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
923
929
 
924
930
  interface TooltipProps {
925
931
  children?: ReactNode;
package/dist/index.js CHANGED
@@ -633,7 +633,7 @@ var shouldForwardProp3 = (prop) => ![
633
633
  ].includes(prop);
634
634
  var StyledIcon = import_styled_components6.default.i.withConfig({ shouldForwardProp: shouldForwardProp3 })`
635
635
  font-size: ${(props) => textSizes2[props.size] || props.size || "1em"};
636
- color: ${(props) => colors[props.color] || props.color || "inherit"};
636
+ color: ${(props) => colors[props.color] || props.color || colors.grey_600};
637
637
  margin: ${(props) => props.margin || 0};
638
638
  padding: ${(props) => props.padding || 0};
639
639
  width: ${(props) => props.width || "auto"};
@@ -5188,14 +5188,16 @@ var variantStyles = {
5188
5188
  borderColor: "#BEDBFF",
5189
5189
  badgeBackground: colors.badge_blue_bg,
5190
5190
  badgeColor: colors.badge_blue_text,
5191
- action: "blue_950"
5191
+ action: "blue_950",
5192
+ switchColor: colors.blue_950
5192
5193
  },
5193
5194
  red: {
5194
5195
  background: "rgba(252, 221, 222, 0.4)",
5195
5196
  borderColor: "#FFD2D2",
5196
5197
  badgeBackground: "#FCDDDE",
5197
5198
  badgeColor: colors.red_950,
5198
- action: "red_950"
5199
+ action: "red_950",
5200
+ switchColor: colors.red_950
5199
5201
  }
5200
5202
  };
5201
5203
  var StyledBanner = import_styled_components45.default.div`
@@ -5227,7 +5229,8 @@ var Banner = ({
5227
5229
  title,
5228
5230
  subtitle,
5229
5231
  message,
5230
- action
5232
+ action,
5233
+ toggle
5231
5234
  }) => {
5232
5235
  const style2 = variantStyles[variant];
5233
5236
  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
@@ -5249,11 +5252,27 @@ var Banner = ({
5249
5252
  children: badge
5250
5253
  }
5251
5254
  ),
5252
- title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", weight: "700", children: title })
5255
+ title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5256
+ Text,
5257
+ {
5258
+ size: "s",
5259
+ weight: "700",
5260
+ variant: toggle ? style2.action : void 0,
5261
+ children: title
5262
+ }
5263
+ )
5253
5264
  ] }),
5254
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", children: subtitle })
5265
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
5255
5266
  ] }) }),
5256
- action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5267
+ toggle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5268
+ Switch,
5269
+ {
5270
+ checked: toggle.checked,
5271
+ onChange: toggle.onChange,
5272
+ disabled: toggle.disabled,
5273
+ color: style2.switchColor
5274
+ }
5275
+ ) : action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5257
5276
  Button,
5258
5277
  {
5259
5278
  outline: true,
package/dist/index.mjs CHANGED
@@ -497,7 +497,7 @@ var shouldForwardProp3 = (prop) => ![
497
497
  ].includes(prop);
498
498
  var StyledIcon = styled6.i.withConfig({ shouldForwardProp: shouldForwardProp3 })`
499
499
  font-size: ${(props) => textSizes2[props.size] || props.size || "1em"};
500
- color: ${(props) => colors[props.color] || props.color || "inherit"};
500
+ color: ${(props) => colors[props.color] || props.color || colors.grey_600};
501
501
  margin: ${(props) => props.margin || 0};
502
502
  padding: ${(props) => props.padding || 0};
503
503
  width: ${(props) => props.width || "auto"};
@@ -5072,14 +5072,16 @@ var variantStyles = {
5072
5072
  borderColor: "#BEDBFF",
5073
5073
  badgeBackground: colors.badge_blue_bg,
5074
5074
  badgeColor: colors.badge_blue_text,
5075
- action: "blue_950"
5075
+ action: "blue_950",
5076
+ switchColor: colors.blue_950
5076
5077
  },
5077
5078
  red: {
5078
5079
  background: "rgba(252, 221, 222, 0.4)",
5079
5080
  borderColor: "#FFD2D2",
5080
5081
  badgeBackground: "#FCDDDE",
5081
5082
  badgeColor: colors.red_950,
5082
- action: "red_950"
5083
+ action: "red_950",
5084
+ switchColor: colors.red_950
5083
5085
  }
5084
5086
  };
5085
5087
  var StyledBanner = styled45.div`
@@ -5111,7 +5113,8 @@ var Banner = ({
5111
5113
  title,
5112
5114
  subtitle,
5113
5115
  message,
5114
- action
5116
+ action,
5117
+ toggle
5115
5118
  }) => {
5116
5119
  const style2 = variantStyles[variant];
5117
5120
  return /* @__PURE__ */ jsxs28(
@@ -5133,11 +5136,27 @@ var Banner = ({
5133
5136
  children: badge
5134
5137
  }
5135
5138
  ),
5136
- title && /* @__PURE__ */ jsx54(Text, { size: "s", weight: "700", children: title })
5139
+ title && /* @__PURE__ */ jsx54(
5140
+ Text,
5141
+ {
5142
+ size: "s",
5143
+ weight: "700",
5144
+ variant: toggle ? style2.action : void 0,
5145
+ children: title
5146
+ }
5147
+ )
5137
5148
  ] }),
5138
- subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", children: subtitle })
5149
+ subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
5139
5150
  ] }) }),
5140
- action && /* @__PURE__ */ jsx54(
5151
+ toggle ? /* @__PURE__ */ jsx54(
5152
+ Switch,
5153
+ {
5154
+ checked: toggle.checked,
5155
+ onChange: toggle.onChange,
5156
+ disabled: toggle.disabled,
5157
+ color: style2.switchColor
5158
+ }
5159
+ ) : action && /* @__PURE__ */ jsx54(
5141
5160
  Button,
5142
5161
  {
5143
5162
  outline: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.264",
3
+ "version": "1.0.266",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",