@sproutsocial/seeds-react-skeleton 1.1.21 → 1.1.24

package/dist/esm/index.js

@@ -1,11 +1,40 @@
 // src/Skeleton.tsx
+import React3 from "react";
+
+// src/SkeletonHybrid.tsx
+import React2 from "react";
+
+// src/styles.ts
 import styled from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
-import { jsx } from "react/jsx-runtime";
+
+// src/variant.ts
+var getSkeletonVariant = ({
+  borderRadius,
+  height,
+  width
+}) => borderRadius === "pill" && height === width ? "circular" : "linear";
+var RADIUS_VARS = {
+  pill: "var(--radius-pill)",
+  inner: "var(--radius-inner)",
+  outer: "var(--radius-outer)",
+  400: "var(--radius-400)",
+  500: "var(--radius-500)",
+  600: "var(--radius-600)",
+  800: "var(--radius-800)",
+  900: "var(--radius-900)",
+  1e3: "var(--radius-1000)"
+};
+var radiusVar = (borderRadius) => {
+  if (borderRadius == null) return "0";
+  return RADIUS_VARS[String(borderRadius)] ?? "0";
+};
+
+// src/styles.ts
 var SkeletonAttrs = ({ borderRadius, height, width }) => ({
-  className: borderRadius === "pill" && height === width ? "circular" : "linear"
+  className: getSkeletonVariant({ borderRadius, height, width })
 });
-var Skeleton = styled(Box).attrs(SkeletonAttrs)`
+var SkeletonStyled = styled(Box).attrs(SkeletonAttrs)`
   position: relative;
   background: ${(props) => props.theme.colors.container.background.decorative.neutral};
   overflow: hidden;
@@ -54,7 +83,7 @@ var Skeleton = styled(Box).attrs(SkeletonAttrs)`
       height: calc(100% - 4px);
       width: 100%;
       background: ${(props) => props.theme.colors.container.background.decorative.neutral};
-      
+
     }
   }
 
@@ -70,7 +99,7 @@ var Skeleton = styled(Box).attrs(SkeletonAttrs)`
     &.linear,
     &.circular {
       border: 1px solid ${(props) => props.theme.colors.container.border.decorative.neutral};
-      animation: SkeletonPulse 2s linear infinite alternate; 
+      animation: SkeletonPulse 2s linear infinite alternate;
     }
   }
 
@@ -109,6 +138,72 @@ var Skeleton = styled(Box).attrs(SkeletonAttrs)`
     }
   }
 `;
