@sproutsocial/seeds-react-skeleton 1.0.0 → 1.1.0
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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +6 -0
- package/dist/esm/index.js +1 -17
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +1 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Skeleton.tsx +5 -4
- package/src/SkeletonTypes.ts +3 -0
- package/src/index.ts +1 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ CLI Target: es2022
|
|
|
8
8
|
CLI Cleaning output folder
|
|
9
9
|
CJS Build start
|
|
10
10
|
ESM Build start
|
|
11
|
-
CJS dist/index.js 4.
|
|
12
|
-
CJS dist/index.js.map 5.
|
|
13
|
-
CJS ⚡️ Build success in
|
|
14
|
-
ESM dist/esm/index.js 3.
|
|
15
|
-
ESM dist/esm/index.js.map 5.
|
|
16
|
-
ESM ⚡️ Build success in
|
|
11
|
+
CJS dist/index.js 4.72 KB
|
|
12
|
+
CJS dist/index.js.map 5.14 KB
|
|
13
|
+
CJS ⚡️ Build success in 105ms
|
|
14
|
+
ESM dist/esm/index.js 3.02 KB
|
|
15
|
+
ESM dist/esm/index.js.map 5.07 KB
|
|
16
|
+
ESM ⚡️ Build success in 105ms
|
|
17
17
|
DTS Build start
|
|
18
|
-
DTS ⚡️ Build success in
|
|
19
|
-
DTS dist/index.d.ts
|
|
20
|
-
DTS dist/index.d.mts
|
|
21
|
-
Done in
|
|
18
|
+
DTS ⚡️ Build success in 32762ms
|
|
19
|
+
DTS dist/index.d.ts 604.00 B
|
|
20
|
+
DTS dist/index.d.mts 604.00 B
|
|
21
|
+
Done in 40.46s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -109,23 +109,7 @@ var Skeleton = styled(Box).attrs(SkeletonAttrs)`
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
`;
|
|
112
|
-
var
|
|
113
|
-
borderRadius,
|
|
114
|
-
height,
|
|
115
|
-
width,
|
|
116
|
-
...props
|
|
117
|
-
}) => {
|
|
118
|
-
return /* @__PURE__ */ jsx(
|
|
119
|
-
Skeleton,
|
|
120
|
-
{
|
|
121
|
-
borderRadius,
|
|
122
|
-
height,
|
|
123
|
-
width,
|
|
124
|
-
...props
|
|
125
|
-
}
|
|
126
|
-
);
|
|
127
|
-
};
|
|
128
|
-
var Skeleton_default = SkeletonComponent;
|
|
112
|
+
var Skeleton_default = Skeleton;
|
|
129
113
|
|
|
130
114
|
// src/index.ts
|
|
131
115
|
var src_default = Skeleton_default;
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Skeleton.tsx","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport Box
|
|
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,cAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as styled_components from 'styled-components';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
2
4
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
interface SkeletonProps extends TypeBoxProps {
|
|
7
|
+
}
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
|
|
10
|
+
className: string;
|
|
11
|
+
}, "className">;
|
|
12
|
+
|
|
13
|
+
export { Skeleton, type SkeletonProps, Skeleton as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as styled_components from 'styled-components';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
2
4
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
interface SkeletonProps extends TypeBoxProps {
|
|
7
|
+
}
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
declare const Skeleton: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, {
|
|
10
|
+
className: string;
|
|
11
|
+
}, "className">;
|
|
12
|
+
|
|
13
|
+
export { Skeleton, type SkeletonProps, Skeleton as default };
|
package/dist/index.js
CHANGED
|
@@ -146,23 +146,7 @@ var Skeleton = (0, import_styled_components.default)(import_seeds_react_box.defa
|
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
`;
|
|
149
|
-
var
|
|
150
|
-
borderRadius,
|
|
151
|
-
height,
|
|
152
|
-
width,
|
|
153
|
-
...props
|
|
154
|
-
}) => {
|
|
155
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
156
|
-
Skeleton,
|
|
157
|
-
{
|
|
158
|
-
borderRadius,
|
|
159
|
-
height,
|
|
160
|
-
width,
|
|
161
|
-
...props
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
};
|
|
165
|
-
var Skeleton_default = SkeletonComponent;
|
|
149
|
+
var Skeleton_default = Skeleton;
|
|
166
150
|
|
|
167
151
|
// src/index.ts
|
|
168
152
|
var src_default = Skeleton_default;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Skeleton.tsx"],"sourcesContent":["import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport { Skeleton };\n","import styled from \"styled-components\";\nimport Box
|
|
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,cAAQ;","names":["styled","Box"]}
|
package/package.json
CHANGED
package/src/Skeleton.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import Box
|
|
2
|
+
import Box from "@sproutsocial/seeds-react-box";
|
|
3
|
+
import type { SkeletonProps } from "./SkeletonTypes";
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
*
|
|
@@ -123,12 +124,12 @@ const Skeleton = styled(Box).attrs(SkeletonAttrs)`
|
|
|
123
124
|
`;
|
|
124
125
|
|
|
125
126
|
// @TODO: Refine types that are passed to SkeletonComponent
|
|
126
|
-
const SkeletonComponent = ({
|
|
127
|
+
export const SkeletonComponent = ({
|
|
127
128
|
borderRadius,
|
|
128
129
|
height,
|
|
129
130
|
width,
|
|
130
131
|
...props
|
|
131
|
-
}:
|
|
132
|
+
}: SkeletonProps) => {
|
|
132
133
|
return (
|
|
133
134
|
<Skeleton
|
|
134
135
|
borderRadius={borderRadius}
|
|
@@ -139,4 +140,4 @@ const SkeletonComponent = ({
|
|
|
139
140
|
);
|
|
140
141
|
};
|
|
141
142
|
|
|
142
|
-
export default
|
|
143
|
+
export default Skeleton;
|