@aristobyte-ui/spinner 1.0.53 → 1.0.55

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/index.d.mts CHANGED
@@ -5,7 +5,6 @@ interface ISpinner {
5
5
  variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
6
6
  size?: "xsm" | "sm" | "md" | "lg" | "xlg";
7
7
  className?: string;
8
- style?: React.CSSProperties;
9
8
  }
10
9
  declare const Spinner: React.FC<ISpinner>;
11
10
 
package/dist/index.d.ts CHANGED
@@ -5,7 +5,6 @@ interface ISpinner {
5
5
  variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
6
6
  size?: "xsm" | "sm" | "md" | "lg" | "xlg";
7
7
  className?: string;
8
- style?: React.CSSProperties;
9
8
  }
10
9
  declare const Spinner: React.FC<ISpinner>;
11
10
 
package/dist/index.js CHANGED
@@ -38,50 +38,27 @@ module.exports = __toCommonJS(index_exports);
38
38
  // components/Spinner.tsx
39
39
  var import_clsx = __toESM(require("clsx"));
40
40
  var import_jsx_runtime = require("react/jsx-runtime");
41
- var sizeMap = {
42
- xsm: "w-4 h-4",
43
- // 16px
44
- sm: "w-6 h-6",
45
- // 24px
46
- md: "w-8 h-8",
47
- // 32px
48
- lg: "w-10 h-10",
49
- // 40px
50
- xlg: "w-12 h-12"
51
- // 48px
52
- };
53
41
  var Spinner = ({
54
- type = "default",
42
+ type = "regular",
55
43
  variant = "default",
56
44
  size = "md",
57
- className = "",
58
- style = {}
45
+ className = ""
59
46
  }) => {
60
- const base = (0, import_clsx.default)("inline-block relative", sizeMap[size], {
61
- /** Default spinner */
62
- "animate-rotation rounded-full border-2 border-solid border-t-current border-opacity-25": type === "default",
63
- /** Duo spinner */
64
- "animate-rotation rounded-full border-2 border-solid border-transparent": type === "duo",
65
- /** Gradient spinner */
66
- "animate-rotation-linear rounded-full border-2 border-solid border-r-transparent": type === "gradient",
67
- /** Pulse */
68
- "animate-pulse rounded-full": type === "pulse",
69
- /** Pulse-duo */
70
- "rounded-full": type === "pulse-duo"
71
- });
72
- const variantColor = (0, import_clsx.default)({
73
- /** Default style spinner colors */
74
- "text-default": variant === "default",
75
- "text-primary": variant === "primary",
76
- "text-secondary": variant === "secondary",
77
- "text-success": variant === "success",
78
- "text-error": variant === "error",
79
- "text-warning": variant === "warning"
80
- });
81
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(base, variantColor, className), style, children: type === "pulse-duo" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-before" }),
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-after" })
84
- ] }) });
47
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
48
+ "div",
49
+ {
50
+ className: (0, import_clsx.default)(
51
+ "spinner",
52
+ `spinner-${type}`,
53
+ // type: regular | duo | gradient | pulse | pulse-duo
54
+ `spinner-${size}`,
55
+ // size: xsm | sm | md | lg | xlg
56
+ `spinner-${variant}`,
57
+ // variant: default | primary | ...
58
+ className
59
+ )
60
+ }
61
+ );
85
62
  };
86
63
  // Annotate the CommonJS export names for ESM import in node:
