@sproutsocial/seeds-react-skeleton 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-skeleton/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     4.96 KB
+CJS dist/index.js.map 5.24 KB
+CJS ⚡️ Build success in 119ms
+ESM dist/esm/index.js     3.23 KB
+ESM dist/esm/index.js.map 5.17 KB
+ESM ⚡️ Build success in 125ms
+DTS Build start
+DTS ⚡️ Build success in 33302ms
+DTS dist/index.d.ts  317.00 B
+DTS dist/index.d.mts 317.00 B
+Done in 41.01s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-skeleton
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate Skeleton to its own seeds-react-skeleton component

package/dist/esm/index.js

@@ -0,0 +1,136 @@
+// src/Skeleton.tsx
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import { jsx } from "react/jsx-runtime";
+var SkeletonAttrs = ({ borderRadius, height, width }) => ({
+  className: borderRadius === "pill" && height === width ? "circular" : "linear"
+});
+var Skeleton = styled(Box).attrs(SkeletonAttrs)`
+  position: relative;
+  background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+  overflow: hidden;
+  &.circular {
+    &:before {
+      position: absolute;
+      top: -25%;
+      left: -25%;
+      content: '';
+      background-image: ${(props) => `conic-gradient(
+      ${props.theme.colors.container.background.decorative.neutral} 270deg,
+      ${props.theme.colors.container.border.decorative.neutral} 300deg
+    );`};
+      height: 150%;
+      width: 150%;
+      animation: SkeletonRotate 2s infinite linear;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      height: calc(100% - 8px);
+      width: calc(100% - 8px);
+      background: ${(p) => p.theme.colors.app.background.base};
+      border-radius: 50%;
+    }
+  }
+  &.linear {
+    position: relative;
+    background-image: ${(props) => `linear-gradient(
+      288deg,
+      ${props.theme.colors.container.background.decorative.neutral} 32%,
+      ${props.theme.colors.container.border.decorative.neutral},
+      ${props.theme.colors.container.background.decorative.neutral} 68%
+    );`}
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      content: "";
+      height: calc(100% - 4px);
+      width: 100%;
+      background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+      
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    &.linear,
+    &.circular::before {
+      animation: none;
+    }
+    &:before,
+    &:after {
+      display: none;
+    }
+    &.linear,
+    &.circular {
+      border: 1px solid ${(props) => props.theme.colors.container.border.decorative.neutral};
+      animation: SkeletonPulse 2s linear infinite alternate; 
+    }
+  }
+
+  @keyframes SkeletonRotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes SkeletonRotateFade {
+    50% {
+      transform: rotate(360deg);
+    }
+    90% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes SkeletonShimmer {
+    0% {
+      background-position: 0% 0;
+    }
+    100% {
+      background-position: 100% 0;
+    }
+  }
+  @keyframes SkeletonPulse {
+    0% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}FF;
+    }
+    100% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}1A;
+    }
+  }
+`;
+var SkeletonComponent = ({
+  borderRadius,
+  height,
+  width,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius,
+      height,
+      width,
+      ...props
+    }
+  );
+};
+var Skeleton_default = SkeletonComponent;
+
+// src/index.ts
+var src_default = Skeleton_default;
+export {
+  Skeleton_default as Skeleton,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Skeleton.tsx","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n  className:\n    borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n  position: relative;\n  background: ${(props) =>\n    props.theme.colors.container.background.decorative.neutral};\n  overflow: hidden;\n  &.circular {\n    &:before {\n      position: absolute;\n      top: -25%;\n      left: -25%;\n      content: '';\n      background-image: ${(props) => `conic-gradient(\n      ${props.theme.colors.container.background.decorative.neutral} 270deg,\n      ${props.theme.colors.container.border.decorative.neutral} 300deg\n    );`};\n      height: 150%;\n      width: 150%;\n      animation: SkeletonRotate 2s infinite linear;\n    }\n    &:after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: '';\n      height: calc(100% - 8px);\n      width: calc(100% - 8px);\n      background: ${(p) => p.theme.colors.app.background.base};\n      border-radius: 50%;\n    }\n  }\n  &.linear {\n    position: relative;\n    background-image: ${(props) => `linear-gradient(\n      288deg,\n      ${props.theme.colors.container.background.decorative.neutral} 32%,\n      ${props.theme.colors.container.border.decorative.neutral},\n      ${props.theme.colors.container.background.decorative.neutral} 68%\n    );`}\n    background-size: 400%;\n    background-repeat: no-repeat;\n    animation: SkeletonShimmer 2s linear infinite reverse;\n    overflow: hidden;\n    &:after {\n      position: absolute;\n      bottom: 0;\n      content: \"\";\n      height: calc(100% - 4px);\n      width: 100%;\n      background: ${(props) =>\n        props.theme.colors.container.background.decorative.neutral};\n      \n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    &.linear,\n    &.circular::before {\n      animation: none;\n    }\n    &:before,\n    &:after {\n      display: none;\n    }\n    &.linear,\n    &.circular {\n      border: 1px solid ${(props) =>\n        props.theme.colors.container.border.decorative.neutral};\n      animation: SkeletonPulse 2s linear infinite alternate; \n    }\n  }\n\n  @keyframes SkeletonRotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes SkeletonRotateFade {\n    50% {\n      transform: rotate(360deg);\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: rotate(720deg);\n      opacity: 0;\n    }\n  }\n\n  @keyframes SkeletonShimmer {\n    0% {\n      background-position: 0% 0;\n    }\n    100% {\n      background-position: 100% 0;\n    }\n  }\n  @keyframes SkeletonPulse {\n    0% {\n      border-color: ${(props) =>\n        props.theme.colors.container.border.decorative.neutral}FF;\n    }\n    100% {\n      border-color: ${(props) =>\n        props.theme.colors.container.border.decorative.neutral}1A;\n    }\n  }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nconst SkeletonComponent = ({\n  borderRadius,\n  height,\n  width,\n  ...props\n}: TypeBoxProps) => {\n  return (\n    <Skeleton\n      borderRadius={borderRadius}\n      height={height}\n      width={width}\n      {...props}\n    />\n  );\n};\n\nexport default SkeletonComponent;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport { Skeleton };\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,OAAO,SAAgC;AAmInC;AA3HJ,IAAM,gBAAgB,CAAC,EAAE,cAAc,QAAQ,MAAM,OAAO;AAAA,EAC1D,WACE,iBAAiB,UAAU,WAAW,QAAQ,aAAa;AAC/D;AAEA,IAAM,WAAW,OAAO,GAAG,EAAE,MAAM,aAAa;AAAA;AAAA,gBAEhC,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQpC,CAAC,UAAU;AAAA,QAC7B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,OACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaa,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrC,CAAC,UAAU;AAAA;AAAA,QAE3B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,QACtD,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,OAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWa,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAgBxC,CAAC,UACnB,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAiCxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAM9D,IAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;;;AC3If,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+declare const SkeletonComponent: ({ borderRadius, height, width, ...props }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
+
+export { SkeletonComponent as Skeleton, SkeletonComponent as default };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+declare const SkeletonComponent: ({ borderRadius, height, width, ...props }: TypeBoxProps) => react_jsx_runtime.JSX.Element;
+
+export { SkeletonComponent as Skeleton, SkeletonComponent as default };

package/dist/index.js

@@ -0,0 +1,173 @@
+"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, {
+  Skeleton: () => Skeleton_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Skeleton.tsx
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkeletonAttrs = ({ borderRadius, height, width }) => ({
+  className: borderRadius === "pill" && height === width ? "circular" : "linear"
+});
+var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.default).attrs(SkeletonAttrs)`
+  position: relative;
+  background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+  overflow: hidden;
+  &.circular {
+    &:before {
+      position: absolute;
+      top: -25%;
+      left: -25%;
+      content: '';
+      background-image: ${(props) => `conic-gradient(
+      ${props.theme.colors.container.background.decorative.neutral} 270deg,
+      ${props.theme.colors.container.border.decorative.neutral} 300deg
+    );`};
+      height: 150%;
+      width: 150%;
+      animation: SkeletonRotate 2s infinite linear;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      height: calc(100% - 8px);
+      width: calc(100% - 8px);
+      background: ${(p) => p.theme.colors.app.background.base};
+      border-radius: 50%;
+    }
+  }
+  &.linear {
+    position: relative;
+    background-image: ${(props) => `linear-gradient(
+      288deg,
+      ${props.theme.colors.container.background.decorative.neutral} 32%,
+      ${props.theme.colors.container.border.decorative.neutral},
+      ${props.theme.colors.container.background.decorative.neutral} 68%
+    );`}
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      content: "";
+      height: calc(100% - 4px);
+      width: 100%;
+      background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+      
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    &.linear,
+    &.circular::before {
+      animation: none;
+    }
+    &:before,
+    &:after {
+      display: none;
+    }
+    &.linear,
+    &.circular {
+      border: 1px solid ${(props) => props.theme.colors.container.border.decorative.neutral};
+      animation: SkeletonPulse 2s linear infinite alternate; 
+    }
+  }
+
+  @keyframes SkeletonRotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes SkeletonRotateFade {
+    50% {
+      transform: rotate(360deg);
+    }
+    90% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes SkeletonShimmer {
+    0% {
+      background-position: 0% 0;
+    }
+    100% {
+      background-position: 100% 0;
+    }
+  }
+  @keyframes SkeletonPulse {
+    0% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}FF;
+    }
+    100% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}1A;
+    }
+  }
+`;
+var SkeletonComponent = ({
+  borderRadius,
+  height,
+  width,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Skeleton,
+    {
+      borderRadius,
+      height,
+      width,
+      ...props
+    }
+  );
+};
+var Skeleton_default = SkeletonComponent;
+
+// src/index.ts
+var src_default = Skeleton_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport { Skeleton };\n","import styled from \"styled-components\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n  className:\n    borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n  position: relative;\n  background: ${(props) =>\n    props.theme.colors.container.background.decorative.neutral};\n  overflow: hidden;\n  &.circular {\n    &:before {\n      position: absolute;\n      top: -25%;\n      left: -25%;\n      content: '';\n      background-image: ${(props) => `conic-gradient(\n      ${props.theme.colors.container.background.decorative.neutral} 270deg,\n      ${props.theme.colors.container.border.decorative.neutral} 300deg\n    );`};\n      height: 150%;\n      width: 150%;\n      animation: SkeletonRotate 2s infinite linear;\n    }\n    &:after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      content: '';\n      height: calc(100% - 8px);\n      width: calc(100% - 8px);\n      background: ${(p) => p.theme.colors.app.background.base};\n      border-radius: 50%;\n    }\n  }\n  &.linear {\n    position: relative;\n    background-image: ${(props) => `linear-gradient(\n      288deg,\n      ${props.theme.colors.container.background.decorative.neutral} 32%,\n      ${props.theme.colors.container.border.decorative.neutral},\n      ${props.theme.colors.container.background.decorative.neutral} 68%\n    );`}\n    background-size: 400%;\n    background-repeat: no-repeat;\n    animation: SkeletonShimmer 2s linear infinite reverse;\n    overflow: hidden;\n    &:after {\n      position: absolute;\n      bottom: 0;\n      content: \"\";\n      height: calc(100% - 4px);\n      width: 100%;\n      background: ${(props) =>\n        props.theme.colors.container.background.decorative.neutral};\n      \n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    &.linear,\n    &.circular::before {\n      animation: none;\n    }\n    &:before,\n    &:after {\n      display: none;\n    }\n    &.linear,\n    &.circular {\n      border: 1px solid ${(props) =>\n        props.theme.colors.container.border.decorative.neutral};\n      animation: SkeletonPulse 2s linear infinite alternate; \n    }\n  }\n\n  @keyframes SkeletonRotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes SkeletonRotateFade {\n    50% {\n      transform: rotate(360deg);\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: rotate(720deg);\n      opacity: 0;\n    }\n  }\n\n  @keyframes SkeletonShimmer {\n    0% {\n      background-position: 0% 0;\n    }\n    100% {\n      background-position: 100% 0;\n    }\n  }\n  @keyframes SkeletonPulse {\n    0% {\n      border-color: ${(props) =>\n        props.theme.colors.container.border.decorative.neutral}FF;\n    }\n    100% {\n      border-color: ${(props) =>\n        props.theme.colors.container.border.decorative.neutral}1A;\n    }\n  }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nconst SkeletonComponent = ({\n  borderRadius,\n  height,\n  width,\n  ...props\n}: TypeBoxProps) => {\n  return (\n    <Skeleton\n      borderRadius={borderRadius}\n      height={height}\n      width={width}\n      {...props}\n    />\n  );\n};\n\nexport default SkeletonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,6BAAuC;AAmInC;AA3HJ,IAAM,gBAAgB,CAAC,EAAE,cAAc,QAAQ,MAAM,OAAO;AAAA,EAC1D,WACE,iBAAiB,UAAU,WAAW,QAAQ,aAAa;AAC/D;AAEA,IAAM,eAAW,yBAAAA,SAAO,uBAAAC,OAAG,EAAE,MAAM,aAAa;AAAA;AAAA,gBAEhC,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQpC,CAAC,UAAU;AAAA,QAC7B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,OACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaa,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrC,CAAC,UAAU;AAAA;AAAA,QAE3B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA,QACtD,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA,OAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWa,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAgBxC,CAAC,UACnB,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAiCxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAM9D,IAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;;;AD3If,IAAO,cAAQ;","names":["styled","Box"]}

