premium-react-loaders 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ishan Karunaratne
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,375 @@
+# Premium React Loaders
+
+A comprehensive collection of **18 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)
+
+## Features
+
+- **18 Premium Components** across 4 categories (Skeleton, Spinner, Progress, Pulse)
+- **Full TypeScript Support** with exported type definitions
+- **Tailwind CSS Integration** for easy customization
+- **Tree-shakeable** - only bundle what you use
+- **Accessible** - built with ARIA labels and best practices
+- **Performant** - hardware-accelerated CSS animations (60fps)
+- **Customizable** - multiple ways to style components
+- **Zero Dependencies** (except peer dependencies)
+
+## Installation
+
+```bash
+npm install premium-react-loaders
+```
+
+### Peer Dependencies
+
+This library requires React and Tailwind CSS:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Setup
+
+### 1. Import Styles
+
+Import the styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```typescript
+import 'premium-react-loaders/styles';
+```
+
+### 2. Configure Tailwind
+
+Add the library to your `tailwind.config.js` content array:
+
+```javascript
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/premium-react-loaders/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... rest of your config
+};
+```
+
+## Quick Start
+
+```tsx
+import {
+  Skeleton,
+  SkeletonCard,
+  SpinnerCircle,
+  ProgressBar,
+  PulseDots,
+} from 'premium-react-loaders';
+
+function App() {
+  return (
+    <div>
+      {/* Skeleton Loaders */}
+      <Skeleton width={200} height={20} />
+      <SkeletonCard hasAvatar lines={3} />
+
+      {/* Spinners */}
+      <SpinnerCircle size={40} color="#3b82f6" />
+
+      {/* Progress Bars */}
+      <ProgressBar value={75} showValue />
+
+      {/* Pulse Loaders */}
+      <PulseDots dotCount={3} />
+    </div>
+  );
+}
+```
+
+## Component Categories
+
+### Skeleton Loaders (7 components)
+
+Placeholder components that mimic content layout while loading:
+
+- **Skeleton** - Base skeleton component with variants
+- **SkeletonText** - Multi-line text placeholder
+- **SkeletonAvatar** - Avatar placeholder (circle/square)
+- **SkeletonImage** - Image placeholder with aspect ratio
+- **SkeletonCard** - Card layout with avatar + text
+- **SkeletonList** - List of skeleton items
+- **SkeletonTable** - Table skeleton with rows/columns
+
+### Spinner Loaders (5 components)
+
+Rotating and animated spinners:
+
+- **SpinnerCircle** - Basic rotating circle spinner
+- **SpinnerRing** - Border-only ring spinner
+- **SpinnerDots** - Multiple dots rotating around center
+- **SpinnerBars** - Vertical bars with wave animation
+- **SpinnerGrid** - Grid of fading squares
+
+### Progress Loaders (3 components)
+
+Progress indicators (determinate/indeterminate):
+
+- **ProgressBar** - Linear horizontal progress bar
+- **ProgressCircle** - Circular progress indicator
+- **ProgressRing** - Ring progress with gradient option
+
+### Pulse Loaders (3 components)
+
+Bouncing, pulsing, wave animations:
+
+- **PulseDots** - Bouncing dots in sequence
+- **PulseWave** - Wave pattern bars
+- **PulseBars** - Equalizer-style pulsing bars
+
+## Usage Examples
+
+### Skeleton Components
+
+```tsx
+import {
+  Skeleton,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonCard,
+} from 'premium-react-loaders';
+
+// Basic skeleton
+<Skeleton width={200} height={20} />
+
+// Multi-line text
+<SkeletonText lines={3} width="100%" />
+
+// Avatar
+<SkeletonAvatar size={48} shape="circle" />
+
+// Card with avatar and text
+<SkeletonCard hasAvatar lines={3} />
+
+// Custom colors
+<Skeleton
+  width={200}
+  height={20}
+  baseColor="#e0e0e0"
+  highlightColor="#f5f5f5"
+/>
+```
+
+### Spinner Components
+
+```tsx
+import {
+  SpinnerCircle,
+  SpinnerRing,
+  SpinnerDots,
+} from 'premium-react-loaders';
+
+// Basic spinner
+<SpinnerCircle size={40} color="#3b82f6" />
+
+// Ring spinner
+<SpinnerRing size={32} thickness={4} />
+
+// Dots spinner
+<SpinnerDots size={40} dotCount={8} />
+
+// Speed control
+<SpinnerCircle size={40} speed="fast" />
+```
+
+### Progress Components
+
+```tsx
+import {
+  ProgressBar,
+  ProgressCircle,
+  ProgressRing,
+} from 'premium-react-loaders';
+
+// Determinate progress
+<ProgressBar value={75} showValue />
+
+// Indeterminate progress
+<ProgressBar indeterminate />
+
+// Circular progress
+<ProgressCircle value={60} showValue size={80} />
+
+// Ring with gradient
+<ProgressRing
+  value={80}
+  gradient
+  color="#3b82f6"
+  secondaryColor="#8b5cf6"
+/>
+```
+
+### Pulse Components
+
+```tsx
+import { PulseDots, PulseWave, PulseBars } from 'premium-react-loaders';
+
+// Bouncing dots
+<PulseDots dotCount={3} color="#3b82f6" />
+
+// Wave pattern
+<PulseWave barCount={5} />
+
+// Equalizer bars
+<PulseBars barCount={4} speed="fast" />
+```
+
+## Customization
+
+All components support multiple customization methods:
+
+### 1. className Prop
+
+Pass Tailwind utility classes:
+
+```tsx
+<SpinnerCircle size={40} className="my-4 mx-auto" />
+```
+
+### 2. style Prop
+
+Use inline CSS styles:
+
+```tsx
+<ProgressBar value={75} style={{ opacity: 0.8, margin: '20px 0' }} />
+```
+
+### 3. Color Props
+
+Direct color control:
+
+```tsx
+<SpinnerCircle color="#8b5cf6" secondaryColor="#e0e0e0" />
+```
+
+### 4. CSS Variables
+
+Override theme variables globally:
+
+```css
+:root {
+  --loader-primary: #3b82f6;
+  --loader-secondary: #8b5cf6;
+  --skeleton-base: #e0e0e0;
+  --skeleton-highlight: #f5f5f5;
+}
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  SkeletonProps,
+  SpinnerCircleProps,
+  ProgressBarProps,
+  PulseDotsProps,
+} from 'premium-react-loaders';
+
+const MyComponent: React.FC = () => {
+  const skeletonProps: SkeletonProps = {
+    width: 200,
+    height: 20,
+    animate: true,
+  };
+
+  return <Skeleton {...skeletonProps} />;
+};
+```
+
+## Common Props
+
+All loader components share these common props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number \| string` | varies | Size of the loader |
+| `color` | `string` | `#3b82f6` | Primary color |
+| `className` | `string` | - | Custom CSS class |
+| `style` | `CSSProperties` | - | Inline styles |
+| `visible` | `boolean` | `true` | Show/hide loader |
+| `speed` | `'slow' \| 'normal' \| 'fast' \| number` | `'normal'` | Animation speed |
+| `testId` | `string` | - | Test ID for testing |
+| `ariaLabel` | `string` | - | Accessibility label |
+
+## Component-Specific Props
+
+### Skeleton Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string` | `100%` | Width of skeleton |
+| `height` | `number \| string` | `1rem` | Height of skeleton |
+| `variant` | `'text' \| 'circular' \| 'rectangular' \| 'rounded'` | `'text'` | Shape variant |
+| `animate` | `boolean` | `true` | Enable shimmer animation |
+| `baseColor` | `string` | `#e0e0e0` | Background color |
+| `highlightColor` | `string` | `#f5f5f5` | Shimmer color |
+
+### Progress Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | `0` | Progress value (0-100) |
+| `indeterminate` | `boolean` | `false` | Indeterminate mode |
+| `showValue` | `boolean` | `false` | Show percentage text |
+| `thickness` | `number \| string` | varies | Thickness of indicator |
+
+## Performance
+
+All components are optimized for performance:
+
+- **CSS Animations** - No JavaScript animations, pure CSS
+- **Hardware Acceleration** - Uses `transform` and `opacity` for 60fps
+- **Tree-shakeable** - Only bundle components you import
+- **Minimal Bundle Size** - Lightweight with no dependencies
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Storybook
+
+Explore all components interactively in Storybook:
+
+```bash
+npm run storybook
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## License
+
+MIT © Ishan Karunaratne
+
+## Acknowledgments
+
+Built with:
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Vite](https://vite.dev/)
+- [Storybook](https://storybook.js.org/)
+
+---
+
+**Made with ❤️ by Ishan Karunaratne**

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './skeleton';
+export * from './spinner';
+export * from './progress';
+export * from './pulse';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,15 @@
+import { ProgressBarProps } from '../../types';
+/**
+ * ProgressBar - Linear progress bar
+ *
+ * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} showValue />
+ * <ProgressBar indeterminate />
+ * <ProgressBar value={50} height={8} color="#8b5cf6" />
+ * ```
+ */
+export declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GAqEvB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { ProgressCircleProps } from '../../types';
+/**
+ * ProgressCircle - SVG-based circular progress indicator
+ *
+ * A circular progress indicator that shows progress as a partial circle.
+ *
+ * @example
+ * ```tsx
+ * <ProgressCircle value={75} showValue />
+ * <ProgressCircle value={50} size={80} thickness={6} />
+ * <ProgressCircle indeterminate />
+ * ```
+ */
+export declare const ProgressCircle: import('react').ForwardRefExoticComponent<ProgressCircleProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressCircle.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,gHAyF1B,CAAC"}

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

