@cleartrip/ct-design-spinner 4.0.0-TEST.1 → 5.0.0

package/README.md

@@ -0,0 +1,73 @@
+# Spinner
+
+A loading spinner component with customizable appearance.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-spinner
+# or
+pnpm add @cleartrip/ct-design-spinner
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { Spinner } from '@cleartrip/ct-design-spinner';
+
+function Example() {
+  return (
+    <Spinner>
+      {/* Basic usage */}
+    </Spinner>
+  );
+}
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `width` | `number` | — | No | width property |
+| `height` | `number` | — | No | height property |
+| `gradientColors` | `string[]` | — | No | gradientColors property |
+
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { Spinner } from 'yagami/core/components';
++ import { Spinner } from '@cleartrip/ct-design-spinner';
+```

package/dist/Spinner.d.ts

@@ -1,4 +1,8 @@
-import { SpinnerProps } from './type';
-export * from './type';
-export default function Spinner({ height, width, borderColor }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { ISpinnerProps } from './type';
+declare const Spinner: {
+    ({ width, height, gradientColors }: ISpinnerProps): React.ReactElement;
+    displayName: string;
+};
+export default Spinner;
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../packages/components/Spinner/src/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,cAAc,QAAQ,CAAC;AAEvB,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,MAAe,EAAE,KAAc,EAAE,WAAgB,EAAE,EAAE,YAAY,2CAGlG"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../packages/components/Spinner/src/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAMrC,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAavC,QAAA,MAAM,OAAO;wCAAiD,aAAa,GAAG,KAAK,CAAC,YAAY;;CAyD/F,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/Spinner.native.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISpinnerProps } from './type';
+declare const Spinner: {
+    ({ width, height, gradientColors }: ISpinnerProps): React.ReactElement;
+    displayName: string;
+};
+export default Spinner;
+//# sourceMappingURL=Spinner.native.d.ts.map

package/dist/Spinner.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.native.d.ts","sourceRoot":"","sources":["../packages/components/Spinner/src/Spinner.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,QAAA,MAAM,OAAO;wCAAiD,aAAa,GAAG,KAAK,CAAC,YAAY;;CA4D/F,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/ct-design-spinner.browser.cjs.js

@@ -1,2 +1,5 @@
-"use strict";var n=require("react/jsx-runtime"),e=require("@cleartrip/ct-design-theme"),r=require("tslib"),t=require("@emotion/styled"),i=require("@emotion/react");function o(n){return n&&n.__esModule?n:{default:n}}var a,s,d=o(t).default.div(s||(s=r.__makeTemplateObject(["\n  border: ",";\n  border-radius: 50%;\n  border-top: ",";\n  width: ",";\n  height: ",";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ","\n"],["\n  border: ",";\n  border-radius: 50%;\n  border-top: ",";\n  width: ",";\n  height: ",";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ","\n"])),(function(n){var e=n.theme,r=n.height,t=parseInt(r||e.size[12])/6;return"".concat(t>0?t:8,"px solid ").concat(e.color.spinner.primaryBg)}),(function(n){var e=n.theme,r=n.height,t=n.borderColor,i=parseInt(r||e.size[12])/6;return"".concat(i>0?i:8,"px solid ").concat(t||e.color.spinner.primary)}),(function(n){var e=n.width,r=n.theme;return e||r.size[12]}),(function(n){var e=n.height,r=n.theme;return e||r.size[12]}),(function(n){var e=n.css;return e&&i.css(a||(a=r.__makeTemplateObject(["\n\t","\n "],["\n\t","\n "])),e)}));exports.Spinner=function(r){var t=r.height,i=void 0===t?"16px":t,o=r.width,a=void 0===o?"16px":o,s=r.borderColor,m=void 0===s?"":s,u=e.useTheme();return n.jsx(d,{theme:u,height:i,width:a,borderColor:m})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("@cleartrip/ct-design-style-manager"),t=require("@emotion/css");const i=s.makeStyles(e=>({root:{position:"relative",borderWidth:e.border.width.lg,borderStyle:"solid",borderColor:"rgba(0, 0, 0, 0.3)",borderRadius:e.border.radius[32],borderTopColor:e.color.background.neutral}})),o=t.keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`,a=t.css({animation:`${o} 800ms linear infinite`}),n=({width:t=30,height:o=30,gradientColors:n})=>{const l=r.useId(),d=Array.isArray(n)&&n.length>0,c=s.useStyles(()=>({size:{width:t,height:o}}),[t,o]),h=s.useWebMergeStyles([i.root,c.size,a],[c.size,a]),u=s.useWebMergeStyles([c.size,a],[c.size,a]);if(d){const r=Math.min(t,o),s=r/2,i=(r-2)/2,a=2*Math.PI*i,d=`url(#${l})`;return e.jsx("span",{className:u,role:"status","aria-label":"Loading",children:e.jsxs("svg",{width:r,height:r,viewBox:`0 0 ${r} ${r}`,fill:"none",children:[e.jsx("defs",{children:e.jsx("linearGradient",{id:l,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:n.map((r,s)=>e.jsx("stop",{offset:s/(n.length-1)*100+"%",stopColor:r},s))})}),e.jsx("circle",{cx:s,cy:s,r:i,stroke:d,strokeWidth:2,strokeLinecap:"round",strokeDasharray:`${.65*a} ${.35*a}`,fill:"none"})]})})}return e.jsx("span",{role:"status","aria-label":"Loading",className:h})};n.displayName="Spinner",exports.Spinner=n;
 //# sourceMappingURL=ct-design-spinner.browser.cjs.js.map