package/jest.config.js

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

package/package.json

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

@@ -0,0 +1,41 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Box from "@sproutsocial/seeds-react-box";
+import Banner from "@sproutsocial/seeds-react-banner";
+import Skeleton from "./Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+};
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  name: "Usage Example",
+  render: () => (
+    <>
+      <Banner
+        type="info"
+        text="When using a skeleton component, it's important to wrap it in a container with a role attribute set to status and an appropriate aria-label attribute. This helps ensure that screen readers and other assistive technologies can properly convey the purpose of the skeleton to users with screen readers."
+        mb={400}
+      />
+      <Box
+        maxWidth={200}
+        p={400}
+        borderRadius="outer"
+        border={500}
+        borderColor="container.border.base"
+        tabIndex={0}
+        role="status"
+        aria-label="Content is loading"
+      >
+        <Skeleton borderRadius="pill" height={48} width={48} mb={400} />
+        <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />
+        <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />
+        <Skeleton borderRadius="inner" height={128} width="100%" />
+      </Box>
+    </>
+  ),
+};

package/src/Skeleton.tsx

@@ -0,0 +1,142 @@
+import styled from "styled-components";
+import Box, { type TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+/**
+ *
+ * @param borderRadius
+ * @returns classname string for handling appropriate loader style depending on passed in properties
+ */
+// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component
+const SkeletonAttrs = ({ borderRadius, height, width }) => ({
+  className:
+    borderRadius === "pill" && height === width ? "circular" : "linear",
+});
+
+const Skeleton = styled(Box).attrs(SkeletonAttrs)`
+  position: relative;
+  background: ${(props) =>
+    props.theme.colors.container.background.decorative.neutral};
+  overflow: hidden;
+  &.circular {
+    &:before {
+      position: absolute;
+      top: -25%;
+      left: -25%;
+      content: '';
+      background-image: ${(props) => `conic-gradient(
+      ${props.theme.colors.container.background.decorative.neutral} 270deg,
+      ${props.theme.colors.container.border.decorative.neutral} 300deg
+    );`};
+      height: 150%;
+      width: 150%;
+      animation: SkeletonRotate 2s infinite linear;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      height: calc(100% - 8px);
+      width: calc(100% - 8px);
+      background: ${(p) => p.theme.colors.app.background.base};
+      border-radius: 50%;
+    }
+  }
+  &.linear {
+    position: relative;
+    background-image: ${(props) => `linear-gradient(
+      288deg,
+      ${props.theme.colors.container.background.decorative.neutral} 32%,
+      ${props.theme.colors.container.border.decorative.neutral},
+      ${props.theme.colors.container.background.decorative.neutral} 68%
+    );`}
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      content: "";
+      height: calc(100% - 4px);
+      width: 100%;
+      background: ${(props) =>
+        props.theme.colors.container.background.decorative.neutral};
+      
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    &.linear,
+    &.circular::before {
+      animation: none;
+    }
+    &:before,
+    &:after {
+      display: none;
+    }
+    &.linear,
+    &.circular {
+      border: 1px solid ${(props) =>
+        props.theme.colors.container.border.decorative.neutral};
+      animation: SkeletonPulse 2s linear infinite alternate; 
+    }
+  }
+
+  @keyframes SkeletonRotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes SkeletonRotateFade {
+    50% {
+      transform: rotate(360deg);
+    }
+    90% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes SkeletonShimmer {
+    0% {
+      background-position: 0% 0;
+    }
+    100% {
+      background-position: 100% 0;
+    }
+  }
+  @keyframes SkeletonPulse {
+    0% {
+      border-color: ${(props) =>
+        props.theme.colors.container.border.decorative.neutral}FF;
+    }
+    100% {
+      border-color: ${(props) =>
+        props.theme.colors.container.border.decorative.neutral}1A;
+    }
+  }
+`;
+
+// @TODO: Refine types that are passed to SkeletonComponent
+const SkeletonComponent = ({
+  borderRadius,
+  height,
+  width,
+  ...props
+}: TypeBoxProps) => {
+  return (
+    <Skeleton
+      borderRadius={borderRadius}
+      height={height}
+      width={width}
+      {...props}
+    />
+  );
+};
+
+export default SkeletonComponent;

package/src/__tests__/Skeleton.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Skeleton from "../Skeleton";
+
+describe("Skeleton Component", () => {
+  it("renders with circular class when borderRadius is 'pill' and height equals width", () => {
+    render(
+      <Skeleton
+        borderRadius="pill"
+        height="50px"
+        width="50px"
+        data-testid="skeleton"
+      />
+    );
+    const skeletonElement = screen.getByTestId("skeleton");
+    expect(skeletonElement).toHaveClass("circular");
+  });
+
+  it("renders with linear class when borderRadius is not 'pill' or height does not equal width", () => {
+    render(
+      <Skeleton
+        borderRadius="square"
+        height="50px"
+        width="100px"
+        data-testid="skeleton"
+      />
+    );
+    const skeletonElement = screen.getByTestId("skeleton");
+    expect(skeletonElement).toHaveClass("linear");
+  });
+});

package/src/__tests__/Skeleton.typetest.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import Skeleton from "../Skeleton";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SkeletonTypes() {
+  return (
+    <>
+      <Skeleton />
+      {/* @ts-expect-error - test that invalid prop is rejected */}
+      <Skeleton flexDirection="invalid" />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import Skeleton from "./Skeleton";
+
+export default Skeleton;
+export { Skeleton };

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", "**/*.stories.tsx"]
+}

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