@ikatec/nebula-react 1.5.0 → 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>>;
 
@@ -1019,6 +1021,8 @@ declare enum AvatarVariantEnum {
     random = "random"
 }
 declare enum AvatarSizeEnum {
+    '3xs' = "3xs",// 20px
+    '2xs' = "2xs",// 24px
     'xs' = "xs",// 32px
     'sm' = "sm",// 40px
     'md' = "md",// 44px

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>>;
 
@@ -1019,6 +1021,8 @@ declare enum AvatarVariantEnum {
     random = "random"
 }
 declare enum AvatarSizeEnum {
+    '3xs' = "3xs",// 20px
+    '2xs' = "2xs",// 24px
     'xs' = "xs",// 32px
     'sm' = "sm",// 40px
     'md' = "md",// 44px

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";
@@ -8329,6 +8399,10 @@ TipCardMedia.displayName = "TipCardMedia";
 var avatarVariantsConfig = classVarianceAuthority.cva("relative flex size-8 shrink-0 rounded-full", {
   variants: {
     size: {
+      "3xs": 'size-[20px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
+      // 20px
+      "2xs": 'size-[24px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
+      // 24px
       xs: 'size-[32px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
       // 32px
       sm: 'size-[40px] [&>[data-slot="avatar-hover-action"]]:text-xl [&>[data-slot="avatar-fallback"]]:text-sm',
@@ -8372,6 +8446,8 @@ var AvatarVariantEnum = /* @__PURE__ */ ((AvatarVariantEnum2) => {
   return AvatarVariantEnum2;
 })(AvatarVariantEnum || {});
 var AvatarSizeEnum = /* @__PURE__ */ ((AvatarSizeEnum2) => {
+  AvatarSizeEnum2["3xs"] = "3xs";
+  AvatarSizeEnum2["2xs"] = "2xs";
   AvatarSizeEnum2["xs"] = "xs";
   AvatarSizeEnum2["sm"] = "sm";
   AvatarSizeEnum2["md"] = "md";

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";
@@ -8286,6 +8356,10 @@ TipCardMedia.displayName = "TipCardMedia";
 var avatarVariantsConfig = cva("relative flex size-8 shrink-0 rounded-full", {
   variants: {
     size: {
+      "3xs": 'size-[20px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
+      // 20px
+      "2xs": 'size-[24px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
+      // 24px
       xs: 'size-[32px] [&>[data-slot="avatar-hover-action"]]:text-sm [&>[data-slot="avatar-fallback"]]:text-sm',
       // 32px
       sm: 'size-[40px] [&>[data-slot="avatar-hover-action"]]:text-xl [&>[data-slot="avatar-fallback"]]:text-sm',
@@ -8329,6 +8403,8 @@ var AvatarVariantEnum = /* @__PURE__ */ ((AvatarVariantEnum2) => {
   return AvatarVariantEnum2;
 })(AvatarVariantEnum || {});
 var AvatarSizeEnum = /* @__PURE__ */ ((AvatarSizeEnum2) => {
+  AvatarSizeEnum2["3xs"] = "3xs";
+  AvatarSizeEnum2["2xs"] = "2xs";
   AvatarSizeEnum2["xs"] = "xs";
   AvatarSizeEnum2["sm"] = "sm";
   AvatarSizeEnum2["md"] = "md";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.5.0",
+  "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",