astrum-ui 0.1.6 → 0.1.7

package/dist/Button/Button.css

@@ -21,7 +21,12 @@
   transition: all ease-in-out 0.15s;
 }
 
-.astrum-btn:disabled {
+a.astrum-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.astrum-btn:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
 }
 
@@ -71,12 +76,12 @@
   color: var(--astrum-primary-white);
 }
 
-.astrum-btn-primary:hover:not(:disabled) {
+.astrum-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--astrum-hover-blue);
   color: var(--astrum-primary-white);
 }
 
-.astrum-btn-primary:disabled {
+.astrum-btn-primary:is(:disabled, [aria-disabled="true"]) {
   background-color: var(--astrum-gray-20);
   color: var(--astrum-gray-60);
 }
@@ -87,13 +92,13 @@
   border: 1px solid var(--astrum-primary-white);
 }
 
-.astrum-btn-outlined:hover:not(:disabled) {
+.astrum-btn-outlined:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--astrum-primary-white);
   border-color: var(--astrum-primary-white);
   color: var(--astrum-hover-blue);
 }
 
-.astrum-btn-outlined:disabled {
+.astrum-btn-outlined:is(:disabled, [aria-disabled="true"]) {
   background-color: transparent;
   border-color: transparent;
   color: var(--astrum-primary-white);
@@ -106,13 +111,13 @@
   border: 1px dashed var(--astrum-gray-60);
 }
 
-.astrum-btn-dashed:hover:not(:disabled) {
+.astrum-btn-dashed:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: transparent;
   border-color: var(--astrum-gray-80);
   color: var(--astrum-gray-80);
 }
 
-.astrum-btn-dashed:disabled {
+.astrum-btn-dashed:is(:disabled, [aria-disabled="true"]) {
   background-color: transparent;
   border-color: transparent;
   color: transparent;
@@ -124,14 +129,14 @@
   color: var(--astrum-primary);
 }
 
-.astrum-btn-grey:hover:not(:disabled) {
+.astrum-btn-grey:hover:not(:disabled):not([aria-disabled="true"]) {
   outline-width: 2px;
   outline-color: var(--astrum-primary);
   background-color: var(--astrum-gray-5);
   color: var(--astrum-primary);
 }
 
-.astrum-btn-grey:disabled {
+.astrum-btn-grey:is(:disabled, [aria-disabled="true"]) {
   background-color: var(--astrum-gray-20);
   color: var(--astrum-gray-60);
 }
@@ -142,14 +147,14 @@
   color: var(--astrum-primary);
 }
 
-.astrum-btn-white:hover:not(:disabled) {
+.astrum-btn-white:hover:not(:disabled):not([aria-disabled="true"]) {
   outline-width: 2px;
   outline-color: var(--astrum-primary);
   background-color: var(--astrum-primary-white);
   color: var(--astrum-primary);
 }
 
-.astrum-btn-white:disabled {
+.astrum-btn-white:is(:disabled, [aria-disabled="true"]) {
   background-color: var(--astrum-gray-20);
   color: var(--astrum-gray-60);
 }
@@ -159,12 +164,12 @@
   color: var(--astrum-gray-80);
 }
 
-.astrum-btn-ghost:hover:not(:disabled) {
+.astrum-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: transparent;
   color: var(--astrum-primary);
 }
 
-.astrum-btn-ghost:disabled {
+.astrum-btn-ghost:is(:disabled, [aria-disabled="true"]) {
   background-color: transparent;
   color: var(--astrum-gray-40);
 }

package/dist/index.d.mts

@@ -1,14 +1,24 @@
 import * as React from 'react';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type SharedButtonProps = {
     variant?: "primary" | "outlined" | "dashed" | "grey" | "white" | "ghost";
     size?: "s" | "m" | "l";
     icon?: React.ReactNode;
     iconPosition?: "left" | "right";
     shape?: "default" | "square" | "circle";
     children?: React.ReactNode;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    className?: string;
+};
+type ButtonProps = (SharedButtonProps & {
+    href?: undefined;
+    as?: undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) | (SharedButtonProps & {
+    href: string;
+    as?: React.ElementType;
+    /** Для ссылки: `aria-disabled` и блокировка перехода */
+    disabled?: boolean;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof SharedButtonProps | "disabled">);
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 interface ColorPickerProps {
     value?: string | null;

package/dist/index.d.ts

@@ -1,14 +1,24 @@
 import * as React from 'react';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type SharedButtonProps = {
     variant?: "primary" | "outlined" | "dashed" | "grey" | "white" | "ghost";
     size?: "s" | "m" | "l";
     icon?: React.ReactNode;
     iconPosition?: "left" | "right";
     shape?: "default" | "square" | "circle";
     children?: React.ReactNode;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    className?: string;
+};
+type ButtonProps = (SharedButtonProps & {
+    href?: undefined;
+    as?: undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) | (SharedButtonProps & {
+    href: string;
+    as?: React.ElementType;
+    /** Для ссылки: `aria-disabled` и блокировка перехода */
+    disabled?: boolean;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof SharedButtonProps | "disabled">);
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 interface ColorPickerProps {
     value?: string | null;

package/dist/index.js

@@ -70,16 +70,20 @@ var shapeStyles = {
   circle: "astrum-btn-shape-circle"
 };
 var Button = React.forwardRef(
-  ({
-    variant = "primary",
-    size = "l",
-    icon,
-    iconPosition = "right",
-    shape = "default",
-    className = "",
-    children,
-    ...rest
-  }, ref) => {
+  function Button2(props, ref) {
+    const {
+      variant = "primary",
+      size = "l",
+      icon,
+      iconPosition = "right",
+      shape = "default",
+      className = "",
+      children,
+      href,
+      as,
+      ...rest
+    } = props;
+    const isLink = typeof href === "string" && href.length > 0;
     const iconOnly = icon != null && (children == null || children === "");
     const effectiveShape = iconOnly && shape !== "default" ? shape : "default";
     const classes = [
@@ -95,7 +99,45 @@ var Button = React.forwardRef(
       children != null && children !== "" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "astrum-btn-text", children }),
       icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "astrum-btn-icon", children: icon })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: classes, type: "button", ...rest, children: content });
+    if (isLink) {
+      const Component = as ?? "a";
+      const {
+        disabled: anchorDisabled,
+        onClick,
+        onKeyDown,
+        ...anchorRest
+      } = rest;
+      const disabled = Boolean(anchorDisabled);
+      const handleClick = (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      };
+      const handleKeyDown = (e) => {
+        if (disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+        }
+        onKeyDown?.(e);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Component,
+        {
+          ref,
+          ...anchorRest,
+          href,
+          className: classes,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : anchorRest.tabIndex,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: content
+        }
+      );
+    }
+    const buttonRest = rest;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: classes, type: "button", ...buttonRest, children: content });
   }
 );
 Button.displayName = "Button";