@sproutsocial/seeds-react-loader 1.0.16 → 1.0.23

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 CHANGED
@@ -1,5 +1,8 @@
1
1
  // src/Loader.tsx
2
- import "react";
2
+ import React3 from "react";
3
+
4
+ // src/LoaderHybrid.tsx
5
+ import React2 from "react";
3
6
 
4
7
  // src/styles.ts
5
8
  import styled, { css, keyframes } from "styled-components";
@@ -84,29 +87,92 @@ var Text = styled.div`
84
87
  `;
85
88
  var styles_default = Container;
86
89
 
87
- // src/Loader.tsx
90
+ // src/LoaderTailwind.tsx
91
+ import React from "react";
88
92
  import { jsx } from "react/jsx-runtime";
89
- var Loader = ({
90
- size = "large",
91
- text = "",
92
- delay = true,
93
- color = "dark",
94
- qa,
95
- ...rest
96
- }) => {
97
- return /* @__PURE__ */ jsx(
98
- styles_default,
99
- {
100
- small: size === "small",
101
- dark: color === "dark",
102
- delay,
103
- "data-qa-loader": "",
104
- ...qa,
105
- ...rest,
106
- children: /* @__PURE__ */ jsx(Text, { children: text || "Loading" })
93
+ function cn(...inputs) {
94
+ const classes = [];
95
+ for (const input of inputs) {
96
+ if (!input) continue;
97
+ if (typeof input === "string") {
98
+ classes.push(input);
99
+ } else if (typeof input === "object") {
100
+ for (const [key, value] of Object.entries(input)) {
101
+ if (value) {
102
+ classes.push(key);
103
+ }
104
+ }
107
105
  }
108
- );
109
- };
106
+ }
107
+ return classes.join(" ");
108
+ }
109
+ var LoaderTailwind = React.forwardRef(
110
+ ({
111
+ size = "large",
112
+ text = "",
113
+ delay = true,
114
+ // color is accepted but intentionally unused — it is a visual no-op in the
115
+ // styled-components implementation too, so the API stays unchanged.
116
+ color: _color = "dark",
117
+ qa = {},
118
+ className,
119
+ ...rest
120
+ }, ref) => {
121
+ const classes = cn(
122
+ "seeds-loader",
123
+ { "seeds-loader-sm": size === "small" },
124
+ { "seeds-loader-delay": delay },
125
+ className
126
+ );
127
+ return (
128
+ // QA default precedes {...rest} so a consumer-provided data-qa-loader
129
+ // (via {...rest} or the qa prop) overrides the default.
130
+ /* @__PURE__ */ jsx("div", { "data-qa-loader": "", ...rest, className: classes, ref, ...qa, children: /* @__PURE__ */ jsx("span", { className: "seeds-loader-visually-hidden", children: text || "Loading" }) })
131
+ );
132
+ }
133
+ );
134
+ LoaderTailwind.displayName = "LoaderTailwind";
135
+
136
+ // src/LoaderHybrid.tsx
137
+ import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
138
+ import { jsx as jsx2 } from "react/jsx-runtime";
139
+ var LoaderHybrid = React2.forwardRef(
140
+ (props, ref) => {
141
+ const {
142
+ size = "large",
143
+ text = "",
144
+ delay = true,
145
+ color = "dark",
146
+ qa,
147
+ ...rest
148
+ } = props;
149
+ if (hasStyledProps(rest)) {
150
+ return /* @__PURE__ */ jsx2(
151
+ styles_default,
152
+ {
153
+ small: size === "small",
154
+ dark: color === "dark",
155
+ delay,
156
+ "data-qa-loader": "",
157
+ ref,
158
+ ...qa,
159
+ ...rest,
160
+ children: /* @__PURE__ */ jsx2(Text, { children: text || "Loading" })
161
+ }
162
+ );
163
+ }
164
+ return /* @__PURE__ */ jsx2(LoaderTailwind, { ...props, ref });
165
+ }
166
+ );
167
+ LoaderHybrid.displayName = "Loader";
168
+ var LoaderHybrid_default = LoaderHybrid;
169
+
170
+ // src/Loader.tsx
171
+ import { jsx as jsx3 } from "react/jsx-runtime";
172
+ var Loader = React3.forwardRef(
173
+ (props, ref) => /* @__PURE__ */ jsx3(LoaderHybrid_default, { ...props, ref })
174
+ );
175
+ Loader.displayName = "Loader";
110
176
  var Loader_default = Loader;
111
177
 
112
178
  // src/index.ts
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Loader.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,UAAU,KAAK,iBAAiB;AACvC,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAG/B,IAAM,UAAU,CAAC,SAAiB;AAChC,QAAM,cAAc,KAAK,MAAM,OAAO,CAAC;AACvC,QAAM,cAAc,KAAK,MAAM,OAAO,GAAG;AAEzC,SAAO;AAAA,aACI,IAAI;AAAA,cACH,IAAI;AAAA,kBACA,CAAC,EAAE,MAAM,MACrB,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,oBACxB,cAAc,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,eAGrD,WAAW;AAAA,gBACV,WAAW;AAAA;AAAA,sBAEL,WAAW;AAAA;AAAA;AAAA;AAAA,yBAIR,WAAW;AAAA;AAAA;AAGpC;AAEA,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,IAAM,YAAY,OAAO,IAAI,MAA6B;AAAA,EACxD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOc,CAAC,UACZ,MAAM,QACF;AAAA,YACI,cAAc;AAAA,YAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWM,CAAC,EAAE,MAAM,MACvB,GAAG,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA,iBAEtG,CAAC,UACZ,MAAM,QACF;AAAA,cACI,IAAI,2BAA2B,cAAc;AAAA,cAEjD;AAAA,cACI,IAAI;AAAA,WACP;AAAA;AAAA;AAAA,IAGP,CAAC,UAAW,MAAM,QAAQ,QAAQ,EAAE,IAAI,QAAQ,EAAE,CAAE;AAAA,IACpD,MAAM;AAAA;AAGH,IAAM,OAAO,OAAO;AAAA,IACvB,cAAc;AAAA;AAGlB,IAAO,iBAAQ;;;ADhFT;AAjBN,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,kBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,8BAAC,QAAM,kBAAQ,WAAU;AAAA;AAAA,EAC3B;AAEJ;AAEA,IAAO,iBAAQ;;;AExBf,IAAO,gBAAQ;","names":[]}
1
+ {"version":3,"sources":["../../src/Loader.tsx","../../src/LoaderHybrid.tsx","../../src/styles.ts","../../src/LoaderTailwind.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport LoaderHybrid from \"./LoaderHybrid\";\n\n/**\n * Loader component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Loader = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => <LoaderHybrid {...props} ref={ref} />\n);\n\nLoader.displayName = \"Loader\";\nexport default Loader;\n","/**\n * Hybrid Loader Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport Container, { Text } from \"./styles\"; // Styled-components version\nimport { LoaderTailwind } from \"./LoaderTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst LoaderHybrid = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => {\n const {\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n ref={ref}\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <LoaderTailwind {...props} ref={ref} />;\n }\n);\n\nLoaderHybrid.displayName = \"Loader\";\nexport default LoaderHybrid;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Loader component\n * Uses Seeds loader CSS classes from loader.css\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\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\nexport const LoaderTailwind = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (\n {\n size = \"large\",\n text = \"\",\n delay = true,\n // color is accepted but intentionally unused — it is a visual no-op in the\n // styled-components implementation too, so the API stays unchanged.\n color: _color = \"dark\",\n qa = {},\n className,\n ...rest\n }: TypeLoaderProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const classes = cn(\n \"seeds-loader\",\n { \"seeds-loader-sm\": size === \"small\" },\n { \"seeds-loader-delay\": delay },\n className\n );\n\n return (\n // QA default precedes {...rest} so a consumer-provided data-qa-loader\n // (via {...rest} or the qa prop) overrides the default.\n <div data-qa-loader=\"\" {...rest} className={classes} ref={ref} {...qa}>\n <span className=\"seeds-loader-visually-hidden\">\n {text || \"Loading\"}\n </span>\n </div>\n );\n }\n);\n\nLoaderTailwind.displayName = \"LoaderTailwind\";\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n"],"mappings":"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","names":["React","React","jsx","React","jsx","React"]}
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
1
+ import React$1 from 'react';
2
2
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
3
3
 
4
4
  type TypeQaProps = object;
@@ -12,6 +12,11 @@ interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCom
12
12
  qa?: TypeQaProps;
13
13
  }
