@sproutsocial/seeds-react-link 1.1.6 → 1.1.12

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     4.36 KB
-CJS dist/index.js.map 5.70 KB
+CJS dist/index.js     6.97 KB
+CJS dist/index.js.map 11.31 KB
 CJS ⚡️ Build success in 82ms
-ESM dist/esm/index.js     2.43 KB
-ESM dist/esm/index.js.map 5.67 KB
-ESM ⚡️ Build success in 82ms
+ESM dist/esm/index.js     4.89 KB
+ESM dist/esm/index.js.map 11.24 KB
+ESM ⚡️ Build success in 83ms
 DTS Build start
-DTS ⚡️ Build success in 4618ms
-DTS dist/index.d.ts  1.19 KB
-DTS dist/index.d.mts 1.19 KB
-Done in 6.36s.
+DTS ⚡️ Build success in 6217ms
+DTS dist/index.d.ts  1.40 KB
+DTS dist/index.d.mts 1.40 KB
+Done in 7.82s.

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @sproutsocial/seeds-react-link
 
+## 1.1.12
+
+### Patch Changes
+
+- edc1819: Migrate link, text, banner, loader-button, and content-header to the Tailwind hybrid pattern (mirroring seeds-react-button). Each component gains a pure CSS-class `*Tailwind` implementation, a `*Hybrid` router that falls back to styled-components when system/styled props are present, and a component-scoped CSS file of `seeds-*` classes built on `var(--…)` tokens. Component CSS is wrapped in `@layer components` so consumer Tailwind utility overrides win the cascade, and the per-component CSS import is dropped from the `*Tailwind` files since the CSS is aggregated into `@sproutsocial/racine/css/components` at build time. Legacy `styles.ts` paths are unchanged.
+- Updated dependencies [edc1819]
+  - @sproutsocial/seeds-react-text@1.4.3
+
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-text@1.4.2
+
+## 1.1.10
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-mixins@4.3.7
+
+## 1.1.9
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-mixins@4.3.6
+  - @sproutsocial/seeds-react-text@1.4.1
+
+## 1.1.8
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-mixins@4.3.5
+
+## 1.1.7
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-mixins@4.3.4
+
 ## 1.1.6
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,5 +1,8 @@
 // src/Link.tsx
-import * as React from "react";
+import * as React3 from "react";
+
+// src/LinkHybrid.tsx
+import * as React2 from "react";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -52,9 +55,26 @@ var Container = styled(Text)`
 `;
 var styles_default = Container;
 
