premium-react-loaders 1.0.0

package/dist/types/common.d.ts

@@ -0,0 +1,65 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+/**
+ * Base props for all loader components
+ */
+export interface BaseLoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Size of the loader (numeric for px, or CSS string like '2rem') */
+    size?: number | string;
+    /** Primary color of the loader */
+    color?: string;
+    /** Secondary color (for multi-color loaders) */
+    secondaryColor?: string;
+    /** Custom CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Whether the loader is visible */
+    visible?: boolean;
+    /** Animation speed: 'slow' | 'normal' | 'fast' or milliseconds */
+    speed?: 'slow' | 'normal' | 'fast' | number;
+    /** Test ID for testing */
+    testId?: string;
+}
+/**
+ * Base props for skeleton loader components
+ */
+export interface SkeletonBaseProps extends BaseLoaderProps {
+    /** Width of skeleton */
+    width?: number | string;
+    /** Height of skeleton */
+    height?: number | string;
+    /** Border radius */
+    borderRadius?: number | string;
+    /** Enable animation */
+    animate?: boolean;
+    /** Number of skeleton lines/items */
+    count?: number;
+    /** Base color (background) */
+    baseColor?: string;
+    /** Highlight color (shimmer) */
+    highlightColor?: string;
+}
+/**
+ * Base props for progress loader components
+ */
+export interface ProgressLoaderProps extends BaseLoaderProps {
+    /** Progress value (0-100) */
+    value?: number;
+    /** Whether progress is indeterminate */
+    indeterminate?: boolean;
+    /** Show percentage text */
+    showValue?: boolean;
+    /** Thickness of progress indicator */
+    thickness?: number | string;
+}
+/**
+ * Animation speed type
+ */
+export type AnimationSpeed = 'slow' | 'normal' | 'fast';
+/**
+ * Speed to duration mapping (in milliseconds)
+ */
+export declare const SPEED_MAP: Record<AnimationSpeed, number>;
+//# sourceMappingURL=common.d.ts.map

package/dist/types/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE5C,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIpD,CAAC"}

package/dist/types/index.d.ts

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

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

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

package/dist/types/progress.d.ts

@@ -0,0 +1,25 @@
+import { ProgressLoaderProps } from './common';
+/**
+ * ProgressBar component props
+ */
+export interface ProgressBarProps extends ProgressLoaderProps {
+    /** Height of the progress bar */
+    height?: number | string;
+}
+/**
+ * ProgressCircle component props
+ */
+export interface ProgressCircleProps extends ProgressLoaderProps {
+    /** Size of the circle */
+    size?: number | string;
+}
+/**
+ * ProgressRing component props
+ */
+export interface ProgressRingProps extends ProgressLoaderProps {
+    /** Size of the ring */
+    size?: number | string;
+    /** Enable gradient */
+    gradient?: boolean;
+}
+//# sourceMappingURL=progress.d.ts.map

package/dist/types/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/types/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/pulse.d.ts

@@ -0,0 +1,25 @@
+import { BaseLoaderProps } from './common';
+/**
+ * PulseDots component props
+ */
+export interface PulseDotsProps extends BaseLoaderProps {
+    /** Number of dots */
+    dotCount?: number;
+    /** Size of each dot */
+    dotSize?: number;
+}
+/**
+ * PulseWave component props
+ */
+export interface PulseWaveProps extends BaseLoaderProps {
+    /** Number of bars in wave */
+    barCount?: number;
+}
+/**
+ * PulseBars component props
+ */
+export interface PulseBarsProps extends BaseLoaderProps {
+    /** Number of bars */
+    barCount?: number;
+}
+//# sourceMappingURL=pulse.d.ts.map

package/dist/types/pulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pulse.d.ts","sourceRoot":"","sources":["../../src/types/pulse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/types/skeleton.d.ts

