@sproutsocial/seeds-react-loader 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/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     4.52 KB
+CJS dist/index.js.map 4.67 KB
+CJS ⚡️ Build success in 100ms
+ESM dist/esm/index.js     2.58 KB
+ESM dist/esm/index.js.map 4.62 KB
+ESM ⚡️ Build success in 106ms
+DTS Build start
+DTS ⚡️ Build success in 38352ms
+DTS dist/index.d.ts  833.00 B
+DTS dist/index.d.mts 833.00 B
+Done in 43.01s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-loader
+
+## 1.0.0
+
+### Major Changes
+
+- f985353: Migrated Loader from Racine to seeds-react-loader

package/dist/esm/index.js

@@ -0,0 +1,118 @@
+// src/Loader.tsx
+import "react";
+
+// src/styles.ts
+import styled, { css, keyframes } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+var getSize = (size) => {
+  const spinnerSize = Math.round(size * 1);
+  const borderWidth = Math.round(size * 0.1);
+  return css`
+    width: ${size}px;
+    height: ${size}px;
+    box-shadow: ${({ theme }) => `0 0 0 2px ${theme.colors.neutral[600]}, 
+      inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};
+
+    &:after {
+      width: ${spinnerSize}px;
+      height: ${spinnerSize}px;
+      box-sizing: border-box;
+      border-width: ${borderWidth}px;
+    }
+
+    .no-cssanimations &::after {
+      background-size: ${spinnerSize}px;
+    }
+  `;
+};
+var spin = keyframes`
+  from {
+    transform: translate(-50%,-50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%,-50%) rotate(360deg);
+  }
+`;
+var delayAnimation = keyframes`
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var Container = styled.div.attrs({
+  className: "Loader"
+})`
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 100%;
+
+  animation: ${(props) => props.delay ? css`
+          ${delayAnimation} 2s 1;
+        ` : "none"};
+
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: transparent;
+    border-style: solid;
+    border-radius: 100%;
+    content: "";
+    transition: opacity 250ms;
+    border-color: ${({ theme }) => `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};
+
+    animation: ${(props) => props.delay ? css`
+            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
+          ` : css`
+            ${spin} 2.25s infinite linear
+          `};
+  }
+
+  ${(props) => props.small ? getSize(20) : getSize(40)}
+  ${COMMON}
+`;
+var Text = styled.div`
+  ${visuallyHidden}
+`;
+var styles_default = Container;
+
+// src/Loader.tsx
+import { jsx } from "react/jsx-runtime";
+var Loader = ({
+  size = "large",
+  text = "",
+  delay = true,
+  color = "dark",
+  qa,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    styles_default,
+    {
+      small: size === "small",
+      dark: color === "dark",
+      delay,
+      "data-qa-loader": "",
+      ...qa,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Text, { children: text || "Loading" })
+    }
+  );
+};
+var Loader_default = Loader;
+
+// src/index.ts
+var src_default = Loader_default;
+export {
+  Loader_default as Loader,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Loader.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n  size = \"large\",\n  text = \"\",\n  delay = true,\n  color = \"dark\",\n  qa,\n  ...rest\n}: TypeLoaderProps) => {\n  return (\n    <Container\n      small={size === \"small\"}\n      dark={color === \"dark\"}\n      delay={delay}\n      data-qa-loader=\"\"\n      {...qa}\n      {...rest}\n    >\n      <Text>{text || \"Loading\"}</Text>\n    </Container>\n  );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n  const spinnerSize = Math.round(size * 1);\n  const borderWidth = Math.round(size * 0.1);\n\n  return css`\n    width: ${size}px;\n    height: ${size}px;\n    box-shadow: ${({ theme }) =>\n      `0 0 0 2px ${theme.colors.neutral[600]}, \n      inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n    &:after {\n      width: ${spinnerSize}px;\n      height: ${spinnerSize}px;\n      box-sizing: border-box;\n      border-width: ${borderWidth}px;\n    }\n\n    .no-cssanimations &::after {\n      background-size: ${spinnerSize}px;\n    }\n  `;\n};\n\nconst spin = keyframes`\n  from {\n    transform: translate(-50%,-50%) rotate(0deg);\n  }\n  to {\n    transform: translate(-50%,-50%) rotate(360deg);\n  }\n`;\n\nconst delayAnimation = keyframes`\n  0% {\n    opacity: 0;\n  }\n  80% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n  small?: boolean;\n  dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n  className: \"Loader\",\n})<TypeLoaderContainer>`\n  position: relative;\n  margin: 0 auto;\n  padding: 0;\n  overflow: hidden;\n  border-radius: 100%;\n\n  animation: ${(props) =>\n    props.delay\n      ? css`\n          ${delayAnimation} 2s 1;\n        `\n      : \"none\"};\n\n  &:after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    background: transparent;\n    border-style: solid;\n    border-radius: 100%;\n    content: \"\";\n    transition: opacity 250ms;\n    border-color: ${({ theme }) =>\n      `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n    animation: ${(props) =>\n      props.delay\n        ? css`\n            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n          `\n        : css`\n            ${spin} 2.25s infinite linear\n          `};\n  }\n\n  ${(props) => (props.small ? getSize(20) : getSize(40))}\n  ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n  ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,UAAU,KAAK,iBAAiB;AACvC,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAG/B,IAAM,UAAU,CAAC,SAAiB;AAChC,QAAM,cAAc,KAAK,MAAM,OAAO,CAAC;AACvC,QAAM,cAAc,KAAK,MAAM,OAAO,GAAG;AAEzC,SAAO;AAAA,aACI,IAAI;AAAA,cACH,IAAI;AAAA,kBACA,CAAC,EAAE,MAAM,MACrB,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,oBACxB,cAAc,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,eAGrD,WAAW;AAAA,gBACV,WAAW;AAAA;AAAA,sBAEL,WAAW;AAAA;AAAA;AAAA;AAAA,yBAIR,WAAW;AAAA;AAAA;AAGpC;AAEA,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,IAAM,YAAY,OAAO,IAAI,MAA6B;AAAA,EACxD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOc,CAAC,UACZ,MAAM,QACF;AAAA,YACI,cAAc;AAAA,YAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWM,CAAC,EAAE,MAAM,MACvB,GAAG,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA,iBAEtG,CAAC,UACZ,MAAM,QACF;AAAA,cACI,IAAI,2BAA2B,cAAc;AAAA,cAEjD;AAAA,cACI,IAAI;AAAA,WACP;AAAA;AAAA;AAAA,IAGP,CAAC,UAAW,MAAM,QAAQ,QAAQ,EAAE,IAAI,QAAQ,EAAE,CAAE;AAAA,IACpD,MAAM;AAAA;AAGH,IAAM,OAAO,OAAO;AAAA,IACvB,cAAc;AAAA;AAGlB,IAAO,iBAAQ;;;ADhFT;AAjBN,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,kBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,8BAAC,QAAM,kBAAQ,WAAU;AAAA;AAAA,EAC3B;AAEJ;AAEA,IAAO,iBAAQ;;;AExBf,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeQaProps = object;
+interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps> {
+    size?: "small" | "large";
+    /** Text for the loader. This text is not visible, but is used for accessibility purposed */
+    text?: string;
+    /** Whether the loader should wait 2 seconds before it displays */
+    delay?: boolean;
+    color?: "light" | "dark";
+    qa?: TypeQaProps;
+}
+
+declare const Loader: ({ size, text, delay, color, qa, ...rest }: TypeLoaderProps) => react_jsx_runtime.JSX.Element;
+
+export { Loader, type TypeLoaderProps, Loader as default };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeQaProps = object;
+interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps> {
+    size?: "small" | "large";
+    /** Text for the loader. This text is not visible, but is used for accessibility purposed */
+    text?: string;
+    /** Whether the loader should wait 2 seconds before it displays */
+    delay?: boolean;
+    color?: "light" | "dark";
+    qa?: TypeQaProps;
+}
+
+declare const Loader: ({ size, text, delay, color, qa, ...rest }: TypeLoaderProps) => react_jsx_runtime.JSX.Element;
+
+export { Loader, type TypeLoaderProps, Loader as default };

package/dist/index.js

@@ -0,0 +1,155 @@
+"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, {
+  Loader: () => Loader_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Loader.tsx
+var React = require("react");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var getSize = (size) => {
+  const spinnerSize = Math.round(size * 1);
+  const borderWidth = Math.round(size * 0.1);
+  return import_styled_components.css`
+    width: ${size}px;
+    height: ${size}px;
+    box-shadow: ${({ theme }) => `0 0 0 2px ${theme.colors.neutral[600]}, 
+      inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};
+
+    &:after {
+      width: ${spinnerSize}px;
+      height: ${spinnerSize}px;
+      box-sizing: border-box;
+      border-width: ${borderWidth}px;
+    }
+
+    .no-cssanimations &::after {
+      background-size: ${spinnerSize}px;
+    }
+  `;
+};
+var spin = import_styled_components.keyframes`
+  from {
+    transform: translate(-50%,-50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%,-50%) rotate(360deg);
+  }
+`;
+var delayAnimation = import_styled_components.keyframes`
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var Container = import_styled_components.default.div.attrs({
+  className: "Loader"
+})`
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 100%;
+
+  animation: ${(props) => props.delay ? import_styled_components.css`
+          ${delayAnimation} 2s 1;
+        ` : "none"};
+
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: transparent;
+    border-style: solid;
+    border-radius: 100%;
+    content: "";
+    transition: opacity 250ms;
+    border-color: ${({ theme }) => `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};
+
+    animation: ${(props) => props.delay ? import_styled_components.css`
+            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
+          ` : import_styled_components.css`
+            ${spin} 2.25s infinite linear
+          `};
+  }
+
+  ${(props) => props.small ? getSize(20) : getSize(40)}
+  ${import_seeds_react_system_props.COMMON}
+`;
+var Text = import_styled_components.default.div`
+  ${import_seeds_react_mixins.visuallyHidden}
+`;
+var styles_default = Container;
+
+// src/Loader.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Loader = ({
+  size = "large",
+  text = "",
+  delay = true,
+  color = "dark",
+  qa,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    styles_default,
+    {
+      small: size === "small",
+      dark: color === "dark",
+      delay,
+      "data-qa-loader": "",
+      ...qa,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: text || "Loading" })
+    }
+  );
+};
+var Loader_default = Loader;
+
+// src/index.ts
+var src_default = Loader_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Loader
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Loader.tsx","../src/styles.ts"],"sourcesContent":["import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n","import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n  size = \"large\",\n  text = \"\",\n  delay = true,\n  color = \"dark\",\n  qa,\n  ...rest\n}: TypeLoaderProps) => {\n  return (\n    <Container\n      small={size === \"small\"}\n      dark={color === \"dark\"}\n      delay={delay}\n      data-qa-loader=\"\"\n      {...qa}\n      {...rest}\n    >\n      <Text>{text || \"Loading\"}</Text>\n    </Container>\n  );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n  const spinnerSize = Math.round(size * 1);\n  const borderWidth = Math.round(size * 0.1);\n\n  return css`\n    width: ${size}px;\n    height: ${size}px;\n    box-shadow: ${({ theme }) =>\n      `0 0 0 2px ${theme.colors.neutral[600]}, \n      inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n    &:after {\n      width: ${spinnerSize}px;\n      height: ${spinnerSize}px;\n      box-sizing: border-box;\n      border-width: ${borderWidth}px;\n    }\n\n    .no-cssanimations &::after {\n      background-size: ${spinnerSize}px;\n    }\n  `;\n};\n\nconst spin = keyframes`\n  from {\n    transform: translate(-50%,-50%) rotate(0deg);\n  }\n  to {\n    transform: translate(-50%,-50%) rotate(360deg);\n  }\n`;\n\nconst delayAnimation = keyframes`\n  0% {\n    opacity: 0;\n  }\n  80% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n  small?: boolean;\n  dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n  className: \"Loader\",\n})<TypeLoaderContainer>`\n  position: relative;\n  margin: 0 auto;\n  padding: 0;\n  overflow: hidden;\n  border-radius: 100%;\n\n  animation: ${(props) =>\n    props.delay\n      ? css`\n          ${delayAnimation} 2s 1;\n        `\n      : \"none\"};\n\n  &:after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    background: transparent;\n    border-style: solid;\n    border-radius: 100%;\n    content: \"\";\n    transition: opacity 250ms;\n    border-color: ${({ theme }) =>\n      `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n    animation: ${(props) =>\n      props.delay\n        ? css`\n            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n          `\n        : css`\n            ${spin} 2.25s infinite linear\n          `};\n  }\n\n  ${(props) => (props.small ? getSize(20) : getSize(40))}\n  ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n  ${visuallyHidden}\n`;\n\nexport default Container;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAuC;AACvC,sCAAuB;AACvB,gCAA+B;AAG/B,IAAM,UAAU,CAAC,SAAiB;AAChC,QAAM,cAAc,KAAK,MAAM,OAAO,CAAC;AACvC,QAAM,cAAc,KAAK,MAAM,OAAO,GAAG;AAEzC,SAAO;AAAA,aACI,IAAI;AAAA,cACH,IAAI;AAAA,kBACA,CAAC,EAAE,MAAM,MACrB,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,oBACxB,cAAc,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,eAGrD,WAAW;AAAA,gBACV,WAAW;AAAA;AAAA,sBAEL,WAAW;AAAA;AAAA;AAAA;AAAA,yBAIR,WAAW;AAAA;AAAA;AAGpC;AAEA,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,IAAM,YAAY,yBAAAA,QAAO,IAAI,MAA6B;AAAA,EACxD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOc,CAAC,UACZ,MAAM,QACF;AAAA,YACI,cAAc;AAAA,YAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWM,CAAC,EAAE,MAAM,MACvB,GAAG,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA,iBAEtG,CAAC,UACZ,MAAM,QACF;AAAA,cACI,IAAI,2BAA2B,cAAc;AAAA,cAEjD;AAAA,cACI,IAAI;AAAA,WACP;AAAA;AAAA;AAAA,IAGP,CAAC,UAAW,MAAM,QAAQ,QAAQ,EAAE,IAAI,QAAQ,EAAE,CAAE;AAAA,IACpD,sCAAM;AAAA;AAGH,IAAM,OAAO,yBAAAA,QAAO;AAAA,IACvB,wCAAc;AAAA;AAGlB,IAAO,iBAAQ;;;ADhFT;AAjBN,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,kBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,sDAAC,QAAM,kBAAQ,WAAU;AAAA;AAAA,EAC3B;AAEJ;AAEA,IAAO,iBAAQ;;;ADxBf,IAAO,cAAQ;","names":["styled"]}

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",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-loader",
+  "version": "1.0.0",
+  "description": "Seeds React Loader",
+  "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-mixins": "^*"
+  },
+  "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/Loader.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Loader } from "./";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Loader> = {
+  title: "Components/Loader",
+  component: Loader,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loader>;
+
+export const Default: Story = {
+  args: {
+    text: "Content loading",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    text: "Content loading",
+    size: "small",
+  },
+};
+
+export const NoDelay: Story = {
+  args: {
+    text: "Content loading",
+    delay: false,
+  },
+};