14
14
 
15
- declare const Loader: ({ size, text, delay, color, qa, ...rest }: TypeLoaderProps) => react_jsx_runtime.JSX.Element;
15
+ /**
16
+ * Loader component. Automatically routes between the Tailwind implementation
17
+ * (preferred) and the styled-components implementation (for consumers using
18
+ * system props or a styled() extension).
19
+ */
20
+ declare const Loader: React$1.ForwardRefExoticComponent<Omit<TypeLoaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
16
21
 
17
22
  export { Loader, type TypeLoaderProps, Loader as default };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
1
+ import React$1 from 'react';
2
2
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
3
3
 
4
4
  type TypeQaProps = object;
@@ -12,6 +12,11 @@ interface TypeLoaderProps extends TypeStyledComponentsCommonProps, TypeSystemCom
12
12
  qa?: TypeQaProps;
13
13
  }
14
14
 
15
- declare const Loader: ({ size, text, delay, color, qa, ...rest }: TypeLoaderProps) => react_jsx_runtime.JSX.Element;
15
+ /**
16
+ * Loader component. Automatically routes between the Tailwind implementation
17
+ * (preferred) and the styled-components implementation (for consumers using
18
+ * system props or a styled() extension).
19
+ */
20
+ declare const Loader: React$1.ForwardRefExoticComponent<Omit<TypeLoaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
16
21
 