@@ -0,0 +1,71 @@
+import { SkeletonBaseProps } from './common';
+/**
+ * Skeleton variant types
+ */
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+/**
+ * Skeleton component props
+ */
+export interface SkeletonProps extends SkeletonBaseProps {
+    /** Shape variant */
+    variant?: SkeletonVariant;
+}
+/**
+ * SkeletonText component props
+ */
+export interface SkeletonTextProps extends SkeletonBaseProps {
+    /** Number of text lines */
+    lines?: number;
+    /** Gap between lines */
+    gap?: number | string;
+}
+/**
+ * SkeletonAvatar component props
+ */
+export interface SkeletonAvatarProps extends SkeletonBaseProps {
+    /** Avatar shape */
+    shape?: 'circle' | 'square';
+}
+/**
+ * SkeletonImage component props
+ */
+export interface SkeletonImageProps extends SkeletonBaseProps {
+    /** Aspect ratio (e.g., '16/9', '4/3', '1/1') */
+    aspectRatio?: string;
+}
+/**
+ * SkeletonCard component props
+ */
+export interface SkeletonCardProps extends SkeletonBaseProps {
+    /** Show avatar */
+    hasAvatar?: boolean;
+    /** Title width */
+    titleWidth?: number | string;
+    /** Number of description lines */
+    lines?: number;
+    /** Avatar size */
+    avatarSize?: number;
+}
+/**
+ * SkeletonList component props
+ */
+export interface SkeletonListProps extends SkeletonBaseProps {
+    /** Number of list items */
+    items?: number;
+    /** Item height */
+    itemHeight?: number | string;
+    /** Gap between items */
+    gap?: number | string;
+}
+/**
+ * SkeletonTable component props
+ */
+export interface SkeletonTableProps extends SkeletonBaseProps {
+    /** Number of rows */
+    rows?: number;
+    /** Number of columns */
+    columns?: number;
+    /** Show table header */
+    showHeader?: boolean;
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/types/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,oBAAoB;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,kBAAkB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/types/spinner.d.ts

@@ -0,0 +1,39 @@
+import { BaseLoaderProps } from './common';
+/**
+ * SpinnerCircle component props
+ */
+export interface SpinnerCircleProps extends BaseLoaderProps {
+    /** Thickness of the spinner */
+    thickness?: number;
+}
+/**
+ * SpinnerRing component props
+ */
+export interface SpinnerRingProps extends BaseLoaderProps {
+    /** Thickness of the ring */
+    thickness?: number;
+}
+/**
+ * SpinnerDots component props
+ */
+export interface SpinnerDotsProps extends BaseLoaderProps {
+    /** Number of dots */
+    dotCount?: number;
+    /** Size of each dot */
+    dotSize?: number;
+}
+/**
+ * SpinnerBars component props
+ */
+export interface SpinnerBarsProps extends BaseLoaderProps {
+    /** Number of bars */
+    barCount?: number;
+}
+/**
+ * SpinnerGrid component props
+ */
+export interface SpinnerGridProps extends BaseLoaderProps {
+    /** Grid size (e.g., 3 for 3x3) */
+    gridSize?: number;
+}
+//# sourceMappingURL=spinner.d.ts.map

package/dist/types/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/types/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/utils/classNames.d.ts

@@ -0,0 +1,14 @@
+import { ClassValue } from 'clsx';
+/**
+ * Utility function to merge class names
+ * Combines clsx for conditional classes
+ *
+ * @param inputs - Class names to merge
+ * @returns Merged class name string
+ *
+ * @example
+ * cn('base-class', condition && 'conditional-class', 'another-class')
+ * // => 'base-class conditional-class another-class' (if condition is true)
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=classNames.d.ts.map

package/dist/utils/classNames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classNames.d.ts","sourceRoot":"","sources":["../../src/utils/classNames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;;;;;;;;;GAUG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/utils/colors.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Check if a color is a valid hex color
+ */
+export declare function isHexColor(color: string): boolean;
+/**
+ * Check if a color is a valid RGB/RGBA color
+ */
+export declare function isRgbColor(color: string): boolean;
+/**
+ * Convert hex color to RGB
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Get animation duration in CSS format
+ */
+export declare function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number): string;
+/**
+ * Normalize size value to CSS string
+ */
+export declare function normalizeSize(size?: number | string): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/utils/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAShF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAYvF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK5D"}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classNames';
+export * from './colors';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "premium-react-loaders",
+  "version": "1.0.0",
+  "description": "Premium, production-ready loading components for React with TypeScript and Tailwind CSS",
+  "author": "Ishan Karunaratne",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ishansasika/premium-react-loaders"
+  },
+  "keywords": [
+    "react",
+    "loader",
+    "spinner",
+    "skeleton",
+    "loading",
+    "progress",
+    "tailwind",
+    "typescript",
+    "components",
+    "ui"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles": {
+      "import": "./dist/styles/index.css",
+      "require": "./dist/styles/index.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "build:watch": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "preview-storybook": "serve storybook-static",
+    "deploy:storybook": "npm run build-storybook && firebase deploy",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}