design-zystem 1.0.291 → 1.0.292

package/dist/index.d.mts

@@ -866,8 +866,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     showBaseline?: boolean;
     baselineColor?: string;
     children?: ReactNode;
+    size?: 'xs' | 'm';
+    activeColor?: string;
 }
-declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, size, activeColor, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src?: string;

package/dist/index.d.ts

@@ -866,8 +866,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     showBaseline?: boolean;
     baselineColor?: string;
     children?: ReactNode;
+    size?: 'xs' | 'm';
+    activeColor?: string;
 }
-declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, size, activeColor, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src?: string;

package/dist/index.js

@@ -4253,10 +4253,23 @@ var import_jsx_runtime47 = require("react/jsx-runtime");
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
-var shouldForwardTabs = (p) => !["align", "showBaseline", "baselineColor", "variant", "fullWidth"].includes(
-  p
-);
-var shouldForwardTab = (p) => !["$active", "$disabled", "$variant", "$fullWidth"].includes(p);
+var shouldForwardTabs = (p) => ![
+  "align",
+  "showBaseline",
+  "baselineColor",
+  "variant",
+  "fullWidth",
+  "size",
+  "activeColor"
+].includes(p);
+var shouldForwardTab = (p) => ![
+  "$active",
+  "$disabled",
+  "$variant",
+  "$fullWidth",
+  "$size",
+  "$activeColor"
+].includes(p);
 var TabsRoot = import_styled_components40.default.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
@@ -4285,11 +4298,20 @@ var TabsList = import_styled_components40.default.div.withConfig({
 })`
   display: flex;
   align-items: center;
-  gap: ${(p) => p.variant === "pills" ? "0" : "24px"};
+  gap: ${(p) => {
+  if (p.variant !== "pills") return "24px";
+  return p.size === "xs" ? "4px" : "0";
+}};
   min-height: ${(p) => p.variant === "pills" ? "auto" : "48px"};
-  padding: ${(p) => p.variant === "pills" ? "4px" : "12px 0"};
+  padding: ${(p) => {
+  if (p.variant !== "pills") return "12px 0";
+  return p.size === "xs" ? "6px 8px" : "4px";
+}};
   background: ${(p) => p.variant === "pills" ? colors.grey_200 : "transparent"};
-  border-radius: ${(p) => p.variant === "pills" ? "8px" : "0"};
+  border-radius: ${(p) => {
+  if (p.variant !== "pills") return "0";
+  return p.size === "xs" ? "6px" : "8px";
+}};
   width: ${(p) => p.fullWidth ? "100%" : "auto"};
   justify-content: ${(p) => p.align === "center" ? "center" : p.align === "end" ? "flex-end" : p.align === "between" ? "space-between" : "flex-start"};
 `;
@@ -4306,27 +4328,40 @@ var TabButton = import_styled_components40.default.button.withConfig({
   if (p.$variant !== "pills") return "transparent";
   return p.$active ? colors.white : "transparent";
 }};
-  padding: ${(p) => p.$variant === "pills" ? "8px 16px" : "0"};
+  padding: ${(p) => {
+  if (p.$variant !== "pills") return "0";
+  if (p.$size === "xs") return p.$active ? "4px 12px" : "4px 8px";
+  return "8px 16px";
+}};
   margin: 0;
   border-radius: ${(p) => p.$variant === "pills" ? "6px" : "0"};
   flex: ${(p) => p.$variant === "pills" && p.$fullWidth ? "1" : "initial"};
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") return colors.dark;
+  if (p.$variant === "pills") {
+    if (p.$active && p.$activeColor) return p.$activeColor;
+    return colors.dark;
+  }
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
+  font-size: ${(p) => {
+  if (p.$variant === "pills") return p.$size === "xs" ? "12px" : "14px";
+  return "16px";
+}};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return p.$active ? 700 : 500;
+  if (p.$variant === "pills") {
+    if (p.$active) return 700;
+    return p.$size === "xs" ? 600 : 500;
+  }
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: none;
+  box-shadow: ${(p) => p.$variant === "pills" && p.$size === "xs" && p.$active ? "0px 2px 7.5px rgba(198, 198, 198, 0.25)" : "none"};
   transition:
     background-color 150ms ease,
     color 150ms ease;