+var styles_default = SkeletonStyled;
+
+// src/SkeletonTailwind.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+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 toDimension = (value) => typeof value === "number" ? `${value}px` : value;
+var SkeletonTailwind = React.forwardRef(
+  ({ borderRadius, height, width, className, style, ...rest }, ref) => {
+    const variant = getSkeletonVariant({ borderRadius, height, width });
+    const skeletonStyle = {
+      width: toDimension(width),
+      height: toDimension(height),
+      ...style,
+      // The shimmer/ring surface reads this for corner rounding; circular masks
+      // its own shape via border-radius: 50% in skeleton.css.
+      ["--skeleton-radius"]: radiusVar(borderRadius)
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("seeds-skeleton", variant, className),
+        style: skeletonStyle,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonTailwind.displayName = "SkeletonTailwind";
+
+// src/SkeletonHybrid.tsx
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SkeletonHybrid = React2.forwardRef(
+  (props, ref) => {
+    if (needsStyledComponents(props)) {
+      return /* @__PURE__ */ jsx2(styles_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsx2(SkeletonTailwind, { ...props, ref });
+  }
+);
+SkeletonHybrid.displayName = "Skeleton";
+var SkeletonHybrid_default = SkeletonHybrid;
+
+// src/Skeleton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Skeleton = React3.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx3(SkeletonHybrid_default, { ...props, ref })
+);
+Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/index.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Skeleton.tsx","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\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\nexport const SkeletonComponent = ({\n  borderRadius,\n  height,\n  width,\n  ...props\n}: SkeletonProps) => {\n  return (\n    <Skeleton\n      borderRadius={borderRadius}\n      height={height}\n      width={width}\n      {...props}\n    />\n  );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,OAAO,SAAS;AAoIZ;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;AAsB9D,IAAO,mBAAQ;;;AC5If,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Skeleton.tsx","../../src/SkeletonHybrid.tsx","../../src/styles.ts","../../src/variant.ts","../../src/SkeletonTailwind.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport SkeletonHybrid from \"./SkeletonHybrid\";\n\n/**\n * Skeleton component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => <SkeletonHybrid {...props} ref={ref} />\n);\n\nSkeleton.displayName = \"Skeleton\";\nexport default Skeleton;\n","/**\n * Hybrid Skeleton Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport SkeletonStyled from \"./styles\"; // Styled-components version\nimport { SkeletonTailwind } from \"./SkeletonTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nconst SkeletonHybrid = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => {\n    // Mirror the Button reference (ButtonHybrid.tsx): do NOT strip\n    // width/height/borderRadius before the gate. width/height are styled-system\n    // props, so a real (always-dimensioned) Skeleton — and any styled()\n    // extension (injected theme/forwardedComponent) — routes to\n    // styled-components, preserving styled-system dimension semantics\n    // (number ≤ 1 → %, arrays → responsive) and styled() backward-compat. Only a\n    // Skeleton with zero styled props uses the Tailwind path.\n    if (needsStyledComponents(props)) {\n      return <SkeletonStyled {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <SkeletonTailwind {...props} ref={ref} />;\n  }\n);\n\nSkeletonHybrid.displayName = \"Skeleton\";\nexport default SkeletonHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { getSkeletonVariant } from \"./variant\";\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: getSkeletonVariant({ borderRadius, height, width }),\n});\n\n/**\n * Legacy styled-components implementation. Preserved verbatim as the fallback\n * rendering path for system props (margins, color, flex/grid) and `styled()`\n * extension. The Tailwind path ({@link SkeletonTailwind.tsx}) reproduces these\n * visuals as static CSS for the common case.\n */\nconst SkeletonStyled = 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\nexport default SkeletonStyled;\n","import type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n * Computes the Skeleton variant class name. Shared by both the styled-components\n * path ({@link styles.ts}) and the Tailwind path ({@link SkeletonTailwind.tsx})\n * so the two stay in lockstep.\n *\n * A \"circular\" skeleton is a pill-rounded square (equal height/width); anything\n * else renders the \"linear\" shimmer.\n */\nexport const getSkeletonVariant = ({\n  borderRadius,\n  height,\n  width,\n}: Pick<SkeletonProps, \"borderRadius\" | \"height\" | \"width\">): string =>\n  borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\";\n\n/**\n * Maps a `borderRadius` alias/token to the corresponding theme CSS variable so\n * the Tailwind path can apply corner rounding without styled-components. Unknown\n * values (e.g. \"square\") fall back to no rounding.\n */\nconst RADIUS_VARS: Record<string, string> = {\n  pill: \"var(--radius-pill)\",\n  inner: \"var(--radius-inner)\",\n  outer: \"var(--radius-outer)\",\n  400: \"var(--radius-400)\",\n  500: \"var(--radius-500)\",\n  600: \"var(--radius-600)\",\n  800: \"var(--radius-800)\",\n  900: \"var(--radius-900)\",\n  1000: \"var(--radius-1000)\",\n};\n\nexport const radiusVar = (borderRadius: SkeletonProps[\"borderRadius\"]): string => {\n  if (borderRadius == null) return \"0\";\n  return RADIUS_VARS[String(borderRadius)] ?? \"0\";\n};\n","/**\n * Tailwind CSS implementation of the Skeleton component.\n * Uses Seeds skeleton CSS classes from skeleton.css.\n */\n\nimport React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport { getSkeletonVariant, radiusVar } from \"./variant\";\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\n/**\n * Converts a system-prop dimension (number → px, string passthrough) into a\n * value usable in an inline style. Matches how Box/styled-system renders these.\n */\nconst toDimension = (value: SkeletonProps[\"width\"]): string | number | undefined =>\n  typeof value === \"number\" ? `${value}px` : (value as string | undefined);\n\nexport const SkeletonTailwind = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ borderRadius, height, width, className, style, ...rest }, ref) => {\n    const variant = getSkeletonVariant({ borderRadius, height, width });\n\n    const skeletonStyle: React.CSSProperties = {\n      width: toDimension(width),\n      height: toDimension(height),\n      ...style,\n      // The shimmer/ring surface reads this for corner rounding; circular masks\n      // its own shape via border-radius: 50% in skeleton.css.\n      [\"--skeleton-radius\" as any]: radiusVar(borderRadius),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-skeleton\", variant, className)}\n        style={skeletonStyle}\n        // `rest` is typed as the residual Box/styled-system props (SkeletonProps\n        // extends TypeBoxProps); the hybrid gate (SkeletonHybrid) only routes\n        // zero-styled-prop usage here, so at runtime `rest` carries plain DOM\n        // attributes. Narrow the spread to keep the literal <div> type-safe —\n        // ButtonTailwind sidesteps this by rendering to a Component cast as any.\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n);\n\nSkeletonTailwind.displayName = \"SkeletonTailwind\";\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n"],"mappings":"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","names":["React","React","jsx","React","jsx","React"]}

package/dist/index.d.mts

@@ -1,13 +1,14 @@
-import * as styled_components from 'styled-components';
-import * as react from 'react';
-import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
+import React from 'react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface SkeletonProps extends TypeBoxProps {
 }
 
-declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
-    className: string;
-}, "className">;
+/**
+ * Skeleton component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { Skeleton, type SkeletonProps, Skeleton as default };

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import * as styled_components from 'styled-components';
-import * as react from 'react';
-import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
+import React from 'react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface SkeletonProps extends TypeBoxProps {
 }
 
-declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
-    className: string;
-}, "className">;
+/**
+ * Skeleton component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { Skeleton, type SkeletonProps, Skeleton as default };

package/dist/index.js

@@ -36,13 +36,42 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Skeleton.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/SkeletonHybrid.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/styles.ts
 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");
+
+// src/variant.ts
+var getSkeletonVariant = ({
+  borderRadius,
+  height,
+  width
+}) => borderRadius === "pill" && height === width ? "circular" : "linear";
+var RADIUS_VARS = {
+  pill: "var(--radius-pill)",
+  inner: "var(--radius-inner)",
+  outer: "var(--radius-outer)",
+  400: "var(--radius-400)",
+  500: "var(--radius-500)",
+  600: "var(--radius-600)",
+  800: "var(--radius-800)",
+  900: "var(--radius-900)",
+  1e3: "var(--radius-1000)"
+};
+var radiusVar = (borderRadius) => {
+  if (borderRadius == null) return "0";
+  return RADIUS_VARS[String(borderRadius)] ?? "0";
+};
+
+// src/styles.ts
 var SkeletonAttrs = ({ borderRadius, height, width }) => ({
-  className: borderRadius === "pill" && height === width ? "circular" : "linear"
+  className: getSkeletonVariant({ borderRadius, height, width })
 });
-var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.default).attrs(SkeletonAttrs)`
+var SkeletonStyled = (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;
@@ -91,7 +120,7 @@ var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.defa
       height: calc(100% - 4px);
       width: 100%;
       background: ${(props) => props.theme.colors.container.background.decorative.neutral};
-      
+
     }
   }
 
@@ -107,7 +136,7 @@ var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.defa
     &.linear,
     &.circular {
       border: 1px solid ${(props) => props.theme.colors.container.border.decorative.neutral};
-      animation: SkeletonPulse 2s linear infinite alternate; 
+      animation: SkeletonPulse 2s linear infinite alternate;
     }
   }
 
@@ -146,6 +175,72 @@ var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.defa
     }
   }
 `;
+var styles_default = SkeletonStyled;
+
+// src/SkeletonTailwind.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+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 toDimension = (value) => typeof value === "number" ? `${value}px` : value;
+var SkeletonTailwind = import_react.default.forwardRef(
+  ({ borderRadius, height, width, className, style, ...rest }, ref) => {
+    const variant = getSkeletonVariant({ borderRadius, height, width });
+    const skeletonStyle = {
+      width: toDimension(width),
+      height: toDimension(height),
+      ...style,
+      // The shimmer/ring surface reads this for corner rounding; circular masks
+      // its own shape via border-radius: 50% in skeleton.css.
+      ["--skeleton-radius"]: radiusVar(borderRadius)
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-skeleton", variant, className),
+        style: skeletonStyle,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonTailwind.displayName = "SkeletonTailwind";
+
+// src/SkeletonHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkeletonHybrid = import_react2.default.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props.needsStyledComponents)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonTailwind, { ...props, ref });
+  }
+);
+SkeletonHybrid.displayName = "Skeleton";
+var SkeletonHybrid_default = SkeletonHybrid;
+
+// src/Skeleton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Skeleton = import_react3.default.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonHybrid_default, { ...props, ref })
+);
+Skeleton.displayName = "Skeleton";
 var Skeleton_default = Skeleton;
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\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\nexport const SkeletonComponent = ({\n  borderRadius,\n  height,\n  width,\n  ...props\n}: SkeletonProps) => {\n  return (\n    <Skeleton\n      borderRadius={borderRadius}\n      height={height}\n      width={width}\n      {...props}\n    />\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,6BAAgB;AAoIZ;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;AAsB9D,IAAO,mBAAQ;;;AD5If,IAAO,gBAAQ;","names":["styled","Box"]}
+{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx","../src/SkeletonHybrid.tsx","../src/styles.ts","../src/variant.ts","../src/SkeletonTailwind.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\n","import React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport SkeletonHybrid from \"./SkeletonHybrid\";\n\n/**\n * Skeleton component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => <SkeletonHybrid {...props} ref={ref} />\n);\n\nSkeleton.displayName = \"Skeleton\";\nexport default Skeleton;\n","/**\n * Hybrid Skeleton Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport SkeletonStyled from \"./styles\"; // Styled-components version\nimport { SkeletonTailwind } from \"./SkeletonTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nconst SkeletonHybrid = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => {\n    // Mirror the Button reference (ButtonHybrid.tsx): do NOT strip\n    // width/height/borderRadius before the gate. width/height are styled-system\n    // props, so a real (always-dimensioned) Skeleton — and any styled()\n    // extension (injected theme/forwardedComponent) — routes to\n    // styled-components, preserving styled-system dimension semantics\n    // (number ≤ 1 → %, arrays → responsive) and styled() backward-compat. Only a\n    // Skeleton with zero styled props uses the Tailwind path.\n    if (needsStyledComponents(props)) {\n      return <SkeletonStyled {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <SkeletonTailwind {...props} ref={ref} />;\n  }\n);\n\nSkeletonHybrid.displayName = \"Skeleton\";\nexport default SkeletonHybrid;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { getSkeletonVariant } from \"./variant\";\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: getSkeletonVariant({ borderRadius, height, width }),\n});\n\n/**\n * Legacy styled-components implementation. Preserved verbatim as the fallback\n * rendering path for system props (margins, color, flex/grid) and `styled()`\n * extension. The Tailwind path ({@link SkeletonTailwind.tsx}) reproduces these\n * visuals as static CSS for the common case.\n */\nconst SkeletonStyled = 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\nexport default SkeletonStyled;\n","import type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n * Computes the Skeleton variant class name. Shared by both the styled-components\n * path ({@link styles.ts}) and the Tailwind path ({@link SkeletonTailwind.tsx})\n * so the two stay in lockstep.\n *\n * A \"circular\" skeleton is a pill-rounded square (equal height/width); anything\n * else renders the \"linear\" shimmer.\n */\nexport const getSkeletonVariant = ({\n  borderRadius,\n  height,\n  width,\n}: Pick<SkeletonProps, \"borderRadius\" | \"height\" | \"width\">): string =>\n  borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\";\n\n/**\n * Maps a `borderRadius` alias/token to the corresponding theme CSS variable so\n * the Tailwind path can apply corner rounding without styled-components. Unknown\n * values (e.g. \"square\") fall back to no rounding.\n */\nconst RADIUS_VARS: Record<string, string> = {\n  pill: \"var(--radius-pill)\",\n  inner: \"var(--radius-inner)\",\n  outer: \"var(--radius-outer)\",\n  400: \"var(--radius-400)\",\n  500: \"var(--radius-500)\",\n  600: \"var(--radius-600)\",\n  800: \"var(--radius-800)\",\n  900: \"var(--radius-900)\",\n  1000: \"var(--radius-1000)\",\n};\n\nexport const radiusVar = (borderRadius: SkeletonProps[\"borderRadius\"]): string => {\n  if (borderRadius == null) return \"0\";\n  return RADIUS_VARS[String(borderRadius)] ?? \"0\";\n};\n","/**\n * Tailwind CSS implementation of the Skeleton component.\n * Uses Seeds skeleton CSS classes from skeleton.css.\n */\n\nimport React from \"react\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\nimport { getSkeletonVariant, radiusVar } from \"./variant\";\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\n/**\n * Converts a system-prop dimension (number → px, string passthrough) into a\n * value usable in an inline style. Matches how Box/styled-system renders these.\n */\nconst toDimension = (value: SkeletonProps[\"width\"]): string | number | undefined =>\n  typeof value === \"number\" ? `${value}px` : (value as string | undefined);\n\nexport const SkeletonTailwind = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ borderRadius, height, width, className, style, ...rest }, ref) => {\n    const variant = getSkeletonVariant({ borderRadius, height, width });\n\n    const skeletonStyle: React.CSSProperties = {\n      width: toDimension(width),\n      height: toDimension(height),\n      ...style,\n      // The shimmer/ring surface reads this for corner rounding; circular masks\n      // its own shape via border-radius: 50% in skeleton.css.\n      [\"--skeleton-radius\" as any]: radiusVar(borderRadius),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-skeleton\", variant, className)}\n        style={skeletonStyle}\n        // `rest` is typed as the residual Box/styled-system props (SkeletonProps\n        // extends TypeBoxProps); the hybrid gate (SkeletonHybrid) only routes\n        // zero-styled-prop usage here, so at runtime `rest` carries plain DOM\n        // attributes. Narrow the spread to keep the literal <div> type-safe —\n        // ButtonTailwind sidesteps this by rendering to a Component cast as any.\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n);\n\nSkeletonTailwind.displayName = \"SkeletonTailwind\";\n"],"mappings":"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","names":["import_react","import_react","styled","Box","React","import_jsx_runtime","React","import_jsx_runtime","React"]}

