design-zystem 1.0.283 → 1.0.285

package/dist/index.d.mts

@@ -34,6 +34,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     border?: string;
     /** Colored left accent bar (status/score encoding), painted over the box border. */
     borderColor?: string;
+    /** Colored halo around the box, for transient states (unsaved, selected, in error). */
+    shadowColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -250,6 +252,8 @@ interface BubbleProps {
     borderRadius?: string;
     boxShadow?: string;
     width?: string;
+    /** Looping pulse to draw the eye to a critical bubble. Ring colour follows `backgroundColor`, content is centred on the cross axis, and the animation is dropped under `prefers-reduced-motion`. Spacing between children stays the caller's job. */
+    pulse?: boolean;
     style?: CSSProperties;
     onClick?: () => void;
 }

package/dist/index.d.ts

@@ -34,6 +34,8 @@ interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     border?: string;
     /** Colored left accent bar (status/score encoding), painted over the box border. */
     borderColor?: string;
+    /** Colored halo around the box, for transient states (unsaved, selected, in error). */
+    shadowColor?: string;
     style?: CSSProperties;
 }
 declare const Box: ({ children, hasShadow, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
@@ -250,6 +252,8 @@ interface BubbleProps {
     borderRadius?: string;
     boxShadow?: string;
     width?: string;
+    /** Looping pulse to draw the eye to a critical bubble. Ring colour follows `backgroundColor`, content is centred on the cross axis, and the animation is dropped under `prefers-reduced-motion`. Spacing between children stays the caller's job. */
+    pulse?: boolean;
     style?: CSSProperties;
     onClick?: () => void;
 }

package/dist/index.js

@@ -375,6 +375,7 @@ var shouldForwardProp2 = (prop) => ![
   "borderRadius",
   "border",
   "borderColor",
+  "shadowColor",
   "height"
 ].includes(prop);
 var StyledBox = import_styled_components2.default.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -388,7 +389,12 @@ var StyledBox = import_styled_components2.default.div.withConfig({ shouldForward
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
-  box-shadow: ${(props) => props.hasShadow === false ? "none" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)"};
+  box-shadow: ${(props) => {
+  const base = props.hasShadow === false ? "" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)";
+  if (!props.shadowColor) return base || "none";
+  const halo = `0 0 0 4px ${colors[props.shadowColor] || props.shadowColor}`;
+  return base ? `${halo}, ${base}` : halo;
+}};
 
   width: ${(props) => props.fullWidth ? "100%" : "auto"};
   min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
@@ -1228,6 +1234,21 @@ var paddingSizes = {
   xl: "10px 20px",
   xxl: "10px 20px"
 };
+var resolveColor2 = (value, fallback = "transparent") => colors[value] || value || fallback;
+var pulseAnimation = import_styled_components11.keyframes`
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--bubble-pulse-color);
+  }
+  70% {
+    transform: scale(1.06);
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 transparent;
+  }
+`;
 var shouldForwardProp6 = (prop) => ![
   "color",
   "backgroundColor",
@@ -1237,13 +1258,14 @@ var shouldForwardProp6 = (prop) => ![
   "maxChars",
   "borderRadius",
   "boxShadow",
-  "width"
+  "width",
+  "pulse"
 ].includes(prop);
 var StyledBubble = import_styled_components11.default.span.withConfig({
   shouldForwardProp: shouldForwardProp6
 })`
-  color: ${(props) => colors[props.color] || props.color || "inherit"};
-  background: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
+  color: ${(props) => resolveColor2(props.color, "inherit")};
+  background: ${(props) => resolveColor2(props.backgroundColor)};
   font-size: ${(props) => textSizes3[props.size] || props.size || "1em"};
   border-radius: ${(props) => props.borderRadius || "20px"};
   box-shadow: ${(props) => props.boxShadow || "none"};
@@ -1255,6 +1277,19 @@ var StyledBubble = import_styled_components11.default.span.withConfig({
   text-overflow: ellipsis;
   max-width: ${(props) => props.maxChars ? `${props.maxChars}ch` : "none"};
   white-space: nowrap;
+  ${(props) => props.pulse && import_styled_components11.css`
+      --bubble-pulse-color: ${resolveColor2(
+  props.backgroundColor,
+  colors.grey_600
+)};
+      display: inline-flex;
+      align-items: center;
+      animation: ${pulseAnimation} 2s ease-in-out infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    `}
 `;
 var Bubble = (_a) => {
   var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
@@ -2145,7 +2180,7 @@ var Initials = import_styled_components18.default.span`
   line-height: 1;
   user-select: none;
 `;
-var resolveColor2 = (token, fallback) => {
+var resolveColor3 = (token, fallback) => {
   if (!token) return fallback;
   return colors[token] || token;
 };
@@ -2161,8 +2196,8 @@ var Avatar = ({
 }) => {
   var _a, _b, _c;
   const [hasImageError, setHasImageError] = (0, import_react10.useState)(false);
-  const resolvedBackground = resolveColor2(backgroundColor, colors.grey_300);
-  const resolvedText = resolveColor2(textColor, colors.dark);
+  const resolvedBackground = resolveColor3(backgroundColor, colors.grey_300);
+  const resolvedText = resolveColor3(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";

package/dist/index.mjs

@@ -236,6 +236,7 @@ var shouldForwardProp2 = (prop) => ![
   "borderRadius",
   "border",
   "borderColor",
+  "shadowColor",
   "height"
 ].includes(prop);
 var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 })`
@@ -249,7 +250,12 @@ var StyledBox = styled2.div.withConfig({ shouldForwardProp: shouldForwardProp2 }
 
   border-radius: ${(props) => props.borderRadius || "8px"};
 
-  box-shadow: ${(props) => props.hasShadow === false ? "none" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)"};
+  box-shadow: ${(props) => {
+  const base = props.hasShadow === false ? "" : "0 2px 15px 0 rgba(198, 198, 198, 0.25)";
+  if (!props.shadowColor) return base || "none";
+  const halo = `0 0 0 4px ${colors[props.shadowColor] || props.shadowColor}`;
+  return base ? `${halo}, ${base}` : halo;
+}};
 
   width: ${(props) => props.fullWidth ? "100%" : "auto"};
   min-width: ${(props) => props.fullWidth ? "100%" : "auto"};
@@ -1069,7 +1075,7 @@ var ModalConfirmation = (props) => {
 import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
 
 // src/Components/Bubble/Bubble.tsx
-import styled11 from "styled-components";
+import styled11, { css, keyframes } from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var textSizes3 = {
   xxs: ".4em",
@@ -1089,6 +1095,21 @@ var paddingSizes = {
   xl: "10px 20px",
   xxl: "10px 20px"
 };
+var resolveColor2 = (value, fallback = "transparent") => colors[value] || value || fallback;
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--bubble-pulse-color);
+  }
+  70% {
+    transform: scale(1.06);
+    box-shadow: 0 0 0 6px transparent;
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 transparent;
+  }
+`;
 var shouldForwardProp6 = (prop) => ![
   "color",
   "backgroundColor",
@@ -1098,13 +1119,14 @@ var shouldForwardProp6 = (prop) => ![
   "maxChars",
   "borderRadius",
   "boxShadow",
-  "width"
+  "width",
+  "pulse"
 ].includes(prop);
 var StyledBubble = styled11.span.withConfig({
   shouldForwardProp: shouldForwardProp6
 })`
-  color: ${(props) => colors[props.color] || props.color || "inherit"};
-  background: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
+  color: ${(props) => resolveColor2(props.color, "inherit")};
+  background: ${(props) => resolveColor2(props.backgroundColor)};
   font-size: ${(props) => textSizes3[props.size] || props.size || "1em"};
   border-radius: ${(props) => props.borderRadius || "20px"};
   box-shadow: ${(props) => props.boxShadow || "none"};
@@ -1116,6 +1138,19 @@ var StyledBubble = styled11.span.withConfig({
   text-overflow: ellipsis;
   max-width: ${(props) => props.maxChars ? `${props.maxChars}ch` : "none"};
   white-space: nowrap;
+  ${(props) => props.pulse && css`
+      --bubble-pulse-color: ${resolveColor2(
+  props.backgroundColor,
+  colors.grey_600
+)};
+      display: inline-flex;
+      align-items: center;
+      animation: ${pulseAnimation} 2s ease-in-out infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    `}
 `;
 var Bubble = (_a) => {
   var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
@@ -1508,7 +1543,7 @@ import styled14 from "styled-components";
 
 // src/Components/Toast/ToastCard.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4 } from "react";
-import styled13, { keyframes } from "styled-components";
+import styled13, { keyframes as keyframes2 } from "styled-components";
 
 // src/Components/Toast/toastStore.ts
 var DEFAULT_TIMEOUT_BY_TYPE = {
@@ -1615,15 +1650,15 @@ var TOAST = {
     background: colors.blue_50
   }
 };
-var slideIn = keyframes`
+var slideIn = keyframes2`
   from { transform: translateX(16px); opacity: 0; }
   to { transform: translateX(0); opacity: 1; }
 `;
-var slideOut = keyframes`
+var slideOut = keyframes2`
   from { transform: translateX(0); opacity: 1; }
   to { transform: translateX(16px); opacity: 0; }
 `;
-var shrink = keyframes`
+var shrink = keyframes2`
   from { transform: scaleX(1); }
   to { transform: scaleX(0); }
 `;
@@ -2006,7 +2041,7 @@ var Initials = styled18.span`
   line-height: 1;
   user-select: none;
 `;
-var resolveColor2 = (token, fallback) => {
+var resolveColor3 = (token, fallback) => {
   if (!token) return fallback;
   return colors[token] || token;
 };
@@ -2022,8 +2057,8 @@ var Avatar = ({
 }) => {
   var _a, _b, _c;
   const [hasImageError, setHasImageError] = useState5(false);
-  const resolvedBackground = resolveColor2(backgroundColor, colors.grey_300);
-  const resolvedText = resolveColor2(textColor, colors.dark);
+  const resolvedBackground = resolveColor3(backgroundColor, colors.grey_300);
+  const resolvedText = resolveColor3(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
@@ -3738,7 +3773,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs18(Fragment4, { child
 
 // src/Components/Switch/Switch.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled38, { css } from "styled-components";
+import styled38, { css as css2 } from "styled-components";
 import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var BASE = {
   s: { w: 36, h: 20, knob: 16, pad: 2 },
@@ -3777,7 +3812,7 @@ var Track = styled38.span`
 
   ${(p) => {
   const s = SIZES2[p.$size || "m"] || SIZES2.m;
-  return css`
+  return css2`
       width: ${s.w}px;
       height: ${s.h}px;
       padding: ${s.pad}px;
@@ -3807,7 +3842,7 @@ var Knob = styled38.span`
   ${(p) => {
   const s = SIZES2[p.$size || "m"] || SIZES2.m;
   const left = p.$checked ? s.w - s.pad - s.knob : s.pad;
-  return css`
+  return css2`
       width: ${s.knob}px;
       height: ${s.knob}px;
       left: ${left}px;
@@ -4752,7 +4787,7 @@ var DatePicker = (props) => {
 
 // src/Components/IconTabs/IconTabs.tsx
 import { useState as useState15, useEffect as useEffect13, useRef as useRef11 } from "react";
-import styled42, { css as css2 } from "styled-components";
+import styled42, { css as css3 } from "styled-components";
 import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var TabsContainer = styled42.div`
   display: flex;
@@ -4784,10 +4819,10 @@ var Tab2 = styled42.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  ${({ selected }) => selected && css2`
+  ${({ selected }) => selected && css3`
       color: #fff;
     `}
-  ${({ disabled }) => disabled && css2`
+  ${({ disabled }) => disabled && css3`
       opacity: 0.5;
       pointer-events: none;
       cursor: not-allowed;
@@ -5100,7 +5135,7 @@ var Card2 = ({
 );
 
 // src/Components/Banner/Banner.tsx
-import styled45, { css as css3, keyframes as keyframes2 } from "styled-components";
+import styled45, { css as css4, keyframes as keyframes3 } from "styled-components";
 import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 var PRESET_STYLES = {
   blue: {
@@ -5142,11 +5177,11 @@ var resolveStyle = (variant, filled) => {
     accent: variant
   };
 };
-var shimmerSweep = keyframes2`
+var shimmerSweep = keyframes3`
   0% { transform: translateX(-120%) rotate(20deg); }
   30%, 100% { transform: translateX(220%) rotate(20deg); }
 `;
-var shimmerStyle = css3`
+var shimmerStyle = css4`
   position: relative;
   overflow: hidden;
 
@@ -5764,14 +5799,14 @@ var FileUploadZone = ({
 };
 
 // src/Components/Spinner/Spinner.tsx
-import styled48, { keyframes as keyframes3 } from "styled-components";
+import styled48, { keyframes as keyframes4 } from "styled-components";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var SIZES3 = {
   s: 20,
   m: 32,
   l: 48
 };
-var spin = keyframes3`
+var spin = keyframes4`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.283",
+  "version": "1.0.285",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",