17
22
  export { Loader, type TypeLoaderProps, Loader as default };
package/dist/index.js CHANGED
@@ -36,7 +36,10 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/Loader.tsx
39
- var React = require("react");
39
+ var import_react3 = __toESM(require("react"));
40
+
41
+ // src/LoaderHybrid.tsx
42
+ var import_react2 = __toESM(require("react"));
40
43
 
41
44
  // src/styles.ts
42
45
  var import_styled_components = __toESM(require("styled-components"));
@@ -121,29 +124,92 @@ var Text = import_styled_components.default.div`
121
124
  `;
122
125
  var styles_default = Container;
123
126
 
124
- // src/Loader.tsx
127
+ // src/LoaderTailwind.tsx
128
+ var import_react = __toESM(require("react"));
125
129
  var import_jsx_runtime = require("react/jsx-runtime");
126
- var Loader = ({
127
- size = "large",
128
- text = "",
129
- delay = true,
130
- color = "dark",
131
- qa,
132
- ...rest
133
- }) => {
134
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
- styles_default,
136
- {
137
- small: size === "small",
138
- dark: color === "dark",
139
- delay,
140
- "data-qa-loader": "",
141
- ...qa,
142
- ...rest,
143
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: text || "Loading" })
130
+ function cn(...inputs) {
131
+ const classes = [];
132
+ for (const input of inputs) {
133
+ if (!input) continue;
134
+ if (typeof input === "string") {
135
+ classes.push(input);
136
+ } else if (typeof input === "object") {
137
+ for (const [key, value] of Object.entries(input)) {
138
+ if (value) {
139
+ classes.push(key);
140
+ }
141
+ }
144
142
  }
145
- );
146
- };
143
+ }
144
+ return classes.join(" ");
145
+ }
146
+ var LoaderTailwind = import_react.default.forwardRef(
147
+ ({
148
+ size = "large",
149
+ text = "",
150
+ delay = true,
151
+ // color is accepted but intentionally unused — it is a visual no-op in the
152
+ // styled-components implementation too, so the API stays unchanged.
153
+ color: _color = "dark",
154
+ qa = {},
155
+ className,
156
+ ...rest
157
+ }, ref) => {
158
+ const classes = cn(
159
+ "seeds-loader",
160
+ { "seeds-loader-sm": size === "small" },
161
+ { "seeds-loader-delay": delay },
162
+ className
163
+ );
164
+ return (
165
+ // QA default precedes {...rest} so a consumer-provided data-qa-loader
166
+ // (via {...rest} or the qa prop) overrides the default.
167
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-qa-loader": "", ...rest, className: classes, ref, ...qa, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "seeds-loader-visually-hidden", children: text || "Loading" }) })
168
+ );
169
+ }
170
+ );
171
+ LoaderTailwind.displayName = "LoaderTailwind";
172
+
173
+ // src/LoaderHybrid.tsx
174
+ var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
175
+ var import_jsx_runtime2 = require("react/jsx-runtime");
176
+ var LoaderHybrid = import_react2.default.forwardRef(
177
+ (props, ref) => {
178
+ const {
179
+ size = "large",
180
+ text = "",
181
+ delay = true,
182
+ color = "dark",
183
+ qa,
184
+ ...rest
185
+ } = props;
186
+ if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
187
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
188
+ styles_default,
189
+ {
190
+ small: size === "small",
191
+ dark: color === "dark",
192
+ delay,
193
+ "data-qa-loader": "",
194
+ ref,
195
+ ...qa,
196
+ ...rest,
197
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { children: text || "Loading" })
198
+ }
199
+ );
200
+ }
201
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoaderTailwind, { ...props, ref });
202
+ }
203
+ );
204
+ LoaderHybrid.displayName = "Loader";
205
+ var LoaderHybrid_default = LoaderHybrid;
206
+
207
+ // src/Loader.tsx
208
+ var import_jsx_runtime3 = require("react/jsx-runtime");
209
+ var Loader = import_react3.default.forwardRef(
210
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderHybrid_default, { ...props, ref })
211
+ );
212
+ Loader.displayName = "Loader";
147
213
  var Loader_default = Loader;
148
214
 
