@sproutsocial/seeds-react-loader-button 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-loader-button/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.61 KB
+CJS dist/index.js.map 3.09 KB
+CJS ⚡️ Build success in 202ms
+ESM dist/esm/index.js     1.62 KB
+ESM dist/esm/index.js.map 2.96 KB
+ESM ⚡️ Build success in 203ms
+DTS Build start
+DTS ⚡️ Build success in 27350ms
+DTS dist/index.d.ts  470.00 B
+DTS dist/index.d.mts 470.00 B
+Done in 32.92s.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @sproutsocial/seeds-react-loader-button
+
+## 1.0.0
+
+### Major Changes
+
+- cf814f5: Migrate LoaderButton to its own seeds-react-loader-button package
+
+### Patch Changes
+
+- Updated dependencies [f985353]
+  - @sproutsocial/seeds-react-loader@1.0.0

package/dist/esm/index.js

@@ -0,0 +1,46 @@
+// src/LoaderButton.tsx
+import "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 { jsx, jsxs } from "react/jsx-runtime";
+var StyledLoaderButton = styled(Button)`
+  background-color: ${({ theme, appearance, disabled }) => {
+  const buttonBackgroundColor = theme.colors.button[appearance]?.background?.base;
+  const isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
+  return disabled ? isBackgroundColorTransparent ? "transparent" : `${buttonBackgroundColor}66` : buttonBackgroundColor;
+}};
+  ${({ disabled }) => disabled && "opacity: 1;"}
+`;
+var LoaderButton = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledLoaderButton,
+    {
+      disabled: disabled || isLoading,
+      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 }) })
+      ] })
+    }
+  );
+};
+var LoaderButton_default = LoaderButton;
+
+// src/index.ts
+var src_default = LoaderButton_default;
+export {
+  LoaderButton_default as LoaderButton,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeLoaderButtonProps extends TypeButtonProps {
+    isLoading?: boolean;
+    loaderLabel: string;
+}
+
+declare const LoaderButton: ({ isLoading, disabled, loaderLabel, children, appearance, ...rest }: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { LoaderButton, type TypeLoaderButtonProps, LoaderButton as default };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeLoaderButtonProps extends TypeButtonProps {
+    isLoading?: boolean;
+    loaderLabel: string;
+}
+
+declare const LoaderButton: ({ isLoading, disabled, loaderLabel, children, appearance, ...rest }: TypeLoaderButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { LoaderButton, type TypeLoaderButtonProps, LoaderButton as default };

package/dist/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  LoaderButton: () => LoaderButton_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/LoaderButton.tsx
+var React = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+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)`
+  background-color: ${({ theme, appearance, disabled }) => {
+  const buttonBackgroundColor = theme.colors.button[appearance]?.background?.base;
+  const isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
+  return disabled ? isBackgroundColorTransparent ? "transparent" : `${buttonBackgroundColor}66` : buttonBackgroundColor;
+}};
+  ${({ disabled }) => disabled && "opacity: 1;"}
+`;
+var LoaderButton = ({
+  isLoading = false,
+  disabled,
+  loaderLabel,
+  children,
+  appearance = "unstyled",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledLoaderButton,
+    {
+      disabled: disabled || isLoading,
+      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 }) })
+      ] })
+    }
+  );
+};
+var LoaderButton_default = LoaderButton;
+
+// src/index.ts
+var src_default = LoaderButton_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoaderButton
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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,cAAQ;","names":["styled","Button","Box","Loader"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-loader-button",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sproutsocial/seeds-react-loader-button",
+  "version": "1.0.0",
+  "description": "Seeds React LoaderButton",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-loader": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/LoaderButton.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Box from "@sproutsocial/seeds-react-box";
+import LoaderButton from "./LoaderButton";
+
+const meta: Meta<typeof LoaderButton> = {
+  title: "Components/LoaderButton",
+  component: LoaderButton,
+};
+export default meta;
+
+type Story = StoryObj<typeof LoaderButton>;
+
+export const Default: Story = {
+  render: () => (
+    <Box>
+      <LoaderButton mb={400} loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+      <br />
+      <LoaderButton isLoading loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+    </Box>
+  ),
+};
+
+export const Primary: Story = {
+  render: () => (
+    <Box>
+      <LoaderButton appearance="primary" mb={400} loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+      <br />
+      <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+    </Box>
+  ),
+};
+
+export const Secondary: Story = {
+  render: () => (
+    <Box>
+      <LoaderButton appearance="secondary" mb={400} loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+      <br />
+      <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+    </Box>
+  ),
+};
+
+export const AllLoaderButtons: Story = {
+  render: () => (
+    <Box display="flex" justifyContent="space-around">
+      <LoaderButton isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="destructive" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="placeholder" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="pill" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+    </Box>
+  ),
+};

package/src/LoaderButton.tsx

@@ -0,0 +1,56 @@
+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 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>
+  );
+};
+
+export default LoaderButton;

package/src/LoaderButtonTypes.ts

@@ -0,0 +1,6 @@
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+
+export interface TypeLoaderButtonProps extends TypeButtonProps {
+  isLoading?: boolean;
+  loaderLabel: string;
+}

package/src/__tests__/LoaderButton.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import LoaderButton from "../LoaderButton";
+
+describe("LoaderButton", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(
+      <LoaderButton loaderLabel="loading">LoaderButton</LoaderButton>
+    );
+
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+
+  it("should show the loader", async () => {
+    const { rerender } = render(
+      <LoaderButton loaderLabel="loading">text</LoaderButton>
+    );
+    let loader = screen.queryByText("loading");
+    let loaderButton = screen.queryByText("text");
+
+    expect(loader).not.toBeInTheDocument();
+    expect(loaderButton).toHaveAttribute("aria-hidden", "false");
+
+    rerender(
+      <LoaderButton isLoading loaderLabel="loading">
+        text
+      </LoaderButton>
+    );
+
+    loader = screen.queryByText("loading");
+    loaderButton = screen.queryByText("text");
+
+    expect(loader).toBeInTheDocument();
+    expect(loaderButton).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/src/__tests__/LoaderButton.typetest.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import LoaderButton from "../LoaderButton";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function LoaderButtonTypes() {
+  return (
+    <>
+      <LoaderButton appearance="primary" mb={400} loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+      <LoaderButton appearance="secondary" mb={400} loaderLabel="Loading...">
+        Not loading (yet)
+      </LoaderButton>
+      <LoaderButton isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="destructive" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="placeholder" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      <LoaderButton appearance="pill" isLoading loaderLabel="Loading...">
+        Loading Button
+      </LoaderButton>
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <LoaderButton />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import LoaderButton from "./LoaderButton";
+
+export default LoaderButton;
+export { LoaderButton };
+export * from "./LoaderButtonTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));