package/dist/ct-design-spinner.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-spinner.browser.cjs.js","sources":["../packages/components/Spinner/src/style.tsx","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["StyledSpinner","default","div","_a","theme","height","spinerHeight","parseInt","size","concat","color","spinner","primaryBg","borderColor","primary","width","css","CSS","templateObject_1","__makeTemplateObject","_b","_c","_d","useTheme","_jsx"],"mappings":"+NAIaA,OAAsBC,QAACC,4fAAiB,eAIlD,2CAKA,eACqD,gBACG,0XAyBzD,SAnCU,SAACC,OAAEC,EAAKD,EAAAC,MAAEC,EAAMF,EAAAE,OAClBC,EAAeC,SAASF,GAAUD,EAAMI,KAAK,KAAO,EAC1D,MAAO,GAAAC,OAAGH,EAAe,EAAIA,EAAe,EAAC,aAAAG,OAAYL,EAAMM,MAAMC,QAAQC,UAC/E,IAEc,SAACT,GAAE,IAAAC,UAAOC,EAAMF,EAAAE,OAAEQ,EAAWV,EAAAU,YACnCP,EAAeC,SAASF,GAAUD,EAAMI,KAAK,KAAO,EAC1D,MAAO,GAAAC,OAAGH,EAAe,EAAIA,EAAe,EAAa,aAAAG,OAAAI,GAAeT,EAAMM,MAAMC,QAAQG,QAC9F,IACS,SAACX,OAAEY,EAAKZ,EAAAY,MAAEX,EAAKD,EAAAC,MAAO,OAAAW,GAASX,EAAMI,KAAK,GAApB,IACrB,SAACL,OAAEE,EAAMF,EAAAE,OAAED,EAAKD,EAAAC,MAAO,OAAAC,GAAUD,EAAMI,KAAK,GAArB,IAqB/B,SAACL,GAAE,IAAAa,EAAGb,EAAAa,IACN,OAAAA,GACAC,EAAGD,IAAAE,IAAAA,EAAAC,EAAAA,qBAAA,CAAA,OAAA,OAAA,CAAA,OACkC,SAAtCH,EAFC,oBChCoB,SAAQb,GAAE,IAAAiB,EAAAjB,EAAAE,OAAAA,OAAM,IAAAe,EAAG,OAAMA,EAAEC,UAAAN,OAAQ,IAAAM,EAAA,SAAQC,EAAAnB,EAAAU,YAAAA,OAAW,IAAAS,EAAG,GAAEA,EAC3ElB,EAAQmB,EAAAA,WACd,OAAOC,MAACxB,EAAa,CAACI,MAAOA,EAAOC,OAAQA,EAAQU,MAAOA,EAAOF,YAAaA,GACjF"}
+{"version":3,"file":"ct-design-spinner.browser.cjs.js","sources":["../packages/components/Spinner/src/style.ts","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["spinnerStaticStyles","makeStyles","theme","root","position","borderWidth","border","width","lg","borderStyle","borderColor","borderRadius","radius","borderTopColor","color","background","neutral","spinAnimation","keyframes","animationClass","css","animation","Spinner","height","gradientColors","gradientId","useId","hasGradient","Array","isArray","length","dynamicStyles","useStyles","size","rootClassName","useWebMergeStyles","gradientWrapperClassName","Math","min","center","circumference","PI","strokeUrl","_jsx","className","role","children","_jsxs","jsxs","viewBox","fill","jsx","id","x1","y1","x2","y2","map","index","offset","stopColor","cx","cy","r","stroke","strokeWidth","strokeLinecap","strokeDasharray","displayName"],"mappings":"6IAEO,MAAMA,EAAsBC,EAAAA,WAAYC,IAAW,CACxDC,KAAM,CACJC,SAAU,WACVC,YAAaH,EAAMI,OAAOC,MAAMC,GAChCC,YAAa,QACbC,YAAa,qBACbC,aAAcT,EAAMI,OAAOM,OAAO,IAClCC,eAAgBX,EAAMY,MAAMC,WAAWC,YCDrCC,EAAgBC,EAASA,SAAA;;;EAKzBC,EAAiBC,EAAAA,IAAI,CACzBC,UAAW,GAAGJ,4BAKVK,EAAU,EAAGf,QAAQ,GAAIgB,SAAS,GAAIC,qBAC1C,MAAMC,EAAaC,EAAAA,QACbC,EAAcC,MAAMC,QAAQL,IAAmBA,EAAeM,OAAS,EAEvEC,EAAgBC,EAAAA,UACpB,KAAO,CACLC,KAAM,CACJ1B,QACAgB,YAGJ,CAAChB,EAAOgB,IAGJW,EAAgBC,EAAiBA,kBACrC,CAACnC,EAAoBG,KAAM4B,EAAcE,KAAMd,GAC/C,CAACY,EAAcE,KAAMd,IAGjBiB,EAA2BD,EAAAA,kBAC/B,CAACJ,EAAcE,KAAMd,GACrB,CAACY,EAAcE,KAAMd,IAGvB,GAAIQ,EAAa,CACf,MAAMM,EAAOI,KAAKC,IAAI/B,EAAOgB,GACvBgB,EAASN,EAAO,EAChBrB,GAAUqB,EA7BS,GA6BsB,EACzCO,EAAgB,EAAIH,KAAKI,GAAK7B,EAC9B8B,EAAY,QAAQjB,KAE1B,OACEkB,MAAA,OAAA,CAAMC,UAAWR,EAA0BS,KAAK,SAAoB,aAAA,UAClEC,SAAAC,EAAAC,KAAA,MAAA,CAAKzC,MAAO0B,EAAMV,OAAQU,EAAMgB,QAAS,OAAOhB,KAAQA,IAAQiB,KAAK,iBACnEP,MACE,OAAA,CAAAG,SAAAH,EAAAQ,IAAA,iBAAA,CAAgBC,GAAI3B,EAAY4B,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAAOC,GAAG,KAAIV,SAC9DtB,EAAeiC,IAAI,CAAC3C,EAAO4C,IAC1Bf,MAAkB,OAAA,CAAAgB,OAAYD,GAASlC,EAAeM,OAAS,GAAM,IAA3C,IAAmD8B,UAAW9C,GAA7E4C,QAIjBf,EAAAA,IACE,SAAA,CAAAkB,GAAItB,EACJuB,GAAIvB,EACJwB,EAAGnD,EACHoD,OAAQtB,EACRuB,YAhDiB,EAiDjBC,cAAc,QACdC,gBAAiB,GAnDH,IAmDM3B,KAAkD,IAAbA,IACzDU,KAAK,aAKd,CAED,OAAOP,EAAAQ,IAAA,OAAA,CAAMN,KAAK,SAAQ,aAAY,UAAUD,UAAWV,KAG7DZ,EAAQ8C,YAAc"}

package/dist/ct-design-spinner.browser.esm.js

@@ -1,2 +1,5 @@
-import{jsx as n}from"react/jsx-runtime";import{useTheme as r}from"@cleartrip/ct-design-theme";import{__makeTemplateObject as t}from"tslib";import e from"@emotion/styled";import{css as i}from"@emotion/react";var o,a,s=e.div(a||(a=t(["\n  border: ",";\n  border-radius: 50%;\n  border-top: ",";\n  width: ",";\n  height: ",";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ","\n"],["\n  border: ",";\n  border-radius: 50%;\n  border-top: ",";\n  width: ",";\n  height: ",";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ","\n"])),(function(n){var r=n.theme,t=n.height,e=parseInt(t||r.size[12])/6;return"".concat(e>0?e:8,"px solid ").concat(r.color.spinner.primaryBg)}),(function(n){var r=n.theme,t=n.height,e=n.borderColor,i=parseInt(t||r.size[12])/6;return"".concat(i>0?i:8,"px solid ").concat(e||r.color.spinner.primary)}),(function(n){var r=n.width,t=n.theme;return r||t.size[12]}),(function(n){var r=n.height,t=n.theme;return r||t.size[12]}),(function(n){var r=n.css;return r&&i(o||(o=t(["\n\t","\n "],["\n\t","\n "])),r)}));function m(t){var e=t.height,i=void 0===e?"16px":e,o=t.width,a=void 0===o?"16px":o,m=t.borderColor,d=void 0===m?"":m,f=r();return n(s,{theme:f,height:i,width:a,borderColor:d})}export{m as Spinner};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useId as o}from"react";import{makeStyles as t,useStyles as i,useWebMergeStyles as a}from"@cleartrip/ct-design-style-manager";import{keyframes as s,css as n}from"@emotion/css";const l=t(r=>({root:{position:"relative",borderWidth:r.border.width.lg,borderStyle:"solid",borderColor:"rgba(0, 0, 0, 0.3)",borderRadius:r.border.radius[32],borderTopColor:r.color.background.neutral}})),d=n({animation:`${s`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`} 800ms linear infinite`}),c=({width:t=30,height:s=30,gradientColors:n})=>{const c=o(),h=Array.isArray(n)&&n.length>0,m=i(()=>({size:{width:t,height:s}}),[t,s]),g=a([l.root,m.size,d],[m.size,d]),p=a([m.size,d],[m.size,d]);if(h){const o=Math.min(t,s),i=o/2,a=(o-2)/2,l=2*Math.PI*a,d=`url(#${c})`;return r("span",{className:p,role:"status","aria-label":"Loading",children:e("svg",{width:o,height:o,viewBox:`0 0 ${o} ${o}`,fill:"none",children:[r("defs",{children:r("linearGradient",{id:c,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:n.map((e,o)=>r("stop",{offset:o/(n.length-1)*100+"%",stopColor:e},o))})}),r("circle",{cx:i,cy:i,r:a,stroke:d,strokeWidth:2,strokeLinecap:"round",strokeDasharray:`${.65*l} ${.35*l}`,fill:"none"})]})})}return r("span",{role:"status","aria-label":"Loading",className:g})};c.displayName="Spinner";export{c as Spinner};
 //# sourceMappingURL=ct-design-spinner.browser.esm.js.map

package/dist/ct-design-spinner.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-spinner.browser.esm.js","sources":["../packages/components/Spinner/src/style.tsx","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["StyledSpinner","styled","div","_a","theme","height","spinerHeight","parseInt","size","concat","color","spinner","primaryBg","borderColor","primary","width","css","CSS","templateObject_1","__makeTemplateObject","Spinner","_b","_c","_d","useTheme","_jsx"],"mappings":"+MAIO,QAAMA,EAAgBC,EAAOC,ueAAiB,eAIlD,2CAKA,eACqD,gBACG,0XAyBzD,SAnCU,SAACC,OAAEC,EAAKD,EAAAC,MAAEC,EAAMF,EAAAE,OAClBC,EAAeC,SAASF,GAAUD,EAAMI,KAAK,KAAO,EAC1D,MAAO,GAAAC,OAAGH,EAAe,EAAIA,EAAe,EAAC,aAAAG,OAAYL,EAAMM,MAAMC,QAAQC,UAC/E,IAEc,SAACT,GAAE,IAAAC,UAAOC,EAAMF,EAAAE,OAAEQ,EAAWV,EAAAU,YACnCP,EAAeC,SAASF,GAAUD,EAAMI,KAAK,KAAO,EAC1D,MAAO,GAAAC,OAAGH,EAAe,EAAIA,EAAe,EAAa,aAAAG,OAAAI,GAAeT,EAAMM,MAAMC,QAAQG,QAC9F,IACS,SAACX,OAAEY,EAAKZ,EAAAY,MAAEX,EAAKD,EAAAC,MAAO,OAAAW,GAASX,EAAMI,KAAK,GAApB,IACrB,SAACL,OAAEE,EAAMF,EAAAE,OAAED,EAAKD,EAAAC,MAAO,OAAAC,GAAUD,EAAMI,KAAK,GAArB,IAqB/B,SAACL,GAAE,IAAAa,EAAGb,EAAAa,IACN,OAAAA,GACAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,OAAA,OAAA,CAAA,OACkC,SAAtCH,EAFC,IChCoB,SAAAI,EAAQjB,GAAE,IAAAkB,EAAAlB,EAAAE,OAAAA,OAAM,IAAAgB,EAAG,OAAMA,EAAEC,UAAAP,OAAQ,IAAAO,EAAA,SAAQC,EAAApB,EAAAU,YAAAA,OAAW,IAAAU,EAAG,GAAEA,EAC3EnB,EAAQoB,IACd,OAAOC,EAACzB,EAAa,CAACI,MAAOA,EAAOC,OAAQA,EAAQU,MAAOA,EAAOF,YAAaA,GACjF"}
+{"version":3,"file":"ct-design-spinner.browser.esm.js","sources":["../packages/components/Spinner/src/style.ts","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["spinnerStaticStyles","makeStyles","theme","root","position","borderWidth","border","width","lg","borderStyle","borderColor","borderRadius","radius","borderTopColor","color","background","neutral","animationClass","css","animation","keyframes","Spinner","height","gradientColors","gradientId","useId","hasGradient","Array","isArray","length","dynamicStyles","useStyles","size","rootClassName","useWebMergeStyles","gradientWrapperClassName","Math","min","center","circumference","PI","strokeUrl","_jsx","className","role","children","_jsxs","viewBox","fill","id","x1","y1","x2","y2","map","index","offset","stopColor","cx","cy","r","stroke","strokeWidth","strokeLinecap","strokeDasharray","displayName"],"mappings":"wOAEO,MAAMA,EAAsBC,EAAYC,IAAW,CACxDC,KAAM,CACJC,SAAU,WACVC,YAAaH,EAAMI,OAAOC,MAAMC,GAChCC,YAAa,QACbC,YAAa,qBACbC,aAAcT,EAAMI,OAAOM,OAAO,IAClCC,eAAgBX,EAAMY,MAAMC,WAAWC,YCIrCC,EAAiBC,EAAI,CACzBC,UAAW,GANSC,CAAS;;;4BAWzBC,EAAU,EAAGd,QAAQ,GAAIe,SAAS,GAAIC,qBAC1C,MAAMC,EAAaC,IACbC,EAAcC,MAAMC,QAAQL,IAAmBA,EAAeM,OAAS,EAEvEC,EAAgBC,EACpB,KAAO,CACLC,KAAM,CACJzB,QACAe,YAGJ,CAACf,EAAOe,IAGJW,EAAgBC,EACpB,CAAClC,EAAoBG,KAAM2B,EAAcE,KAAMf,GAC/C,CAACa,EAAcE,KAAMf,IAGjBkB,EAA2BD,EAC/B,CAACJ,EAAcE,KAAMf,GACrB,CAACa,EAAcE,KAAMf,IAGvB,GAAIS,EAAa,CACf,MAAMM,EAAOI,KAAKC,IAAI9B,EAAOe,GACvBgB,EAASN,EAAO,EAChBpB,GAAUoB,EA7BS,GA6BsB,EACzCO,EAAgB,EAAIH,KAAKI,GAAK5B,EAC9B6B,EAAY,QAAQjB,KAE1B,OACEkB,EAAA,OAAA,CAAMC,UAAWR,EAA0BS,KAAK,SAAoB,aAAA,UAClEC,SAAAC,EAAA,MAAA,CAAKvC,MAAOyB,EAAMV,OAAQU,EAAMe,QAAS,OAAOf,KAAQA,IAAQgB,KAAK,iBACnEN,EACE,OAAA,CAAAG,SAAAH,EAAA,iBAAA,CAAgBO,GAAIzB,EAAY0B,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAAOC,GAAG,KAAIR,SAC9DtB,EAAe+B,IAAI,CAACxC,EAAOyC,IAC1Bb,EAAkB,OAAA,CAAAc,OAAYD,GAAShC,EAAeM,OAAS,GAAM,IAA3C,IAAmD4B,UAAW3C,GAA7EyC,QAIjBb,EACE,SAAA,CAAAgB,GAAIpB,EACJqB,GAAIrB,EACJsB,EAAGhD,EACHiD,OAAQpB,EACRqB,YAhDiB,EAiDjBC,cAAc,QACdC,gBAAiB,GAnDH,IAmDMzB,KAAkD,IAAbA,IACzDS,KAAK,aAKd,CAED,OAAON,EAAA,OAAA,CAAME,KAAK,SAAQ,aAAY,UAAUD,UAAWV,KAG7DZ,EAAQ4C,YAAc"}

package/dist/ct-design-spinner.cjs.js

@@ -1,40 +1,52 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ctDesignTheme = require('@cleartrip/ct-design-theme');
-var tslib = require('tslib');
-var styled = require('@emotion/styled');
-var react = require('@emotion/react');
+var react = require('react');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var css = require('@emotion/css');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+const spinnerStaticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+    root: {
+        position: 'relative',
+        borderWidth: theme.border.width.lg,
+        borderStyle: 'solid',
+        borderColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: theme.border.radius[32],
+        borderTopColor: theme.color.background.neutral,
+    },
+}));
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var StyledSpinner = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"], ["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, height = _a.height;
-    var spinerHeight = parseInt(height || theme.size[12]) / 6;
-    return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(theme.color.spinner.primaryBg);
-}, function (_a) {
-    var theme = _a.theme, height = _a.height, borderColor = _a.borderColor;
-    var spinerHeight = parseInt(height || theme.size[12]) / 6;
-    return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(borderColor || theme.color.spinner.primary);
-}, function (_a) {
-    var width = _a.width, theme = _a.theme;
-    return width || theme.size[12];
-}, function (_a) {
-    var height = _a.height, theme = _a.theme;
-    return height || theme.size[12];
-}, function (_a) {
-    var css = _a.css;
-    return css && react.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css);
+const spinAnimation = css.keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+const animationClass = css.css({
+    animation: `${spinAnimation} 800ms linear infinite`,
 });
-var templateObject_1, templateObject_2;
-
-function Spinner(_a) {
-    var _b = _a.height, height = _b === void 0 ? '16px' : _b, _c = _a.width, width = _c === void 0 ? '16px' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '' : _d;
-    var theme = ctDesignTheme.useTheme();
-    return jsxRuntime.jsx(StyledSpinner, { theme: theme, height: height, width: width, borderColor: borderColor });
-}
+const STROKE_DASH_RATIO = 0.65;
+const DEFAULT_STROKE_WIDTH = 2;
+const Spinner = ({ width = 30, height = 30, gradientColors }) => {
+    const gradientId = react.useId();
+    const hasGradient = Array.isArray(gradientColors) && gradientColors.length > 0;
+    const dynamicStyles = ctDesignStyleManager.useStyles(() => ({
+        size: {
+            width,
+            height,
+        },
+    }), [width, height]);
+    const rootClassName = ctDesignStyleManager.useWebMergeStyles([spinnerStaticStyles.root, dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+    const gradientWrapperClassName = ctDesignStyleManager.useWebMergeStyles([dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+    if (hasGradient) {
+        const size = Math.min(width, height);
+        const center = size / 2;
+        const radius = (size - DEFAULT_STROKE_WIDTH) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const strokeUrl = `url(#${gradientId})`;
+        return (jsxRuntime.jsx("span", { className: gradientWrapperClassName, role: 'status', "aria-label": 'Loading', children: jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'none', children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: gradientId, x1: '0%', y1: '0%', x2: '100%', y2: '0%', children: gradientColors.map((color, index) => (jsxRuntime.jsx("stop", { offset: `${(index / (gradientColors.length - 1)) * 100}%`, stopColor: color }, index))) }) }), jsxRuntime.jsx("circle", { cx: center, cy: center, r: radius, stroke: strokeUrl, strokeWidth: DEFAULT_STROKE_WIDTH, strokeLinecap: 'round', strokeDasharray: `${circumference * STROKE_DASH_RATIO} ${circumference * (1 - STROKE_DASH_RATIO)}`, fill: 'none' })] }) }));
+    }
+    return jsxRuntime.jsx("span", { role: 'status', "aria-label": 'Loading', className: rootClassName });
+};
+Spinner.displayName = 'Spinner';
 
 exports.Spinner = Spinner;
 //# sourceMappingURL=ct-design-spinner.cjs.js.map