149
215
  // src/index.ts
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Loader.tsx","../src/styles.ts"],"sourcesContent":["import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n","import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAuC;AACvC,sCAAuB;AACvB,gCAA+B;AAG/B,IAAM,UAAU,CAAC,SAAiB;AAChC,QAAM,cAAc,KAAK,MAAM,OAAO,CAAC;AACvC,QAAM,cAAc,KAAK,MAAM,OAAO,GAAG;AAEzC,SAAO;AAAA,aACI,IAAI;AAAA,cACH,IAAI;AAAA,kBACA,CAAC,EAAE,MAAM,MACrB,aAAa,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,oBACxB,cAAc,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,eAGrD,WAAW;AAAA,gBACV,WAAW;AAAA;AAAA,sBAEL,WAAW;AAAA;AAAA;AAAA;AAAA,yBAIR,WAAW;AAAA;AAAA;AAGpC;AAEA,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,IAAM,YAAY,yBAAAA,QAAO,IAAI,MAA6B;AAAA,EACxD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOc,CAAC,UACZ,MAAM,QACF;AAAA,YACI,cAAc;AAAA,YAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWM,CAAC,EAAE,MAAM,MACvB,GAAG,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,CAAC,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;AAAA;AAAA,iBAEtG,CAAC,UACZ,MAAM,QACF;AAAA,cACI,IAAI,2BAA2B,cAAc;AAAA,cAEjD;AAAA,cACI,IAAI;AAAA,WACP;AAAA;AAAA;AAAA,IAGP,CAAC,UAAW,MAAM,QAAQ,QAAQ,EAAE,IAAI,QAAQ,EAAE,CAAE;AAAA,IACpD,sCAAM;AAAA;AAGH,IAAM,OAAO,yBAAAA,QAAO;AAAA,IACvB,wCAAc;AAAA;AAGlB,IAAO,iBAAQ;;;ADhFT;AAjBN,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,MAAM,UAAU;AAAA,MAChB;AAAA,MACA,kBAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,sDAAC,QAAM,kBAAQ,WAAU;AAAA;AAAA,EAC3B;AAEJ;AAEA,IAAO,iBAAQ;;;ADxBf,IAAO,gBAAQ;","names":["styled"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Loader.tsx","../src/LoaderHybrid.tsx","../src/styles.ts","../src/LoaderTailwind.tsx"],"sourcesContent":["import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\n","import React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport LoaderHybrid from \"./LoaderHybrid\";\n\n/**\n * Loader component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Loader = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => <LoaderHybrid {...props} ref={ref} />\n);\n\nLoader.displayName = \"Loader\";\nexport default Loader;\n","/**\n * Hybrid Loader Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\nimport Container, { Text } from \"./styles\"; // Styled-components version\nimport { LoaderTailwind } from \"./LoaderTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst LoaderHybrid = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (props, ref) => {\n const {\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n ref={ref}\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <LoaderTailwind {...props} ref={ref} />;\n }\n);\n\nLoaderHybrid.displayName = \"Loader\";\nexport default LoaderHybrid;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Loader component\n * Uses Seeds loader CSS classes from loader.css\n */\n\nimport React from \"react\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\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\nexport const LoaderTailwind = React.forwardRef<HTMLDivElement, TypeLoaderProps>(\n (\n {\n size = \"large\",\n text = \"\",\n delay = true,\n // color is accepted but intentionally unused — it is a visual no-op in the\n // styled-components implementation too, so the API stays unchanged.\n color: _color = \"dark\",\n qa = {},\n className,\n ...rest\n }: TypeLoaderProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const classes = cn(\n \"seeds-loader\",\n { \"seeds-loader-sm\": size === \"small\" },\n { \"seeds-loader-delay\": delay },\n className\n );\n\n return (\n // QA default precedes {...rest} so a consumer-provided data-qa-loader\n // (via {...rest} or the qa prop) overrides the default.\n <div data-qa-loader=\"\" {...rest} className={classes} ref={ref} {...qa}>\n <span className=\"seeds-loader-visually-hidden\">\n {text || \"Loading\"}\n </span>\n </div>\n );\n }\n);\n\nLoaderTailwind.displayName = \"LoaderTailwind\";\n"],"mappings":"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","names":["import_react","import_react","styled","React","import_seeds_react_system_props","import_jsx_runtime","React","import_jsx_runtime","React"]}
@@ -0,0 +1,115 @@
1
+ /**
2
+ * Seeds Loader component classes
3
+ * Use these instead of writing out individual Tailwind utility classes.
4
+ *
5
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
6
+ * CSS variable definitions and dark mode support.
7
+ *
8
+ * Usage:
9
+ * <div class="seeds-loader seeds-loader-delay">
10
+ * <span class="seeds-loader-visually-hidden">Loading</span>
11
+ * </div>
12
+ * <div class="seeds-loader seeds-loader-sm">...</div> (small)
13
+ * <div class="seeds-loader">...</div> (no delay)
14
+ */
15
+
16
+ @layer components {
17
+ @keyframes seeds-loader-spin {
18
+ from {
19
+ transform: translate(-50%, -50%) rotate(0deg);
20
+ }
21
+ to {
22
+ transform: translate(-50%, -50%) rotate(360deg);
23
+ }
24
+ }
25
+
26
+ @keyframes seeds-loader-delay-anim {
27
+ 0% {
28
+ opacity: 0;
29
+ }
30
+ 80% {
31
+ opacity: 0;
32
+ }
33
+ 100% {
34
+ opacity: 1;
35
+ }
36
+ }
37
+
38
+ /* Base (large / 40px) */
39
+ .seeds-loader {
40
+ position: relative;
41
+ margin: 0 auto;
42
+ padding: 0;
43
+ overflow: hidden;
44
+ border-radius: 100%;
45
+ width: 40px;
46
+ height: 40px;
47
+ box-shadow:
48
+ 0 0 0 2px var(--color-neutral-600),
49
+ inset 0 0 0 6px var(--color-neutral-600);
50
+ }
51
+
52
+ .seeds-loader::after {
53
+ position: absolute;
54
+ top: 50%;
55
+ left: 50%;
56
+ width: 40px;
57
+ height: 40px;
58
+ box-sizing: border-box;
59
+ border-width: 4px;
60
+ background: transparent;
61
+ border-style: solid;
62
+ border-radius: 100%;
63
+ content: "";
64
+ transition: opacity 250ms;
65
+ border-color: var(--color-neutral-0) var(--color-neutral-0)
66
+ var(--color-neutral-600) var(--color-neutral-600);
67
+ animation: seeds-loader-spin 2.25s infinite linear;
68
+ }
69
+
70
+ .no-cssanimations .seeds-loader::after {
71
+ background-size: 40px;
72
+ }
73
+
74
+ /* Delay variant — adds the delay fade-in to the container and the spinner */
75
+ .seeds-loader-delay {
76
+ animation: seeds-loader-delay-anim 2s 1;
77
+ }
78
+
79
+ .seeds-loader-delay::after {
80
+ animation:
81
+ seeds-loader-spin 2.25s infinite linear,
82
+ seeds-loader-delay-anim 2s 1;
83
+ }
84
+
85
+ /* Small (20px) */
86
+ .seeds-loader-sm {
87
+ width: 20px;
88
+ height: 20px;
89
+ box-shadow:
90
+ 0 0 0 2px var(--color-neutral-600),
91
+ inset 0 0 0 4px var(--color-neutral-600);
92
+ }
93
+
94
+ .seeds-loader-sm::after {
95
+ width: 20px;
96
+ height: 20px;
97
+ border-width: 2px;
98
+ }
99
+
100
+ .no-cssanimations .seeds-loader-sm::after {
101
+ background-size: 20px;
102
+ }
103
+
104
+ /* Visually-hidden accessibility text */
105
+ .seeds-loader-visually-hidden {
106
+ position: absolute;
107
+ width: 1px;
108
+ height: 1px;
109
+ padding: 0;
110
+ margin: -1px;
111
+ overflow: hidden;
112
+ clip: rect(0 0 0 0);
113
+ border: 0;
114
+ }
115
+ }
package/package.json CHANGED
@@ -1,15 +1,26 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-loader",
3
- "version": "1.0.16",
3
+ "version": "1.0.23",
4
4
  "description": "Seeds React Loader",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/esm/index.js",
