@ikatec/nebula-react 1.5.1-beta.1 → 1.6.0-beta.1

package/dist/index.d.mts

@@ -515,6 +515,8 @@ interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElemen
     size?: 'md' | 'sm';
     asChild?: boolean;
     children: ReactNode;
+    variant?: 'default' | 'external';
+    disabled?: boolean;
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 

package/dist/index.d.ts

@@ -515,6 +515,8 @@ interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElemen
     size?: 'md' | 'sm';
     asChild?: boolean;
     children: ReactNode;
+    variant?: 'default' | 'external';
+    disabled?: boolean;
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 

package/dist/index.js

@@ -3458,19 +3458,89 @@ var Caption = React31.forwardRef(
   }
 );
 Caption.displayName = "Caption";
+var linkVariantsConfig = classVarianceAuthority.cva(
+  `
+    cursor-pointer
+    inline-flex
+    items-center
+    transition-colors
+    focus-visible:outline-none
+    focus-visible:underline
+    hover:underline
+  `,
+  {
+    variants: {
+      variant: {
+        default: `
+          text-typography-link-default-color
+          hover:text-typography-link-default-hover
+          active:text-typography-link-default-active
+          aria-disabled:text-typography-link-default-disabled
+        `,
+        external: `
+          text-typography-link-external-color
+          hover:text-typography-link-external-hover
+          active:text-typography-link-external-active
+          aria-disabled:text-typography-link-external-disabled
+        `
+      },
+      size: {
+        md: `
+          text-link-md
+          tracking-link-md
+          font-link-md
+          leading-link-md
+        `,
+        sm: `
+          text-link-sm
+          tracking-link-sm
+          font-link-sm
+          leading-link-sm
+        `
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
 var Link = React31.forwardRef(
-  ({ className, size: size4 = "md", asChild = false, ...rest }, ref) => {
+  ({
+    className,
+    size: size4 = "md",
+    asChild = false,
+    variant: variant3 = "default",
+    disabled = false,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "a";
     const classNames = cn(
-      "cursor-pointer",
-      {
-        "text-typography-link-md text-link-md tracking-link-md font-link-md leading-link-md underline": size4 === "md",
-        "text-typography-link-sm text-link-sm tracking-link-sm font-link-sm leading-link-sm underline": size4 === "sm"
-      },
-      "hover:text-typography-link-hover",
+      linkVariantsConfig({
+        size: size4,
+        variant: variant3
+      }),
       className
     );
-    if (!asChild) return /* @__PURE__ */ jsxRuntime.jsx("a", { ...rest, className: classNames, ref });
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ...rest, className: classNames, ref });
+    const linkContent = /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: cn(
+          linkVariantsConfig({
+            size: size4,
+            variant: variant3
+          }),
+          className
+        )
+      }
+    );
+    if (!disabled) return linkContent;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds cursor-not-allowed", children: React31__namespace.default.cloneElement(linkContent, {
+      className: cn(classNames, "pointer-events-none"),
+      "aria-disabled": true
+    }) });
   }
 );
 Link.displayName = "Link";

package/dist/index.mjs

@@ -3415,19 +3415,89 @@ var Caption = forwardRef(
   }
 );
 Caption.displayName = "Caption";
+var linkVariantsConfig = cva(
+  `
+    cursor-pointer
+    inline-flex
+    items-center
+    transition-colors
+    focus-visible:outline-none
+    focus-visible:underline
+    hover:underline
+  `,
+  {
+    variants: {
+      variant: {
+        default: `
+          text-typography-link-default-color
+          hover:text-typography-link-default-hover
+          active:text-typography-link-default-active
+          aria-disabled:text-typography-link-default-disabled
+        `,
+        external: `
+          text-typography-link-external-color
+          hover:text-typography-link-external-hover
+          active:text-typography-link-external-active
+          aria-disabled:text-typography-link-external-disabled
+        `
+      },
+      size: {
+        md: `
+          text-link-md
+          tracking-link-md
+          font-link-md
+          leading-link-md
+        `,
+        sm: `
+          text-link-sm
+          tracking-link-sm
+          font-link-sm
+          leading-link-sm
+        `
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
 var Link = forwardRef(
-  ({ className, size: size4 = "md", asChild = false, ...rest }, ref) => {
+  ({
+    className,
+    size: size4 = "md",
+    asChild = false,
+    variant: variant3 = "default",
+    disabled = false,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "a";
     const classNames = cn(
-      "cursor-pointer",
-      {
-        "text-typography-link-md text-link-md tracking-link-md font-link-md leading-link-md underline": size4 === "md",
-        "text-typography-link-sm text-link-sm tracking-link-sm font-link-sm leading-link-sm underline": size4 === "sm"
-      },
-      "hover:text-typography-link-hover",
+      linkVariantsConfig({
+        size: size4,
+        variant: variant3
+      }),
       className
     );
-    if (!asChild) return /* @__PURE__ */ jsx("a", { ...rest, className: classNames, ref });
-    return /* @__PURE__ */ jsx(Slot, { ...rest, className: classNames, ref });
+    const linkContent = /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: cn(
+          linkVariantsConfig({
+            size: size4,
+            variant: variant3
+          }),
+          className
+        )
+      }
+    );
+    if (!disabled) return linkContent;
+    return /* @__PURE__ */ jsx("span", { className: "nebula-ds cursor-not-allowed", children: React31__default.cloneElement(linkContent, {
+      className: cn(classNames, "pointer-events-none"),
+      "aria-disabled": true
+    }) });
   }
 );
 Link.displayName = "Link";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.5.1-beta.1",
+  "version": "1.6.0-beta.1",
   "description": "React components for Nebula Design System",
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@ikatec/eslint-config": "*",
-    "@ikatec/nebula-tokens": "1.4.0",
+    "@ikatec/nebula-tokens": "1.5.0-beta.1",
     "@ikatec/typescript-config": "*",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.5",