premium-react-loaders 1.0.2 → 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/progress/ProgressSteps.d.ts

@@ -0,0 +1,16 @@
+import { ProgressStepsProps } from '../../types';
+/**
+ * ProgressSteps - Multi-step progress indicator
+ *
+ * A step-by-step progress indicator for wizards, forms, and workflows.
+ *
+ * @example
+ * ```tsx
+ * <ProgressSteps steps={4} currentStep={1} />
+ * <ProgressSteps steps={5} currentStep={2} labels={['Info', 'Review', 'Payment', 'Confirm', 'Done']} />
+ * <ProgressSteps steps={3} currentStep={1} orientation="vertical" />
+ * <ProgressSteps steps={4} currentStep={2} connector="none" />
+ * ```
+ */
+export declare const ProgressSteps: import('react').ForwardRefExoticComponent<ProgressStepsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressSteps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSteps.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressSteps.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+GAuIzB,CAAC"}

package/dist/components/progress/index.d.ts

@@ -1,4 +1,5 @@
 export { ProgressBar } from './ProgressBar';
 export { ProgressCircle } from './ProgressCircle';
 export { ProgressRing } from './ProgressRing';
+export { ProgressSteps } from './ProgressSteps';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,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

@@ -0,0 +1,16 @@
+import { TypingIndicatorProps } from '../../types';
+/**
+ * TypingIndicator - Chat typing indicator
+ *
+ * A loader for messaging/chat applications showing typing activity.
+ *
+ * @example
+ * ```tsx
+ * <TypingIndicator />
+ * <TypingIndicator variant="fade" />
+ * <TypingIndicator dotCount={5} color="#3b82f6" />
+ * <TypingIndicator dotSize={10} gap={6} />
+ * ```
+ */
+export declare const TypingIndicator: import('react').ForwardRefExoticComponent<TypingIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TypingIndicator.d.ts.map

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

@@ -0,0 +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,iHA0D3B,CAAC"}

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

@@ -1,4 +1,5 @@
 export { PulseDots } from './PulseDots';
 export { PulseWave } from './PulseWave';
 export { PulseBars } from './PulseBars';
+export { TypingIndicator } from './TypingIndicator';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/skeleton/SkeletonForm.d.ts

@@ -0,0 +1,16 @@
+import { SkeletonFormProps } from '../../types';
+/**
+ * SkeletonForm - Form loading skeleton
+ *
+ * A skeleton loader for form layouts with configurable fields, labels, and submit button.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonForm />
+ * <SkeletonForm fields={5} showLabels={true} />
+ * <SkeletonForm fields={3} showButton={false} />
+ * <SkeletonForm fields={4} buttonPosition="right" />
+ * ```
+ */
+export declare const SkeletonForm: import('react').ForwardRefExoticComponent<SkeletonFormProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonForm.d.ts.map

package/dist/components/skeleton/SkeletonForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonForm.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAmFxB,CAAC"}

package/dist/components/skeleton/index.d.ts

@@ -6,4 +6,5 @@ export { SkeletonCard } from './SkeletonCard';
 export { SkeletonList } from './SkeletonList';
 export { SkeletonTable } from './SkeletonTable';
 export { SkeletonPage } from './SkeletonPage';
+export { SkeletonForm } from './SkeletonForm';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,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