package/dist/ct-design-spinner.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-spinner.cjs.js","sources":["../packages/components/Spinner/src/style.tsx","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["styled","CSS","__makeTemplateObject","useTheme","_jsx"],"mappings":";;;;;;;;;;;;AAIO,IAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,qiBAAc,cACzC,EAGT,0CAEa,EAGb,cACQ,EAA6C,eAC5C,EAA+C,yXAqBvD,EAIF,IACD,CApCW,CAAA,CAAA,EAAA,UAAC,EAAiB,EAAA;QAAf,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,CAAA;AACxB,IAAA,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAC5D,OAAO,EAAA,CAAA,MAAA,CAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,EAAA,WAAA,CAAA,CAAA,MAAA,CAAY,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAE,CAAC;AAC3F,CAAC,EAEa,UAAC,EAA8B,EAAA;AAA5B,IAAA,IAAA,KAAK,WAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AACzC,IAAA,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAC5D,OAAO,EAAA,CAAA,MAAA,CAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,EAAY,WAAA,CAAA,CAAA,MAAA,CAAA,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAE,CAAC;AACxG,CAAC,EACQ,UAAC,EAAgB,EAAA;QAAd,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAAO,IAAA,OAAA,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAAvB,CAAuB,EAC5C,UAAC,EAAiB,EAAA;QAAf,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAAO,IAAA,OAAA,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAAxB,CAAwB,EAqBvD,UAAC,EAAO,EAAA;AAAL,IAAA,IAAA,GAAG,GAAA,EAAA,CAAA,GAAA,CAAA;IACN,OAAA,GAAG,IACHC,SAAG,CAAA,gBAAA,KAAA,gBAAA,GAAAC,0BAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,EAAA,CAAA,MACJ,EAAsC,KACvC,CADC,CAAA,CAAA,EAAA,GAAsC,CACvC,CAAA;AAHE,CAGF,CACD,CAAC;;;ACpCsB,SAAA,OAAO,CAAC,EAAmE,EAAA;AAAjE,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,MAAe,EAAf,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAA,EAAA,EAAE,aAAc,EAAd,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA,EAAE,EAAA,GAAA,EAAA,CAAA,WAAgB,EAAhB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;AACjF,IAAA,IAAM,KAAK,GAAGC,sBAAQ,EAAE,CAAC;AACzB,IAAA,OAAOC,eAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AACjG;;;;"}
+{"version":3,"file":"ct-design-spinner.cjs.js","sources":["../packages/components/Spinner/src/style.ts","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["makeStyles","keyframes","css","useId","useStyles","useWebMergeStyles","_jsx","_jsxs"],"mappings":"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"}

package/dist/ct-design-spinner.esm.js

@@ -1,34 +1,50 @@
-import { jsx } from 'react/jsx-runtime';
-import { useTheme } from '@cleartrip/ct-design-theme';
-import { __makeTemplateObject } from 'tslib';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { keyframes, css } from '@emotion/css';
 
-var StyledSpinner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"], ["\n  border: ", ";\n  border-radius: 50%;\n  border-top: ", ";\n  width: ", ";\n  height: ", ";\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n\n  @-webkit-keyframes spin {\n    0% {\n      -webkit-transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, height = _a.height;
-    var spinerHeight = parseInt(height || theme.size[12]) / 6;
-    return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(theme.color.spinner.primaryBg);
-}, function (_a) {
-    var theme = _a.theme, height = _a.height, borderColor = _a.borderColor;
-    var spinerHeight = parseInt(height || theme.size[12]) / 6;
-    return "".concat(spinerHeight > 0 ? spinerHeight : 8, "px solid ").concat(borderColor || theme.color.spinner.primary);
-}, function (_a) {
-    var width = _a.width, theme = _a.theme;
-    return width || theme.size[12];
-}, function (_a) {
-    var height = _a.height, theme = _a.theme;
-    return height || theme.size[12];
-}, function (_a) {
-    var css$1 = _a.css;
-    return css$1 && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n "], ["\n\t", "\n "])), css$1);
-});
-var templateObject_1, templateObject_2;
+const spinnerStaticStyles = makeStyles((theme) => ({
+    root: {
+        position: 'relative',
+        borderWidth: theme.border.width.lg,
+        borderStyle: 'solid',
+        borderColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: theme.border.radius[32],
+        borderTopColor: theme.color.background.neutral,
+    },
+}));
 
-function Spinner(_a) {
-    var _b = _a.height, height = _b === void 0 ? '16px' : _b, _c = _a.width, width = _c === void 0 ? '16px' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '' : _d;
-    var theme = useTheme();
-    return jsx(StyledSpinner, { theme: theme, height: height, width: width, borderColor: borderColor });
-}
+const spinAnimation = keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+const animationClass = css({
+    animation: `${spinAnimation} 800ms linear infinite`,
+});
+const STROKE_DASH_RATIO = 0.65;
+const DEFAULT_STROKE_WIDTH = 2;
+const Spinner = ({ width = 30, height = 30, gradientColors }) => {
+    const gradientId = useId();
+    const hasGradient = Array.isArray(gradientColors) && gradientColors.length > 0;
+    const dynamicStyles = useStyles(() => ({
+        size: {
+            width,
+            height,
+        },
+    }), [width, height]);
+    const rootClassName = useWebMergeStyles([spinnerStaticStyles.root, dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+    const gradientWrapperClassName = useWebMergeStyles([dynamicStyles.size, animationClass], [dynamicStyles.size, animationClass]);
+    if (hasGradient) {
+        const size = Math.min(width, height);
+        const center = size / 2;
+        const radius = (size - DEFAULT_STROKE_WIDTH) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const strokeUrl = `url(#${gradientId})`;
+        return (jsx("span", { className: gradientWrapperClassName, role: 'status', "aria-label": 'Loading', children: jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'none', children: [jsx("defs", { children: jsx("linearGradient", { id: gradientId, x1: '0%', y1: '0%', x2: '100%', y2: '0%', children: gradientColors.map((color, index) => (jsx("stop", { offset: `${(index / (gradientColors.length - 1)) * 100}%`, stopColor: color }, index))) }) }), jsx("circle", { cx: center, cy: center, r: radius, stroke: strokeUrl, strokeWidth: DEFAULT_STROKE_WIDTH, strokeLinecap: 'round', strokeDasharray: `${circumference * STROKE_DASH_RATIO} ${circumference * (1 - STROKE_DASH_RATIO)}`, fill: 'none' })] }) }));
+    }
+    return jsx("span", { role: 'status', "aria-label": 'Loading', className: rootClassName });
+};
+Spinner.displayName = 'Spinner';
 
 export { Spinner };
 //# sourceMappingURL=ct-design-spinner.esm.js.map

package/dist/ct-design-spinner.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-spinner.esm.js","sources":["../packages/components/Spinner/src/style.tsx","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["css","CSS","_jsx"],"mappings":";;;;;;AAIO,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,+hBAAc,cACzC,EAGT,0CAEa,EAGb,cACQ,EAA6C,eAC5C,EAA+C,yXAqBvD,EAIF,IACD,CApCW,CAAA,CAAA,EAAA,UAAC,EAAiB,EAAA;QAAf,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,CAAA;AACxB,IAAA,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAC5D,OAAO,EAAA,CAAA,MAAA,CAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,EAAA,WAAA,CAAA,CAAA,MAAA,CAAY,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAE,CAAC;AAC3F,CAAC,EAEa,UAAC,EAA8B,EAAA;AAA5B,IAAA,IAAA,KAAK,WAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AACzC,IAAA,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAC5D,OAAO,EAAA,CAAA,MAAA,CAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,EAAY,WAAA,CAAA,CAAA,MAAA,CAAA,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAE,CAAC;AACxG,CAAC,EACQ,UAAC,EAAgB,EAAA;QAAd,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAAO,IAAA,OAAA,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAAvB,CAAuB,EAC5C,UAAC,EAAiB,EAAA;QAAf,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAAO,IAAA,OAAA,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAAxB,CAAwB,EAqBvD,UAAC,EAAO,EAAA;AAAL,IAAA,IAAAA,KAAG,GAAA,EAAA,CAAA,GAAA,CAAA;IACN,OAAAA,KAAG,IACHC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,EAAA,CAAA,MACJ,EAAsC,KACvC,CADC,CAAA,CAAA,EAAAD,KAAsC,CACvC,CAAA;AAHE,CAGF,CACD,CAAC;;;ACpCsB,SAAA,OAAO,CAAC,EAAmE,EAAA;AAAjE,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,MAAe,EAAf,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAA,EAAA,EAAE,aAAc,EAAd,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA,EAAE,EAAA,GAAA,EAAA,CAAA,WAAgB,EAAhB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;AACjF,IAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,OAAOE,IAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AACjG;;;;"}
+{"version":3,"file":"ct-design-spinner.esm.js","sources":["../packages/components/Spinner/src/style.ts","../packages/components/Spinner/src/Spinner.tsx"],"sourcesContent":[null,null],"names":["_jsx","_jsxs"],"mappings":"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"}