9
9
  "types": "dist/index.d.ts",
10
+ "files": [
11
+ "dist"
12
+ ],
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/esm/index.js",
16
+ "require": "./dist/index.js",
17
+ "types": "./dist/index.d.ts"
18
+ },
19
+ "./dist/loader.css": "./dist/loader.css"
20
+ },
10
21
  "scripts": {
11
- "build": "tsup --dts",
12
- "build:debug": "tsup --dts --metafile",
22
+ "build": "tsup --dts && cp src/loader.css dist/loader.css",
23
+ "build:debug": "tsup --dts --metafile && cp src/loader.css dist/loader.css",
13
24
  "dev": "tsup --watch --dts",
14
25
  "clean": "rm -rf .turbo dist",
15
26
  "clean:modules": "rm -rf node_modules",
@@ -18,9 +29,9 @@
18
29
  "test:watch": "jest --watch --coverage=false"
19
30
  },
20
31
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "^3.6.2",
22
- "@sproutsocial/seeds-react-system-props": "^3.0.1",
23
- "@sproutsocial/seeds-react-mixins": "^4.3.3"
32
+ "@sproutsocial/seeds-react-theme": "^4.1.1",
33
+ "@sproutsocial/seeds-react-system-props": "^3.1.1",
34
+ "@sproutsocial/seeds-react-mixins": "^4.3.8"
24
35
  },
