@dmitriikapustin/ui 0.2.12 → 0.3.0

package/dist/index.cjs

@@ -194,6 +194,31 @@ __styleInject(`@charset "UTF-8";
   background: var(--border-color);
 }
 
+.Button-module_danger {
+  background: var(--color-error);
+  border: 1px solid var(--color-error);
+  color: #ffffff;
+  box-shadow: var(--shadow-sm);
+}
+.Button-module_danger:hover:not(:disabled) {
+  background: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+  box-shadow: var(--shadow-md);
+}
+.Button-module_danger:active:not(:disabled) {
+  background: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+}
+.Button-module_danger:focus-visible {
+  outline: 2px solid var(--color-error-light);
+  outline-offset: 2px;
+}
+.Button-module_danger:disabled {
+  background: var(--color-error-light);
+  border-color: var(--color-error-light);
+  color: rgba(255, 255, 255, 0.7);
+}
+
 /* \u2500\u2500\u2500 Sizes \u2500\u2500\u2500 */
 .Button-module_sm {
   font-size: 13px;
@@ -228,9 +253,9 @@ __styleInject(`@charset "UTF-8";
   cursor: not-allowed;
   pointer-events: none;
 }`);
-var __default2 = { "root": "Button-module_root", "primary": "Button-module_primary", "ghost": "Button-module_ghost", "secondary": "Button-module_secondary", "outline": "Button-module_outline", "sm": "Button-module_sm", "md": "Button-module_md", "hero": "Button-module_hero", "disabled": "Button-module_disabled" };
-function Button(_a) {
-  var _b = _a, {
+var __default2 = { "root": "Button-module_root", "primary": "Button-module_primary", "ghost": "Button-module_ghost", "secondary": "Button-module_secondary", "outline": "Button-module_outline", "danger": "Button-module_danger", "sm": "Button-module_sm", "md": "Button-module_md", "hero": "Button-module_hero", "disabled": "Button-module_disabled" };
+function Button(props) {
+  const {
     variant = "primary",
     size = "md",
     loading = false,
@@ -239,27 +264,38 @@ function Button(_a) {
     children,
     disabled,
     className = ""
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "loading",
-    "icon",
-    "iconRight",
-    "children",
-    "disabled",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  } = props;
+  const rootClass = `${__default2.root} ${__default2[variant]} ${__default2[size]}${disabled || loading ? ` ${__default2.disabled}` : ""}${className ? ` ${className}` : ""}`;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) : icon,
+    children,
+    iconRight
+  ] });
+  if (props.href !== void 0) {
+    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
+    const handleClick = disabled || loading ? (e) => e.preventDefault() : onClick;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      __spreadProps(__spreadValues({}, rest), {
+        href,
+        target,
+        rel: safeRel,
+        className: rootClass,
+        "aria-disabled": disabled || loading || void 0,
+        tabIndex: disabled || loading ? -1 : rest.tabIndex,
+        onClick: handleClick,
+        children: content
+      })
+    );
+  }
+  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
-    __spreadProps(__spreadValues({
-      className: `${__default2.root} ${__default2[variant]} ${__default2[size]}${disabled || loading ? ` ${__default2.disabled}` : ""}${className ? ` ${className}` : ""}`,
-      disabled: disabled || loading
-    }, props), {
-      children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) : icon,
-        children,
-        iconRight
-      ]
+    __spreadProps(__spreadValues({}, buttonRest), {
+      className: rootClass,
+      disabled: disabled || loading,
+      children: content
     })
   );
 }
@@ -900,15 +936,34 @@ __styleInject(`@charset "UTF-8";
   cursor: not-allowed;
 }`);
 var __default10 = { "root": "IconButton-module_root", "primary": "IconButton-module_primary", "secondary": "IconButton-module_secondary", "clear": "IconButton-module_clear", "disabled": "IconButton-module_disabled", "contrast": "IconButton-module_contrast", "isDisabled": "IconButton-module_isDisabled" };
-function IconButton(_a) {
-  var _b = _a, { icon, variant = "primary", className = "", disabled } = _b, props = __objRest(_b, ["icon", "variant", "className", "disabled"]);
+function IconButton(props) {
+  const { icon, variant = "primary", className = "", disabled } = props;
   const isDisabled = variant === "disabled" || disabled;
+  const rootClass = `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`;
+  if (props.href !== void 0) {
+    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
+    const handleClick = isDisabled ? (e) => e.preventDefault() : onClick;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      __spreadProps(__spreadValues({}, rest), {
+        href,
+        target,
+        rel: safeRel,
+        className: rootClass,
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isDisabled ? -1 : rest.tabIndex,
+        onClick: handleClick,
+        children: icon
+      })
+    );
+  }
+  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
-    __spreadProps(__spreadValues({
-      className: `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`,
-      disabled: isDisabled
-    }, props), {
+    __spreadProps(__spreadValues({}, buttonRest), {
+      className: rootClass,
+      disabled: isDisabled,
       children: icon
     })
   );
@@ -1758,6 +1813,10 @@ __styleInject(`@charset "UTF-8";
   margin: 0;
 }
 
