@sproutsocial/seeds-react-loader-button 1.0.34 → 1.0.45

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     3.62 KB
-CJS dist/index.js.map 3.09 KB
-CJS ⚡️ Build success in 73ms
-ESM dist/esm/index.js     1.62 KB
-ESM dist/esm/index.js.map 2.96 KB
-ESM ⚡️ Build success in 74ms
+CJS dist/index.js     6.19 KB
+CJS dist/index.js.map 7.61 KB
+CJS ⚡️ Build success in 18ms
+ESM dist/esm/index.js     3.72 KB
+ESM dist/esm/index.js.map 7.41 KB
+ESM ⚡️ Build success in 18ms
 DTS Build start
-DTS ⚡️ Build success in 5000ms
-DTS dist/index.d.ts  470.00 B
-DTS dist/index.d.mts 470.00 B
-Done in 6.56s.
+DTS ⚡️ Build success in 4778ms
+DTS dist/index.d.ts  619.00 B
+DTS dist/index.d.mts 619.00 B
+Done in 6.46s.

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # @sproutsocial/seeds-react-loader-button
 
+## 1.0.45
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@2.2.1
+
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [8945c86]
+  - @sproutsocial/seeds-react-loader@1.0.22
+
+## 1.0.43
+
+### 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.
+
+## 1.0.42
+
+### Patch Changes
+
+- Updated dependencies [456a20f]
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-button@2.2.0
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.21
+  - @sproutsocial/seeds-react-loader@1.0.21
+
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+- Updated dependencies [a0fe3d3]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-button@2.1.3
+  - @sproutsocial/seeds-react-box@1.1.20
+  - @sproutsocial/seeds-react-loader@1.0.20
+
+## 1.0.40
+
+### Patch Changes
+
+- Updated dependencies [cb27f07]
+  - @sproutsocial/seeds-react-button@2.1.2
+
+## 1.0.39
+
+### Patch Changes
+
+- Updated dependencies [40d2dfe]
+  - @sproutsocial/seeds-react-button@2.1.1
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-button@2.1.0
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-box@1.1.19
+  - @sproutsocial/seeds-react-loader@1.0.19
+
+## 1.0.37
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@2.0.8
+
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-box@1.1.18
+  - @sproutsocial/seeds-react-loader@1.0.18
+  - @sproutsocial/seeds-react-button@2.0.7
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-box@1.1.17
+  - @sproutsocial/seeds-react-loader@1.0.17
+  - @sproutsocial/seeds-react-button@2.0.6
+
 ## 1.0.34
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,11 +1,66 @@
 // src/LoaderButton.tsx
 import "react";
+
+// src/LoaderButtonHybrid.tsx
+import "react";
 import styled from "styled-components";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Button2 from "@sproutsocial/seeds-react-button";
+import Loader2 from "@sproutsocial/seeds-react-loader";
+
+// src/LoaderButtonTailwind.tsx
+import "react";
 import Box from "@sproutsocial/seeds-react-box";
 import Button from "@sproutsocial/seeds-react-button";
 import Loader from "@sproutsocial/seeds-react-loader";
 import { jsx, jsxs } from "react/jsx-runtime";
