@sproutsocial/seeds-react-skeleton 1.1.23 → 1.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
1
|
+
{"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 = (\n borderRadius: SkeletonProps[\"borderRadius\"]\n): 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 = (\n value: SkeletonProps[\"width\"]\n): 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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
1
|
+
{"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 = (\n borderRadius: SkeletonProps[\"borderRadius\"]\n): 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 = (\n value: SkeletonProps[\"width\"]\n): 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-skeleton",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.25",
|
|
4
4
|
"description": "Seeds React Skeleton",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"test:watch": "jest --watch --coverage=false"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@sproutsocial/seeds-react-theme": "^4.2.
|
|
33
|
-
"@sproutsocial/seeds-react-system-props": "^3.1.
|
|
34
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
32
|
+
"@sproutsocial/seeds-react-theme": "^4.2.1",
|
|
33
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.2",
|
|
34
|
+
"@sproutsocial/seeds-react-box": "^1.1.25"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "^18.0.0",
|