@@ -4368,7 +4403,9 @@ var Tab = (_a) => {
     onClick,
     innerRef,
     variant = "line",
-    fullWidth = false
+    fullWidth = false,
+    size = "m",
+    activeColor
   } = _b, rest = __objRest(_b, [
     "id",
     "children",
@@ -4377,7 +4414,9 @@ var Tab = (_a) => {
     "onClick",
     "innerRef",
     "variant",
-    "fullWidth"
+    "fullWidth",
+    "size",
+    "activeColor"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     TabButton,
@@ -4392,6 +4431,8 @@ var Tab = (_a) => {
       $disabled: disabled,
       $variant: variant,
       $fullWidth: fullWidth,
+      $size: size,
+      $activeColor: activeColor,
       onClick: disabled ? void 0 : onClick
     }, rest), {
       children
@@ -4407,7 +4448,9 @@ var Tabs = (_a) => {
     align = "start",
     showBaseline = true,
     baselineColor = colors.grey_300,
-    children
+    children,
+    size,
+    activeColor
   } = _b, rest = __objRest(_b, [
     "value",
     "onChange",
@@ -4416,7 +4459,9 @@ var Tabs = (_a) => {
     "align",
     "showBaseline",
     "baselineColor",
-    "children"
+    "children",
+    "size",
+    "activeColor"
   ]);
   const rootRef = (0, import_react23.useRef)(null);
   const refsMap = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
@@ -4459,6 +4504,8 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
+          size,
+          activeColor,
           children: [
             it.label,
             it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor }),
@@ -4487,10 +4534,21 @@ var Tabs = (_a) => {
         variant,
         fullWidth: isPillsFullWidth,
         onClick: () => handleSelect(id),
-        innerRef: setTabRef(id)
+        innerRef: setTabRef(id),
+        size,
+        activeColor
       });
     });
-  }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
+  }, [
+    items,
+    children,
+    value,
+    variant,
+    isPillsFullWidth,
+    handleSelect,
+    size,
+    activeColor
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     TabsRoot,
     __spreadProps(__spreadValues({
@@ -4502,7 +4560,16 @@ var Tabs = (_a) => {
       variant
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsList, { align, variant, fullWidth: isPillsFullWidth, children: rendered }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          TabsList,
+          {
+            align,
+            variant,
+            fullWidth: isPillsFullWidth,
+            size,
+            children: rendered
+          }
+        ),
         variant === "line" && showBaseline && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActiveBar, { style: { left: bar.left, width: bar.width } })
       ]
     })

package/dist/index.mjs

@@ -4129,10 +4129,23 @@ import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
-var shouldForwardTabs = (p) => !["align", "showBaseline", "baselineColor", "variant", "fullWidth"].includes(
-  p
-);
-var shouldForwardTab = (p) => !["$active", "$disabled", "$variant", "$fullWidth"].includes(p);
+var shouldForwardTabs = (p) => ![
+  "align",
+  "showBaseline",
+  "baselineColor",
+  "variant",
+  "fullWidth",
+  "size",
+  "activeColor"
+].includes(p);
+var shouldForwardTab = (p) => ![
+  "$active",
+  "$disabled",
+  "$variant",
+  "$fullWidth",
+  "$size",
+  "$activeColor"
+].includes(p);
 var TabsRoot = styled40.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
@@ -4161,11 +4174,20 @@ var TabsList = styled40.div.withConfig({
 })`
   display: flex;
   align-items: center;
-  gap: ${(p) => p.variant === "pills" ? "0" : "24px"};
+  gap: ${(p) => {
+  if (p.variant !== "pills") return "24px";
+  return p.size === "xs" ? "4px" : "0";
+}};
   min-height: ${(p) => p.variant === "pills" ? "auto" : "48px"};
-  padding: ${(p) => p.variant === "pills" ? "4px" : "12px 0"};
+  padding: ${(p) => {
+  if (p.variant !== "pills") return "12px 0";
+  return p.size === "xs" ? "6px 8px" : "4px";
+}};
   background: ${(p) => p.variant === "pills" ? colors.grey_200 : "transparent"};
-  border-radius: ${(p) => p.variant === "pills" ? "8px" : "0"};
+  border-radius: ${(p) => {
+  if (p.variant !== "pills") return "0";
+  return p.size === "xs" ? "6px" : "8px";
+}};
   width: ${(p) => p.fullWidth ? "100%" : "auto"};
   justify-content: ${(p) => p.align === "center" ? "center" : p.align === "end" ? "flex-end" : p.align === "between" ? "space-between" : "flex-start"};
 `;
