premium-react-loaders 1.0.0 → 1.0.1

package/dist/premium-react-loaders.css

@@ -535,6 +535,9 @@ video {
 .visible {
   visibility: visible;
 }
+.fixed {
+  position: fixed;
+}
 .absolute {
   position: absolute;
 }
@@ -544,6 +547,19 @@ video {
 .inset-0 {
   inset: 0px;
 }
+.z-10 {
+  z-index: 10;
+}
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
 .block {
   display: block;
 }
@@ -559,15 +575,30 @@ video {
 .grid {
   display: grid;
 }
+.h-4 {
+  height: 1rem;
+}
+.h-96 {
+  height: 24rem;
+}
 .h-full {
   height: 100%;
 }
+.w-1\/2 {
+  width: 50%;
+}
+.w-3\/4 {
+  width: 75%;
+}
 .w-96 {
   width: 24rem;
 }
 .w-full {
   width: 100%;
 }
+.max-w-3xl {
+  max-width: 48rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -583,9 +614,18 @@ video {
 .animate-spinner-rotate {
   animation: spinner-rotate 1s linear infinite;
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .flex-col {
   flex-direction: column;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-end {
   align-items: flex-end;
 }
@@ -595,6 +635,9 @@ video {
 .justify-center {
   justify-content: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .gap-0\.5 {
   gap: 0.125rem;
 }
@@ -628,6 +671,11 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -637,6 +685,9 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -650,9 +701,40 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+.p-4 {
+  padding: 1rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+.p-8 {
+  padding: 2rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -661,17 +743,33 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-medium {
   font-weight: 500;
 }
 .font-semibold {
   font-weight: 600;
 }
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/types/index.d.ts

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

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

@@ -1 +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"}
+{"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;AACxB,cAAc,WAAW,CAAC"}

package/dist/types/overlay.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { BaseLoaderProps } from './common';
+/**
+ * Props for LoaderOverlay component
+ */
+export interface LoaderOverlayProps extends Omit<BaseLoaderProps, 'size' | 'color' | 'speed'> {
+    /** Whether the overlay is active/loading */
+    loading?: boolean;
+    /** The loader component to display */
+    loader: ReactNode;
+    /** Content to display behind the overlay */
+    children?: ReactNode;
+    /** Position style of the overlay */
+    position?: 'fixed' | 'absolute';
+    /** Backdrop opacity (0-1) */
+    backdropOpacity?: number;
+    /** Backdrop color */
+    backdropColor?: string;
+    /** Apply blur effect to backdrop */
+    blur?: boolean;
+    /** Z-index of the overlay */
+    zIndex?: number;
+}
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/types/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC3F,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,sCAAsC;IACtC,MAAM,EAAE,SAAS,CAAC;IAElB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAEhC,6BAA6B;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/skeleton.d.ts

@@ -68,4 +68,11 @@ export interface SkeletonTableProps extends SkeletonBaseProps {
     /** Show table header */
     showHeader?: boolean;
 }
+/**
+ * SkeletonPage component props
+ */
+export interface SkeletonPageProps extends SkeletonBaseProps {
+    /** Page layout variant */
+    variant?: 'default' | 'dashboard' | 'article' | 'profile';
+}
 //# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +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"}
+{"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;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3D"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "premium-react-loaders",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Premium, production-ready loading components for React with TypeScript and Tailwind CSS",
   "author": "Ishan Karunaratne",
   "license": "MIT",
+  "homepage": "https://premium-react-loaders.ishansasika.dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/ishansasika/premium-react-loaders"
@@ -58,6 +59,11 @@
     "build-storybook": "storybook build",
     "preview-storybook": "serve storybook-static",
     "deploy:storybook": "npm run build-storybook && firebase deploy",
+    "demo": "cd demo && npm run dev",
+    "demo:build": "cd demo && npm run build",
+    "demo:preview": "cd demo && npm run preview",
+    "demo:deploy": "cd demo && npm run deploy",
+    "deploy:all": "npm run build-storybook && cd demo && npm run build && cd .. && firebase deploy",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {