design-zystem 1.0.265 → 1.0.267

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 +8 -1
  2. package/dist/index.d.ts +8 -1
  3. package/dist/index.js +27 -6
  4. package/dist/index.mjs +27 -6
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -248,6 +248,7 @@ interface BubbleProps {
248
248
  padding?: string;
249
249
  maxChars?: number;
250
250
  borderRadius?: string;
251
+ boxShadow?: string;
251
252
  width?: string;
252
253
  style?: CSSProperties;
253
254
  onClick?: () => void;
@@ -911,6 +912,11 @@ interface BannerAction {
911
912
  icon?: string;
912
913
  onClick?: () => void;
913
914
  }
915
+ interface BannerToggle {
916
+ checked: boolean;
917
+ onChange: (checked: boolean) => void;
918
+ disabled?: boolean;
919
+ }
914
920
  interface BannerProps {
915
921
  variant?: 'blue' | 'red';
916
922
  badge?: string;
@@ -918,8 +924,9 @@ interface BannerProps {
918
924
  subtitle?: string;
919
925
  message?: string;
920
926
  action?: BannerAction;
927
+ toggle?: BannerToggle;
921
928
  }
922
- declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
929
+ declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
923
930
 
924
931
  interface TooltipProps {
925
932
  children?: ReactNode;
package/dist/index.d.ts CHANGED
@@ -248,6 +248,7 @@ interface BubbleProps {
248
248
  padding?: string;
249
249
  maxChars?: number;
250
250
  borderRadius?: string;
251
+ boxShadow?: string;
251
252
  width?: string;
252
253
  style?: CSSProperties;
253
254
  onClick?: () => void;
@@ -911,6 +912,11 @@ interface BannerAction {
911
912
  icon?: string;
912
913
  onClick?: () => void;
913
914
  }
915
+ interface BannerToggle {
916
+ checked: boolean;
917
+ onChange: (checked: boolean) => void;
918
+ disabled?: boolean;
919
+ }
914
920
  interface BannerProps {
915
921
  variant?: 'blue' | 'red';
916
922
  badge?: string;
@@ -918,8 +924,9 @@ interface BannerProps {
918
924
  subtitle?: string;
919
925
  message?: string;
920
926
  action?: BannerAction;
927
+ toggle?: BannerToggle;
921
928
  }
922
- declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
929
+ declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, }: BannerProps) => react_jsx_runtime.JSX.Element;
923
930
 
924
931
  interface TooltipProps {
925
932
  children?: ReactNode;
package/dist/index.js CHANGED
@@ -1226,6 +1226,7 @@ var shouldForwardProp6 = (prop) => ![
1226
1226
  "padding",
1227
1227
  "maxChars",
1228
1228
  "borderRadius",
1229
+ "boxShadow",
1229
1230
  "width"
1230
1231
  ].includes(prop);
1231
1232
  var StyledBubble = import_styled_components11.default.span.withConfig({
@@ -1235,6 +1236,7 @@ var StyledBubble = import_styled_components11.default.span.withConfig({
1235
1236
  background: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
1236
1237
  font-size: ${(props) => textSizes3[props.size] || props.size || "1em"};
1237
1238
  border-radius: ${(props) => props.borderRadius || "20px"};
1239
+ box-shadow: ${(props) => props.boxShadow || "none"};
1238
1240
  margin: ${(props) => props.margin || "0"};
1239
1241
  padding: ${(props) => props.padding || paddingSizes[props.size] || "5px 10px"};
1240
1242
  font-weight: 600;
@@ -5188,14 +5190,16 @@ var variantStyles = {
5188
5190
  borderColor: "#BEDBFF",
5189
5191
  badgeBackground: colors.badge_blue_bg,
5190
5192
  badgeColor: colors.badge_blue_text,
5191
- action: "blue_950"
5193
+ action: "blue_950",
5194
+ switchColor: colors.blue_950
5192
5195
  },
5193
5196
  red: {
5194
5197
  background: "rgba(252, 221, 222, 0.4)",
5195
5198
  borderColor: "#FFD2D2",
5196
5199
  badgeBackground: "#FCDDDE",
5197
5200
  badgeColor: colors.red_950,
5198
- action: "red_950"
5201
+ action: "red_950",
5202
+ switchColor: colors.red_950
5199
5203
  }
5200
5204
  };
5201
5205
  var StyledBanner = import_styled_components45.default.div`
@@ -5227,7 +5231,8 @@ var Banner = ({
5227
5231
  title,
5228
5232
  subtitle,
5229
5233
  message,
5230
- action
5234
+ action,
5235
+ toggle
5231
5236
  }) => {
5232
5237
  const style2 = variantStyles[variant];
5233
5238
  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
@@ -5249,11 +5254,27 @@ var Banner = ({
5249
5254
  children: badge
5250
5255
  }
5251
5256
  ),
5252
- title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", weight: "700", children: title })
5257
+ title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5258
+ Text,
5259
+ {
5260
+ size: "s",
5261
+ weight: "700",
5262
+ variant: toggle ? style2.action : void 0,
5263
+ children: title
5264
+ }
5265
+ )
5253
5266
  ] }),
5254
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", children: subtitle })
5267
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
5255
5268
  ] }) }),
5256
- action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5269
+ toggle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5270
+ Switch,
5271
+ {
5272
+ checked: toggle.checked,
5273
+ onChange: toggle.onChange,
5274
+ disabled: toggle.disabled,
5275
+ color: style2.switchColor
5276
+ }
5277
+ ) : action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
5257
5278
  Button,
5258
5279
  {
5259
5280
  outline: true,
package/dist/index.mjs CHANGED
@@ -1090,6 +1090,7 @@ var shouldForwardProp6 = (prop) => ![
1090
1090
  "padding",
1091
1091
  "maxChars",
1092
1092
  "borderRadius",
1093
+ "boxShadow",
1093
1094
  "width"
1094
1095
  ].includes(prop);
1095
1096
  var StyledBubble = styled11.span.withConfig({
@@ -1099,6 +1100,7 @@ var StyledBubble = styled11.span.withConfig({
1099
1100
  background: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
1100
1101
  font-size: ${(props) => textSizes3[props.size] || props.size || "1em"};
1101
1102
  border-radius: ${(props) => props.borderRadius || "20px"};
1103
+ box-shadow: ${(props) => props.boxShadow || "none"};
1102
1104
  margin: ${(props) => props.margin || "0"};
1103
1105
  padding: ${(props) => props.padding || paddingSizes[props.size] || "5px 10px"};
1104
1106
  font-weight: 600;
@@ -5072,14 +5074,16 @@ var variantStyles = {
5072
5074
  borderColor: "#BEDBFF",
5073
5075
  badgeBackground: colors.badge_blue_bg,
5074
5076
  badgeColor: colors.badge_blue_text,
5075
- action: "blue_950"
5077
+ action: "blue_950",
5078
+ switchColor: colors.blue_950
5076
5079
  },
5077
5080
  red: {
5078
5081
  background: "rgba(252, 221, 222, 0.4)",
5079
5082
  borderColor: "#FFD2D2",
5080
5083
  badgeBackground: "#FCDDDE",
5081
5084
  badgeColor: colors.red_950,
5082
- action: "red_950"
5085
+ action: "red_950",
5086
+ switchColor: colors.red_950
5083
5087
  }
5084
5088
  };
5085
5089
  var StyledBanner = styled45.div`
@@ -5111,7 +5115,8 @@ var Banner = ({
5111
5115
  title,
5112
5116
  subtitle,
5113
5117
  message,
5114
- action
5118
+ action,
5119
+ toggle
5115
5120
  }) => {
5116
5121
  const style2 = variantStyles[variant];
5117
5122
  return /* @__PURE__ */ jsxs28(
@@ -5133,11 +5138,27 @@ var Banner = ({
5133
5138
  children: badge
5134
5139
  }
5135
5140
  ),
5136
- title && /* @__PURE__ */ jsx54(Text, { size: "s", weight: "700", children: title })
5141
+ title && /* @__PURE__ */ jsx54(
5142
+ Text,
5143
+ {
5144
+ size: "s",
5145
+ weight: "700",
5146
+ variant: toggle ? style2.action : void 0,
5147
+ children: title
5148
+ }
5149
+ )
5137
5150
  ] }),
5138
- subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", children: subtitle })
5151
+ subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", variant: toggle ? style2.action : void 0, children: subtitle })
5139
5152
  ] }) }),
5140
- action && /* @__PURE__ */ jsx54(
5153
+ toggle ? /* @__PURE__ */ jsx54(
5154
+ Switch,
5155
+ {
5156
+ checked: toggle.checked,
5157
+ onChange: toggle.onChange,
5158
+ disabled: toggle.disabled,
5159
+ color: style2.switchColor
5160
+ }
5161
+ ) : action && /* @__PURE__ */ jsx54(
5141
5162
  Button,
5142
5163
  {
5143
5164
  outline: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "design-zystem",
3
- "version": "1.0.265",
3
+ "version": "1.0.267",
4
4
  "description": "A React design system of importable components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",