@@ -4182,27 +4204,40 @@ var TabButton = styled40.button.withConfig({
   if (p.$variant !== "pills") return "transparent";
   return p.$active ? colors.white : "transparent";
 }};
-  padding: ${(p) => p.$variant === "pills" ? "8px 16px" : "0"};
+  padding: ${(p) => {
+  if (p.$variant !== "pills") return "0";
+  if (p.$size === "xs") return p.$active ? "4px 12px" : "4px 8px";
+  return "8px 16px";
+}};
   margin: 0;
   border-radius: ${(p) => p.$variant === "pills" ? "6px" : "0"};
   flex: ${(p) => p.$variant === "pills" && p.$fullWidth ? "1" : "initial"};
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") return colors.dark;
+  if (p.$variant === "pills") {
+    if (p.$active && p.$activeColor) return p.$activeColor;
+    return colors.dark;
+  }
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
+  font-size: ${(p) => {
+  if (p.$variant === "pills") return p.$size === "xs" ? "12px" : "14px";
+  return "16px";
+}};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return p.$active ? 700 : 500;
+  if (p.$variant === "pills") {
+    if (p.$active) return 700;
+    return p.$size === "xs" ? 600 : 500;
+  }
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: none;
+  box-shadow: ${(p) => p.$variant === "pills" && p.$size === "xs" && p.$active ? "0px 2px 7.5px rgba(198, 198, 198, 0.25)" : "none"};
   transition:
     background-color 150ms ease,
     color 150ms ease;
@@ -4244,7 +4279,9 @@ var Tab = (_a) => {
     onClick,
     innerRef,
     variant = "line",
-    fullWidth = false
+    fullWidth = false,
+    size = "m",
+    activeColor
   } = _b, rest = __objRest(_b, [
     "id",
     "children",
@@ -4253,7 +4290,9 @@ var Tab = (_a) => {
     "onClick",
     "innerRef",
     "variant",
-    "fullWidth"
+    "fullWidth",
+    "size",
+    "activeColor"
   ]);
   return /* @__PURE__ */ jsx47(
     TabButton,
@@ -4268,6 +4307,8 @@ var Tab = (_a) => {
       $disabled: disabled,
       $variant: variant,
       $fullWidth: fullWidth,
+      $size: size,
+      $activeColor: activeColor,
       onClick: disabled ? void 0 : onClick
     }, rest), {
       children
@@ -4283,7 +4324,9 @@ var Tabs = (_a) => {
     align = "start",
     showBaseline = true,
     baselineColor = colors.grey_300,
-    children
+    children,
+    size,
+    activeColor
   } = _b, rest = __objRest(_b, [
     "value",
     "onChange",
@@ -4292,7 +4335,9 @@ var Tabs = (_a) => {
     "align",
     "showBaseline",
     "baselineColor",
-    "children"
+    "children",
+    "size",
+    "activeColor"
   ]);
   const rootRef = useRef8(null);
   const refsMap = useRef8(/* @__PURE__ */ new Map());
@@ -4335,6 +4380,8 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
+          size,
+          activeColor,
           children: [
             it.label,
             it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
@@ -4363,10 +4410,21 @@ var Tabs = (_a) => {
         variant,
         fullWidth: isPillsFullWidth,
         onClick: () => handleSelect(id),
-        innerRef: setTabRef(id)
+        innerRef: setTabRef(id),
+        size,
+        activeColor
       });
     });
-  }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
+  }, [
+    items,
+    children,
+    value,
+    variant,
+    isPillsFullWidth,
+    handleSelect,
+    size,
+    activeColor
+  ]);
   return /* @__PURE__ */ jsxs22(
     TabsRoot,
     __spreadProps(__spreadValues({
@@ -4378,7 +4436,16 @@ var Tabs = (_a) => {
       variant
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx47(TabsList, { align, variant, fullWidth: isPillsFullWidth, children: rendered }),
+        /* @__PURE__ */ jsx47(
+          TabsList,
+          {
+            align,
+            variant,
+            fullWidth: isPillsFullWidth,
+            size,
+            children: rendered
+          }
+        ),
         variant === "line" && showBaseline && /* @__PURE__ */ jsx47(ActiveBar, { style: { left: bar.left, width: bar.width } })
       ]
     })

package/package.json

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