premium-react-loaders 1.1.0 → 1.3.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/overlay/LoaderOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA+DzB,CAAC"}
+{"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA2EzB,CAAC"}

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,6GAwHvB,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,gHAiI1B,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,8GA8IxB,CAAC"}

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

@@ -1 +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"}
+{"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,+GAqJzB,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,2GA4ErB,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,2GAiErB,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,2GAwErB,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,iHAqE3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFA4DpB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sFAwEpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAqC1B,CAAC"}
+{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,gHAmD1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAiExB,CAAC"}
+{"version":3,"file":"SkeletonCard.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GA+ExB,CAAC"}

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

@@ -1 +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"}
+{"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,8GA6FxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAyCzB,CAAC"}
+{"version":3,"file":"SkeletonImage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAqDzB,CAAC"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GAgEzB,CAAC"}
+{"version":3,"file":"SkeletonTable.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,+GA8EzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAsDxB,CAAC"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAkExB,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;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAmEvB,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;AASjD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,+GAuEzB,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;AAU/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAsFvB,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,6GAkFvB,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,8GAuFxB,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;AAS/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA8DvB,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,6GA2EvB,CAAC"}

package/dist/index10.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
+const hooks = require("./index31.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonList = react.forwardRef(
@@ -15,13 +16,22 @@ const SkeletonList = react.forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-list",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -30,7 +40,9 @@ const SkeletonList = react.forwardRef(
         className: classNames.cn("flex flex-col", className),
         style: {
           gap: colors.normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading list...",

package/dist/index10.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index10.cjs","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\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('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,UAACG,SAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"index10.cjs","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":["forwardRef","useLoaderVisibility","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,UAACG,SAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index10.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index31.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonList = forwardRef(
@@ -13,13 +14,22 @@ const SkeletonList = forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-list",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -28,7 +38,9 @@ const SkeletonList = forwardRef(
         className: cn("flex flex-col", className),
         style: {
           gap: normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading list...",

package/dist/index10.js.map

@@ -1 +1 @@
-{"version":3,"file":"index10.js","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\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('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"index10.js","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

package/dist/index11.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonTable = react.forwardRef(
   ({
@@ -12,13 +13,22 @@ const SkeletonTable = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-table",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const renderRow = (isHeader = false) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Skeleton,
       {
@@ -37,7 +47,11 @@ const SkeletonTable = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("flex flex-col gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading table...",
         "aria-busy": "true",

package/dist/index11.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index11.cjs","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":["forwardRef","jsx","Skeleton","jsxs","cn"],"mappings":";;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrCC,2BAAAA,IAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvCA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,6CACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIFH,2BAAAA,IAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpCA,2BAAAA,IAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index11.cjs","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":["forwardRef","useLoaderVisibility","jsx","Skeleton","jsxs","cn"],"mappings":";;;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,CAAC,WAAoB,UACrCC,2BAAAA,IAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvCA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,6CACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIFH,2BAAAA,IAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpCA,2BAAAA,IAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index11.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index31.js";
 import { cn } from "./index3.js";
 const SkeletonTable = forwardRef(
   ({
@@ -10,13 +11,22 @@ const SkeletonTable = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-table",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const renderRow = (isHeader = false) => /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
       Skeleton,
       {
@@ -35,7 +45,11 @@ const SkeletonTable = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("flex flex-col gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading table...",
         "aria-busy": "true",

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,kCACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpC,oBAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index11.js","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,CAAC,WAAoB,UACrC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,kCACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpC,oBAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}