@@ -0,0 +1,15 @@
+import { SpinnerPulseProps } from '../../types';
+/**
+ * SpinnerPulse - Heartbeat pulse spinner
+ *
+ * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.
+ *
+ * @example
+ * ```tsx
+ * <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>>;
+//# sourceMappingURL=SpinnerPulse.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,15 @@
+import { SpinnerWaveProps } from '../../types';
+/**
+ * SpinnerWave - Ripple wave spinner
+ *
+ * A spinner with expanding ripple circles creating a wave effect.
+ *
+ * @example
+ * ```tsx
+ * <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>>;
+//# sourceMappingURL=SpinnerWave.d.ts.map

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

@@ -0,0 +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,6GA8DvB,CAAC"}

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

@@ -3,4 +3,6 @@ export { SpinnerRing } from './SpinnerRing';
 export { SpinnerDots } from './SpinnerDots';
 export { SpinnerBars } from './SpinnerBars';
 export { SpinnerGrid } from './SpinnerGrid';
+export { SpinnerWave } from './SpinnerWave';
+export { SpinnerPulse } from './SpinnerPulse';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.cjs

@@ -11,19 +11,24 @@ const SkeletonCard = require("./index9.cjs");
 const SkeletonList = require("./index10.cjs");
 const SkeletonTable = require("./index11.cjs");
 const SkeletonPage = require("./index12.cjs");
-const SpinnerCircle = require("./index13.cjs");
-const SpinnerRing = require("./index14.cjs");
-const SpinnerDots = require("./index15.cjs");
-const SpinnerBars = require("./index16.cjs");
-const SpinnerGrid = require("./index17.cjs");
-const ProgressBar = require("./index18.cjs");
-const ProgressCircle = require("./index19.cjs");
-const ProgressRing = require("./index20.cjs");
-const PulseDots = require("./index21.cjs");
-const PulseWave = require("./index22.cjs");
-const PulseBars = require("./index23.cjs");
-const LoaderOverlay = require("./index24.cjs");
-const version = "1.0.2";
+const SkeletonForm = require("./index13.cjs");
+const SpinnerCircle = require("./index14.cjs");
+const SpinnerRing = require("./index15.cjs");
+const SpinnerDots = require("./index16.cjs");
+const SpinnerBars = require("./index17.cjs");
+const SpinnerGrid = require("./index18.cjs");
+const SpinnerWave = require("./index19.cjs");
+const SpinnerPulse = require("./index20.cjs");
+const ProgressBar = require("./index21.cjs");
+const ProgressCircle = require("./index22.cjs");
+const ProgressRing = require("./index23.cjs");
+const ProgressSteps = require("./index24.cjs");
+const PulseDots = require("./index25.cjs");
+const PulseWave = require("./index26.cjs");
+const PulseBars = require("./index27.cjs");
+const TypingIndicator = require("./index28.cjs");
+const LoaderOverlay = require("./index29.cjs");
+const version = "1.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
 exports.normalizeSize = colors.normalizeSize;
@@ -35,17 +40,22 @@ exports.SkeletonCard = SkeletonCard.SkeletonCard;
 exports.SkeletonList = SkeletonList.SkeletonList;
 exports.SkeletonTable = SkeletonTable.SkeletonTable;
 exports.SkeletonPage = SkeletonPage.SkeletonPage;
+exports.SkeletonForm = SkeletonForm.SkeletonForm;
 exports.SpinnerCircle = SpinnerCircle.SpinnerCircle;
 exports.SpinnerRing = SpinnerRing.SpinnerRing;
 exports.SpinnerDots = SpinnerDots.SpinnerDots;
 exports.SpinnerBars = SpinnerBars.SpinnerBars;
 exports.SpinnerGrid = SpinnerGrid.SpinnerGrid;
+exports.SpinnerWave = SpinnerWave.SpinnerWave;
+exports.SpinnerPulse = SpinnerPulse.SpinnerPulse;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressCircle = ProgressCircle.ProgressCircle;
 exports.ProgressRing = ProgressRing.ProgressRing;
+exports.ProgressSteps = ProgressSteps.ProgressSteps;
 exports.PulseDots = PulseDots.PulseDots;
 exports.PulseWave = PulseWave.PulseWave;
 exports.PulseBars = PulseBars.PulseBars;
+exports.TypingIndicator = TypingIndicator.TypingIndicator;
 exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
 exports.version = version;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.1.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export type * from './types';
 export { cn } from './utils/classNames';
 export { getAnimationDuration, normalizeSize } from './utils/colors';
-export declare const version = "1.0.2";
+export declare const version = "1.1.0";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -9,30 +9,37 @@ import { SkeletonCard } from "./index9.js";
 import { SkeletonList } from "./index10.js";
 import { SkeletonTable } from "./index11.js";
 import { SkeletonPage } from "./index12.js";
-import { SpinnerCircle } from "./index13.js";
-import { SpinnerRing } from "./index14.js";
-import { SpinnerDots } from "./index15.js";
-import { SpinnerBars } from "./index16.js";
-import { SpinnerGrid } from "./index17.js";
-import { ProgressBar } from "./index18.js";
-import { ProgressCircle } from "./index19.js";
-import { ProgressRing } from "./index20.js";
-import { PulseDots } from "./index21.js";
-import { PulseWave } from "./index22.js";
-import { PulseBars } from "./index23.js";
-import { LoaderOverlay } from "./index24.js";
-const version = "1.0.2";
+import { SkeletonForm } from "./index13.js";
+import { SpinnerCircle } from "./index14.js";
+import { SpinnerRing } from "./index15.js";
+import { SpinnerDots } from "./index16.js";
+import { SpinnerBars } from "./index17.js";
+import { SpinnerGrid } from "./index18.js";
+import { SpinnerWave } from "./index19.js";
+import { SpinnerPulse } from "./index20.js";
+import { ProgressBar } from "./index21.js";
+import { ProgressCircle } from "./index22.js";
+import { ProgressRing } from "./index23.js";
+import { ProgressSteps } from "./index24.js";
+import { PulseDots } from "./index25.js";
+import { PulseWave } from "./index26.js";
+import { PulseBars } from "./index27.js";
+import { TypingIndicator } from "./index28.js";
+import { LoaderOverlay } from "./index29.js";
+const version = "1.1.0";
 export {
   LoaderOverlay,
   ProgressBar,
   ProgressCircle,
   ProgressRing,
+  ProgressSteps,
   PulseBars,
   PulseDots,
   PulseWave,
   Skeleton,
   SkeletonAvatar,
   SkeletonCard,
+  SkeletonForm,
   SkeletonImage,
   SkeletonList,
   SkeletonPage,
@@ -42,7 +49,10 @@ export {
   SpinnerCircle,
   SpinnerDots,
   SpinnerGrid,
+  SpinnerPulse,
   SpinnerRing,
+  SpinnerWave,
+  TypingIndicator,
   cn,
   getAnimationDuration,
   normalizeSize,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.1.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}