package/src/Loader.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Container, { Text } from "./styles";
+import type { TypeLoaderProps } from "./LoaderTypes";
+
+const Loader = ({
+  size = "large",
+  text = "",
+  delay = true,
+  color = "dark",
+  qa,
+  ...rest
+}: TypeLoaderProps) => {
+  return (
+    <Container
+      small={size === "small"}
+      dark={color === "dark"}
+      delay={delay}
+      data-qa-loader=""
+      {...qa}
+      {...rest}
+    >
+      <Text>{text || "Loading"}</Text>
+    </Container>
+  );
+};
+
+export default Loader;

package/src/LoaderTypes.ts

@@ -0,0 +1,21 @@
+import type {
+  TypeStyledComponentsCommonProps,
+  TypeSystemCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+type TypeQaProps = object;
+
+export interface TypeLoaderProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps> {
+  size?: "small" | "large";
+
+  /** Text for the loader. This text is not visible, but is used for accessibility purposed */
+  text?: string;
+
+  /** Whether the loader should wait 2 seconds before it displays */
+  delay?: boolean;
+  color?: "light" | "dark";
+  qa?: TypeQaProps;
+}

package/src/__tests__/Loader.typetest.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import Loader from "../Loader";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function LoaderTypes() {
+  return (
+    <>
+      <Loader text="Content loading" delay={false} />
+      {/* @ts-expect-error - test that invalid props are rejected */}
+      <Loader text={3} delay="invalid" />
+    </>
+  );
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Loader from "../Loader";
+
+describe("Loader", () => {
+  it("should render properly", () => {
+    render(<Loader />);
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+
+  it("should render with small size class", () => {
+    render(<Loader size="small" />);
+    expect(
+      screen.getByDataQaLabel({
+        loader: "",
+      })
+    ).toHaveStyleRule("width", "20px");
+  });
+
+  it("should render with light theme", () => {
+    render(<Loader color="light" />);
+    expect(
+      screen.getByDataQaLabel({
+        loader: "",
+      })
+    ).toHaveStyleRule("border-color", "#FFFFFF #FFFFFF #6e797a #6e797a", {
+      modifier: ":after",
+    });
+  });
+});

package/src/index.ts

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

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/src/styles.ts

@@ -0,0 +1,102 @@
+import styled, { css, keyframes } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+import type { TypeLoaderProps } from "./LoaderTypes";
+
+const getSize = (size: number) => {
+  const spinnerSize = Math.round(size * 1);
+  const borderWidth = Math.round(size * 0.1);
+
+  return css`
+    width: ${size}px;
+    height: ${size}px;
+    box-shadow: ${({ theme }) =>
+      `0 0 0 2px ${theme.colors.neutral[600]}, 
+      inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};
+
+    &:after {
+      width: ${spinnerSize}px;
+      height: ${spinnerSize}px;
+      box-sizing: border-box;
+      border-width: ${borderWidth}px;
+    }
+
+    .no-cssanimations &::after {
+      background-size: ${spinnerSize}px;
+    }
+  `;
+};
+
+const spin = keyframes`
+  from {
+    transform: translate(-50%,-50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%,-50%) rotate(360deg);
+  }
+`;
+
+const delayAnimation = keyframes`
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+interface TypeLoaderContainer extends Pick<TypeLoaderProps, "delay"> {
+  small?: boolean;
+  dark?: boolean;
+}
+
+const Container = styled.div.attrs<{ className: string }>({
+  className: "Loader",
+})<TypeLoaderContainer>`
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 100%;
+
+  animation: ${(props) =>
+    props.delay
+      ? css`
+          ${delayAnimation} 2s 1;
+        `
+      : "none"};
+
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: transparent;
+    border-style: solid;
+    border-radius: 100%;
+    content: "";
+    transition: opacity 250ms;
+    border-color: ${({ theme }) =>
+      `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};
+
+    animation: ${(props) =>
+      props.delay
+        ? css`
+            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
+          `
+        : css`
+            ${spin} 2.25s infinite linear
+          `};
+  }
+
+  ${(props) => (props.small ? getSize(20) : getSize(40))}
+  ${COMMON}
+`;
+
+export const Text = styled.div<Pick<TypeLoaderProps, "text">>`
+  ${visuallyHidden}
+`;
+
+export default Container;

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,
+}));