premium-react-loaders 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Premium React Loaders
 
-A comprehensive collection of **20 premium, production-ready loading components** for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.
+A comprehensive collection of **25 premium, production-ready loading components** for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.
 
 [![npm version](https://img.shields.io/npm/v/premium-react-loaders.svg)](https://www.npmjs.com/package/premium-react-loaders)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -11,11 +11,14 @@ A comprehensive collection of **20 premium, production-ready loading components*
 
 📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
 
-See all 20 components in action with interactive examples and customization options.
+See all 25 components in action with interactive examples and customization options.
 
 ## Features
 
-- **20 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
+- **25 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
+- **Size Presets** - Easy sizing with `xs`, `sm`, `md`, `lg`, `xl` presets ✨ *New in v1.2.0*
+- **Reduced Motion Support** - Respects `prefers-reduced-motion` for accessibility ✨ *New in v1.2.0*
+- **Animation Direction Control** - Reverse animations with `reverse` prop ✨ *New in v1.2.0*
 - **Full TypeScript Support** with exported type definitions
 - **Tailwind CSS Integration** for easy customization
 - **Tree-shakeable** - only bundle what you use
@@ -80,14 +83,16 @@ function App() {
       <Skeleton width={200} height={20} />
       <SkeletonCard hasAvatar lines={3} />
 
-      {/* Spinners */}
-      <SpinnerCircle size={40} color="#3b82f6" />
+      {/* Spinners with Size Presets (v1.2.0+) */}
+      <SpinnerCircle size="lg" color="#3b82f6" />
+      <SpinnerCircle size="md" reverse /> {/* Reverse animation */}
 
       {/* Progress Bars */}
       <ProgressBar value={75} showValue />
+      <ProgressBar indeterminate reverse /> {/* Reverse sweep */}
 
       {/* Pulse Loaders */}
-      <PulseDots dotCount={3} />
+      <PulseDots size="sm" dotCount={3} />
     </div>
   );
 }
@@ -268,6 +273,50 @@ import { LoaderOverlay, SkeletonPage, SpinnerCircle } from 'premium-react-loader
 </LoaderOverlay>
 ```
 
+### New in v1.2.0
+
+**Size Presets** - Use semantic size names instead of pixel values:
+
+```tsx
+import { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';
+
+// Size presets: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+<SpinnerCircle size="xs" />  {/* 16px */}
+<SpinnerCircle size="sm" />  {/* 24px */}
+<SpinnerCircle size="md" />  {/* 40px - default */}
+<SpinnerCircle size="lg" />  {/* 56px */}
+<SpinnerCircle size="xl" />  {/* 72px */}
+
+// Still works with numbers and CSS strings
+<SpinnerCircle size={50} />
+<SpinnerCircle size="3rem" />
+```
+
+**Reduced Motion Support** - Automatically respects user accessibility preferences:
+
+```tsx
+// Respects prefers-reduced-motion by default
+<SpinnerCircle size="md" />
+
+// Disable reduced motion support if needed
+<SpinnerCircle size="md" respectMotionPreference={false} />
+```
+
+**Animation Direction Control** - Reverse animations for creative effects:
+
+```tsx
+import { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';
+
+// Reverse spinner rotation (counter-clockwise)
+<SpinnerCircle size="lg" reverse />
+
+// Reverse progress sweep direction
+<ProgressBar indeterminate reverse />
+
+// Reverse pulse/dot animation sequence
+<PulseDots size="md" reverse />
+```
+
 ## Customization
 
 All components support multiple customization methods:

package/dist/components/progress/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GAuGvB,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GA4GvB,CAAC"}

package/dist/components/progress/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHA+G1B,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHAsH1B,CAAC"}

package/dist/components/progress/ProgressRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAyHxB,CAAC"}
+{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAgIxB,CAAC"}

package/dist/components/pulse/PulseBars.d.ts

@@ -6,8 +6,8 @@ import { PulseBarsProps } from '../../types';
  *
  * @example
  * ```tsx
- * <PulseBars size={40} color="#3b82f6" />
- * <PulseBars size={48} barCount={6} speed="fast" />
+ * <PulseBars size="lg" color="#3b82f6" />
+ * <PulseBars size="md" barCount={6} speed="fast" reverse />
  * ```
  */
 export declare const PulseBars: import('react').ForwardRefExoticComponent<PulseBarsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/pulse/PulseBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA4DrB,CAAC"}
+{"version":3,"file":"PulseBars.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAiErB,CAAC"}

package/dist/components/pulse/PulseDots.d.ts

@@ -6,8 +6,8 @@ import { PulseDotsProps } from '../../types';
  *
  * @example
  * ```tsx
- * <PulseDots size={40} color="#3b82f6" />
- * <PulseDots size={32} dotCount={5} speed="fast" />
+ * <PulseDots size="lg" color="#3b82f6" />
+ * <PulseDots size="sm" dotCount={5} speed="fast" reverse />
  * ```
  */
 export declare const PulseDots: import('react').ForwardRefExoticComponent<PulseDotsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/pulse/PulseDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAmDrB,CAAC"}
+{"version":3,"file":"PulseDots.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAsDrB,CAAC"}

package/dist/components/pulse/PulseWave.d.ts

@@ -6,8 +6,8 @@ import { PulseWaveProps } from '../../types';
  *
  * @example
  * ```tsx
- * <PulseWave size={40} color="#3b82f6" />
- * <PulseWave size={32} barCount={7} speed="slow" />
+ * <PulseWave size="lg" color="#3b82f6" />
+ * <PulseWave size="sm" barCount={7} speed="slow" reverse />
  * ```
  */
 export declare const PulseWave: import('react').ForwardRefExoticComponent<PulseWaveProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/pulse/PulseWave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GAyDrB,CAAC"}
+{"version":3,"file":"PulseWave.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/PulseWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,2GA6DrB,CAAC"}

package/dist/components/pulse/TypingIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHAuD3B,CAAC"}
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/TypingIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,iHA0D3B,CAAC"}

package/dist/components/spinner/SpinnerBars.d.ts

@@ -6,8 +6,8 @@ import { SpinnerBarsProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerBars size={40} color="#3b82f6" />
- * <SpinnerBars size={32} barCount={5} speed="fast" />
+ * <SpinnerBars size="lg" color="#3b82f6" />
+ * <SpinnerBars size="sm" barCount={5} speed="fast" reverse />
  * ```
  */
 export declare const SpinnerBars: import('react').ForwardRefExoticComponent<SpinnerBarsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAoDvB,CAAC"}
+{"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAwDvB,CAAC"}

package/dist/components/spinner/SpinnerCircle.d.ts

@@ -7,7 +7,8 @@ import { SpinnerCircleProps } from '../../types';
  * @example
  * ```tsx
  * <SpinnerCircle size={40} color="#3b82f6" />
- * <SpinnerCircle size={24} thickness={3} speed="fast" />
+ * <SpinnerCircle size="lg" thickness={3} speed="fast" />
+ * <SpinnerCircle size="md" reverse />
  * ```
  */
 export declare const SpinnerCircle: import('react').ForwardRefExoticComponent<SpinnerCircleProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAoDzB,CAAC"}
+{"version":3,"file":"SpinnerCircle.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GA0DzB,CAAC"}

package/dist/components/spinner/SpinnerDots.d.ts

@@ -6,8 +6,8 @@ import { SpinnerDotsProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerDots size={40} color="#3b82f6" />
- * <SpinnerDots size={48} dotCount={8} dotSize={6} />
+ * <SpinnerDots size="lg" color="#3b82f6" />
+ * <SpinnerDots size="md" dotCount={8} dotSize={6} reverse />
  * ```
  */
 export declare const SpinnerDots: import('react').ForwardRefExoticComponent<SpinnerDotsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAmEvB,CAAC"}
+{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAyEvB,CAAC"}

package/dist/components/spinner/SpinnerGrid.d.ts

@@ -6,8 +6,8 @@ import { SpinnerGridProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerGrid size={40} color="#3b82f6" />
- * <SpinnerGrid size={48} gridSize={4} />
+ * <SpinnerGrid size="lg" color="#3b82f6" />
+ * <SpinnerGrid size="md" gridSize={4} reverse />
  * ```
  */
 export declare const SpinnerGrid: import('react').ForwardRefExoticComponent<SpinnerGridProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAgEvB,CAAC"}
+{"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAqEvB,CAAC"}

package/dist/components/spinner/SpinnerPulse.d.ts

@@ -6,9 +6,9 @@ import { SpinnerPulseProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerPulse size={60} color="#3b82f6" />
- * <SpinnerPulse size={80} pulses={3} />
- * <SpinnerPulse size={50} maxScale={2.5} speed="slow" />
+ * <SpinnerPulse size="lg" color="#3b82f6" />
+ * <SpinnerPulse size="xl" pulses={3} reverse />
+ * <SpinnerPulse size="md" maxScale={2.5} speed="slow" />
  * ```
  */
 export declare const SpinnerPulse: import('react').ForwardRefExoticComponent<SpinnerPulseProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerPulse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAsExB,CAAC"}
+{"version":3,"file":"SpinnerPulse.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA0ExB,CAAC"}

package/dist/components/spinner/SpinnerRing.d.ts

@@ -6,9 +6,9 @@ import { SpinnerRingProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerRing size={40} color="#8b5cf6" />
- * <SpinnerRing size={32} thickness={3} speed="slow" />
- * <SpinnerRing size={40} color="#3b82f6" secondaryColor="#e0e0e0" />
+ * <SpinnerRing size="lg" color="#8b5cf6" />
+ * <SpinnerRing size="sm" thickness={3} speed="slow" />
+ * <SpinnerRing size="md" color="#3b82f6" secondaryColor="#e0e0e0" reverse />
  * ```
  */
 export declare const SpinnerRing: import('react').ForwardRefExoticComponent<SpinnerRingProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA2CvB,CAAC"}
+{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GAiDvB,CAAC"}

package/dist/components/spinner/SpinnerWave.d.ts

@@ -6,9 +6,9 @@ import { SpinnerWaveProps } from '../../types';
  *
  * @example
  * ```tsx
- * <SpinnerWave size={60} color="#3b82f6" />
- * <SpinnerWave size={80} ripples={5} />
- * <SpinnerWave size={50} maxScale={2.5} speed="fast" />
+ * <SpinnerWave size="lg" color="#3b82f6" />
+ * <SpinnerWave size="xl" ripples={5} reverse />
+ * <SpinnerWave size="md" maxScale={2.5} speed="fast" />
  * ```
  */
 export declare const SpinnerWave: import('react').ForwardRefExoticComponent<SpinnerWaveProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerWave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA0DvB,CAAC"}
+{"version":3,"file":"SpinnerWave.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerWave.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,CAAC"}

package/dist/index14.cjs

@@ -2,14 +2,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
 const SpinnerCircle = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "spinner-circle",
@@ -18,6 +21,8 @@ const SpinnerCircle = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -36,7 +41,8 @@ const SpinnerCircle = react.forwardRef(
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
-              animationDuration: colors.getAnimationDuration(speed)
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             viewBox: "0 0 50 50",
             children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index14.cjs","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,mBAAmBC,OAAAA,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAAH,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index14.cjs","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size=\"lg\" thickness={3} speed=\"fast\" />\n * <SpinnerCircle size=\"md\" reverse />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: effectiveDuration,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,mBAAmB;AAAA,cACnB,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,YAE5C,SAAQ;AAAA,YAER,UAAAF,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index14.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
+import { normalizeSize } from "./index4.js";
 const SpinnerCircle = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "spinner-circle",
@@ -16,6 +19,8 @@ const SpinnerCircle = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -34,7 +39,8 @@ const SpinnerCircle = forwardRef(
             style: {
               width: normalizeSize(size),
               height: normalizeSize(size),
-              animationDuration: getAnimationDuration(speed)
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             viewBox: "0 0 50 50",
             children: /* @__PURE__ */ jsx(

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":[],"mappings":";;;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,mBAAmB,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index14.js","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size=\"lg\" thickness={3} speed=\"fast\" />\n * <SpinnerCircle size=\"md\" reverse />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: effectiveDuration,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,mBAAmB;AAAA,cACnB,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,YAE5C,SAAQ;AAAA,YAER,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}

package/dist/index15.cjs

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerRing = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "spinner-ring",
@@ -19,6 +22,8 @@ const SpinnerRing = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -39,7 +44,8 @@ const SpinnerRing = react.forwardRef(
               height: colors.normalizeSize(size),
               border: `${thickness}px solid ${secondaryColor}`,
               borderTopColor: color,
-              animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             }
           }
         )

package/dist/index15.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index15.cjs","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size={40} color=\"#8b5cf6\" />\n * <SpinnerRing size={32} thickness={3} speed=\"slow\" />\n * <SpinnerRing size={40} color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid ${secondaryColor}`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,QAAQ,GAAG,SAAS,YAAY,cAAc;AAAA,cAC9C,gBAAgB;AAAA,cAChB,WAAW,kBAAkBC,4BAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,UAC1D;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index15.cjs","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size=\"lg\" color=\"#8b5cf6\" />\n * <SpinnerRing size=\"sm\" thickness={3} speed=\"slow\" />\n * <SpinnerRing size=\"md\" color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" reverse />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid ${secondaryColor}`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${effectiveDuration} linear infinite`,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,QAAQ,GAAG,SAAS,YAAY,cAAc;AAAA,cAC9C,gBAAgB;AAAA,cAChB,WAAW,kBAAkB,iBAAiB;AAAA,cAC9C,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index15.js

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { normalizeSize } from "./index4.js";
 const SpinnerRing = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "spinner-ring",
@@ -17,6 +20,8 @@ const SpinnerRing = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -37,7 +42,8 @@ const SpinnerRing = forwardRef(
               height: normalizeSize(size),
               border: `${thickness}px solid ${secondaryColor}`,
               borderTopColor: color,
-              animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             }
           }
         )

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.js","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size={40} color=\"#8b5cf6\" />\n * <SpinnerRing size={32} thickness={3} speed=\"slow\" />\n * <SpinnerRing size={40} color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid ${secondaryColor}`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,QAAQ,GAAG,SAAS,YAAY,cAAc;AAAA,cAC9C,gBAAgB;AAAA,cAChB,WAAW,kBAAkB,qBAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,UAC1D;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index15.js","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size=\"lg\" color=\"#8b5cf6\" />\n * <SpinnerRing size=\"sm\" thickness={3} speed=\"slow\" />\n * <SpinnerRing size=\"md\" color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" reverse />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid ${secondaryColor}`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${effectiveDuration} linear infinite`,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,QAAQ,GAAG,SAAS,YAAY,cAAc;AAAA,cAC9C,gBAAgB;AAAA,cAChB,WAAW,kBAAkB,iBAAiB;AAAA,cAC9C,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index16.cjs

@@ -3,14 +3,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
 const SpinnerDots = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     dotCount = 8,
     dotSize = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "spinner-dots",
@@ -19,6 +22,8 @@ const SpinnerDots = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
     const radius = (sizeValue - dotSizeValue) / 2;
@@ -40,7 +45,8 @@ const SpinnerDots = react.forwardRef(
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
-              animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             children: Array.from({ length: dotCount }).map((_, index) => {
               const angle = 360 / dotCount * index;

package/dist/index16.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index16.cjs","sources":["../src/components/spinner/SpinnerDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * SpinnerDots - Multiple dots rotating around center\n *\n * A spinner with multiple dots arranged in a circle that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerDots size={40} color=\"#3b82f6\" />\n * <SpinnerDots size={48} dotCount={8} dotSize={6} />\n * ```\n */\nexport const SpinnerDots = forwardRef<HTMLDivElement, SpinnerDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 8,\n      dotSize = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const dotSizeValue = parseSizeToNumber(dotSize, 4);\n    const radius = (sizeValue - dotSizeValue) / 2;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, index) => {\n            const angle = (360 / dotCount) * index;\n            const radian = (angle * Math.PI) / 180;\n            const x = radius * Math.cos(radian) + radius;\n            const y = radius * Math.sin(radian) + radius;\n\n            return (\n              <div\n                key={index}\n                className=\"absolute rounded-full\"\n                style={{\n                  width: normalizeSize(dotSize),\n                  height: normalizeSize(dotSize),\n                  backgroundColor: color,\n                  left: `${x}px`,\n                  top: `${y}px`,\n                  opacity: 1 - (index / dotCount) * 0.7, // Fade effect\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerDots.displayName = 'SpinnerDots';\n"],"names":["forwardRef","parseSizeToNumber","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,eAAeA,OAAAA,kBAAkB,SAAS,CAAC;AACjD,UAAM,UAAU,YAAY,gBAAgB;AAE5C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,WAAW,kBAAkBC,4BAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,YAGzD,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,oBAAM,QAAS,MAAM,WAAY;AACjC,oBAAM,SAAU,QAAQ,KAAK,KAAM;AACnC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AACtC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AAEtC,qBACEH,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,oBAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,oBAC7B,iBAAiB;AAAA,oBACjB,MAAM,GAAG,CAAC;AAAA,oBACV,KAAK,GAAG,CAAC;AAAA,oBACT,SAAS,IAAK,QAAQ,WAAY;AAAA;AAAA,kBAAA;AAAA,gBACpC;AAAA,gBATK;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index16.cjs","sources":["../src/components/spinner/SpinnerDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerDotsProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerDots - Multiple dots rotating around center\n *\n * A spinner with multiple dots arranged in a circle that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerDots size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerDots size=\"md\" dotCount={8} dotSize={6} reverse />\n * ```\n */\nexport const SpinnerDots = forwardRef<HTMLDivElement, SpinnerDotsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      dotCount = 8,\n      dotSize = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const dotSizeValue = parseSizeToNumber(dotSize, 4);\n    const radius = (sizeValue - dotSizeValue) / 2;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animation: `spinner-rotate ${effectiveDuration} linear infinite`,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, index) => {\n            const angle = (360 / dotCount) * index;\n            const radian = (angle * Math.PI) / 180;\n            const x = radius * Math.cos(radian) + radius;\n            const y = radius * Math.sin(radian) + radius;\n\n            return (\n              <div\n                key={index}\n                className=\"absolute rounded-full\"\n                style={{\n                  width: normalizeSize(dotSize),\n                  height: normalizeSize(dotSize),\n                  backgroundColor: color,\n                  left: `${x}px`,\n                  top: `${y}px`,\n                  opacity: 1 - (index / dotCount) * 0.7, // Fade effect\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerDots.displayName = 'SpinnerDots';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","parseSizeToNumber","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,eAAeA,OAAAA,kBAAkB,SAAS,CAAC;AACjD,UAAM,UAAU,YAAY,gBAAgB;AAE5C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,WAAW,kBAAkB,iBAAiB;AAAA,cAC9C,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,YAG3C,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,oBAAM,QAAS,MAAM,WAAY;AACjC,oBAAM,SAAU,QAAQ,KAAK,KAAM;AACnC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AACtC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AAEtC,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,oBAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,oBAC7B,iBAAiB;AAAA,oBACjB,MAAM,GAAG,CAAC;AAAA,oBACV,KAAK,GAAG,CAAC;AAAA,oBACT,SAAS,IAAK,QAAQ,WAAY;AAAA;AAAA,kBAAA;AAAA,gBACpC;AAAA,gBATK;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}