@@ -0,0 +1,15 @@
+import { ProgressRingProps } from '../../types';
+/**
+ * ProgressRing - Ring-style progress with gradient option
+ *
+ * A circular progress ring with optional gradient colors.
+ *
+ * @example
+ * ```tsx
+ * <ProgressRing value={75} showValue />
+ * <ProgressRing value={60} gradient secondaryColor="#8b5cf6" />
+ * <ProgressRing indeterminate />
+ * ```
+ */
+export declare const ProgressRing: import('react').ForwardRefExoticComponent<ProgressRingProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressRing.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAmGxB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { PulseBarsProps } from '../../types';
+/**
+ * PulseBars - Equalizer-style bars loader
+ *
+ * A loader with bars that pulse like an audio equalizer.
+ *
+ * @example
+ * ```tsx
+ * <PulseBars size={40} color="#3b82f6" />
+ * <PulseBars size={48} barCount={6} speed="fast" />
+ * ```
+ */
+export declare const PulseBars: import('react').ForwardRefExoticComponent<PulseBarsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PulseBars.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { PulseDotsProps } from '../../types';
+/**
+ * PulseDots - Bouncing dots loader
+ *
+ * A loader with bouncing dots that scale and fade in a sequence.
+ *
+ * @example
+ * ```tsx
+ * <PulseDots size={40} color="#3b82f6" />
+ * <PulseDots size={32} dotCount={5} speed="fast" />
+ * ```
+ */
+export declare const PulseDots: import('react').ForwardRefExoticComponent<PulseDotsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PulseDots.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { PulseWaveProps } from '../../types';
+/**
+ * PulseWave - Wave pattern loader
+ *
+ * A loader with bars that animate in a wave pattern.
+ *
+ * @example
+ * ```tsx
+ * <PulseWave size={40} color="#3b82f6" />
+ * <PulseWave size={32} barCount={7} speed="slow" />
+ * ```
+ */
+export declare const PulseWave: import('react').ForwardRefExoticComponent<PulseWaveProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PulseWave.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SkeletonProps } from '../../types';
+/**
+ * Skeleton - Base skeleton loader component
+ *
+ * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={20} />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * ```
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { SkeletonAvatarProps } from '../../types';
+/**
+ * SkeletonAvatar - Avatar skeleton loader
+ *
+ * A skeleton loader for avatar placeholders with circle or square shapes.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonAvatar size={40} />
+ * <SkeletonAvatar size={64} shape="square" />
+ * ```
+ */
+export declare const SkeletonAvatar: import('react').ForwardRefExoticComponent<SkeletonAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonAvatar.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import { SkeletonCardProps } from '../../types';
+/**
+ * SkeletonCard - Card skeleton loader
+ *
+ * A composite skeleton loader for card layouts with optional avatar, title, and description lines.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCard />
+ * <SkeletonCard hasAvatar={true} lines={3} />
+ * <SkeletonCard hasAvatar={false} titleWidth="60%" />
+ * ```
+ */
+export declare const SkeletonCard: import('react').ForwardRefExoticComponent<SkeletonCardProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonCard.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { SkeletonImageProps } from '../../types';
+/**
+ * SkeletonImage - Image skeleton loader
+ *
+ * A skeleton loader for image placeholders with optional aspect ratio.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonImage width={300} height={200} />
+ * <SkeletonImage aspectRatio="16/9" width="100%" />
+ * ```
+ */
+export declare const SkeletonImage: import('react').ForwardRefExoticComponent<SkeletonImageProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonImage.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { SkeletonListProps } from '../../types';
+/**
+ * SkeletonList - List skeleton loader
+ *
+ * A skeleton loader for list items with customizable count, item height, and spacing.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonList items={5} />
+ * <SkeletonList items={3} itemHeight={60} gap={12} />
+ * ```
+ */
+export declare const SkeletonList: import('react').ForwardRefExoticComponent<SkeletonListProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonList.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { SkeletonTableProps } from '../../types';
+/**
+ * SkeletonTable - Table skeleton loader
+ *
+ * A skeleton loader for table layouts with rows and columns.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonTable rows={5} columns={4} />
+ * <SkeletonTable rows={3} columns={3} showHeader={true} />
+ * ```
+ */
+export declare const SkeletonTable: import('react').ForwardRefExoticComponent<SkeletonTableProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonTable.d.ts.map

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

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