-// src/Link.tsx
+// src/LinkTailwind.tsx
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-var Link = React.forwardRef(
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var LinkTailwind = React.forwardRef(
   ({
     href,
     external,
@@ -64,27 +84,32 @@ var Link = React.forwardRef(
     as,
     underline = true,
     qa = {},
+    className,
     ...rest
   }, ref) => {
-    if (!href && external) {
-      console.warn(
-        "Warning: external prop cannot be set without a href declaration"
-      );
-    }
     const type = as || (href ? "a" : "button");
+    const Component = type;
+    const classes = cn(
+      "seeds-link",
+      {
+        "seeds-link-underline": !!underline,
+        "seeds-link-disabled": !!disabled2,
+        "seeds-link-no-href": !href
+      },
+      className
+    );
     return /* @__PURE__ */ jsx(
-      styles_default,
+      Component,
       {
         ref,
         href,
         target: external ? "_blank" : void 0,
         type: type === "button" ? "button" : void 0,
         rel: external ? "noopener noreferrer" : void 0,
-        forwardedAs: type,
         "aria-disabled": disabled2 ? disabled2 : void 0,
         disabled: disabled2,
         onClick,
-        underline,
+        className: classes,
         "data-qa-link": "",
         "data-qa-link-isdisabled": disabled2 === true,
         ...qa,
@@ -94,6 +119,85 @@ var Link = React.forwardRef(
     );
   }
 );
+LinkTailwind.displayName = "LinkTailwind";
+
+// src/LinkHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TYPOGRAPHY_KEYS = [
+  "fontSize",
+  "typeScale",
+  "fontWeight",
+  "textAlign",
+  "lineHeight",
+  "isItalicized",
+  "fontFamily",
+  "fontStyle"
+];
+var hasLinkStyledProps = (props) => hasStyledProps(props) || TYPOGRAPHY_KEYS.some((key) => props[key] !== void 0);
+var LinkHybrid = React2.forwardRef(
+  ({
+    href,
+    external,
+    children,
+    disabled: disabled2,
+    onClick,
+    as,
+    underline = true,
+    qa = {},
+    ...rest
+  }, ref) => {
+    if (!href && external) {
+      console.warn(
+        "Warning: external prop cannot be set without a href declaration"
+      );
+    }
+    const type = as || (href ? "a" : "button");
+    if (hasLinkStyledProps(rest)) {
+      return /* @__PURE__ */ jsx2(
+        styles_default,
+        {
+          ref,
+          href,
+          target: external ? "_blank" : void 0,
+          type: type === "button" ? "button" : void 0,
+          rel: external ? "noopener noreferrer" : void 0,
+          forwardedAs: type,
+          "aria-disabled": disabled2 ? disabled2 : void 0,
+          disabled: disabled2,
+          onClick,
+          underline,
+          "data-qa-link": "",
+          "data-qa-link-isdisabled": disabled2 === true,
+          ...qa,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx2(
+      LinkTailwind,
+      {
+        ref,
+        href,
+        external,
+        disabled: disabled2,
+        onClick,
+        as,
+        underline,
+        qa,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+LinkHybrid.displayName = "Link";
+var LinkHybrid_default = LinkHybrid;
+
+// src/Link.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Link = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx3(LinkHybrid_default, { ...props, ref }));
 Link.displayName = "Link";
 var Link_default = Link;
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Link.tsx","../../src/styles.ts","../../src/LinkTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Link = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      ...rest\n    },\n    ref\n  ) => {\n    if (!href && external) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"Warning: external prop cannot be set without a href declaration\"\n      );\n    }\n\n    const type = as || (href ? \"a\" : \"button\");\n    return (\n      <Container\n        ref={ref}\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        type={type === \"button\" ? \"button\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        forwardedAs={type}\n        aria-disabled={disabled ? disabled : undefined}\n        disabled={disabled}\n        onClick={onClick}\n        underline={underline}\n        data-qa-link=\"\"\n        data-qa-link-isdisabled={disabled === true}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n","import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,gBAAgB;AACpC,OAAO,UAAU;AAGjB,IAAM,YAAY,OAAO,IAAI;AAAA;AAAA,iBAEZ,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,qBAC7B,CAAC,UAAW,MAAM,YAAY,cAAc,MAAO;AAAA;AAAA;AAAA,IAGpE,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA,iBACY,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,aAGrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,MAI/C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,CAAC,UACD,CAAC,MAAM,QACP;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAAA,KAEpC,MAAM;AAAA,KACN,UAAU;AAAA,KACV,OAAO;AAAA;AAGZ,IAAO,iBAAQ;;;ADxBT;AA3BN,IAAM,OAAa;AAAA,EAIjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,KAAK,CAAC;AAAA,IACN,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,CAAC,QAAQ,UAAU;AAErB,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,UAAM,OAAO,OAAO,OAAO,MAAM;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,MAAM,SAAS,WAAW,WAAW;AAAA,QACrC,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAa;AAAA,QACb,iBAAeA,YAAWA,YAAW;AAAA,QACrC,UAAUA;AAAA,QACV;AAAA,QACA;AAAA,QACA,gBAAa;AAAA,QACb,2BAAyBA,cAAa;AAAA,QACrC,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AEvDf,OAAuB;;;ACAvB,SAAS,sBAAsB;;;ACE/B,IAAO,gBAAQ;","names":["disabled"]}
+{"version":3,"sources":["../../src/Link.tsx","../../src/LinkHybrid.tsx","../../src/styles.ts","../../src/LinkTailwind.tsx","../../src/LinkTypes.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport LinkHybrid from \"./LinkHybrid\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\n/**\n * Link component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system/typography props or a styled() extension).\n */\nconst Link = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>((props, ref) => <LinkHybrid {...props} ref={ref} />);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n","/**\n * Hybrid Link Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Link's underlying Container is `styled(Text)`, so it accepts typography props\n * (e.g. `fontSize`). `hasStyledProps` does not include typography props, so we\n * additionally route to the styled-components path when any typography prop is\n * present — mirroring Text — so font sizing is never silently dropped.\n */\n\nimport * as React from \"react\";\nimport Container from \"./styles\"; // Styled-components version\nimport { LinkTailwind } from \"./LinkTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst TYPOGRAPHY_KEYS = [\n  \"fontSize\",\n  \"typeScale\",\n  \"fontWeight\",\n  \"textAlign\",\n  \"lineHeight\",\n  \"isItalicized\",\n  \"fontFamily\",\n  \"fontStyle\",\n] as const;\n\nconst hasLinkStyledProps = (props: Record<string, unknown>): boolean =>\n  hasStyledProps(props) ||\n  TYPOGRAPHY_KEYS.some((key) => props[key] !== undefined);\n\nconst LinkHybrid = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      ...rest\n    },\n    ref\n  ) => {\n    if (!href && external) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"Warning: external prop cannot be set without a href declaration\"\n      );\n    }\n\n    const type = as || (href ? \"a\" : \"button\");\n\n    if (hasLinkStyledProps(rest)) {\n      return (\n        <Container\n          ref={ref}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          type={type === \"button\" ? \"button\" : undefined}\n          rel={external ? \"noopener noreferrer\" : undefined}\n          forwardedAs={type}\n          aria-disabled={disabled ? disabled : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          underline={underline}\n          data-qa-link=\"\"\n          data-qa-link-isdisabled={disabled === true}\n          {...qa}\n          {...rest}\n        >\n          {children}\n        </Container>\n      );\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return (\n      <LinkTailwind\n        ref={ref}\n        href={href}\n        external={external}\n        disabled={disabled}\n        onClick={onClick}\n        as={as}\n        underline={underline}\n        qa={qa}\n        {...rest}\n      >\n        {children}\n      </LinkTailwind>\n    );\n  }\n);\n\nLinkHybrid.displayName = \"Link\";\n\nexport default LinkHybrid;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Link component\n * Uses Seeds link CSS classes from link.css\n */\n\nimport * as React from \"react\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const LinkTailwind = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const type = as || (href ? \"a\" : \"button\");\n    const Component = type as any;\n\n    const classes = cn(\n      \"seeds-link\",\n      {\n        \"seeds-link-underline\": !!underline,\n        \"seeds-link-disabled\": !!disabled,\n        \"seeds-link-no-href\": !href,\n      },\n      className\n    );\n\n    return (\n      <Component\n        ref={ref}\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        type={type === \"button\" ? \"button\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        aria-disabled={disabled ? disabled : undefined}\n        disabled={disabled}\n        onClick={onClick}\n        className={classes}\n        data-qa-link=\"\"\n        data-qa-link-isdisabled={disabled === true}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nLinkTailwind.displayName = \"LinkTailwind\";\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n","import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n"],"mappings":"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","names":["React","React","disabled","jsx","disabled","jsx"]}

package/dist/index.d.mts

@@ -19,6 +19,11 @@ interface TypeLinkProps extends Omit<TypeTextProps, keyof Omit<React.ComponentPr
     };
 }
 
+/**
+ * Link component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system/typography props or a styled() extension).
+ */
 declare const Link: React.ForwardRefExoticComponent<Omit<TypeLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export { Link, type TypeLinkProps, Link as default };

package/dist/index.d.ts

@@ -19,6 +19,11 @@ interface TypeLinkProps extends Omit<TypeTextProps, keyof Omit<React.ComponentPr
     };
 }
 
+/**
+ * Link component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system/typography props or a styled() extension).
+ */
 declare const Link: React.ForwardRefExoticComponent<Omit<TypeLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export { Link, type TypeLinkProps, Link as default };

package/dist/index.js

@@ -36,7 +36,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Link.tsx
-var React = __toESM(require("react"));
+var React3 = __toESM(require("react"));
+
+// src/LinkHybrid.tsx
+var React2 = __toESM(require("react"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -85,9 +88,26 @@ var Container = (0, import_styled_components.default)(import_seeds_react_text.de
 `;
 var styles_default = Container;
 
-// src/Link.tsx
+// src/LinkTailwind.tsx
+var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Link = React.forwardRef(
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var LinkTailwind = React.forwardRef(
   ({
     href,
     external,
@@ -97,27 +117,32 @@ var Link = React.forwardRef(
     as,
     underline = true,
     qa = {},
+    className,
     ...rest
   }, ref) => {
-    if (!href && external) {
-      console.warn(
-        "Warning: external prop cannot be set without a href declaration"
-      );
-    }
     const type = as || (href ? "a" : "button");
+    const Component = type;
+    const classes = cn(
+      "seeds-link",
+      {
+        "seeds-link-underline": !!underline,
+        "seeds-link-disabled": !!disabled2,
+        "seeds-link-no-href": !href
+      },
+      className
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      styles_default,
+      Component,
       {
         ref,
         href,
         target: external ? "_blank" : void 0,
         type: type === "button" ? "button" : void 0,
         rel: external ? "noopener noreferrer" : void 0,
-        forwardedAs: type,
         "aria-disabled": disabled2 ? disabled2 : void 0,
         disabled: disabled2,
         onClick,
-        underline,
+        className: classes,
         "data-qa-link": "",
         "data-qa-link-isdisabled": disabled2 === true,
         ...qa,
@@ -127,11 +152,90 @@ var Link = React.forwardRef(
     );
   }
 );
+LinkTailwind.displayName = "LinkTailwind";
+
+// src/LinkHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TYPOGRAPHY_KEYS = [
+  "fontSize",
+  "typeScale",
+  "fontWeight",
+  "textAlign",
+  "lineHeight",
+  "isItalicized",
+  "fontFamily",
+  "fontStyle"
+];
+var hasLinkStyledProps = (props) => (0, import_seeds_react_system_props2.hasStyledProps)(props) || TYPOGRAPHY_KEYS.some((key) => props[key] !== void 0);
+var LinkHybrid = React2.forwardRef(
+  ({
+    href,
+    external,
+    children,
+    disabled: disabled2,
+    onClick,
+    as,
+    underline = true,
+    qa = {},
+    ...rest
+  }, ref) => {
+    if (!href && external) {
+      console.warn(
+        "Warning: external prop cannot be set without a href declaration"
+      );
+    }
+    const type = as || (href ? "a" : "button");
+    if (hasLinkStyledProps(rest)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        styles_default,
+        {
+          ref,
+          href,
+          target: external ? "_blank" : void 0,
+          type: type === "button" ? "button" : void 0,
+          rel: external ? "noopener noreferrer" : void 0,
+          forwardedAs: type,
+          "aria-disabled": disabled2 ? disabled2 : void 0,
+          disabled: disabled2,
+          onClick,
+          underline,
+          "data-qa-link": "",
+          "data-qa-link-isdisabled": disabled2 === true,
+          ...qa,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      LinkTailwind,
+      {
+        ref,
+        href,
+        external,
+        disabled: disabled2,
+        onClick,
+        as,
+        underline,
+        qa,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+LinkHybrid.displayName = "Link";
+var LinkHybrid_default = LinkHybrid;
+
+// src/Link.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Link = React3.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkHybrid_default, { ...props, ref }));
 Link.displayName = "Link";
 var Link_default = Link;
 
 // src/LinkTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/constants.ts
 var import_seeds_color = require("@sproutsocial/seeds-color");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Link.tsx","../src/styles.ts","../src/LinkTypes.ts","../src/constants.ts"],"sourcesContent":["import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Link = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      ...rest\n    },\n    ref\n  ) => {\n    if (!href && external) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"Warning: external prop cannot be set without a href declaration\"\n      );\n    }\n\n    const type = as || (href ? \"a\" : \"button\");\n    return (\n      <Container\n        ref={ref}\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        type={type === \"button\" ? \"button\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        forwardedAs={type}\n        aria-disabled={disabled ? disabled : undefined}\n        disabled={disabled}\n        onClick={onClick}\n        underline={underline}\n        data-qa-link=\"\"\n        data-qa-link-isdisabled={disabled === true}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAIO;AACP,gCAAoC;AACpC,8BAAiB;AAGjB,IAAM,gBAAY,yBAAAA,SAAO,wBAAAC,OAAI;AAAA;AAAA,iBAEZ,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,qBAC7B,CAAC,UAAW,MAAM,YAAY,cAAc,MAAO;AAAA;AAAA;AAAA,IAGpE,CAAC,UACD,MAAM,YACN;AAAA;AAAA;AAAA,KAGC;AAAA,iBACY,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,WACjD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,aAGrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,MAI/C,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,CAAC,UACD,CAAC,MAAM,QACP;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAAA,KAEpC,sCAAM;AAAA,KACN,0CAAU;AAAA,KACV,uCAAO;AAAA;AAGZ,IAAO,iBAAQ;;;ADxBT;AA3BN,IAAM,OAAa;AAAA,EAIjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAC;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,KAAK,CAAC;AAAA,IACN,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,CAAC,QAAQ,UAAU;AAErB,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,UAAM,OAAO,OAAO,OAAO,MAAM;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,MAAM,SAAS,WAAW,WAAW;AAAA,QACrC,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAa;AAAA,QACb,iBAAeA,YAAWA,YAAW;AAAA,QACrC,UAAUA;AAAA,QACV;AAAA,QACA;AAAA,QACA,gBAAa;AAAA,QACb,2BAAyBA,cAAa;AAAA,QACrC,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AEvDf,IAAAC,SAAuB;;;ACAvB,yBAA+B;;;AJE/B,IAAO,gBAAQ;","names":["styled","Text","disabled","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Link.tsx","../src/LinkHybrid.tsx","../src/styles.ts","../src/LinkTailwind.tsx","../src/LinkTypes.ts","../src/constants.ts"],"sourcesContent":["import Link from \"./Link\";\n\nexport default Link;\nexport { Link };\nexport * from \"./LinkTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport LinkHybrid from \"./LinkHybrid\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\n/**\n * Link component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system/typography props or a styled() extension).\n */\nconst Link = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>((props, ref) => <LinkHybrid {...props} ref={ref} />);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n","/**\n * Hybrid Link Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Link's underlying Container is `styled(Text)`, so it accepts typography props\n * (e.g. `fontSize`). `hasStyledProps` does not include typography props, so we\n * additionally route to the styled-components path when any typography prop is\n * present — mirroring Text — so font sizing is never silently dropped.\n */\n\nimport * as React from \"react\";\nimport Container from \"./styles\"; // Styled-components version\nimport { LinkTailwind } from \"./LinkTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst TYPOGRAPHY_KEYS = [\n  \"fontSize\",\n  \"typeScale\",\n  \"fontWeight\",\n  \"textAlign\",\n  \"lineHeight\",\n  \"isItalicized\",\n  \"fontFamily\",\n  \"fontStyle\",\n] as const;\n\nconst hasLinkStyledProps = (props: Record<string, unknown>): boolean =>\n  hasStyledProps(props) ||\n  TYPOGRAPHY_KEYS.some((key) => props[key] !== undefined);\n\nconst LinkHybrid = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      ...rest\n    },\n    ref\n  ) => {\n    if (!href && external) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"Warning: external prop cannot be set without a href declaration\"\n      );\n    }\n\n    const type = as || (href ? \"a\" : \"button\");\n\n    if (hasLinkStyledProps(rest)) {\n      return (\n        <Container\n          ref={ref}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          type={type === \"button\" ? \"button\" : undefined}\n          rel={external ? \"noopener noreferrer\" : undefined}\n          forwardedAs={type}\n          aria-disabled={disabled ? disabled : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          underline={underline}\n          data-qa-link=\"\"\n          data-qa-link-isdisabled={disabled === true}\n          {...qa}\n          {...rest}\n        >\n          {children}\n        </Container>\n      );\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return (\n      <LinkTailwind\n        ref={ref}\n        href={href}\n        external={external}\n        disabled={disabled}\n        onClick={onClick}\n        as={as}\n        underline={underline}\n        qa={qa}\n        {...rest}\n      >\n        {children}\n      </LinkTailwind>\n    );\n  }\n);\n\nLinkHybrid.displayName = \"Link\";\n\nexport default LinkHybrid;\n","import styled, { css } from \"styled-components\";\nimport {\n  TYPOGRAPHY,\n  COMMON,\n  FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\nconst Container = styled(Text)<TypeLinkProps>`\n  border: 0;\n  font-family: ${(props) => props.theme.fontFamily};\n  text-decoration: ${(props) => (props.underline ? \"underline\" : \"none\")};\n  appearance: none;\n  cursor: pointer;\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n      cursor: not-allowed;\n    `}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.link.base};\n\n  &:hover {\n    color: ${(props) => props.theme.colors.link.hover};\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ${(props) => props.theme.colors.link.hover};\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  &:focus:active {\n    box-shadow: none;\n  }\n\n  ${(props) =>\n    !props.href &&\n    css`\n      background: none;\n    `}\n\n  ${(props) => props.disabled && disabled}\n\n   ${COMMON}\n   ${TYPOGRAPHY}\n   ${FLEXBOX}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Link component\n * Uses Seeds link CSS classes from link.css\n */\n\nimport * as React from \"react\";\nimport type { TypeLinkProps } from \"./LinkTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const LinkTailwind = React.forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  TypeLinkProps\n>(\n  (\n    {\n      href,\n      external,\n      children,\n      disabled,\n      onClick,\n      as,\n      underline = true,\n      qa = {},\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const type = as || (href ? \"a\" : \"button\");\n    const Component = type as any;\n\n    const classes = cn(\n      \"seeds-link\",\n      {\n        \"seeds-link-underline\": !!underline,\n        \"seeds-link-disabled\": !!disabled,\n        \"seeds-link-no-href\": !href,\n      },\n      className\n    );\n\n    return (\n      <Component\n        ref={ref}\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        type={type === \"button\" ? \"button\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        aria-disabled={disabled ? disabled : undefined}\n        disabled={disabled}\n        onClick={onClick}\n        className={classes}\n        data-qa-link=\"\"\n        data-qa-link-isdisabled={disabled === true}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nLinkTailwind.displayName = \"LinkTailwind\";\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport type { TypeSystemFlexboxProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeLinkProps\n  extends Omit<\n      TypeTextProps,\n      keyof Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">\n    >,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\">,\n    TypeSystemFlexboxProps {\n  /** Optional prop to make the URL open in a new tab */\n  external?: boolean;\n  children: React.ReactNode;\n\n  /** Setting this prop will cause the component to be rendered as a link */\n  href?: string;\n\n  /** Disables user action and applies a disabled style to the component */\n  disabled?: boolean;\n\n  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */\n  onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n  underline?: boolean;\n  qa?: { [key: string]: unknown }; // should this be string|number?\n}\n","import { COLOR_BLUE_900 } from \"@sproutsocial/seeds-color\";\n\nconst defaultLink = {\n  color: \"link\",\n  hoverColor: \"link.hover\",\n  activeColor: COLOR_BLUE_900,\n  fontWeight: \"semibold\",\n};\n\nconst linkTheme = {\n  default: defaultLink,\n};\n\nexport default linkTheme;\n"],"mappings":"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","names":["React","React","styled","Text","disabled","import_seeds_react_system_props","import_jsx_runtime","disabled","import_jsx_runtime","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-link",
-  "version": "1.1.6",
+  "version": "1.1.12",
   "description": "Seeds React Link",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,10 +18,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-mixins": "^4.3.3",
-    "@sproutsocial/seeds-react-text": "^1.4.0",
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-mixins": "^4.3.7",
+    "@sproutsocial/seeds-react-text": "^1.4.3",
     "@sproutsocial/seeds-color": "^2.3.0"
   },
   "devDependencies": {
@@ -35,8 +35,8 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-icon": "^2.3.2",
-    "@sproutsocial/seeds-react-box": "^1.1.16"
+    "@sproutsocial/seeds-react-icon": "^2.4.0",
+    "@sproutsocial/seeds-react-box": "^1.1.21"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Link.stories.tsx

@@ -99,3 +99,20 @@ export const DecorativeBackgrounds: Story = {
     />
   ),
 };
+
+/**
+ * Demonstrates that Tailwind utility classes passed via `className` override the
+ * component's own CSS. Because `link.css` lives in `@layer components`, the
+ * `text-[#FF6B00]` utility wins the cascade and recolors the link text orange,
+ * overriding the component's default blue link color. Passing only `className`
+ * (no typography/system props) routes the Link to its Tailwind path so the
+ * override applies.
+ */
+export const TailwindOverrides: Story = {
+  render: () => (
+    <Link href="#tailwind-override" className="text-[#FF6B00]">
+      Tailwind utilities override the component CSS
+    </Link>
+  ),
+  name: "🚀 Tailwind class overrides",
+};

package/src/Link.tsx

@@ -1,55 +1,16 @@
 import * as React from "react";
-import Container from "./styles";
+import LinkHybrid from "./LinkHybrid";
 import type { TypeLinkProps } from "./LinkTypes";
 
+/**
+ * Link component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system/typography props or a styled() extension).
+ */
 const Link = React.forwardRef<
   HTMLAnchorElement | HTMLButtonElement,
   TypeLinkProps
->(
-  (
-    {
-      href,
-      external,
-      children,
-      disabled,
-      onClick,
-      as,
-      underline = true,
-      qa = {},
-      ...rest
-    },
-    ref
-  ) => {
-    if (!href && external) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        "Warning: external prop cannot be set without a href declaration"
-      );
-    }
-
-    const type = as || (href ? "a" : "button");
-    return (
-      <Container
-        ref={ref}
-        href={href}
-        target={external ? "_blank" : undefined}
-        type={type === "button" ? "button" : undefined}
-        rel={external ? "noopener noreferrer" : undefined}
-        forwardedAs={type}
-        aria-disabled={disabled ? disabled : undefined}
-        disabled={disabled}
-        onClick={onClick}
-        underline={underline}
-        data-qa-link=""
-        data-qa-link-isdisabled={disabled === true}
-        {...qa}
-        {...rest}
-      >
-        {children}
-      </Container>
-    );
-  }
-);
+>((props, ref) => <LinkHybrid {...props} ref={ref} />);
 
 Link.displayName = "Link";
 

package/src/LinkHybrid.tsx

@@ -0,0 +1,103 @@
+/**
+ * Hybrid Link Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ *
+ * Link's underlying Container is `styled(Text)`, so it accepts typography props
+ * (e.g. `fontSize`). `hasStyledProps` does not include typography props, so we
+ * additionally route to the styled-components path when any typography prop is
+ * present — mirroring Text — so font sizing is never silently dropped.
+ */
+
+import * as React from "react";
+import Container from "./styles"; // Styled-components version
+import { LinkTailwind } from "./LinkTailwind"; // Tailwind version
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeLinkProps } from "./LinkTypes";
+
+const TYPOGRAPHY_KEYS = [
+  "fontSize",
+  "typeScale",
+  "fontWeight",
+  "textAlign",
+  "lineHeight",
+  "isItalicized",
+  "fontFamily",
+  "fontStyle",
+] as const;
+
+const hasLinkStyledProps = (props: Record<string, unknown>): boolean =>
+  hasStyledProps(props) ||
+  TYPOGRAPHY_KEYS.some((key) => props[key] !== undefined);
+
+const LinkHybrid = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  TypeLinkProps
+>(
+  (
+    {
+      href,
+      external,
+      children,
+      disabled,
+      onClick,
+      as,
+      underline = true,
+      qa = {},
+      ...rest
+    },
+    ref
+  ) => {
+    if (!href && external) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "Warning: external prop cannot be set without a href declaration"
+      );
+    }
+
+    const type = as || (href ? "a" : "button");
+
+    if (hasLinkStyledProps(rest)) {
+      return (
+        <Container
+          ref={ref}
+          href={href}
+          target={external ? "_blank" : undefined}
+          type={type === "button" ? "button" : undefined}
+          rel={external ? "noopener noreferrer" : undefined}
+          forwardedAs={type}
+          aria-disabled={disabled ? disabled : undefined}
+          disabled={disabled}
+          onClick={onClick}
+          underline={underline}
+          data-qa-link=""
+          data-qa-link-isdisabled={disabled === true}
+          {...qa}
+          {...rest}
+        >
+          {children}
+        </Container>
+      );
+    }
+
+    // Use Tailwind version (preferred - better performance)
+    return (
+      <LinkTailwind
+        ref={ref}
+        href={href}
+        external={external}
+        disabled={disabled}
+        onClick={onClick}
+        as={as}
+        underline={underline}
+        qa={qa}
+        {...rest}
+      >
+        {children}
+      </LinkTailwind>
+    );
+  }
+);
+
+LinkHybrid.displayName = "Link";
+
+export default LinkHybrid;

package/src/LinkTailwind.tsx

@@ -0,0 +1,86 @@
+/**
+ * Tailwind CSS implementation of Link component
+ * Uses Seeds link CSS classes from link.css
+ */
+
+import * as React from "react";
+import type { TypeLinkProps } from "./LinkTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export const LinkTailwind = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  TypeLinkProps
+>(
+  (
+    {
+      href,
+      external,
+      children,
+      disabled,
+      onClick,
+      as,
+      underline = true,
+      qa = {},
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const type = as || (href ? "a" : "button");
+    const Component = type as any;
+
+    const classes = cn(
+      "seeds-link",
+      {
+        "seeds-link-underline": !!underline,
+        "seeds-link-disabled": !!disabled,
+        "seeds-link-no-href": !href,
+      },
+      className
+    );
+
+    return (
+      <Component
+        ref={ref}
+        href={href}
+        target={external ? "_blank" : undefined}
+        type={type === "button" ? "button" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        aria-disabled={disabled ? disabled : undefined}
+        disabled={disabled}
+        onClick={onClick}
+        className={classes}
+        data-qa-link=""
+        data-qa-link-isdisabled={disabled === true}
+        {...qa}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+LinkTailwind.displayName = "LinkTailwind";

package/src/__tests__/features.test.tsx

@@ -102,11 +102,10 @@ describe("Racine Link", () => {
   });
 
   it("Can render with an underline", () => {
+    // The Tailwind path renders the link with the `seeds-link-underline`
+    // class, which sets `text-decoration: underline` in link.css.
     render(<Link underline>Link</Link>);
-    expect(screen.getByText("Link")).toHaveStyleRule(
-      "text-decoration",
-      "underline"
-    );
+    expect(screen.getByText("Link")).toHaveClass("seeds-link-underline");
   });
 });
 

package/src/__tests__/tailwind.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Link from "../Link";
+
+describe("Link Tailwind path", () => {
+  it("renders with the seeds-link class when no styled props are used", () => {
+    render(<Link href="/test">Tailwind Link</Link>);
+    const el = screen.getByText("Tailwind Link");
+    expect(el.tagName).toBe("A");
+    expect(el).toHaveClass("seeds-link");
+  });
+
+  it("applies the disabled class when disabled", () => {
+    render(<Link disabled>Disabled</Link>);
+    expect(screen.getByText("Disabled")).toHaveClass("seeds-link-disabled");
+  });
+
+  it("forwards a consumer className (styled() extension passthrough)", () => {
+    render(
+      <Link href="/test" className="sc-extension">
+        Class Link
+      </Link>
+    );
+    const el = screen.getByText("Class Link");
+    expect(el).toHaveClass("seeds-link");
+    expect(el).toHaveClass("sc-extension");
+  });
+
+  it("routes typography props (fontSize) to the styled-components path", () => {
+    render(
+      <Link href="/test" fontSize={300}>
+        Sized Link
+      </Link>
+    );
+    expect(screen.getByText("Sized Link")).not.toHaveClass("seeds-link");
+  });
+
+  it("routes fontFamily to the styled-components path", () => {
+    render(
+      <Link href="/test" fontFamily="mono">
+        Mono Link
+      </Link>
+    );
+    expect(screen.getByText("Mono Link")).not.toHaveClass("seeds-link");
+  });
+
+  it("routes fontStyle to the styled-components path", () => {
+    render(
+      <Link href="/test" fontStyle="italic">
+        Italic Link
+      </Link>
+    );
+    expect(screen.getByText("Italic Link")).not.toHaveClass("seeds-link");
+  });
+});

package/src/link.css

@@ -0,0 +1,57 @@
+/**
+ * Seeds Link component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. mx-200, p-300, inline-flex) win the cascade over these defaults.
+ */
+
+@layer components {
+  .seeds-link {
+    border: 0;
+    appearance: none;
+    cursor: pointer;
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-link-base);
+    text-decoration: none;
+  }
+
+  .seeds-link-underline {
+    text-decoration: underline;
+  }
+
+  .seeds-link:hover {
+    color: var(--color-link-hover);
+    text-decoration: underline;
+  }
+
+  .seeds-link:active {
+    color: var(--color-link-hover);
+  }
+
+  .seeds-link:focus {
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+  }
+
+  .seeds-link:focus:active {
+    box-shadow: none;
+  }
+
+  .seeds-link-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* When rendered as a button (no href) remove the native button background */
+  .seeds-link-no-href {
+    background: none;
+  }
+}