25
36
  "devDependencies": {
26
37
  "@types/react": "^18.0.0",
package/.eslintignore DELETED
@@ -1,6 +0,0 @@
1
- # Node modules
2
- node_modules/
3
-
4
- # Build output
5
- dist/
6
- coverage/
package/.eslintrc.js DELETED
@@ -1,4 +0,0 @@
1
- module.exports = {
2
- root: true,
3
- extends: ["eslint-config-seeds/racine"],
4
- };
@@ -1,21 +0,0 @@
1
- yarn run v1.22.22
2
- $ tsup --dts
3
- CLI Building entry: src/index.ts
4
- CLI Using tsconfig: tsconfig.json
5
- CLI tsup v8.5.0
6
- CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-loader/tsup.config.ts
7
- CLI Target: es2022
8
- CLI Cleaning output folder
9
- CJS Build start
10
- ESM Build start
11
- CJS dist/index.js 4.53 KB
12
- CJS dist/index.js.map 4.67 KB
13
- CJS ⚡️ Build success in 33ms
14
- ESM dist/esm/index.js 2.58 KB
15
- ESM dist/esm/index.js.map 4.62 KB
16
- ESM ⚡️ Build success in 32ms
17
- DTS Build start
18
- DTS ⚡️ Build success in 3931ms
19
- DTS dist/index.d.ts 833.00 B
20
- DTS dist/index.d.mts 833.00 B
21
- Done in 4.77s.
package/CHANGELOG.md DELETED
@@ -1,136 +0,0 @@
1
- # @sproutsocial/seeds-react-loader
2
-
3
- ## 1.0.16
4
-
5
- ### Patch Changes
6
-
7
- - Updated dependencies [4ba8720]
8
- - Updated dependencies [df9d751]
9
- - @sproutsocial/seeds-react-theme@3.6.2
10
- - @sproutsocial/seeds-react-mixins@4.3.3
11
-
12
- ## 1.0.15
13
-
14
- ### Patch Changes
15
-
16
- - Updated dependencies [1f9a473]
17
- - @sproutsocial/seeds-react-theme@3.6.1
18
- - @sproutsocial/seeds-react-mixins@4.3.2
19
-
20
- ## 1.0.14
21
-
22
- ### Patch Changes
23
-
24
- - Updated dependencies [17d4f12]
25
- - @sproutsocial/seeds-react-theme@3.6.0
26
- - @sproutsocial/seeds-react-mixins@4.3.1
27
-
28
- ## 1.0.13
29
-
30
- ### Patch Changes
31
-
32
- - Updated dependencies [5bb63e1]
33
- - @sproutsocial/seeds-react-mixins@4.3.0
34
-
35
- ## 1.0.12
36
-
37
- ### Patch Changes
38
-
39
- - Updated dependencies [118e300]
40
- - @sproutsocial/seeds-react-theme@3.5.1
41
- - @sproutsocial/seeds-react-mixins@4.2.5
42
-
43
- ## 1.0.11
44
-
45
- ### Patch Changes
46
-
47
- - Updated dependencies [db6ce39]
48
- - Updated dependencies [20bb01b]
49
- - @sproutsocial/seeds-react-theme@3.5.0
50
- - @sproutsocial/seeds-react-mixins@4.2.4
51
-
52
- ## 1.0.10
53
-
54
- ### Patch Changes
55
-
56
- - Updated dependencies [7716e16]
57
- - @sproutsocial/seeds-react-theme@3.4.0
58
- - @sproutsocial/seeds-react-mixins@4.2.3
59
-
60
- ## 1.0.9
61
-
62
- ### Patch Changes
63
-
64
- - @sproutsocial/seeds-react-theme@3.3.2
65
- - @sproutsocial/seeds-react-mixins@4.2.2
66
-
67
- ## 1.0.8
68
-
69
- ### Patch Changes
70
-
71
- - @sproutsocial/seeds-react-theme@3.3.1
72
- - @sproutsocial/seeds-react-mixins@4.2.1
73
-
74
- ## 1.0.7
75
-
76
- ### Patch Changes
77
-
78
- - Updated dependencies [750d1ea]
79
- - @sproutsocial/seeds-react-mixins@4.2.0
80
- - @sproutsocial/seeds-react-theme@3.3.0
81
-
82
- ## 1.0.6
83
-
84
- ### Patch Changes
85
-
86
- - Updated dependencies [fa7579a]
87
- - @sproutsocial/seeds-react-theme@3.2.1
88
- - @sproutsocial/seeds-react-mixins@4.1.6
89
-
90
- ## 1.0.5
91
-
92
- ### Patch Changes
93
-
94
- - Updated dependencies [8f6ba8d]
95
- - @sproutsocial/seeds-react-theme@3.2.0
96
- - @sproutsocial/seeds-react-mixins@4.1.5
97
-
98
- ## 1.0.4
99
-
100
- ### Patch Changes
101
-
102
- - Updated dependencies [b1c3b44]
103
- - @sproutsocial/seeds-react-theme@3.1.1
104
- - @sproutsocial/seeds-react-mixins@4.1.4
105
-
106
- ## 1.0.3
107
-
108
- ### Patch Changes
109
-
110
- - Updated dependencies [47580c4]
111
- - @sproutsocial/seeds-react-theme@3.1.0
112
- - @sproutsocial/seeds-react-mixins@4.1.3
113
-
114
- ## 1.0.2
115
-
116
- ### Patch Changes
117
-
118
- - Updated dependencies [22e1111]
119
- - @sproutsocial/seeds-react-theme@3.0.1
120
- - @sproutsocial/seeds-react-mixins@4.1.2
121
-
122
- ## 1.0.1
123
-
124
- ### Patch Changes
125
-
126
- - 9fd8bac: Update dependencies to use semantic package version instead of wildcards
127
- - Updated dependencies [9fd8bac]
128
- - @sproutsocial/seeds-react-system-props@3.0.2
129
- - @sproutsocial/seeds-react-mixins@4.1.1
130
- - @sproutsocial/seeds-react-theme@2.2.1
131
-
132
- ## 1.0.0
133
-
134
- ### Major Changes
135
-
136
- - f985353: Migrated Loader from Racine to seeds-react-loader
package/jest.config.js DELETED
@@ -1,9 +0,0 @@
1
- const baseConfig = require("@sproutsocial/seeds-testing");
2
-
3
- /** * @type {import('jest').Config} */
4
- const config = {
5
- ...baseConfig,
6
- displayName: "seeds-react-loader",
7
- };
8
-
9
- module.exports = config;
@@ -1,32 +0,0 @@
1
- import React from "react";
2
- import { Loader } from "./";
3
- import type { Meta, StoryObj } from "@storybook/react";
4
-
5
- const meta: Meta<typeof Loader> = {
6
- title: "Components/Loader",
7
- component: Loader,
8
- };
9
-
10
- export default meta;
11
-
12
- type Story = StoryObj<typeof Loader>;
13
-
14
- export const Default: Story = {
15
- args: {
16
- text: "Content loading",
17
- },
18
- };
19
-
20
- export const Small: Story = {
21
- args: {
22
- text: "Content loading",
23
- size: "small",
24
- },
25
- };
26
-
27
- export const NoDelay: Story = {
28
- args: {
29
- text: "Content loading",
30
- delay: false,
31
- },
32
- };
package/src/Loader.tsx DELETED
@@ -1,27 +0,0 @@
1
- import * as React from "react";
2
- import Container, { Text } from "./styles";
3
- import type { TypeLoaderProps } from "./LoaderTypes";
4
-
5
- const Loader = ({
6
- size = "large",
7
- text = "",
8
- delay = true,
9
- color = "dark",
10
- qa,
11
- ...rest
12
- }: TypeLoaderProps) => {
13
- return (
14
- <Container
15
- small={size === "small"}
16
- dark={color === "dark"}
17
- delay={delay}
18
- data-qa-loader=""
19
- {...qa}
20
- {...rest}
21
- >
22
- <Text>{text || "Loading"}</Text>
23
- </Container>
24
- );
25
- };
26
-
27
- export default Loader;
@@ -1,21 +0,0 @@
1
- import type {
2
- TypeStyledComponentsCommonProps,
3
- TypeSystemCommonProps,
4
- } from "@sproutsocial/seeds-react-system-props";
5
-
6
- type TypeQaProps = object;
7
-
8
- export interface TypeLoaderProps
9
- extends TypeStyledComponentsCommonProps,
10
- TypeSystemCommonProps,
11
- Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps> {
12
- size?: "small" | "large";
13
-
14
- /** Text for the loader. This text is not visible, but is used for accessibility purposed */
15
- text?: string;
16
-
17
- /** Whether the loader should wait 2 seconds before it displays */
18
- delay?: boolean;
19
- color?: "light" | "dark";
20
- qa?: TypeQaProps;
21
- }
@@ -1,13 +0,0 @@
1
- import * as React from "react";
2
- import Loader from "../Loader";
3
-
4
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
- function LoaderTypes() {
6
- return (
7
- <>
8
- <Loader text="Content loading" delay={false} />
9
- {/* @ts-expect-error - test that invalid props are rejected */}
10
- <Loader text={3} delay="invalid" />
11
- </>
12
- );
13
- }
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import { render, screen } from "@sproutsocial/seeds-react-testing-library";
3
- import Loader from "../Loader";
4
-
5
- describe("Loader", () => {
6
- it("should render properly", () => {
7
- render(<Loader />);
8
- expect(screen.getByText("Loading")).toBeInTheDocument();
9
- });
10
-
11
- it("should render with small size class", () => {
12
- render(<Loader size="small" />);
13
- expect(
14
- screen.getByDataQaLabel({
15
- loader: "",
16
- })
17
- ).toHaveStyleRule("width", "20px");
18
- });
19
-
20
- it("should render with light theme", () => {
21
- render(<Loader color="light" />);
22
- expect(
23
- screen.getByDataQaLabel({
24
- loader: "",
25
- })
26
- ).toHaveStyleRule("border-color", "#FFFFFF #FFFFFF #6e797a #6e797a", {
27
- modifier: ":after",
28
- });
29
- });
30
- });
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- import Loader from "./Loader";
2
-
3
- export default Loader;
4
- export { Loader };
5
- export * from "./LoaderTypes";
package/src/styled.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import "styled-components";
2
- import { TypeTheme } from "@sproutsocial/seeds-react-theme";
3
-
4
- declare module "styled-components" {
5
- // eslint-disable-next-line @typescript-eslint/no-empty-interface
6
- export interface DefaultTheme extends TypeTheme {}
7
- }
package/src/styles.ts DELETED
@@ -1,102 +0,0 @@
1
- import styled, { css, keyframes } from "styled-components";
2
- import { COMMON } from "@sproutsocial/seeds-react-system-props";
3
- import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
4
- import type { TypeLoaderProps } from "./LoaderTypes";
5
-
6
- const getSize = (size: number) => {
7
- const spinnerSize = Math.round(size * 1);
8
- const borderWidth = Math.round(size * 0.1);
9
-
10
- return css`
11
- width: ${size}px;
12
- height: ${size}px;
13
- box-shadow: ${({ theme }) =>
14
- `0 0 0 2px ${theme.colors.neutral[600]},
15
- inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};
16
-
17
- &:after {
18
- width: ${spinnerSize}px;
19
- height: ${spinnerSize}px;
20
- box-sizing: border-box;
21
- border-width: ${borderWidth}px;
22
- }
23
-
24
- .no-cssanimations &::after {
25
- background-size: ${spinnerSize}px;
26
- }
27
- `;
28
- };
29
-
30
- const spin = keyframes`
31
- from {
32
- transform: translate(-50%,-50%) rotate(0deg);
33
- }
34
- to {
35
- transform: translate(-50%,-50%) rotate(360deg);
36
- }
37
- `;
38
-
39
- const delayAnimation = keyframes`
40
- 0% {
41
- opacity: 0;
42
- }
43
- 80% {
44
- opacity: 0;
45
- }
46
- 100% {
47
- opacity: 1;
48
- }
49
- `;
50
-
51
- interface TypeLoaderContainer extends Pick<TypeLoaderProps, "delay"> {
52
- small?: boolean;
53
- dark?: boolean;
54
- }
55
-
56
- const Container = styled.div.attrs<{ className: string }>({
57
- className: "Loader",
58
- })<TypeLoaderContainer>`
59
- position: relative;
60
- margin: 0 auto;
61
- padding: 0;
62
- overflow: hidden;
63
- border-radius: 100%;
64
-
65
- animation: ${(props) =>
66
- props.delay
67
- ? css`
68
- ${delayAnimation} 2s 1;
69
- `
70
- : "none"};
71
-
72
- &:after {
73
- position: absolute;
74
- top: 50%;
75
- left: 50%;
76
- background: transparent;
77
- border-style: solid;
78
- border-radius: 100%;
79
- content: "";
80
- transition: opacity 250ms;
81
- border-color: ${({ theme }) =>
82
- `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};
83
-
84
- animation: ${(props) =>
85
- props.delay
86
- ? css`
87
- ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
88
- `
89
- : css`
90
- ${spin} 2.25s infinite linear
91
- `};
92
- }
93
-
94
- ${(props) => (props.small ? getSize(20) : getSize(40))}
95
- ${COMMON}
96
- `;
97
-
98
- export const Text = styled.div<Pick<TypeLoaderProps, "text">>`
99
- ${visuallyHidden}
100
- `;
101
-
102
- export default Container;
package/tsconfig.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
3
- "compilerOptions": {
4
- "jsx": "react-jsx",
5
- "module": "esnext"
6
- },
7
- "include": ["src/**/*"],
8
- "exclude": [
9
- "node_modules",
10
- "dist",
11
- "coverage",
12
- "**/*.stories.tsx",
13
- "**/*.stories.ts"
14
- ]
15
- }
package/tsup.config.ts DELETED
@@ -1,12 +0,0 @@
1
- import { defineConfig } from "tsup";
2
-
3
- export default defineConfig((options) => ({
4
- entry: ["src/index.ts"],
5
- format: ["cjs", "esm"],
6
- clean: true,
7
- legacyOutput: true,
8
- dts: options.dts,
9
- external: ["react"],
10
- sourcemap: true,
11
- metafile: options.metafile,
12
- }));