design-zystem 1.0.274 → 1.0.276

package/dist/index.d.mts

@@ -513,10 +513,12 @@ declare const colors: {
     readonly pink_700: "#DB2777";
     readonly pink_800: "#BE185D";
     readonly pink_900: "#9D174D";
+    readonly fuchsia_300: "#FFB3EC";
     readonly green: "#12B76A";
     readonly green_50: "#DCFCE7";
     readonly green_100: "#12B76A";
     readonly green_700: "#17803D";
+    readonly green_900: "#006123";
     readonly badge_blue_text: "#1C4ED8";
     readonly badge_blue_bg: "#DBE9FE";
     readonly badge_green_text: "#17803D";
@@ -774,6 +776,8 @@ interface TabItem {
     disabled?: boolean;
     dot?: boolean;
     dotColor?: string;
+    bubbleActive?: boolean;
+    bubbleNumber?: number | null;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -919,6 +923,8 @@ interface BannerToggle {
 }
 interface BannerProps {
     variant?: string;
+    filled?: boolean;
+    shimmer?: boolean;
     badge?: string;
     title?: string;
     subtitle?: string;
@@ -927,7 +933,7 @@ interface BannerProps {
     toggle?: BannerToggle;
     children?: ReactNode;
 }
-declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
+declare const Banner: ({ variant, filled, shimmer, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.d.ts

@@ -513,10 +513,12 @@ declare const colors: {
     readonly pink_700: "#DB2777";
     readonly pink_800: "#BE185D";
     readonly pink_900: "#9D174D";
+    readonly fuchsia_300: "#FFB3EC";
     readonly green: "#12B76A";
     readonly green_50: "#DCFCE7";
     readonly green_100: "#12B76A";
     readonly green_700: "#17803D";
+    readonly green_900: "#006123";
     readonly badge_blue_text: "#1C4ED8";
     readonly badge_blue_bg: "#DBE9FE";
     readonly badge_green_text: "#17803D";
@@ -774,6 +776,8 @@ interface TabItem {
     disabled?: boolean;
     dot?: boolean;
     dotColor?: string;
+    bubbleActive?: boolean;
+    bubbleNumber?: number | null;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -919,6 +923,8 @@ interface BannerToggle {
 }
 interface BannerProps {
     variant?: string;
+    filled?: boolean;
+    shimmer?: boolean;
     badge?: string;
     title?: string;
     subtitle?: string;
@@ -927,7 +933,7 @@ interface BannerProps {
     toggle?: BannerToggle;
     children?: ReactNode;
 }
-declare const Banner: ({ variant, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
+declare const Banner: ({ variant, filled, shimmer, badge, title, subtitle, message, action, toggle, children, }: BannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children?: ReactNode;

package/dist/index.js

@@ -323,11 +323,14 @@ var colors = {
   pink_700: "#DB2777",
   pink_800: "#BE185D",
   pink_900: "#9D174D",
+  // FUCHSIA
+  fuchsia_300: "#FFB3EC",
   // GREEN
   green: "#12B76A",
   green_50: "#DCFCE7",
   green_100: "#12B76A",
   green_700: "#17803D",
+  green_900: "#006123",
   // BADGE
   badge_blue_text: "#1C4ED8",
   badge_blue_bg: "#DBE9FE",
@@ -4228,6 +4231,15 @@ var TabDot = import_styled_components40.default.span`
   flex: none;
   background: ${(p) => p.$color || colors.red_950};
 `;
+var TabBubble = (0, import_styled_components40.default)(Bubble)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  font-size: 10px;
+  line-height: 1;
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4330,7 +4342,17 @@ var Tabs = (_a) => {
           innerRef: setTabRef(it.id),
           children: [
             it.label,
-            it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor })
+            it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor }),
+            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              TabBubble,
+              {
+                size: "xs",
+                color: colors.white,
+                backgroundColor: colors.red_950,
+                padding: "0 6px",
+                children: it.bubbleNumber
+              }
+            )
           ]
         },
         it.id
@@ -5210,8 +5232,18 @@ var PRESET_STYLES = {
     accent: colors.red_950
   }
 };
-var resolveStyle = (variant) => {
+var resolveStyle = (variant, filled) => {
   const preset = PRESET_STYLES[variant];
+  const base = preset ? preset.accent : variant;
+  if (filled) {
+    return {
+      background: base,
+      borderColor: base,
+      badgeBackground: `${base}24`,
+      badgeColor: base,
+      accent: base
+    };
+  }
   if (preset) return preset;
   return {
     background: `${variant}14`,
@@ -5224,6 +5256,36 @@ var resolveStyle = (variant) => {
     accent: variant
   };
 };
+var shimmerSweep = import_styled_components45.keyframes`
+  0% { transform: translateX(-120%) rotate(20deg); }
+  30%, 100% { transform: translateX(220%) rotate(20deg); }
+`;
+var shimmerStyle = import_styled_components45.css`
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -40%;
+    left: 0;
+    width: 28%;
+    height: 180%;
+    background: linear-gradient(
+      100deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.75) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: ${shimmerSweep} 3s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;
 var StyledBanner = import_styled_components45.default.div`
   box-sizing: border-box;
   width: 100%;
@@ -5235,6 +5297,7 @@ var StyledBanner = import_styled_components45.default.div`
   border-radius: 6px;
   border: 1px solid ${(p) => p.$borderColor};
   background: ${(p) => p.$background};
+  ${(p) => p.$shimmer && shimmerStyle}
 `;
 var Content2 = import_styled_components45.default.div`
   display: flex;
@@ -5249,6 +5312,8 @@ var Heading = import_styled_components45.default.div`
 `;
 var Banner = ({
   variant = "blue",
+  filled,
+  shimmer,
   badge,
   title,
   subtitle,
@@ -5257,13 +5322,14 @@ var Banner = ({
   toggle,
   children
 }) => {
-  const style2 = resolveStyle(variant);
+  const style2 = resolveStyle(variant, filled);
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       StyledBanner,
       {
         $background: style2.background,
         $borderColor: style2.borderColor,
+        $shimmer: shimmer,
         children
       }
     );
@@ -5273,6 +5339,7 @@ var Banner = ({
     {
       $background: style2.background,
       $borderColor: style2.borderColor,
+      $shimmer: shimmer,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Content2, { children: message ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", children: message }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Heading, { children: [

package/dist/index.mjs

@@ -184,11 +184,14 @@ var colors = {
   pink_700: "#DB2777",
   pink_800: "#BE185D",
   pink_900: "#9D174D",
+  // FUCHSIA
+  fuchsia_300: "#FFB3EC",
   // GREEN
   green: "#12B76A",
   green_50: "#DCFCE7",
   green_100: "#12B76A",
   green_700: "#17803D",
+  green_900: "#006123",
   // BADGE
   badge_blue_text: "#1C4ED8",
   badge_blue_bg: "#DBE9FE",
@@ -4104,6 +4107,15 @@ var TabDot = styled40.span`
   flex: none;
   background: ${(p) => p.$color || colors.red_950};
 `;
+var TabBubble = styled40(Bubble)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  font-size: 10px;
+  line-height: 1;
+`;
 var Tab = (_a) => {
   var _b = _a, {
     id,
@@ -4206,7 +4218,17 @@ var Tabs = (_a) => {
           innerRef: setTabRef(it.id),
           children: [
             it.label,
-            it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor })
+            it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
+            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ jsx47(
+              TabBubble,
+              {
+                size: "xs",
+                color: colors.white,
+                backgroundColor: colors.red_950,
+                padding: "0 6px",
+                children: it.bubbleNumber
+              }
+            )
           ]
         },
         it.id
@@ -5073,7 +5095,7 @@ var Card2 = ({
 );
 
 // src/Components/Banner/Banner.tsx
-import styled45 from "styled-components";
+import styled45, { css as css3, keyframes as keyframes2 } from "styled-components";
 import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
 var PRESET_STYLES = {
   blue: {
@@ -5091,8 +5113,18 @@ var PRESET_STYLES = {
     accent: colors.red_950
   }
 };
-var resolveStyle = (variant) => {
+var resolveStyle = (variant, filled) => {
   const preset = PRESET_STYLES[variant];
+  const base = preset ? preset.accent : variant;
+  if (filled) {
+    return {
+      background: base,
+      borderColor: base,
+      badgeBackground: `${base}24`,
+      badgeColor: base,
+      accent: base
+    };
+  }
   if (preset) return preset;
   return {
     background: `${variant}14`,
@@ -5105,6 +5137,36 @@ var resolveStyle = (variant) => {
     accent: variant
   };
 };
+var shimmerSweep = keyframes2`
+  0% { transform: translateX(-120%) rotate(20deg); }
+  30%, 100% { transform: translateX(220%) rotate(20deg); }
+`;
+var shimmerStyle = css3`
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -40%;
+    left: 0;
+    width: 28%;
+    height: 180%;
+    background: linear-gradient(
+      100deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.75) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: ${shimmerSweep} 3s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;
 var StyledBanner = styled45.div`
   box-sizing: border-box;
   width: 100%;
@@ -5116,6 +5178,7 @@ var StyledBanner = styled45.div`
   border-radius: 6px;
   border: 1px solid ${(p) => p.$borderColor};
   background: ${(p) => p.$background};
+  ${(p) => p.$shimmer && shimmerStyle}
 `;
 var Content2 = styled45.div`
   display: flex;
@@ -5130,6 +5193,8 @@ var Heading = styled45.div`
 `;
 var Banner = ({
   variant = "blue",
+  filled,
+  shimmer,
   badge,
   title,
   subtitle,
@@ -5138,13 +5203,14 @@ var Banner = ({
   toggle,
   children
 }) => {
-  const style2 = resolveStyle(variant);
+  const style2 = resolveStyle(variant, filled);
   if (children) {
     return /* @__PURE__ */ jsx54(
       StyledBanner,
       {
         $background: style2.background,
         $borderColor: style2.borderColor,
+        $shimmer: shimmer,
         children
       }
     );
@@ -5154,6 +5220,7 @@ var Banner = ({
     {
       $background: style2.background,
       $borderColor: style2.borderColor,
+      $shimmer: shimmer,
       children: [
         /* @__PURE__ */ jsx54(Content2, { children: message ? /* @__PURE__ */ jsx54(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
           /* @__PURE__ */ jsxs28(Heading, { children: [
@@ -5690,14 +5757,14 @@ var FileUploadZone = ({
 };
 
 // src/Components/Spinner/Spinner.tsx
-import styled48, { keyframes as keyframes2 } from "styled-components";
+import styled48, { keyframes as keyframes3 } from "styled-components";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var SIZES3 = {
   s: 20,
   m: 32,
   l: 48
 };
-var spin = keyframes2`
+var spin = keyframes3`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;

package/package.json

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