87
64
  0 && (module.exports = {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../index.ts","../components/Spinner.tsx"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface ISpinner {\n type?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst sizeMap = {\n xsm: \"w-4 h-4\", // 16px\n sm: \"w-6 h-6\", // 24px\n md: \"w-8 h-8\", // 32px\n lg: \"w-10 h-10\", // 40px\n xlg: \"w-12 h-12\", // 48px\n};\n\nexport const Spinner: React.FC<ISpinner> = ({\n type = \"default\",\n variant = \"default\",\n size = \"md\",\n className = \"\",\n style = {},\n}) => {\n const base = clsx(\"inline-block relative\", sizeMap[size], {\n /** Default spinner */\n \"animate-rotation rounded-full border-2 border-solid border-t-current border-opacity-25\":\n type === \"default\",\n /** Duo spinner */\n \"animate-rotation rounded-full border-2 border-solid border-transparent\":\n type === \"duo\",\n /** Gradient spinner */\n \"animate-rotation-linear rounded-full border-2 border-solid border-r-transparent\":\n type === \"gradient\",\n /** Pulse */\n \"animate-pulse rounded-full\": type === \"pulse\",\n /** Pulse-duo */\n \"rounded-full\": type === \"pulse-duo\",\n });\n\n const variantColor = clsx({\n /** Default style spinner colors */\n \"text-default\": variant === \"default\",\n \"text-primary\": variant === \"primary\",\n \"text-secondary\": variant === \"secondary\",\n \"text-success\": variant === \"success\",\n \"text-error\": variant === \"error\",\n \"text-warning\": variant === \"warning\",\n });\n\n return (\n <div className={clsx(base, variantColor, className)} style={style}>\n {type === \"pulse-duo\" && (\n <>\n <span className=\"absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-before\" />\n <span className=\"absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-after\" />\n </>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAAiB;AA4DT;AA5CR,IAAM,UAAU;AAAA,EACd,KAAK;AAAA;AAAA,EACL,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,KAAK;AAAA;AACP;AAEO,IAAM,UAA8B,CAAC;AAAA,EAC1C,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MAAM;AACJ,QAAM,WAAO,YAAAA,SAAK,yBAAyB,QAAQ,IAAI,GAAG;AAAA;AAAA,IAExD,0FACE,SAAS;AAAA;AAAA,IAEX,0EACE,SAAS;AAAA;AAAA,IAEX,mFACE,SAAS;AAAA;AAAA,IAEX,8BAA8B,SAAS;AAAA;AAAA,IAEvC,gBAAgB,SAAS;AAAA,EAC3B,CAAC;AAED,QAAM,mBAAe,YAAAA,SAAK;AAAA;AAAA,IAExB,gBAAgB,YAAY;AAAA,IAC5B,gBAAgB,YAAY;AAAA,IAC5B,kBAAkB,YAAY;AAAA,IAC9B,gBAAgB,YAAY;AAAA,IAC5B,cAAc,YAAY;AAAA,IAC1B,gBAAgB,YAAY;AAAA,EAC9B,CAAC;AAED,SACE,4CAAC,SAAI,eAAW,YAAAA,SAAK,MAAM,cAAc,SAAS,GAAG,OAClD,mBAAS,eACR,4EACE;AAAA,gDAAC,UAAK,WAAU,4FAA2F;AAAA,IAC3G,4CAAC,UAAK,WAAU,2FAA0F;AAAA,KAC5G,GAEJ;AAEJ;","names":["clsx"]}
1
+ {"version":3,"sources":["../index.ts","../components/Spinner.tsx"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface ISpinner {\n type?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n className?: string;\n}\n\nexport const Spinner: React.FC<ISpinner> = ({\n type = \"regular\",\n variant = \"default\",\n size = \"md\",\n className = \"\",\n}) => {\n return (\n <div\n className={clsx(\n \"spinner\",\n `spinner-${type}`, // type: regular | duo | gradient | pulse | pulse-duo\n `spinner-${size}`, // size: xsm | sm | md | lg | xlg\n `spinner-${variant}`, // variant: default | primary | ...\n className\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAAiB;AAsBb;AAPG,IAAM,UAA8B,CAAC;AAAA,EAC1C,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AACd,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAA;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA;AAAA,QACf,WAAW,IAAI;AAAA;AAAA,QACf,WAAW,OAAO;AAAA;AAAA,QAClB;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["clsx"]}
package/dist/index.mjs CHANGED
@@ -2,51 +2,28 @@
2
2
 
3
3
  // components/Spinner.tsx
4
4
  import clsx from "clsx";
5
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
- var sizeMap = {
7
- xsm: "w-4 h-4",
8
- // 16px
9
- sm: "w-6 h-6",
10
- // 24px
11
- md: "w-8 h-8",
12
- // 32px
13
- lg: "w-10 h-10",
14
- // 40px
15
- xlg: "w-12 h-12"
16
- // 48px
17
- };
5
+ import { jsx } from "react/jsx-runtime";
18
6
  var Spinner = ({
19
- type = "default",
7
+ type = "regular",
20
8
  variant = "default",
21
9
  size = "md",
22
- className = "",
23
- style = {}
10
+ className = ""
24
11
  }) => {
25
- const base = clsx("inline-block relative", sizeMap[size], {
26
- /** Default spinner */
27
- "animate-rotation rounded-full border-2 border-solid border-t-current border-opacity-25": type === "default",
28
- /** Duo spinner */
29
- "animate-rotation rounded-full border-2 border-solid border-transparent": type === "duo",
30
- /** Gradient spinner */
31
- "animate-rotation-linear rounded-full border-2 border-solid border-r-transparent": type === "gradient",
32
- /** Pulse */
33
- "animate-pulse rounded-full": type === "pulse",
34
- /** Pulse-duo */
35
- "rounded-full": type === "pulse-duo"
36
- });
37
- const variantColor = clsx({
38
- /** Default style spinner colors */
39
- "text-default": variant === "default",
40
- "text-primary": variant === "primary",
41
- "text-secondary": variant === "secondary",
42
- "text-success": variant === "success",
43
- "text-error": variant === "error",
44
- "text-warning": variant === "warning"
45
- });
46
- return /* @__PURE__ */ jsx("div", { className: clsx(base, variantColor, className), style, children: type === "pulse-duo" && /* @__PURE__ */ jsxs(Fragment, { children: [
47
- /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-before" }),
48
- /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-after" })
49
- ] }) });
12
+ return /* @__PURE__ */ jsx(
13
+ "div",
14
+ {
15
+ className: clsx(
16
+ "spinner",
17
+ `spinner-${type}`,
18
+ // type: regular | duo | gradient | pulse | pulse-duo
19
+ `spinner-${size}`,
20
+ // size: xsm | sm | md | lg | xlg
21
+ `spinner-${variant}`,
22
+ // variant: default | primary | ...
23
+ className
24
+ )
25
+ }
26
+ );
50
27
  };
51
28
  export {
52
29
  Spinner
@@ -1 +1 @@
1
- {"version":3,"sources":["../components/Spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface ISpinner {\n type?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst sizeMap = {\n xsm: \"w-4 h-4\", // 16px\n sm: \"w-6 h-6\", // 24px\n md: \"w-8 h-8\", // 32px\n lg: \"w-10 h-10\", // 40px\n xlg: \"w-12 h-12\", // 48px\n};\n\nexport const Spinner: React.FC<ISpinner> = ({\n type = \"default\",\n variant = \"default\",\n size = \"md\",\n className = \"\",\n style = {},\n}) => {\n const base = clsx(\"inline-block relative\", sizeMap[size], {\n /** Default spinner */\n \"animate-rotation rounded-full border-2 border-solid border-t-current border-opacity-25\":\n type === \"default\",\n /** Duo spinner */\n \"animate-rotation rounded-full border-2 border-solid border-transparent\":\n type === \"duo\",\n /** Gradient spinner */\n \"animate-rotation-linear rounded-full border-2 border-solid border-r-transparent\":\n type === \"gradient\",\n /** Pulse */\n \"animate-pulse rounded-full\": type === \"pulse\",\n /** Pulse-duo */\n \"rounded-full\": type === \"pulse-duo\",\n });\n\n const variantColor = clsx({\n /** Default style spinner colors */\n \"text-default\": variant === \"default\",\n \"text-primary\": variant === \"primary\",\n \"text-secondary\": variant === \"secondary\",\n \"text-success\": variant === \"success\",\n \"text-error\": variant === \"error\",\n \"text-warning\": variant === \"warning\",\n });\n\n return (\n <div className={clsx(base, variantColor, className)} style={style}>\n {type === \"pulse-duo\" && (\n <>\n <span className=\"absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-before\" />\n <span className=\"absolute top-1/2 left-1/2 w-full h-full rounded-full bg-current animate-pulse-duo-after\" />\n </>\n )}\n </div>\n );\n};\n"],"mappings":";;;AAGA,OAAO,UAAU;AA4DT,mBACE,KADF;AA5CR,IAAM,UAAU;AAAA,EACd,KAAK;AAAA;AAAA,EACL,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,KAAK;AAAA;AACP;AAEO,IAAM,UAA8B,CAAC;AAAA,EAC1C,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ,CAAC;AACX,MAAM;AACJ,QAAM,OAAO,KAAK,yBAAyB,QAAQ,IAAI,GAAG;AAAA;AAAA,IAExD,0FACE,SAAS;AAAA;AAAA,IAEX,0EACE,SAAS;AAAA;AAAA,IAEX,mFACE,SAAS;AAAA;AAAA,IAEX,8BAA8B,SAAS;AAAA;AAAA,IAEvC,gBAAgB,SAAS;AAAA,EAC3B,CAAC;AAED,QAAM,eAAe,KAAK;AAAA;AAAA,IAExB,gBAAgB,YAAY;AAAA,IAC5B,gBAAgB,YAAY;AAAA,IAC5B,kBAAkB,YAAY;AAAA,IAC9B,gBAAgB,YAAY;AAAA,IAC5B,cAAc,YAAY;AAAA,IAC1B,gBAAgB,YAAY;AAAA,EAC9B,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,KAAK,MAAM,cAAc,SAAS,GAAG,OAClD,mBAAS,eACR,iCACE;AAAA,wBAAC,UAAK,WAAU,4FAA2F;AAAA,IAC3G,oBAAC,UAAK,WAAU,2FAA0F;AAAA,KAC5G,GAEJ;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../components/Spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\n\nexport interface ISpinner {\n type?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n className?: string;\n}\n\nexport const Spinner: React.FC<ISpinner> = ({\n type = \"regular\",\n variant = \"default\",\n size = \"md\",\n className = \"\",\n}) => {\n return (\n <div\n className={clsx(\n \"spinner\",\n `spinner-${type}`, // type: regular | duo | gradient | pulse | pulse-duo\n `spinner-${size}`, // size: xsm | sm | md | lg | xlg\n `spinner-${variant}`, // variant: default | primary | ...\n className\n )}\n />\n );\n};\n"],"mappings":";;;AAGA,OAAO,UAAU;AAsBb;AAPG,IAAM,UAA8B,CAAC;AAAA,EAC1C,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AACd,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA;AAAA,QACf,WAAW,IAAI;AAAA;AAAA,QACf,WAAW,OAAO;AAAA;AAAA,QAClB;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/spinner",
3
3
  "description": "Flexible, highly customizable React Spinner component for AristoByteUI. Supports multiple variants, sizes, and animation types, designed for seamless integration with modern React projects and monorepos.",
4
- "version": "1.0.53",
4
+ "version": "1.0.55",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -62,23 +62,21 @@
62
62
  "check-types": "tsc --noEmit"
63
63
  },
64
64
  "dependencies": {
65
+ "clsx": "^2.1.1",
65
66
  "react": "^19.1.0",
66
- "react-dom": "^19.1.0",
67
- "clsx": "^2.1.1"
67
+ "react-dom": "^19.1.0"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "react": "^19.1.0",
71
- "react-dom": "^19.1.0",
72
- "tailwindcss": "^4.1.7"
71
+ "react-dom": "^19.1.0"
73
72
  },
74
73
  "devDependencies": {
75
- "@aristobyte-ui/eslint-config": "^1.0.53",
76
- "@aristobyte-ui/typescript-config": "^1.0.53",
74
+ "@aristobyte-ui/eslint-config": "^1.0.55",
75
+ "@aristobyte-ui/typescript-config": "^1.0.55",
77
76
  "@types/node": "^24.3.0",
78
77
  "@types/react": "19.1.0",
79
78
  "@types/react-dom": "19.1.1",
80
79
  "eslint": "^9.27.0",
81
- "tailwindcss": "^4.1.7",
82
80
  "tsup": "^8.5.0",
83
81
  "typescript": "^5.8.3"
84
82
  }