@designcrowd/fe-shared-lib 1.5.35 → 1.5.36

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.stories.js

@@ -1,364 +1,364 @@
-import AiPoweredLoader from './AiPoweredLoader.vue';
-
-export default {
-  title: 'Components/AiPoweredLoader',
-  component: AiPoweredLoader,
-  argTypes: {
-    size: {
-      control: { type: 'number', min: 16, max: 200, step: 8 },
-      description: 'Size of the loader in pixels (width and height)',
-      defaultValue: 96,
-    },
-    interval: {
-      control: { type: 'range', min: 50, max: 500, step: 50 },
-      description: 'Animation frame interval in milliseconds',
-      defaultValue: 150,
-    },
-    alt: {
-      control: 'text',
-      description: 'Alternative text for accessibility',
-      defaultValue: 'loading',
-    },
-  },
-};
-
-// Default story
-export const Default = (args) => ({
-  components: { AiPoweredLoader },
-  setup() {
-    return { args };
-  },
-  template: '<AiPoweredLoader v-bind="args" />',
-});
-
-Default.args = {
-  size: 96,
-  interval: 150,
-  alt: 'loading',
-};
-
-// Size variations story
-export const SizeVariations = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-flex tw-gap-8 tw-items-center tw-p-6">
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="48" alt="Small loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Small (48px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="64" alt="Medium-small loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Medium-Small (64px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="96" alt="Default loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Default (96px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="128" alt="Large loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Large (128px)</p>
-      </div>
-      <div class="tw-text-center">
-        <AiPoweredLoader :size="160" alt="Extra large loader" />
-        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Extra Large (160px)</p>
-      </div>
-    </div>
-  `,
-});
-
-SizeVariations.story = {
-  name: 'Size Variations',
-};
-
-// Speed variations story
-export const SpeedVariations = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Animation Speed Variations</h3>
-      <div class="tw-flex tw-gap-8 tw-items-center">
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="75" alt="Fast animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (75ms)</p>
-        </div>
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="150" alt="Normal animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
-        </div>
-        <div class="tw-text-center">
-          <AiPoweredLoader :interval="300" alt="Slow animation" />
-          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (300ms)</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-SpeedVariations.story = {
-  name: 'Animation Speed',
-};
-
-// Common use cases story
-export const CommonUseCases = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6 tw-space-y-8">
-      <!-- Inline loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Inline Button Loader</h4>
-        <div class="tw-flex tw-items-center tw-gap-3">
-          <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2">
-            <AiPoweredLoader :size="20" :interval="100" alt="Processing" />
-            Processing...
-          </button>
-        </div>
-      </div>
-
-      <!-- Card loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Card Loading State</h4>
-        <div class="tw-bg-gray-50 tw-rounded tw-p-6 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[200px]">
-          <AiPoweredLoader :size="80" alt="Loading content" />
-          <p class="tw-mt-4 tw-text-gray-600">Loading your content...</p>
-        </div>
-      </div>
-
-      <!-- Page loader -->
-      <div class="tw-border tw-rounded-lg tw-p-4">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Full Page Loader</h4>
-        <div class="tw-bg-white tw-rounded tw-p-12 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px] tw-border-2 tw-border-dashed tw-border-gray-300">
-          <AiPoweredLoader :size="120" alt="Loading page" />
-          <p class="tw-mt-6 tw-text-xl tw-text-gray-700">AI is working its magic...</p>
-          <p class="tw-text-sm tw-text-gray-500 tw-mt-2">This may take a few moments</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-CommonUseCases.story = {
-  name: 'Common Use Cases',
-};
-
-// Interactive size control story
-export const InteractiveSize = () => ({
-  components: { AiPoweredLoader },
-  data() {
-    return {
-      currentSize: 96,
-      currentInterval: 150,
-    };
-  },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Interactive Size Control</h3>
-
-      <!-- Controls -->
-      <div class="tw-mb-6 tw-space-y-4">
-        <div class="tw-flex tw-items-center tw-gap-4">
-          <label class="tw-text-sm tw-font-medium tw-w-20">Size:</label>
-          <input
-            type="range"
-            min="32"
-            max="200"
-            step="8"
-            v-model="currentSize"
-            class="tw-flex-1 tw-max-w-xs"
-          />
-          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentSize }}px</span>
-        </div>
-
-        <div class="tw-flex tw-items-center tw-gap-4">
-          <label class="tw-text-sm tw-font-medium tw-w-20">Speed:</label>
-          <input
-            type="range"
-            min="50"
-            max="500"
-            step="25"
-            v-model="currentInterval"
-            class="tw-flex-1 tw-max-w-xs"
-          />
-          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentInterval }}ms</span>
-        </div>
-      </div>
-
-      <!-- Preview -->
-      <div class="tw-flex tw-items-center tw-justify-center tw-p-8 tw-bg-gray-50 tw-rounded-lg">
-        <AiPoweredLoader
-          :size="currentSize"
-          :interval="currentInterval"
-          alt="Interactive loader preview"
-        />
-      </div>
-
-      <p class="tw-text-sm tw-text-gray-600 tw-mt-4">
-        Use the sliders above to adjust the loader size and animation speed in real-time.
-      </p>
-    </div>
-  `,
-});
-
-InteractiveSize.story = {
-  name: 'Interactive Controls',
-};
-
-// Comparison with traditional loader story
-export const LoaderComparison = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-6">AI-Powered vs Traditional Loaders</h3>
-
-      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
-        <!-- AI Powered Loader -->
-        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-purple-600">AI-Powered Loader</h4>
-          <div class="tw-flex tw-justify-center tw-mb-4">
-            <AiPoweredLoader :size="96" alt="AI-powered loader" />
-          </div>
-          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
-            <li>• Modern sparkle animation</li>
-            <li>• Customizable size</li>
-            <li>• Smooth gradient transitions</li>
-            <li>• Configurable speed</li>
-            <li>• Accessibility support</li>
-          </ul>
-        </div>
-
-        <!-- Traditional Loader -->
-        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-gray-600">Traditional GIF Loader</h4>
-          <div class="tw-flex tw-justify-center tw-mb-4">
-            <img
-              src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
-              alt="Traditional loading GIF"
-              class="tw-block"
-              style="width: 96px; height: auto;"
-            />
-          </div>
-          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
-            <li>• Fixed GIF animation</li>
-            <li>• Static sizing</li>
-            <li>• Limited customization</li>
-            <li>• Larger file size</li>
-            <li>• Less modern appearance</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="tw-mt-6 tw-p-4 tw-bg-purple-50 tw-rounded-lg">
-        <p class="tw-text-sm tw-text-purple-800">
-          <strong>✨ Pro Tip:</strong> The AI-Powered Loader provides better performance, smaller bundle size,
-          and complete customization while maintaining a modern, engaging user experience.
-        </p>
-      </div>
-    </div>
-  `,
-});
-
-LoaderComparison.story = {
-  name: 'Loader Comparison',
-};
-
-// Showcase story
-export const Showcase = () => ({
-  components: { AiPoweredLoader },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">AI-Powered Loader Showcase</h3>
-
-      <div class="tw-space-y-8">
-        <!-- Size Showcase -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Size Range</h4>
-          <div class="tw-flex tw-gap-6 tw-items-end tw-justify-center">
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="32" alt="Tiny loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">32px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="48" alt="Small loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">48px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="64" alt="Medium loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">64px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="96" alt="Default loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">96px (default)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="128" alt="Large loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">128px</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="180" alt="Extra large loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">180px</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Speed Showcase -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Animation Speeds</h4>
-          <div class="tw-flex tw-gap-8 tw-items-center tw-justify-center">
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="50" alt="Very fast loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Very Fast (50ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="100" alt="Fast loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (100ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="150" alt="Normal loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
-            </div>
-            <div class="tw-text-center">
-              <AiPoweredLoader :size="80" :interval="250" alt="Slow loader" />
-              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (250ms)</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Context Examples -->
-        <div class="tw-border tw-rounded-lg tw-p-6">
-          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Real-World Examples</h4>
-          <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
-            <!-- Button context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Button Context</p>
-              <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2 tw-mx-auto">
-                <AiPoweredLoader :size="18" :interval="120" alt="Button loading" />
-                Loading...
-              </button>
-            </div>
-
-            <!-- Card context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Card Loading</p>
-              <div class="tw-bg-white tw-p-4 tw-rounded tw-shadow-sm">
-                <AiPoweredLoader :size="60" alt="Card loading" />
-                <p class="tw-text-sm tw-text-gray-600 tw-mt-2">Loading data...</p>
-              </div>
-            </div>
-
-            <!-- Full screen context -->
-            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
-              <p class="tw-text-sm tw-font-medium tw-mb-3">Page Loading</p>
-              <div class="tw-bg-white tw-p-6 tw-rounded tw-shadow-sm tw-min-h-[120px] tw-flex tw-flex-col tw-justify-center">
-                <AiPoweredLoader :size="80" alt="Page loading" />
-                <p class="tw-text-sm tw-text-gray-600 tw-mt-3">Please wait...</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-Showcase.story = {
-  name: 'Complete Showcase',
-};
+import AiPoweredLoader from './AiPoweredLoader.vue';
+
+export default {
+  title: 'Components/AiPoweredLoader',
+  component: AiPoweredLoader,
+  argTypes: {
+    size: {
+      control: { type: 'number', min: 16, max: 200, step: 8 },
+      description: 'Size of the loader in pixels (width and height)',
+      defaultValue: 96,
+    },
+    interval: {
+      control: { type: 'range', min: 50, max: 500, step: 50 },
+      description: 'Animation frame interval in milliseconds',
+      defaultValue: 150,
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for accessibility',
+      defaultValue: 'loading',
+    },
+  },
+};
+
+// Default story
+export const Default = (args) => ({
+  components: { AiPoweredLoader },
+  setup() {
+    return { args };
+  },
+  template: '<AiPoweredLoader v-bind="args" />',
+});
+
+Default.args = {
+  size: 96,
+  interval: 150,
+  alt: 'loading',
+};
+
+// Size variations story
+export const SizeVariations = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-flex tw-gap-8 tw-items-center tw-p-6">
+      <div class="tw-text-center">
+        <AiPoweredLoader :size="48" alt="Small loader" />
+        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Small (48px)</p>
+      </div>
+      <div class="tw-text-center">
+        <AiPoweredLoader :size="64" alt="Medium-small loader" />
+        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Medium-Small (64px)</p>
+      </div>
+      <div class="tw-text-center">
+        <AiPoweredLoader :size="96" alt="Default loader" />
+        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Default (96px)</p>
+      </div>
+      <div class="tw-text-center">
+        <AiPoweredLoader :size="128" alt="Large loader" />
+        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Large (128px)</p>
+      </div>
+      <div class="tw-text-center">
+        <AiPoweredLoader :size="160" alt="Extra large loader" />
+        <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Extra Large (160px)</p>
+      </div>
+    </div>
+  `,
+});
+
+SizeVariations.story = {
+  name: 'Size Variations',
+};
+
+// Speed variations story
+export const SpeedVariations = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Animation Speed Variations</h3>
+      <div class="tw-flex tw-gap-8 tw-items-center">
+        <div class="tw-text-center">
+          <AiPoweredLoader :interval="75" alt="Fast animation" />
+          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (75ms)</p>
+        </div>
+        <div class="tw-text-center">
+          <AiPoweredLoader :interval="150" alt="Normal animation" />
+          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
+        </div>
+        <div class="tw-text-center">
+          <AiPoweredLoader :interval="300" alt="Slow animation" />
+          <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (300ms)</p>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+SpeedVariations.story = {
+  name: 'Animation Speed',
+};
+
+// Common use cases story
+export const CommonUseCases = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-p-6 tw-space-y-8">
+      <!-- Inline loader -->
+      <div class="tw-border tw-rounded-lg tw-p-4">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Inline Button Loader</h4>
+        <div class="tw-flex tw-items-center tw-gap-3">
+          <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2">
+            <AiPoweredLoader :size="20" :interval="100" alt="Processing" />
+            Processing...
+          </button>
+        </div>
+      </div>
+
+      <!-- Card loader -->
+      <div class="tw-border tw-rounded-lg tw-p-4">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Card Loading State</h4>
+        <div class="tw-bg-gray-50 tw-rounded tw-p-6 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[200px]">
+          <AiPoweredLoader :size="80" alt="Loading content" />
+          <p class="tw-mt-4 tw-text-gray-600">Loading your content...</p>
+        </div>
+      </div>
+
+      <!-- Page loader -->
+      <div class="tw-border tw-rounded-lg tw-p-4">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-3">Full Page Loader</h4>
+        <div class="tw-bg-white tw-rounded tw-p-12 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px] tw-border-2 tw-border-dashed tw-border-gray-300">
+          <AiPoweredLoader :size="120" alt="Loading page" />
+          <p class="tw-mt-6 tw-text-xl tw-text-gray-700">AI is working its magic...</p>
+          <p class="tw-text-sm tw-text-gray-500 tw-mt-2">This may take a few moments</p>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+CommonUseCases.story = {
+  name: 'Common Use Cases',
+};
+
+// Interactive size control story
+export const InteractiveSize = () => ({
+  components: { AiPoweredLoader },
+  data() {
+    return {
+      currentSize: 96,
+      currentInterval: 150,
+    };
+  },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Interactive Size Control</h3>
+
+      <!-- Controls -->
+      <div class="tw-mb-6 tw-space-y-4">
+        <div class="tw-flex tw-items-center tw-gap-4">
+          <label class="tw-text-sm tw-font-medium tw-w-20">Size:</label>
+          <input
+            type="range"
+            min="32"
+            max="200"
+            step="8"
+            v-model="currentSize"
+            class="tw-flex-1 tw-max-w-xs"
+          />
+          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentSize }}px</span>
+        </div>
+
+        <div class="tw-flex tw-items-center tw-gap-4">
+          <label class="tw-text-sm tw-font-medium tw-w-20">Speed:</label>
+          <input
+            type="range"
+            min="50"
+            max="500"
+            step="25"
+            v-model="currentInterval"
+            class="tw-flex-1 tw-max-w-xs"
+          />
+          <span class="tw-text-sm tw-text-gray-600 tw-w-16">{{ currentInterval }}ms</span>
+        </div>
+      </div>
+
+      <!-- Preview -->
+      <div class="tw-flex tw-items-center tw-justify-center tw-p-8 tw-bg-gray-50 tw-rounded-lg">
+        <AiPoweredLoader
+          :size="currentSize"
+          :interval="currentInterval"
+          alt="Interactive loader preview"
+        />
+      </div>
+
+      <p class="tw-text-sm tw-text-gray-600 tw-mt-4">
+        Use the sliders above to adjust the loader size and animation speed in real-time.
+      </p>
+    </div>
+  `,
+});
+
+InteractiveSize.story = {
+  name: 'Interactive Controls',
+};
+
+// Comparison with traditional loader story
+export const LoaderComparison = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-6">AI-Powered vs Traditional Loaders</h3>
+
+      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
+        <!-- AI Powered Loader -->
+        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-purple-600">AI-Powered Loader</h4>
+          <div class="tw-flex tw-justify-center tw-mb-4">
+            <AiPoweredLoader :size="96" alt="AI-powered loader" />
+          </div>
+          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
+            <li>• Modern sparkle animation</li>
+            <li>• Customizable size</li>
+            <li>• Smooth gradient transitions</li>
+            <li>• Configurable speed</li>
+            <li>• Accessibility support</li>
+          </ul>
+        </div>
+
+        <!-- Traditional Loader -->
+        <div class="tw-border tw-rounded-lg tw-p-6 tw-text-center">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4 tw-text-gray-600">Traditional GIF Loader</h4>
+          <div class="tw-flex tw-justify-center tw-mb-4">
+            <img
+              src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
+              alt="Traditional loading GIF"
+              class="tw-block"
+              style="width: 96px; height: auto;"
+            />
+          </div>
+          <ul class="tw-text-sm tw-text-gray-600 tw-space-y-1 tw-text-left">
+            <li>• Fixed GIF animation</li>
+            <li>• Static sizing</li>
+            <li>• Limited customization</li>
+            <li>• Larger file size</li>
+            <li>• Less modern appearance</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="tw-mt-6 tw-p-4 tw-bg-purple-50 tw-rounded-lg">
+        <p class="tw-text-sm tw-text-purple-800">
+          <strong>✨ Pro Tip:</strong> The AI-Powered Loader provides better performance, smaller bundle size,
+          and complete customization while maintaining a modern, engaging user experience.
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+LoaderComparison.story = {
+  name: 'Loader Comparison',
+};
+
+// Showcase story
+export const Showcase = () => ({
+  components: { AiPoweredLoader },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-4">AI-Powered Loader Showcase</h3>
+
+      <div class="tw-space-y-8">
+        <!-- Size Showcase -->
+        <div class="tw-border tw-rounded-lg tw-p-6">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Size Range</h4>
+          <div class="tw-flex tw-gap-6 tw-items-end tw-justify-center">
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="32" alt="Tiny loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">32px</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="48" alt="Small loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">48px</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="64" alt="Medium loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">64px</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="96" alt="Default loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">96px (default)</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="128" alt="Large loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">128px</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="180" alt="Extra large loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">180px</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Speed Showcase -->
+        <div class="tw-border tw-rounded-lg tw-p-6">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Animation Speeds</h4>
+          <div class="tw-flex tw-gap-8 tw-items-center tw-justify-center">
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="80" :interval="50" alt="Very fast loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Very Fast (50ms)</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="80" :interval="100" alt="Fast loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Fast (100ms)</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="80" :interval="150" alt="Normal loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Normal (150ms)</p>
+            </div>
+            <div class="tw-text-center">
+              <AiPoweredLoader :size="80" :interval="250" alt="Slow loader" />
+              <p class="tw-text-xs tw-mt-2 tw-text-gray-600">Slow (250ms)</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Context Examples -->
+        <div class="tw-border tw-rounded-lg tw-p-6">
+          <h4 class="tw-text-md tw-font-semibold tw-mb-4">Real-World Examples</h4>
+          <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6">
+            <!-- Button context -->
+            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
+              <p class="tw-text-sm tw-font-medium tw-mb-3">Button Context</p>
+              <button class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded tw-flex tw-items-center tw-gap-2 tw-mx-auto">
+                <AiPoweredLoader :size="18" :interval="120" alt="Button loading" />
+                Loading...
+              </button>
+            </div>
+
+            <!-- Card context -->
+            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
+              <p class="tw-text-sm tw-font-medium tw-mb-3">Card Loading</p>
+              <div class="tw-bg-white tw-p-4 tw-rounded tw-shadow-sm">
+                <AiPoweredLoader :size="60" alt="Card loading" />
+                <p class="tw-text-sm tw-text-gray-600 tw-mt-2">Loading data...</p>
+              </div>
+            </div>
+
+            <!-- Full screen context -->
+            <div class="tw-bg-gray-50 tw-p-4 tw-rounded tw-text-center">
+              <p class="tw-text-sm tw-font-medium tw-mb-3">Page Loading</p>
+              <div class="tw-bg-white tw-p-6 tw-rounded tw-shadow-sm tw-min-h-[120px] tw-flex tw-flex-col tw-justify-center">
+                <AiPoweredLoader :size="80" alt="Page loading" />
+                <p class="tw-text-sm tw-text-gray-600 tw-mt-3">Please wait...</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+Showcase.story = {
+  name: 'Complete Showcase',
+};