@xsolla/xui-spinner 0.127.0 → 0.129.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/native/index.d.mts +2 -1
- package/native/index.d.ts +2 -1
- package/native/index.js +4 -2
- package/native/index.js.map +1 -1
- package/native/index.mjs +5 -3
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.d.mts +2 -1
- package/web/index.d.ts +2 -1
- package/web/index.js +4 -2
- package/web/index.js.map +1 -1
- package/web/index.mjs +5 -3
- package/web/index.mjs.map +1 -1
package/native/index.d.mts
CHANGED
package/native/index.d.ts
CHANGED
package/native/index.js
CHANGED
|
@@ -63,9 +63,11 @@ var Spinner2 = ({
|
|
|
63
63
|
color,
|
|
64
64
|
"aria-label": ariaLabel = "Loading",
|
|
65
65
|
"aria-describedby": ariaDescribedBy,
|
|
66
|
-
testID
|
|
66
|
+
testID,
|
|
67
|
+
themeMode,
|
|
68
|
+
themeProductContext
|
|
67
69
|
}) => {
|
|
68
|
-
const { theme } = (0, import_xui_core.
|
|
70
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
69
71
|
const sizeConfig = theme.sizing.spinner(size);
|
|
70
72
|
const defaultColor = theme.colors.content.primary;
|
|
71
73
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["export * from \"./Spinner\";\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../../primitives-native/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["export * from \"./Spinner\";\n","import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SpinnerProps extends ThemeOverrideProps {\n /**\n * The size of the spinner.\n * @default 'md'\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * The color of the spinner.\n * If not provided, it will use the default text color from the theme.\n */\n color?: string;\n /**\n * Accessible label for screen readers.\n * @default 'Loading'\n */\n \"aria-label\"?: string;\n /**\n * ID of the element being loaded (for aria-describedby on the loading container).\n */\n \"aria-describedby\"?: string;\n /**\n * Test ID for testing frameworks.\n */\n testID?: string;\n}\n\n/**\n * Spinner - An accessible loading indicator component\n *\n * Displays a spinning animation to indicate loading state.\n *\n * ## Accessibility Features\n *\n * - **role=\"status\"**: Announces to screen readers that this is a status indicator\n * - **aria-live=\"polite\"**: Screen readers will announce when the spinner appears\n * - **aria-label**: Provides accessible name for the spinner (defaults to \"Loading\")\n *\n * ## Sizes\n *\n * - xl: 96px\n * - l: 48px\n * - m: 24px (default)\n * - s: 16px\n * - xs: 8px\n */\nexport const Spinner: React.FC<SpinnerProps> = ({\n size = \"md\",\n color,\n \"aria-label\": ariaLabel = \"Loading\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const sizeConfig = theme.sizing.spinner(size);\n const defaultColor = theme.colors.content.primary;\n\n return (\n <SpinnerPrimitive\n size={sizeConfig.size}\n strokeWidth={sizeConfig.strokeWidth}\n color={color || defaultColor}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n testID={testID}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;;;ACCA,0BAAwC;AAyBlC;AAtBC,IAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,mBAAmB,SAAS,WAAW,SAAS;AAAA,MAChD,oBAAoB;AAAA,MACpB,yBACE,aAAa,WACT,WACA,aAAa,cACX,cACA;AAAA,MAER;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,cAAc;;;AC/BtB,sBAA0D;AA8DtD,IAAAC,sBAAA;AAfG,IAAMC,WAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,QAAM,aAAa,MAAM,OAAO,QAAQ,IAAI;AAC5C,QAAM,eAAe,MAAM,OAAO,QAAQ;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,aAAa,WAAW;AAAA,MACxB,OAAO,SAAS;AAAA,MAChB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;AAEAA,SAAQ,cAAc;","names":["Spinner","import_jsx_runtime","Spinner"]}
|
package/native/index.mjs
CHANGED
|
@@ -30,16 +30,18 @@ var Spinner = ({
|
|
|
30
30
|
Spinner.displayName = "Spinner";
|
|
31
31
|
|
|
32
32
|
// src/Spinner.tsx
|
|
33
|
-
import {
|
|
33
|
+
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
34
34
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
35
35
|
var Spinner2 = ({
|
|
36
36
|
size = "md",
|
|
37
37
|
color,
|
|
38
38
|
"aria-label": ariaLabel = "Loading",
|
|
39
39
|
"aria-describedby": ariaDescribedBy,
|
|
40
|
-
testID
|
|
40
|
+
testID,
|
|
41
|
+
themeMode,
|
|
42
|
+
themeProductContext
|
|
41
43
|
}) => {
|
|
42
|
-
const { theme } =
|
|
44
|
+
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
43
45
|
const sizeConfig = theme.sizing.spinner(size);
|
|
44
46
|
const defaultColor = theme.colors.content.primary;
|
|
45
47
|
return /* @__PURE__ */ jsx2(
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-native/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../primitives-native/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["import type React from \"react\";\nimport { ActivityIndicator, View } from \"react-native\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n color,\n size,\n role,\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive,\n testID,\n}) => {\n return (\n <View\n accessible={true}\n accessibilityRole={role === \"status\" ? \"none\" : undefined}\n accessibilityLabel={ariaLabel}\n accessibilityLiveRegion={\n ariaLive === \"polite\"\n ? \"polite\"\n : ariaLive === \"assertive\"\n ? \"assertive\"\n : \"none\"\n }\n testID={testID}\n >\n <ActivityIndicator\n color={color}\n size={typeof size === \"number\" ? size : \"small\"}\n />\n </View>\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SpinnerProps extends ThemeOverrideProps {\n /**\n * The size of the spinner.\n * @default 'md'\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * The color of the spinner.\n * If not provided, it will use the default text color from the theme.\n */\n color?: string;\n /**\n * Accessible label for screen readers.\n * @default 'Loading'\n */\n \"aria-label\"?: string;\n /**\n * ID of the element being loaded (for aria-describedby on the loading container).\n */\n \"aria-describedby\"?: string;\n /**\n * Test ID for testing frameworks.\n */\n testID?: string;\n}\n\n/**\n * Spinner - An accessible loading indicator component\n *\n * Displays a spinning animation to indicate loading state.\n *\n * ## Accessibility Features\n *\n * - **role=\"status\"**: Announces to screen readers that this is a status indicator\n * - **aria-live=\"polite\"**: Screen readers will announce when the spinner appears\n * - **aria-label**: Provides accessible name for the spinner (defaults to \"Loading\")\n *\n * ## Sizes\n *\n * - xl: 96px\n * - l: 48px\n * - m: 24px (default)\n * - s: 16px\n * - xs: 8px\n */\nexport const Spinner: React.FC<SpinnerProps> = ({\n size = \"md\",\n color,\n \"aria-label\": ariaLabel = \"Loading\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const sizeConfig = theme.sizing.spinner(size);\n const defaultColor = theme.colors.content.primary;\n\n return (\n <SpinnerPrimitive\n size={sizeConfig.size}\n strokeWidth={sizeConfig.strokeWidth}\n color={color || defaultColor}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n testID={testID}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";AACA,SAAS,mBAAmB,YAAY;AAyBlC;AAtBC,IAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,mBAAmB,SAAS,WAAW,SAAS;AAAA,MAChD,oBAAoB;AAAA,MACpB,yBACE,aAAa,WACT,WACA,aAAa,cACX,cACA;AAAA,MAER;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;AAEA,QAAQ,cAAc;;;AC/BtB,SAAS,wBAAiD;AA8DtD,gBAAAA,YAAA;AAfG,IAAMC,WAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,QAAM,aAAa,MAAM,OAAO,QAAQ,IAAI;AAC5C,QAAM,eAAe,MAAM,OAAO,QAAQ;AAE1C,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,aAAa,WAAW;AAAA,MACxB,OAAO,SAAS;AAAA,MAChB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;AAEAC,SAAQ,cAAc;","names":["jsx","Spinner"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-spinner",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.129.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.129.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.129.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|
package/web/index.d.mts
CHANGED
package/web/index.d.ts
CHANGED
package/web/index.js
CHANGED
|
@@ -86,9 +86,11 @@ var Spinner2 = ({
|
|
|
86
86
|
color,
|
|
87
87
|
"aria-label": ariaLabel = "Loading",
|
|
88
88
|
"aria-describedby": ariaDescribedBy,
|
|
89
|
-
testID
|
|
89
|
+
testID,
|
|
90
|
+
themeMode,
|
|
91
|
+
themeProductContext
|
|
90
92
|
}) => {
|
|
91
|
-
const { theme } = (0, import_xui_core.
|
|
93
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
92
94
|
const sizeConfig = theme.sizing.spinner(size);
|
|
93
95
|
const defaultColor = theme.colors.content.primary;
|
|
94
96
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
package/web/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../../primitives-web/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["export * from \"./Spinner\";\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../../primitives-web/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["export * from \"./Spinner\";\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SpinnerProps extends ThemeOverrideProps {\n /**\n * The size of the spinner.\n * @default 'md'\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * The color of the spinner.\n * If not provided, it will use the default text color from the theme.\n */\n color?: string;\n /**\n * Accessible label for screen readers.\n * @default 'Loading'\n */\n \"aria-label\"?: string;\n /**\n * ID of the element being loaded (for aria-describedby on the loading container).\n */\n \"aria-describedby\"?: string;\n /**\n * Test ID for testing frameworks.\n */\n testID?: string;\n}\n\n/**\n * Spinner - An accessible loading indicator component\n *\n * Displays a spinning animation to indicate loading state.\n *\n * ## Accessibility Features\n *\n * - **role=\"status\"**: Announces to screen readers that this is a status indicator\n * - **aria-live=\"polite\"**: Screen readers will announce when the spinner appears\n * - **aria-label**: Provides accessible name for the spinner (defaults to \"Loading\")\n *\n * ## Sizes\n *\n * - xl: 96px\n * - l: 48px\n * - m: 24px (default)\n * - s: 16px\n * - xs: 8px\n */\nexport const Spinner: React.FC<SpinnerProps> = ({\n size = \"md\",\n color,\n \"aria-label\": ariaLabel = \"Loading\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const sizeConfig = theme.sizing.spinner(size);\n const defaultColor = theme.colors.content.primary;\n\n return (\n <SpinnerPrimitive\n size={sizeConfig.size}\n strokeWidth={sizeConfig.strokeWidth}\n color={color || defaultColor}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n testID={testID}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iBAAAA;AAAA;AAAA;;;ACCA,+BAAkC;AAmC9B;AAhCJ,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,IAAM,gBAAgB,yBAAAC,QAAO;AAAA,WAClB,CAAC,UACR,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UACT,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UAAU,MAAM,eAAe,CAAC;AAAA,MACvC,CAAC,UAAU,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,eAK/B,MAAM;AAAA;AAGd,IAAM,UAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa,WAAW;AAAA,EACxB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,QAAQ,cAAc;;;AC5CtB,sBAA0D;AA8DtD,IAAAC,sBAAA;AAfG,IAAMC,WAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,QAAM,aAAa,MAAM,OAAO,QAAQ,IAAI;AAC5C,QAAM,eAAe,MAAM,OAAO,QAAQ;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,aAAa,WAAW;AAAA,MACxB,OAAO,SAAS;AAAA,MAChB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;AAEAA,SAAQ,cAAc;","names":["Spinner","styled","import_jsx_runtime","Spinner"]}
|
package/web/index.mjs
CHANGED
|
@@ -43,16 +43,18 @@ var Spinner = ({
|
|
|
43
43
|
Spinner.displayName = "Spinner";
|
|
44
44
|
|
|
45
45
|
// src/Spinner.tsx
|
|
46
|
-
import {
|
|
46
|
+
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
47
47
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
48
48
|
var Spinner2 = ({
|
|
49
49
|
size = "md",
|
|
50
50
|
color,
|
|
51
51
|
"aria-label": ariaLabel = "Loading",
|
|
52
52
|
"aria-describedby": ariaDescribedBy,
|
|
53
|
-
testID
|
|
53
|
+
testID,
|
|
54
|
+
themeMode,
|
|
55
|
+
themeProductContext
|
|
54
56
|
}) => {
|
|
55
|
-
const { theme } =
|
|
57
|
+
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
56
58
|
const sizeConfig = theme.sizing.spinner(size);
|
|
57
59
|
const defaultColor = theme.colors.content.primary;
|
|
58
60
|
return /* @__PURE__ */ jsx2(
|
package/web/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-web/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../primitives-web/src/Spinner.tsx","../../src/Spinner.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import type React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Spinner as SpinnerPrimitive } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface SpinnerProps extends ThemeOverrideProps {\n /**\n * The size of the spinner.\n * @default 'md'\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * The color of the spinner.\n * If not provided, it will use the default text color from the theme.\n */\n color?: string;\n /**\n * Accessible label for screen readers.\n * @default 'Loading'\n */\n \"aria-label\"?: string;\n /**\n * ID of the element being loaded (for aria-describedby on the loading container).\n */\n \"aria-describedby\"?: string;\n /**\n * Test ID for testing frameworks.\n */\n testID?: string;\n}\n\n/**\n * Spinner - An accessible loading indicator component\n *\n * Displays a spinning animation to indicate loading state.\n *\n * ## Accessibility Features\n *\n * - **role=\"status\"**: Announces to screen readers that this is a status indicator\n * - **aria-live=\"polite\"**: Screen readers will announce when the spinner appears\n * - **aria-label**: Provides accessible name for the spinner (defaults to \"Loading\")\n *\n * ## Sizes\n *\n * - xl: 96px\n * - l: 48px\n * - m: 24px (default)\n * - s: 16px\n * - xs: 8px\n */\nexport const Spinner: React.FC<SpinnerProps> = ({\n size = \"md\",\n color,\n \"aria-label\": ariaLabel = \"Loading\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const sizeConfig = theme.sizing.spinner(size);\n const defaultColor = theme.colors.content.primary;\n\n return (\n <SpinnerPrimitive\n size={sizeConfig.size}\n strokeWidth={sizeConfig.strokeWidth}\n color={color || defaultColor}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n testID={testID}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";AACA,OAAO,UAAU,iBAAiB;AAmC9B;AAhCJ,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,IAAM,gBAAgB,OAAO;AAAA,WAClB,CAAC,UACR,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UACT,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UAAU,MAAM,eAAe,CAAC;AAAA,MACvC,CAAC,UAAU,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,eAK/B,MAAM;AAAA;AAGd,IAAM,UAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa,WAAW;AAAA,EACxB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACZ,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,QAAQ,cAAc;;;AC5CtB,SAAS,wBAAiD;AA8DtD,gBAAAA,YAAA;AAfG,IAAMC,WAAkC,CAAC;AAAA,EAC9C,OAAO;AAAA,EACP;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,QAAM,aAAa,MAAM,OAAO,QAAQ,IAAI;AAC5C,QAAM,eAAe,MAAM,OAAO,QAAQ;AAE1C,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,aAAa,WAAW;AAAA,MACxB,OAAO,SAAS;AAAA,MAChB,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;AAEAC,SAAQ,cAAc;","names":["jsx","Spinner"]}
|