-var StyledLoaderButton = styled(Button)`
+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 LoaderButtonTailwind = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  className,
+  ...rest
+}) => {
+  const isDisabled = disabled || isLoading;
+  const classes = cn({ "seeds-loader-btn-disabled": !!isDisabled }, className) || void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled: isDisabled,
+      appearance,
+      "data-qa-button-isloading": isLoading === true,
+      className: classes,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+        /* @__PURE__ */ jsx(Box, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
+        isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ jsx(Loader, { text: loaderLabel, size: "small", delay: false }) })
+      ] })
+    }
+  );
+};
+
+// src/LoaderButtonHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledLoaderButton = styled(Button2)`
   background-color: ${({ theme, appearance, disabled }) => {
   const buttonBackgroundColor = theme.colors.button[appearance]?.background?.base;
   const isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
@@ -13,7 +68,7 @@ var StyledLoaderButton = styled(Button)`
 }};
   ${({ disabled }) => disabled && "opacity: 1;"}
 `;
-var LoaderButton = ({
+var LoaderButtonHybrid = ({
   isLoading = false,
   disabled,
   loaderLabel,
@@ -21,20 +76,38 @@ var LoaderButton = ({
   appearance = "unstyled",
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx(
-    StyledLoaderButton,
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx2(
+      StyledLoaderButton,
+      {
+        disabled: disabled || isLoading,
+        appearance,
+        "data-qa-button-isloading": isLoading === true,
+        ...rest,
+        children: /* @__PURE__ */ jsxs2(Box2, { position: "relative", children: [
+          /* @__PURE__ */ jsx2(Box2, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
+          isLoading && /* @__PURE__ */ jsx2(Box2, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ jsx2(Loader2, { text: loaderLabel, size: "small", delay: false }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    LoaderButtonTailwind,
     {
-      disabled: disabled || isLoading,
+      isLoading,
+      disabled,
+      loaderLabel,
       appearance,
-      "data-qa-button-isloading": isLoading === true,
       ...rest,
-      children: /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-        /* @__PURE__ */ jsx(Box, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
-        isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ jsx(Loader, { text: loaderLabel, size: "small", delay: false }) })
-      ] })
+      children
     }
   );
 };
+var LoaderButtonHybrid_default = LoaderButtonHybrid;
+
+// src/LoaderButton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LoaderButton = (props) => /* @__PURE__ */ jsx3(LoaderButtonHybrid_default, { ...props });
 var LoaderButton_default = LoaderButton;
 
 // src/index.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LoaderButton.tsx","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\nconst StyledLoaderButton = styled(Button)`\n  background-color: ${({ theme, appearance, disabled }) => {\n    const buttonBackgroundColor =\n      theme.colors.button[appearance as keyof typeof theme.colors.button]\n        ?.background?.base;\n\n    const isBackgroundColorTransparent =\n      buttonBackgroundColor === \"transparent\";\n\n    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.\n    return disabled\n      ? isBackgroundColorTransparent\n        ? \"transparent\"\n        : `${buttonBackgroundColor}66`\n      : buttonBackgroundColor;\n  }};\n  ${({ disabled }) => disabled && \"opacity: 1;\"}\n`;\n\nexport const LoaderButton = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  ...rest\n}: TypeLoaderButtonProps) => {\n  return (\n    <StyledLoaderButton\n      disabled={disabled || isLoading}\n      appearance={appearance}\n      data-qa-button-isloading={isLoading === true}\n      {...rest}\n    >\n      <Box position=\"relative\">\n        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n          {children}\n        </Box>\n        {isLoading && (\n          <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n            <Loader text={loaderLabel} size=\"small\" delay={false} />\n          </Box>\n        )}\n      </Box>\n    </StyledLoaderButton>\n  );\n};\n\nexport default LoaderButton;\n","import LoaderButton from \"./LoaderButton\";\n\nexport default LoaderButton;\nexport { LoaderButton };\nexport * from \"./LoaderButtonTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,YAAY;AACnB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,YAAY;AAqCb,SACE,KADF;AAlCN,IAAM,qBAAqB,OAAO,MAAM;AAAA,sBAClB,CAAC,EAAE,OAAO,YAAY,SAAS,MAAM;AACvD,QAAM,wBACJ,MAAM,OAAO,OAAO,UAA8C,GAC9D,YAAY;AAElB,QAAM,+BACJ,0BAA0B;AAG5B,SAAO,WACH,+BACE,gBACA,GAAG,qBAAqB,OAC1B;AACN,CAAC;AAAA,IACC,CAAC,EAAE,SAAS,MAAM,YAAY,aAAa;AAAA;AAGxC,IAAM,eAAe,CAAC;AAAA,EAC3B,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAA6B;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,4BAA0B,cAAc;AAAA,MACvC,GAAG;AAAA,MAEJ,+BAAC,OAAI,UAAS,YACZ;AAAA,4BAAC,OAAI,SAAS,YAAY,IAAI,GAAG,eAAa,WAC3C,UACH;AAAA,QACC,aACC,oBAAC,OAAI,UAAS,YAAW,KAAK,IAAI,MAAM,GAAG,OAAO,GAAG,QAAQ,GAC3D,8BAAC,UAAO,MAAM,aAAa,MAAK,SAAQ,OAAO,OAAO,GACxD;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,uBAAQ;;;ACrDf,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/LoaderButton.tsx","../../src/LoaderButtonHybrid.tsx","../../src/LoaderButtonTailwind.tsx","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport LoaderButtonHybrid from \"./LoaderButtonHybrid\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\n/**\n * LoaderButton component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or a styled() extension).\n */\nexport const LoaderButton = (props: TypeLoaderButtonProps) => (\n  <LoaderButtonHybrid {...props} />\n);\n\nexport default LoaderButton;\n","/**\n * Hybrid LoaderButton Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport { LoaderButtonTailwind } from \"./LoaderButtonTailwind\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\nconst StyledLoaderButton = styled(Button)`\n  background-color: ${({ theme, appearance, disabled }) => {\n    const buttonBackgroundColor =\n      theme.colors.button[appearance as keyof typeof theme.colors.button]\n        ?.background?.base;\n\n    const isBackgroundColorTransparent =\n      buttonBackgroundColor === \"transparent\";\n\n    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.\n    return disabled\n      ? isBackgroundColorTransparent\n        ? \"transparent\"\n        : `${buttonBackgroundColor}66`\n      : buttonBackgroundColor;\n  }};\n  ${({ disabled }) => disabled && \"opacity: 1;\"}\n`;\n\nexport const LoaderButtonHybrid = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  ...rest\n}: TypeLoaderButtonProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <StyledLoaderButton\n        disabled={disabled || isLoading}\n        appearance={appearance}\n        data-qa-button-isloading={isLoading === true}\n        {...rest}\n      >\n        <Box position=\"relative\">\n          <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n            {children}\n          </Box>\n          {isLoading && (\n            <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n              <Loader text={loaderLabel} size=\"small\" delay={false} />\n            </Box>\n          )}\n        </Box>\n      </StyledLoaderButton>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <LoaderButtonTailwind\n      isLoading={isLoading}\n      disabled={disabled}\n      loaderLabel={loaderLabel}\n      appearance={appearance}\n      {...rest}\n    >\n      {children}\n    </LoaderButtonTailwind>\n  );\n};\n\nexport default LoaderButtonHybrid;\n","/**\n * Tailwind CSS implementation of LoaderButton component\n * Renders Button with its appearance classes plus a disabled-dimming layer\n * from loader-button.css.\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\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 LoaderButtonTailwind = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  className,\n  ...rest\n}: TypeLoaderButtonProps) => {\n  const isDisabled = disabled || isLoading;\n  const classes =\n    cn({ \"seeds-loader-btn-disabled\": !!isDisabled }, className) || undefined;\n\n  return (\n    <Button\n      disabled={isDisabled}\n      appearance={appearance}\n      data-qa-button-isloading={isLoading === true}\n      className={classes}\n      {...rest}\n    >\n      <Box position=\"relative\">\n        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n          {children}\n        </Box>\n        {isLoading && (\n          <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n            <Loader text={loaderLabel} size=\"small\" delay={false} />\n          </Box>\n        )}\n      </Box>\n    </Button>\n  );\n};\n\nexport default LoaderButtonTailwind;\n","import LoaderButton from \"./LoaderButton\";\n\nexport default LoaderButton;\nexport { LoaderButton };\nexport * from \"./LoaderButtonTypes\";\n"],"mappings":"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","names":["Box","Button","Loader","jsx","jsxs","Button","Box","Loader","jsx"]}

package/dist/index.d.mts

@@ -6,6 +6,11 @@ interface TypeLoaderButtonProps extends TypeButtonProps {
     loaderLabel: string;
 }
 
-declare const LoaderButton: ({ isLoading, disabled, loaderLabel, children, appearance, ...rest }: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * LoaderButton component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or a styled() extension).
+ */
+declare const LoaderButton: (props: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
 
 export { LoaderButton, type TypeLoaderButtonProps, LoaderButton as default };

package/dist/index.d.ts

@@ -6,6 +6,11 @@ interface TypeLoaderButtonProps extends TypeButtonProps {
     loaderLabel: string;
 }
 
-declare const LoaderButton: ({ isLoading, disabled, loaderLabel, children, appearance, ...rest }: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * LoaderButton component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or a styled() extension).
+ */
+declare const LoaderButton: (props: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
 
 export { LoaderButton, type TypeLoaderButtonProps, LoaderButton as default };

package/dist/index.js

@@ -36,13 +36,68 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/LoaderButton.tsx
-var React = require("react");
+var React3 = require("react");
+
+// src/LoaderButtonHybrid.tsx
+var React2 = require("react");
 var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_loader2 = __toESM(require("@sproutsocial/seeds-react-loader"));
+
+// src/LoaderButtonTailwind.tsx
+var React = require("react");
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
 var import_seeds_react_loader = __toESM(require("@sproutsocial/seeds-react-loader"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var StyledLoaderButton = (0, import_styled_components.default)(import_seeds_react_button.default)`
+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 LoaderButtonTailwind = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  className,
+  ...rest
+}) => {
+  const isDisabled = disabled || isLoading;
+  const classes = cn({ "seeds-loader-btn-disabled": !!isDisabled }, className) || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_button.default,
+    {
+      disabled: isDisabled,
+      appearance,
+      "data-qa-button-isloading": isLoading === true,
+      className: classes,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { position: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.default, { text: loaderLabel, size: "small", delay: false }) })
+      ] })
+    }
+  );
+};
+
+// src/LoaderButtonHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledLoaderButton = (0, import_styled_components.default)(import_seeds_react_button2.default)`
   background-color: ${({ theme, appearance, disabled }) => {
   const buttonBackgroundColor = theme.colors.button[appearance]?.background?.base;
   const isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
@@ -50,7 +105,7 @@ var StyledLoaderButton = (0, import_styled_components.default)(import_seeds_reac
 }};
   ${({ disabled }) => disabled && "opacity: 1;"}
 `;
-var LoaderButton = ({
+var LoaderButtonHybrid = ({
   isLoading = false,
   disabled,
   loaderLabel,
@@ -58,20 +113,38 @@ var LoaderButton = ({
   appearance = "unstyled",
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledLoaderButton,
+  if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      StyledLoaderButton,
+      {
+        disabled: disabled || isLoading,
+        appearance,
+        "data-qa-button-isloading": isLoading === true,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box2.default, { position: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_loader2.default, { text: loaderLabel, size: "small", delay: false }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    LoaderButtonTailwind,
     {
-      disabled: disabled || isLoading,
+      isLoading,
+      disabled,
+      loaderLabel,
       appearance,
-      "data-qa-button-isloading": isLoading === true,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { position: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { opacity: isLoading ? 0 : 1, "aria-hidden": isLoading, children }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { position: "absolute", top: -2, left: 0, right: 0, bottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.default, { text: loaderLabel, size: "small", delay: false }) })
-      ] })
+      children
     }
   );
 };
+var LoaderButtonHybrid_default = LoaderButtonHybrid;
+
+// src/LoaderButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LoaderButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderButtonHybrid_default, { ...props });
 var LoaderButton_default = LoaderButton;
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/LoaderButton.tsx"],"sourcesContent":["import LoaderButton from \"./LoaderButton\";\n\nexport default LoaderButton;\nexport { LoaderButton };\nexport * from \"./LoaderButtonTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\nconst StyledLoaderButton = styled(Button)`\n  background-color: ${({ theme, appearance, disabled }) => {\n    const buttonBackgroundColor =\n      theme.colors.button[appearance as keyof typeof theme.colors.button]\n        ?.background?.base;\n\n    const isBackgroundColorTransparent =\n      buttonBackgroundColor === \"transparent\";\n\n    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.\n    return disabled\n      ? isBackgroundColorTransparent\n        ? \"transparent\"\n        : `${buttonBackgroundColor}66`\n      : buttonBackgroundColor;\n  }};\n  ${({ disabled }) => disabled && \"opacity: 1;\"}\n`;\n\nexport const LoaderButton = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  ...rest\n}: TypeLoaderButtonProps) => {\n  return (\n    <StyledLoaderButton\n      disabled={disabled || isLoading}\n      appearance={appearance}\n      data-qa-button-isloading={isLoading === true}\n      {...rest}\n    >\n      <Box position=\"relative\">\n        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n          {children}\n        </Box>\n        {isLoading && (\n          <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n            <Loader text={loaderLabel} size=\"small\" delay={false} />\n          </Box>\n        )}\n      </Box>\n    </StyledLoaderButton>\n  );\n};\n\nexport default LoaderButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,+BAAmB;AACnB,6BAAgB;AAChB,gCAAmB;AACnB,gCAAmB;AAqCb;AAlCN,IAAM,yBAAqB,yBAAAA,SAAO,0BAAAC,OAAM;AAAA,sBAClB,CAAC,EAAE,OAAO,YAAY,SAAS,MAAM;AACvD,QAAM,wBACJ,MAAM,OAAO,OAAO,UAA8C,GAC9D,YAAY;AAElB,QAAM,+BACJ,0BAA0B;AAG5B,SAAO,WACH,+BACE,gBACA,GAAG,qBAAqB,OAC1B;AACN,CAAC;AAAA,IACC,CAAC,EAAE,SAAS,MAAM,YAAY,aAAa;AAAA;AAGxC,IAAM,eAAe,CAAC;AAAA,EAC3B,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAA6B;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,4BAA0B,cAAc;AAAA,MACvC,GAAG;AAAA,MAEJ,uDAAC,uBAAAC,SAAA,EAAI,UAAS,YACZ;AAAA,oDAAC,uBAAAA,SAAA,EAAI,SAAS,YAAY,IAAI,GAAG,eAAa,WAC3C,UACH;AAAA,QACC,aACC,4CAAC,uBAAAA,SAAA,EAAI,UAAS,YAAW,KAAK,IAAI,MAAM,GAAG,OAAO,GAAG,QAAQ,GAC3D,sDAAC,0BAAAC,SAAA,EAAO,MAAM,aAAa,MAAK,SAAQ,OAAO,OAAO,GACxD;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,uBAAQ;;;ADrDf,IAAO,gBAAQ;","names":["styled","Button","Box","Loader"]}
+{"version":3,"sources":["../src/index.ts","../src/LoaderButton.tsx","../src/LoaderButtonHybrid.tsx","../src/LoaderButtonTailwind.tsx"],"sourcesContent":["import LoaderButton from \"./LoaderButton\";\n\nexport default LoaderButton;\nexport { LoaderButton };\nexport * from \"./LoaderButtonTypes\";\n","import * as React from \"react\";\nimport LoaderButtonHybrid from \"./LoaderButtonHybrid\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\n/**\n * LoaderButton component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or a styled() extension).\n */\nexport const LoaderButton = (props: TypeLoaderButtonProps) => (\n  <LoaderButtonHybrid {...props} />\n);\n\nexport default LoaderButton;\n","/**\n * Hybrid LoaderButton Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport { LoaderButtonTailwind } from \"./LoaderButtonTailwind\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\n\nconst StyledLoaderButton = styled(Button)`\n  background-color: ${({ theme, appearance, disabled }) => {\n    const buttonBackgroundColor =\n      theme.colors.button[appearance as keyof typeof theme.colors.button]\n        ?.background?.base;\n\n    const isBackgroundColorTransparent =\n      buttonBackgroundColor === \"transparent\";\n\n    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.\n    return disabled\n      ? isBackgroundColorTransparent\n        ? \"transparent\"\n        : `${buttonBackgroundColor}66`\n      : buttonBackgroundColor;\n  }};\n  ${({ disabled }) => disabled && \"opacity: 1;\"}\n`;\n\nexport const LoaderButtonHybrid = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  ...rest\n}: TypeLoaderButtonProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <StyledLoaderButton\n        disabled={disabled || isLoading}\n        appearance={appearance}\n        data-qa-button-isloading={isLoading === true}\n        {...rest}\n      >\n        <Box position=\"relative\">\n          <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n            {children}\n          </Box>\n          {isLoading && (\n            <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n              <Loader text={loaderLabel} size=\"small\" delay={false} />\n            </Box>\n          )}\n        </Box>\n      </StyledLoaderButton>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <LoaderButtonTailwind\n      isLoading={isLoading}\n      disabled={disabled}\n      loaderLabel={loaderLabel}\n      appearance={appearance}\n      {...rest}\n    >\n      {children}\n    </LoaderButtonTailwind>\n  );\n};\n\nexport default LoaderButtonHybrid;\n","/**\n * Tailwind CSS implementation of LoaderButton component\n * Renders Button with its appearance classes plus a disabled-dimming layer\n * from loader-button.css.\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport type { TypeLoaderButtonProps } from \"./LoaderButtonTypes\";\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 LoaderButtonTailwind = ({\n  isLoading = false,\n  disabled,\n  loaderLabel,\n  children,\n  appearance = \"unstyled\",\n  className,\n  ...rest\n}: TypeLoaderButtonProps) => {\n  const isDisabled = disabled || isLoading;\n  const classes =\n    cn({ \"seeds-loader-btn-disabled\": !!isDisabled }, className) || undefined;\n\n  return (\n    <Button\n      disabled={isDisabled}\n      appearance={appearance}\n      data-qa-button-isloading={isLoading === true}\n      className={classes}\n      {...rest}\n    >\n      <Box position=\"relative\">\n        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>\n          {children}\n        </Box>\n        {isLoading && (\n          <Box position=\"absolute\" top={-2} left={0} right={0} bottom={0}>\n            <Loader text={loaderLabel} size=\"small\" delay={false} />\n          </Box>\n        )}\n      </Box>\n    </Button>\n  );\n};\n\nexport default LoaderButtonTailwind;\n"],"mappings":"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","names":["React","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_loader","Button","Box","Loader","import_jsx_runtime","styled","Button","Box","Loader","import_jsx_runtime"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-loader-button",
-  "version": "1.0.34",
+  "version": "1.0.45",
   "description": "Seeds React LoaderButton",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "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-box": "^1.1.16",
-    "@sproutsocial/seeds-react-button": "^2.0.5",
-    "@sproutsocial/seeds-react-loader": "^1.0.16"
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.21",
+    "@sproutsocial/seeds-react-button": "^2.2.1",
+    "@sproutsocial/seeds-react-loader": "^1.0.22"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/LoaderButton.stories.tsx

@@ -77,3 +77,35 @@ export const AllLoaderButtons: Story = {
     </Box>
   ),
 };
+
+/**
+ * Demonstrates that Tailwind utility classes passed via `className` override the
+ * component's own CSS. Because `loader-button.css` lives in `@layer components`,
+ * the utilities below win the cascade: `bg-[#FF6B00]` paints a loud orange
+ * background over the button's own fill, `text-[#FFFFFF]` flips the label white
+ * for contrast, and `p-300` adds padding so the orange box is obvious. If the
+ * `@layer components` wrapper were missing, the unlayered component rules would
+ * beat these utilities and the orange background would never show.
+ *
+ * The story is interactive: clicking the button flips it into the loading state
+ * so the loader appears, then clears after a short timeout.
+ */
+export const TailwindOverrides: Story = {
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(false);
+    return (
+      <LoaderButton
+        loaderLabel="Loading..."
+        isLoading={isLoading}
+        className="bg-[#FF6B00] text-[#FFFFFF] p-300"
+        onClick={() => {
+          setIsLoading(true);
+          setTimeout(() => setIsLoading(false), 2000);
+        }}
+      >
+        Click to load
+      </LoaderButton>
+    );
+  },
+  name: "🚀 Tailwind class overrides",
+};

package/src/LoaderButton.tsx

@@ -1,56 +1,14 @@
 import * as React from "react";
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Loader from "@sproutsocial/seeds-react-loader";
+import LoaderButtonHybrid from "./LoaderButtonHybrid";
 import type { TypeLoaderButtonProps } from "./LoaderButtonTypes";
 
-const StyledLoaderButton = styled(Button)`
-  background-color: ${({ theme, appearance, disabled }) => {
-    const buttonBackgroundColor =
-      theme.colors.button[appearance as keyof typeof theme.colors.button]
-        ?.background?.base;
-
-    const isBackgroundColorTransparent =
-      buttonBackgroundColor === "transparent";
-
-    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
-    return disabled
-      ? isBackgroundColorTransparent
-        ? "transparent"
-        : `${buttonBackgroundColor}66`
-      : buttonBackgroundColor;
-  }};
-  ${({ disabled }) => disabled && "opacity: 1;"}
-`;
-
-export const LoaderButton = ({
-  isLoading = false,
-  disabled,
-  loaderLabel,
-  children,
-  appearance = "unstyled",
-  ...rest
-}: TypeLoaderButtonProps) => {
-  return (
-    <StyledLoaderButton
-      disabled={disabled || isLoading}
-      appearance={appearance}
-      data-qa-button-isloading={isLoading === true}
-      {...rest}
-    >
-      <Box position="relative">
-        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>
-          {children}
-        </Box>
-        {isLoading && (
-          <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
-            <Loader text={loaderLabel} size="small" delay={false} />
-          </Box>
-        )}
-      </Box>
-    </StyledLoaderButton>
-  );
-};
+/**
+ * LoaderButton component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or a styled() extension).
+ */
+export const LoaderButton = (props: TypeLoaderButtonProps) => (
+  <LoaderButtonHybrid {...props} />
+);
 
 export default LoaderButton;

package/src/LoaderButtonHybrid.tsx

@@ -0,0 +1,78 @@
+/**
+ * Hybrid LoaderButton Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ */
+
+import * as React from "react";
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Loader from "@sproutsocial/seeds-react-loader";
+import { LoaderButtonTailwind } from "./LoaderButtonTailwind";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeLoaderButtonProps } from "./LoaderButtonTypes";
+
+const StyledLoaderButton = styled(Button)`
+  background-color: ${({ theme, appearance, disabled }) => {
+    const buttonBackgroundColor =
+      theme.colors.button[appearance as keyof typeof theme.colors.button]
+        ?.background?.base;
+
+    const isBackgroundColorTransparent =
+      buttonBackgroundColor === "transparent";
+
+    // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
+    return disabled
+      ? isBackgroundColorTransparent
+        ? "transparent"
+        : `${buttonBackgroundColor}66`
+      : buttonBackgroundColor;
+  }};
+  ${({ disabled }) => disabled && "opacity: 1;"}
+`;
+
+export const LoaderButtonHybrid = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  ...rest
+}: TypeLoaderButtonProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <StyledLoaderButton
+        disabled={disabled || isLoading}
+        appearance={appearance}
+        data-qa-button-isloading={isLoading === true}
+        {...rest}
+      >
+        <Box position="relative">
+          <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>
+            {children}
+          </Box>
+          {isLoading && (
+            <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
+              <Loader text={loaderLabel} size="small" delay={false} />
+            </Box>
+          )}
+        </Box>
+      </StyledLoaderButton>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return (
+    <LoaderButtonTailwind
+      isLoading={isLoading}
+      disabled={disabled}
+      loaderLabel={loaderLabel}
+      appearance={appearance}
+      {...rest}
+    >
+      {children}
+    </LoaderButtonTailwind>
+  );
+};
+
+export default LoaderButtonHybrid;

package/src/LoaderButtonTailwind.tsx

@@ -0,0 +1,71 @@
+/**
+ * Tailwind CSS implementation of LoaderButton component
+ * Renders Button with its appearance classes plus a disabled-dimming layer
+ * from loader-button.css.
+ */
+
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Loader from "@sproutsocial/seeds-react-loader";
+import type { TypeLoaderButtonProps } from "./LoaderButtonTypes";
+
+// 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 LoaderButtonTailwind = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  className,
+  ...rest
+}: TypeLoaderButtonProps) => {
+  const isDisabled = disabled || isLoading;
+  const classes =
+    cn({ "seeds-loader-btn-disabled": !!isDisabled }, className) || undefined;
+
+  return (
+    <Button
+      disabled={isDisabled}
+      appearance={appearance}
+      data-qa-button-isloading={isLoading === true}
+      className={classes}
+      {...rest}
+    >
+      <Box position="relative">
+        <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>
+          {children}
+        </Box>
+        {isLoading && (
+          <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
+            <Loader text={loaderLabel} size="small" delay={false} />
+          </Box>
+        )}
+      </Box>
+    </Button>
+  );
+};
+
+export default LoaderButtonTailwind;

package/src/__tests__/tailwind.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import LoaderButton from "../LoaderButton";
+
+describe("LoaderButton Tailwind path", () => {
+  it("renders Button with the seeds-btn class when no styled props are used", () => {
+    render(<LoaderButton loaderLabel="loading">Go</LoaderButton>);
+    expect(screen.getByRole("button")).toHaveClass("seeds-btn");
+  });
+
+  it("applies the loader disabled dimming class when disabled", () => {
+    render(
+      <LoaderButton loaderLabel="loading" disabled>
+        Go
+      </LoaderButton>
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("seeds-loader-btn-disabled");
+    expect(button).toHaveClass("seeds-btn-disabled");
+  });
+
+  it("applies the loader disabled dimming class while loading", () => {
+    render(
+      <LoaderButton loaderLabel="loading" isLoading>
+        Go
+      </LoaderButton>
+    );
+    expect(screen.getByRole("button")).toHaveClass("seeds-loader-btn-disabled");
+  });
+});

package/src/loader-button.css

@@ -0,0 +1,52 @@
+/**
+ * Seeds LoaderButton component classes
+ * Layered on top of the Button (.seeds-btn*) classes to reproduce the disabled
+ * background dimming the styled-components LoaderButton applied.
+ *
+ * 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 {
+  /* Keep the loader fully visible by overriding .seeds-btn-disabled opacity: 0.5 */
+  .seeds-loader-btn-disabled.seeds-btn-disabled {
+    opacity: 1;
+  }
+
+  /* Disabled background: the appearance's base color at 40% alpha. */
+  .seeds-loader-btn-disabled.seeds-btn-primary {
+    background-color: color-mix(
+      in srgb,
+      var(--color-button-primary-bg-base) 40%,
+      transparent
+    );
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-destructive {
+    background-color: color-mix(
+      in srgb,
+      var(--color-button-destructive-bg-base) 40%,
+      transparent
+    );
+  }
+
+  /* Appearances whose base background is transparent resolve to transparent. */
+  .seeds-loader-btn-disabled.seeds-btn-secondary {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-placeholder {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-unstyled {
+    background-color: transparent;
+  }
+
+  .seeds-loader-btn-disabled.seeds-btn-pill {
+    background-color: transparent;
+  }
+}