package/dist/skeleton.css

@@ -0,0 +1,122 @@
+/**
+ * Seeds Skeleton component classes
+ * Static reproduction of the styled-components Skeleton visuals.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-skeleton circular" style="width:48px;height:48px"></div>
+ *   <div class="seeds-skeleton linear" style="width:100%;height:16px"></div>
+ *
+ * The `--skeleton-radius` custom property (set inline from the `borderRadius`
+ * prop) controls corner rounding for the linear surface; the circular variant
+ * masks its own shape.
+ */
+
+@layer components {
+  .seeds-skeleton {
+    position: relative;
+    background: var(--color-container-bg-decorative-neutral);
+    overflow: hidden;
+    border-radius: var(--skeleton-radius, 0);
+  }
+
+  .seeds-skeleton.circular::before {
+    position: absolute;
+    top: -25%;
+    left: -25%;
+    content: "";
+    background-image: conic-gradient(
+      var(--color-container-bg-decorative-neutral) 270deg,
+      var(--color-container-border-decorative-neutral) 300deg
+    );
+    height: 150%;
+    width: 150%;
+    animation: SkeletonRotate 2s infinite linear;
+  }
+
+  .seeds-skeleton.circular::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    content: "";
+    height: calc(100% - 8px);
+    width: calc(100% - 8px);
+    background: var(--color-app-bg-base);
+    border-radius: 50%;
+  }
+
+  .seeds-skeleton.linear {
+    position: relative;
+    background-image: linear-gradient(
+      288deg,
+      var(--color-container-bg-decorative-neutral) 32%,
+      var(--color-container-border-decorative-neutral),
+      var(--color-container-bg-decorative-neutral) 68%
+    );
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+  }
+
+  .seeds-skeleton.linear::after {
+    position: absolute;
+    bottom: 0;
+    content: "";
+    height: calc(100% - 4px);
+    width: 100%;
+    background: var(--color-container-bg-decorative-neutral);
+  }
+
+  @media (prefers-reduced-motion) {
+    .seeds-skeleton.linear,
+    .seeds-skeleton.circular::before {
+      animation: none;
+    }
+    .seeds-skeleton::before,
+    .seeds-skeleton::after {
+      display: none;
+    }
+    .seeds-skeleton.linear,
+    .seeds-skeleton.circular {
+      border: 1px solid var(--color-container-border-decorative-neutral);
+      animation: SkeletonPulse 2s linear infinite alternate;
+    }
+  }
+}
+
+@keyframes SkeletonRotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes SkeletonShimmer {
+  0% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+/*
+ * The styled-components original faded the border via hex-alpha concatenation
+ * (…neutral + "FF" → "1A"); that string trick does not translate to var(--…),
+ * so the fade is reproduced with color-mix (≈10% alpha matches 0x1A).
+ */
+@keyframes SkeletonPulse {
+  0% {
+    border-color: var(--color-container-border-decorative-neutral);
+  }
+  100% {
+    border-color: color-mix(
+      in srgb,
+      var(--color-container-border-decorative-neutral) 10%,
+      transparent
+    );
+  }
+}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-skeleton",
-  "version": "1.1.21",
+  "version": "1.1.24",
   "description": "Seeds React Skeleton",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/skeleton.css": "./dist/skeleton.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/skeleton.css dist/skeleton.css",
+    "build:debug": "tsup --dts --metafile && cp src/skeleton.css dist/skeleton.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,9 +29,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.1.1",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-box": "^1.1.22"
+    "@sproutsocial/seeds-react-theme": "^4.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-box": "^1.1.24"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/.eslintignore

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

package/.eslintrc.js

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

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-yarn run v1.22.22
-$ tsup --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-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.73 KB
-CJS dist/index.js.map 5.14 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     3.03 KB
-ESM dist/esm/index.js.map 5.07 KB
-ESM ⚡️ Build success in 14ms
-DTS Build start
-DTS ⚡️ Build success in 6423ms
-DTS dist/index.d.ts  604.00 B
-DTS dist/index.d.mts 604.00 B
-Done in 7.83s.

package/CHANGELOG.md

@@ -1,184 +0,0 @@
-# @sproutsocial/seeds-react-skeleton
-
-## 1.1.21
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-
-## 1.1.20
-
-### Patch Changes
-
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-
-## 1.1.19
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-box@1.1.20
-
-## 1.1.18
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.19
-
-## 1.1.17
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-
-## 1.1.16
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-
-## 1.1.15
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-box@1.1.16
-
-## 1.1.14
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-
-## 1.1.13
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-box@1.1.14
-
-## 1.1.12
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-
-## 1.1.11
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-box@1.1.12
-
-## 1.1.10
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-
-## 1.1.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-
-## 1.1.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-
-## 1.1.7
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-box@1.1.8
-
-## 1.1.6
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-
-## 1.1.5
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-
-## 1.1.4
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.5
-
-## 1.1.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.4
-
-## 1.1.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-theme@3.0.1
-  - @sproutsocial/seeds-react-box@1.1.3
-
-## 1.1.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-theme@2.2.1
-  - @sproutsocial/seeds-react-box@1.1.2
-
-## 1.1.0
-
-### Minor Changes
-
-- 55e2d47: Skeleton now exports a functional component so `react-docgen` can generate the appropriate docs
-
-## 1.0.0
-
-### Major Changes
-
-- bd8d03d: Migrate Skeleton to its own seeds-react-skeleton component

package/jest.config.js

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

package/src/Skeleton.stories.tsx

@@ -1,41 +0,0 @@
-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

@@ -1,143 +0,0 @@
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-import type { SkeletonProps } from "./SkeletonTypes";
-
-/**
- *
- * @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
-export const SkeletonComponent = ({
-  borderRadius,
-  height,
-  width,
-  ...props
-}: SkeletonProps) => {
-  return (
-    <Skeleton
-      borderRadius={borderRadius}
-      height={height}
-      width={width}
-      {...props}
-    />
-  );
-};
-
-export default Skeleton;

package/src/SkeletonTypes.ts

@@ -1,3 +0,0 @@
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-
-export interface SkeletonProps extends TypeBoxProps {}

package/src/__tests__/Skeleton.test.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,12 +0,0 @@
-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,
-}));