+.Card-module_danger .Card-module_title {
+  color: var(--color-error);
+}
+
 .Card-module_description {
   font-size: 13px;
   font-weight: 400;
@@ -1787,7 +1846,7 @@ __styleInject(`@charset "UTF-8";
 .Card-module_spacer {
   display: block;
 }`);
-var __default21 = { "root": "Card-module_root", "imageWrapper": "Card-module_imageWrapper", "image": "Card-module_image", "body": "Card-module_body", "bodyWithImage": "Card-module_bodyWithImage", "bodyNoImage": "Card-module_bodyNoImage", "titleBlock": "Card-module_titleBlock", "title": "Card-module_title", "description": "Card-module_description", "footer": "Card-module_footer", "footerRow": "Card-module_footerRow", "badges": "Card-module_badges", "spacer": "Card-module_spacer" };
+var __default21 = { "root": "Card-module_root", "imageWrapper": "Card-module_imageWrapper", "image": "Card-module_image", "body": "Card-module_body", "bodyWithImage": "Card-module_bodyWithImage", "bodyNoImage": "Card-module_bodyNoImage", "titleBlock": "Card-module_titleBlock", "title": "Card-module_title", "danger": "Card-module_danger", "description": "Card-module_description", "footer": "Card-module_footer", "footerRow": "Card-module_footerRow", "badges": "Card-module_badges", "spacer": "Card-module_spacer" };
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/molecules/IconBadge.module.scss
 __styleInject(`@charset "UTF-8";
@@ -1815,16 +1874,19 @@ function Card({
   image,
   title,
   description,
+  descriptionClassName = "",
   badges,
   action,
   footer,
   children,
+  variant = "default",
   className = ""
 }) {
   const hasImage = !!image;
   const hasBadgesOrAction = !!(badges && badges.length > 0 || action);
   const showFooter = !!footer || hasBadgesOrAction;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default21.root}${className ? ` ${className}` : ""}`, children: [
+  const variantClass = variant === "danger" ? ` ${__default21.danger}` : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default21.root}${variantClass}${className ? ` ${className}` : ""}`, children: [
     hasImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default21.imageWrapper, children: typeof image === "string" ? (
       // eslint-disable-next-line @next/next/no-img-element
       /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: title || "", className: __default21.image })
@@ -1832,7 +1894,7 @@ function Card({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${__default21.body} ${hasImage ? __default21.bodyWithImage : __default21.bodyNoImage}`, children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default21.titleBlock, children: [
         title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: __default21.title, children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: __default21.description, children: description })
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${__default21.description}${descriptionClassName ? ` ${descriptionClassName}` : ""}`, children: description })
       ] }),
       children,
       showFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default21.footer, children: footer || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: __default21.footerRow, children: [
@@ -5814,7 +5876,6 @@ __styleInject(`.PromoSplit-module_root {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem;
 }
 
 .PromoSplit-module_mediaPlaceholder {

package/dist/index.d.cts

@@ -1,17 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import React$1, { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
 
-type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'hero';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type AnchorTarget$1 = '_self' | '_blank' | '_parent' | '_top';
+interface CommonProps$1 {
     variant?: ButtonVariant;
     size?: ButtonSize;
     loading?: boolean;
     icon?: ReactNode;
     iconRight?: ReactNode;
     children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+interface ButtonAsButton extends CommonProps$1, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps$1 | 'href'> {
+    href?: undefined;
+}
+interface ButtonAsAnchor extends CommonProps$1, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps$1 | 'href' | 'target' | 'rel'> {
+    href: string;
+    target?: AnchorTarget$1;
+    rel?: string;
 }
-declare function Button({ variant, size, loading, icon, iconRight, children, disabled, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -82,12 +94,23 @@ interface MenuItemProps {
 declare function MenuItem({ text, active, onClick, className, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
 type IconButtonVariant = 'primary' | 'secondary' | 'clear' | 'disabled' | 'contrast';
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
+interface CommonProps {
     icon: ReactNode;
     variant?: IconButtonVariant;
     className?: string;
+    disabled?: boolean;
+}
+interface IconButtonAsButton extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | 'href'> {
+    href?: undefined;
+}
+interface IconButtonAsAnchor extends CommonProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | 'href' | 'target' | 'rel'> {
+    href: string;
+    target?: AnchorTarget;
+    rel?: string;
 }
-declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+type IconButtonProps = IconButtonAsButton | IconButtonAsAnchor;
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LogoProps {
     /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
@@ -242,13 +265,17 @@ interface CardProps {
     image?: string | ReactNode;
     title?: string;
     description?: string;
+    /** Доп. класс для `<p class="description">` — для override (word-break, overflow-wrap, etc). */
+    descriptionClassName?: string;
     badges?: ReactNode[];
     action?: CardAction;
     footer?: ReactNode;
     children?: ReactNode;
+    /** Визуальный вариант. `'danger'` красит `.title` в `var(--color-error)`. Border остаётся default. */
+    variant?: 'default' | 'danger';
     className?: string;
 }
-declare function Card({ image, title, description, badges, action, footer, children, className, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ image, title, description, descriptionClassName, badges, action, footer, children, variant, className, }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface IconBadgeProps {
     icon: ReactNode;

package/dist/index.d.ts

@@ -1,17 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import React$1, { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
 
-type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'hero';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type AnchorTarget$1 = '_self' | '_blank' | '_parent' | '_top';
+interface CommonProps$1 {
     variant?: ButtonVariant;
     size?: ButtonSize;
     loading?: boolean;
     icon?: ReactNode;
     iconRight?: ReactNode;
     children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+interface ButtonAsButton extends CommonProps$1, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps$1 | 'href'> {
+    href?: undefined;
+}
+interface ButtonAsAnchor extends CommonProps$1, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps$1 | 'href' | 'target' | 'rel'> {
+    href: string;
+    target?: AnchorTarget$1;
+    rel?: string;
 }
-declare function Button({ variant, size, loading, icon, iconRight, children, disabled, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -82,12 +94,23 @@ interface MenuItemProps {
 declare function MenuItem({ text, active, onClick, className, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
 type IconButtonVariant = 'primary' | 'secondary' | 'clear' | 'disabled' | 'contrast';
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
+interface CommonProps {
     icon: ReactNode;
     variant?: IconButtonVariant;
     className?: string;
+    disabled?: boolean;
+}
+interface IconButtonAsButton extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | 'href'> {
+    href?: undefined;
+}
+interface IconButtonAsAnchor extends CommonProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | 'href' | 'target' | 'rel'> {
+    href: string;
+    target?: AnchorTarget;
+    rel?: string;
 }
-declare function IconButton({ icon, variant, className, disabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+type IconButtonProps = IconButtonAsButton | IconButtonAsAnchor;
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LogoProps {
     /** Полный override через произвольный JSX. Имеет приоритет над text/src. */
@@ -242,13 +265,17 @@ interface CardProps {
     image?: string | ReactNode;
     title?: string;
     description?: string;
+    /** Доп. класс для `<p class="description">` — для override (word-break, overflow-wrap, etc). */
+    descriptionClassName?: string;
     badges?: ReactNode[];
     action?: CardAction;
     footer?: ReactNode;
     children?: ReactNode;
+    /** Визуальный вариант. `'danger'` красит `.title` в `var(--color-error)`. Border остаётся default. */
+    variant?: 'default' | 'danger';
     className?: string;
 }
-declare function Card({ image, title, description, badges, action, footer, children, className, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ image, title, description, descriptionClassName, badges, action, footer, children, variant, className, }: CardProps): react_jsx_runtime.JSX.Element;
 
 interface IconBadgeProps {
     icon: ReactNode;

package/dist/index.js

@@ -188,6 +188,31 @@ __styleInject(`@charset "UTF-8";
   background: var(--border-color);
 }
 
+.Button-module_danger {
+  background: var(--color-error);
+  border: 1px solid var(--color-error);
+  color: #ffffff;
+  box-shadow: var(--shadow-sm);
+}
+.Button-module_danger:hover:not(:disabled) {
+  background: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+  box-shadow: var(--shadow-md);
+}
+.Button-module_danger:active:not(:disabled) {
+  background: var(--color-error-dark);
+  border-color: var(--color-error-dark);
+}
+.Button-module_danger:focus-visible {
+  outline: 2px solid var(--color-error-light);
+  outline-offset: 2px;
+}
+.Button-module_danger:disabled {
+  background: var(--color-error-light);
+  border-color: var(--color-error-light);
+  color: rgba(255, 255, 255, 0.7);
+}
+
 /* \u2500\u2500\u2500 Sizes \u2500\u2500\u2500 */
 .Button-module_sm {
   font-size: 13px;
@@ -222,9 +247,9 @@ __styleInject(`@charset "UTF-8";
   cursor: not-allowed;
   pointer-events: none;
 }`);
-var __default2 = { "root": "Button-module_root", "primary": "Button-module_primary", "ghost": "Button-module_ghost", "secondary": "Button-module_secondary", "outline": "Button-module_outline", "sm": "Button-module_sm", "md": "Button-module_md", "hero": "Button-module_hero", "disabled": "Button-module_disabled" };
-function Button(_a) {
-  var _b = _a, {
+var __default2 = { "root": "Button-module_root", "primary": "Button-module_primary", "ghost": "Button-module_ghost", "secondary": "Button-module_secondary", "outline": "Button-module_outline", "danger": "Button-module_danger", "sm": "Button-module_sm", "md": "Button-module_md", "hero": "Button-module_hero", "disabled": "Button-module_disabled" };
+function Button(props) {
+  const {
     variant = "primary",
     size = "md",
     loading = false,
@@ -233,27 +258,38 @@ function Button(_a) {
     children,
     disabled,
     className = ""
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "loading",
-    "icon",
-    "iconRight",
-    "children",
-    "disabled",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs(
+  } = props;
+  const rootClass = `${__default2.root} ${__default2[variant]} ${__default2[size]}${disabled || loading ? ` ${__default2.disabled}` : ""}${className ? ` ${className}` : ""}`;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : icon,
+    children,
+    iconRight
+  ] });
+  if (props.href !== void 0) {
+    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
+    const handleClick = disabled || loading ? (e) => e.preventDefault() : onClick;
+    return /* @__PURE__ */ jsx(
+      "a",
+      __spreadProps(__spreadValues({}, rest), {
+        href,
+        target,
+        rel: safeRel,
+        className: rootClass,
+        "aria-disabled": disabled || loading || void 0,
+        tabIndex: disabled || loading ? -1 : rest.tabIndex,
+        onClick: handleClick,
+        children: content
+      })
+    );
+  }
+  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx(
     "button",
-    __spreadProps(__spreadValues({
-      className: `${__default2.root} ${__default2[variant]} ${__default2[size]}${disabled || loading ? ` ${__default2.disabled}` : ""}${className ? ` ${className}` : ""}`,
-      disabled: disabled || loading
-    }, props), {
-      children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : icon,
-        children,
-        iconRight
-      ]
+    __spreadProps(__spreadValues({}, buttonRest), {
+      className: rootClass,
+      disabled: disabled || loading,
+      children: content
     })
   );
 }
@@ -894,15 +930,34 @@ __styleInject(`@charset "UTF-8";
   cursor: not-allowed;
 }`);
 var __default10 = { "root": "IconButton-module_root", "primary": "IconButton-module_primary", "secondary": "IconButton-module_secondary", "clear": "IconButton-module_clear", "disabled": "IconButton-module_disabled", "contrast": "IconButton-module_contrast", "isDisabled": "IconButton-module_isDisabled" };
-function IconButton(_a) {
-  var _b = _a, { icon, variant = "primary", className = "", disabled } = _b, props = __objRest(_b, ["icon", "variant", "className", "disabled"]);
+function IconButton(props) {
+  const { icon, variant = "primary", className = "", disabled } = props;
   const isDisabled = variant === "disabled" || disabled;
+  const rootClass = `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`;
+  if (props.href !== void 0) {
+    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
+    const handleClick = isDisabled ? (e) => e.preventDefault() : onClick;
+    return /* @__PURE__ */ jsx(
+      "a",
+      __spreadProps(__spreadValues({}, rest), {
+        href,
+        target,
+        rel: safeRel,
+        className: rootClass,
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isDisabled ? -1 : rest.tabIndex,
+        onClick: handleClick,
+        children: icon
+      })
+    );
+  }
+  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
   return /* @__PURE__ */ jsx(
     "button",
-    __spreadProps(__spreadValues({
-      className: `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`,
-      disabled: isDisabled
-    }, props), {
+    __spreadProps(__spreadValues({}, buttonRest), {
+      className: rootClass,
+      disabled: isDisabled,
       children: icon
     })
   );
@@ -1752,6 +1807,10 @@ __styleInject(`@charset "UTF-8";
   margin: 0;
 }
 
+.Card-module_danger .Card-module_title {
+  color: var(--color-error);
+}
+
 .Card-module_description {
   font-size: 13px;
   font-weight: 400;
@@ -1781,7 +1840,7 @@ __styleInject(`@charset "UTF-8";
 .Card-module_spacer {
   display: block;
 }`);
-var __default21 = { "root": "Card-module_root", "imageWrapper": "Card-module_imageWrapper", "image": "Card-module_image", "body": "Card-module_body", "bodyWithImage": "Card-module_bodyWithImage", "bodyNoImage": "Card-module_bodyNoImage", "titleBlock": "Card-module_titleBlock", "title": "Card-module_title", "description": "Card-module_description", "footer": "Card-module_footer", "footerRow": "Card-module_footerRow", "badges": "Card-module_badges", "spacer": "Card-module_spacer" };
+var __default21 = { "root": "Card-module_root", "imageWrapper": "Card-module_imageWrapper", "image": "Card-module_image", "body": "Card-module_body", "bodyWithImage": "Card-module_bodyWithImage", "bodyNoImage": "Card-module_bodyNoImage", "titleBlock": "Card-module_titleBlock", "title": "Card-module_title", "danger": "Card-module_danger", "description": "Card-module_description", "footer": "Card-module_footer", "footerRow": "Card-module_footerRow", "badges": "Card-module_badges", "spacer": "Card-module_spacer" };
 
 // css-inject-scss:/Users/dimakozh/Desktop/projects/kapustin.cc/packages/ui/src/molecules/IconBadge.module.scss
 __styleInject(`@charset "UTF-8";
@@ -1809,16 +1868,19 @@ function Card({
   image,
   title,
   description,
+  descriptionClassName = "",
   badges,
   action,
   footer,
   children,
+  variant = "default",
   className = ""
 }) {
   const hasImage = !!image;
   const hasBadgesOrAction = !!(badges && badges.length > 0 || action);
   const showFooter = !!footer || hasBadgesOrAction;
-  return /* @__PURE__ */ jsxs("div", { className: `${__default21.root}${className ? ` ${className}` : ""}`, children: [
+  const variantClass = variant === "danger" ? ` ${__default21.danger}` : "";
+  return /* @__PURE__ */ jsxs("div", { className: `${__default21.root}${variantClass}${className ? ` ${className}` : ""}`, children: [
     hasImage && /* @__PURE__ */ jsx("div", { className: __default21.imageWrapper, children: typeof image === "string" ? (
       // eslint-disable-next-line @next/next/no-img-element
       /* @__PURE__ */ jsx("img", { src: image, alt: title || "", className: __default21.image })
@@ -1826,7 +1888,7 @@ function Card({
     /* @__PURE__ */ jsxs("div", { className: `${__default21.body} ${hasImage ? __default21.bodyWithImage : __default21.bodyNoImage}`, children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { className: __default21.titleBlock, children: [
         title && /* @__PURE__ */ jsx("h3", { className: __default21.title, children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: __default21.description, children: description })
+        description && /* @__PURE__ */ jsx("p", { className: `${__default21.description}${descriptionClassName ? ` ${descriptionClassName}` : ""}`, children: description })
       ] }),
       children,
       showFooter && /* @__PURE__ */ jsx("div", { className: __default21.footer, children: footer || /* @__PURE__ */ jsxs("div", { className: __default21.footerRow, children: [
@@ -5808,7 +5870,6 @@ __styleInject(`.PromoSplit-module_root {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem;
 }
 
 .PromoSplit-module_mediaPlaceholder {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmitriikapustin/ui",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
   "author": "Kapustin Team",
   "license": "MIT",