@szymonpiatek/designsystem 0.0.14 → 0.0.15

package/dist/index.d.cts

@@ -131,7 +131,7 @@ interface ButtonProps {
 
 declare const CloseButton: react.ForwardRefExoticComponent<CloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface CloseButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'children' | 'shape' | 'variant'> {
+interface CloseButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'children' | 'shape'> {
     'aria-label'?: string;
 }
 
@@ -1266,7 +1266,7 @@ declare const PaginationEllipsis: {
 declare const PaginationButton: react.ForwardRefExoticComponent<PaginationButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type PaginationButtonSize = 'sm' | 'md' | 'lg' | 'xl';
-type PaginationButtonVariant = 'page' | 'nav';
+type PaginationButtonVariant = ButtonVariant;
 interface PaginationButtonProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;
     isActive?: boolean;
@@ -1274,7 +1274,7 @@ interface PaginationButtonProps {
     size?: PaginationButtonSize;
     variant?: PaginationButtonVariant;
     'aria-label': string;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 
 declare function CommandPalette({ open, onClose, groups, placeholder, emptyLabel, onSelect, }: CommandPaletteProps): react.ReactPortal | null;
@@ -1310,6 +1310,7 @@ interface CartButtonProps {
     count?: number;
     size?: CartButtonSize;
     shape?: ButtonShape;
+    variant?: ButtonVariant;
     label?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;

package/dist/index.d.ts

@@ -131,7 +131,7 @@ interface ButtonProps {
 
 declare const CloseButton: react.ForwardRefExoticComponent<CloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface CloseButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'children' | 'shape' | 'variant'> {
+interface CloseButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'children' | 'shape'> {
     'aria-label'?: string;
 }
 
@@ -1266,7 +1266,7 @@ declare const PaginationEllipsis: {
 declare const PaginationButton: react.ForwardRefExoticComponent<PaginationButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type PaginationButtonSize = 'sm' | 'md' | 'lg' | 'xl';
-type PaginationButtonVariant = 'page' | 'nav';
+type PaginationButtonVariant = ButtonVariant;
 interface PaginationButtonProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;
     isActive?: boolean;
@@ -1274,7 +1274,7 @@ interface PaginationButtonProps {
     size?: PaginationButtonSize;
     variant?: PaginationButtonVariant;
     'aria-label': string;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 
 declare function CommandPalette({ open, onClose, groups, placeholder, emptyLabel, onSelect, }: CommandPaletteProps): react.ReactPortal | null;
@@ -1310,6 +1310,7 @@ interface CartButtonProps {
     count?: number;
     size?: CartButtonSize;
     shape?: ButtonShape;
+    variant?: ButtonVariant;
     label?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;

package/dist/index.js

@@ -654,25 +654,28 @@ var Button = forwardRef(
   )
 );
 Button.displayName = "Button";
-var StyledButton2 = styled(Button)(({ theme }) => ({
+var StyledButton2 = 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 = forwardRef(
-  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ "aria-label": ariaLabel = "Zamknij", size = "sm", variant = "ghost", ...props }, ref) => /* @__PURE__ */ jsx(
     StyledButton2,
     {
       ref,
-      variant: "ghost",
+      variant,
+      $variant: variant,
       shape: "square",
       size,
       startIcon: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true, style: { fontSize: "inherit" } }),
@@ -9750,41 +9753,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: alpha(theme.palette.primary.main, 0.08) },
-  "&:active:not(:disabled)": { backgroundColor: alpha(theme.palette.primary.main, 0.16) }
-});
-var StyledButton3 = 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: alpha(theme.palette.primary.main, 0.08) },
+    "&:active:not(:disabled)": { backgroundColor: alpha(theme.palette.primary.main, 0.16) }
+  };
+};
+var StyledButton3 = 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 = forwardRef(
-  ({ onClick, isActive = false, disabled = false, size = "md", children, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsx(
+  ({
+    onClick,
+    isActive = false,
+    disabled = false,
+    size = "md",
+    variant = "ghost",
+    children,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ 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
@@ -10263,12 +10305,22 @@ var Badge2 = styled("span")(({ theme }) => ({
   lineHeight: 1
 }));
 var CartButton = forwardRef(
-  ({ count, size = "sm", shape, label = "Koszyk", disabled, onClick, className, "aria-label": ariaLabel }, ref) => /* @__PURE__ */ jsxs(Root36, { className, children: [
+  ({
+    count,
+    size = "sm",
+    shape,
+    variant = "ghost",
+    label = "Koszyk",
+    disabled,
+    onClick,
+    className,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxs(Root36, { className, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         ref,
-        variant: "ghost",
+        variant,
         size,
         shape,
         disabled,
@@ -12530,23 +12582,34 @@ var VoucherCard = forwardRef(
   ] })
 );
 VoucherCard.displayName = "VoucherCard";
-var StyledButton4 = 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 = 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 = forwardRef(
-  ({ active = false, size = "md", label, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ active = false, size = "md", variant = "ghost", label, ...props }, ref) => /* @__PURE__ */ jsx(
     StyledButton4,
     {
       ref,
+      variant,
       shape: "circle",
       size,
+      $variant: variant,
       startIcon: active ? /* @__PURE__ */ jsx(FavoriteIcon, { "aria-hidden": true, style: { fontSize: "inherit" } }) : /* @__PURE__ */ jsx(FavoriteBorderIcon, { "aria-hidden": true, style: { fontSize: "inherit" } }),
       "aria-label": label ?? (active ? "Usu\u0144 z listy \u017Cycze\u0144" : "Dodaj do listy \u017Cycze\u0144"),
       $active: active,