@szymonpiatek/designsystem 0.0.14 → 0.0.15

package/dist/index.cjs

@@ -699,25 +699,28 @@ var Button = react.forwardRef(
   )
 );
 Button.displayName = "Button";
-var StyledButton2 = styles.styled(Button)(({ theme }) => ({
+var StyledButton2 = styles.styled(Button)(({ theme, $variant }) => ({
   border: "none",
   borderRadius: "0.375rem",
-  color: theme.palette.text.secondary,
-  "&:hover:not(:disabled)": {
-    backgroundColor: theme.palette.action.hover,
-    color: theme.palette.text.primary
-  },
-  "&:active:not(:disabled)": {
-    filter: "none",
-    backgroundColor: theme.palette.action.selected
-  }
+  ...$variant === "ghost" || $variant === "text" ? {
+    color: theme.palette.text.secondary,
+    "&:hover:not(:disabled)": {
+      backgroundColor: theme.palette.action.hover,
+      color: theme.palette.text.primary
+    },
+    "&:active:not(:disabled)": {
+      filter: "none",
+      backgroundColor: theme.palette.action.selected
+    }
+  } : {}
 }));
 var CloseButton = react.forwardRef(
-  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton2,
     {
       ref,
-      variant: "ghost",
+      variant,
+      $variant: variant,
       shape: "square",
       size,
       startIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }),
@@ -9795,41 +9798,80 @@ var sizeOverrides = {
   lg: { minWidth: "2.5rem", height: "2.5rem" },
   xl: { minWidth: "3rem", height: "3rem" }
 };
-var activeStyles = (theme) => ({
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText,
-  fontWeight: 700,
-  "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
-  "&:active:not(:disabled)": { filter: "none" }
-});
-var idleStyles = (theme) => ({
-  backgroundColor: "transparent",
-  color: theme.palette.text.primary,
-  fontWeight: 400,
-  "&:hover:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.08) },
-  "&:active:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.16) }
-});
-var StyledButton3 = styles.styled(Button)(
-  ({ theme, $isActive, $btnSize }) => ({
+var activeStyles = (theme, variant) => {
+  if (variant === "secondary") {
+    return {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
+      fontWeight: 700,
+      "&:hover:not(:disabled)": { backgroundColor: theme.palette.secondary.dark },
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  if (variant === "danger") {
+    return {
+      backgroundColor: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
+      fontWeight: 700,
+      "&:hover:not(:disabled)": { backgroundColor: theme.palette.error.dark },
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  if (variant === "primary") {
+    return {
+      fontWeight: 700,
+      "&:active:not(:disabled)": { filter: "none" }
+    };
+  }
+  return {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    fontWeight: 700,
+    "&:hover:not(:disabled)": { backgroundColor: theme.palette.primary.dark },
+    "&:active:not(:disabled)": { filter: "none" }
+  };
+};
+var idleStyles = (theme, variant) => {
+  if (variant !== "ghost" && variant !== "text") {
+    return {};
+  }
+  return {
+    backgroundColor: "transparent",
+    color: theme.palette.text.primary,
     border: "none",
-    borderRadius: theme.shape.borderRadius,
-    padding: "0 0.25rem",
-    lineHeight: 1,
-    ...sizeOverrides[$btnSize],
-    ...$isActive ? activeStyles(theme) : idleStyles(theme)
-  })
-);
+    fontWeight: 400,
+    "&:hover:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.08) },
+    "&:active:not(:disabled)": { backgroundColor: styles.alpha(theme.palette.primary.main, 0.16) }
+  };
+};
+var StyledButton3 = styles.styled(Button)(({ theme, $isActive, $btnSize, $variant }) => ({
+  border: "none",
+  borderRadius: theme.shape.borderRadius,
+  padding: "0 0.25rem",
+  lineHeight: 1,
+  ...sizeOverrides[$btnSize],
+  ...$isActive ? activeStyles(theme, $variant) : idleStyles(theme, $variant)
+}));
 var PaginationButton = react.forwardRef(
-  ({ onClick, isActive = false, disabled = false, size = "md", children, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({
+    onClick,
+    isActive = false,
+    disabled = false,
+    size = "md",
+    variant = "ghost",
+    children,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton3,
     {
       ref,
-      variant: "ghost",
+      variant,
       size,
       disabled,
       onClick,
       $isActive: isActive,
       $btnSize: size,
+      $variant: variant,
       "aria-label": ariaLabel,
       "aria-current": isActive ? "page" : void 0,
       children
@@ -10308,12 +10350,22 @@ var Badge2 = styles.styled("span")(({ theme }) => ({
   lineHeight: 1
 }));
 var CartButton = react.forwardRef(
-  ({ count, size = "sm", shape, label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root36, { className, children: [
+  ({
+    count,
+    size = "sm",
+    shape,
+    variant = "ghost",
+    label = "Koszyk",
+    disabled,
+    onClick,
+    className,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Root36, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         ref,
-        variant: "ghost",
+        variant,
         size,
         shape,
         disabled,
@@ -12575,23 +12627,34 @@ var VoucherCard = react.forwardRef(
   ] })
 );
 VoucherCard.displayName = "VoucherCard";
-var StyledButton4 = styles.styled(Button)(({ theme, $active }) => ({
-  border: `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}`,
-  background: $active ? `${theme.palette.error.main}14` : "transparent",
-  color: $active ? theme.palette.error.main : theme.palette.text.secondary,
-  "&:hover:not(:disabled)": {
-    color: theme.palette.error.main,
-    borderColor: theme.palette.error.main,
-    backgroundColor: `${theme.palette.error.main}14`
+var StyledButton4 = styles.styled(Button)(({
+  theme,
+  $active,
+  $variant
+}) => {
+  if ($variant !== "ghost" && $variant !== "text") {
+    return {};
   }
-}));
+  return {
+    border: $variant === "ghost" ? `1px solid ${$active ? theme.palette.error.main : theme.palette.divider}` : "none",
+    background: $active ? `${theme.palette.error.main}14` : "transparent",
+    color: $active ? theme.palette.error.main : theme.palette.text.secondary,
+    "&:hover:not(:disabled)": {
+      color: theme.palette.error.main,
+      borderColor: $variant === "ghost" ? theme.palette.error.main : void 0,
+      backgroundColor: `${theme.palette.error.main}14`
+    }
+  };
+});
 var WishlistButton = react.forwardRef(
-  ({ active = false, size = "md", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ active = false, size = "md", variant = "ghost", label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton4,
     {
       ref,
+      variant,
       shape: "circle",
       size,
+      $variant: variant,
       startIcon: active ? /* @__PURE__ */ jsxRuntime.jsx(FavoriteIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }) : /* @__PURE__ */ jsxRuntime.jsx(FavoriteBorderIcon__default.default, { "aria-hidden": true, style: { fontSize: "inherit" } }),
       "aria-label": label ?? (active ? "Usu\u0144 z listy \u017Cycze\u0144" : "Dodaj do listy \u017Cycze\u0144"),
       $active: active,