@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-2

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

@@ -1,386 +1,386 @@
-import SparkleIcon from './SparkleIcon.vue';
-
-export default {
-  title: 'Components/SparkleIcon',
-  component: SparkleIcon,
-  argTypes: {
-    animated: {
-      control: 'boolean',
-      description: 'Whether the sparkle icon should animate',
-      defaultValue: false,
-    },
-    withSpinner: {
-      control: 'boolean',
-      description: 'Whether to show spinner arc with sparkle (only applies when animated)',
-      defaultValue: false,
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg', 12, 16, 20, 24, 32, 48],
-      description: 'Size of the icon (predefined or custom number)',
-      defaultValue: 'md',
-    },
-    color: {
-      control: 'color',
-      description: 'Color of the icon (hex value)',
-      defaultValue: '#3F59F6',
-    },
-    colorClass: {
-      control: 'text',
-      description: 'Tailwind color class (e.g., tw-text-red-500)',
-    },
-  },
-};
-
-// Default story
-export const Default = (args) => ({
-  components: { SparkleIcon },
-  setup() {
-    return { args };
-  },
-  template: '<SparkleIcon v-bind="args" />',
-});
-
-Default.args = {
-  animated: false,
-  withSpinner: false,
-  size: 'md',
-};
-
-// Static icon story
-export const Static = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <SparkleIcon size="sm" />
-      <SparkleIcon size="md" />
-      <SparkleIcon size="lg" />
-    </div>
-  `,
-});
-
-Static.story = {
-  name: 'Static Sizes',
-};
-
-// Animated icon story
-export const Animated = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-flex tw-gap-4 tw-items-center tw-text-black">
-      <SparkleIcon :animated="true" size="sm" />
-      <SparkleIcon :animated="true" size="md" />
-      <SparkleIcon :animated="true" size="lg" />
-    </div>
-  `,
-});
-
-Animated.story = {
-  name: 'Animated Sizes',
-};
-
-// Custom sizes story
-export const CustomSizes = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <SparkleIcon :size="12" />
-      <SparkleIcon :size="16" />
-      <SparkleIcon :size="20" />
-      <SparkleIcon :size="24" />
-      <SparkleIcon :size="32" />
-      <SparkleIcon :size="48" />
-    </div>
-  `,
-});
-
-CustomSizes.story = {
-  name: 'Custom Number Sizes',
-};
-
-// Interactive toggle story
-export const Interactive = () => ({
-  components: { SparkleIcon },
-  data() {
-    return {
-      isAnimated: false,
-    };
-  },
-  template: `
-    <div class="tw-flex tw-flex-col tw-gap-4">
-      <div class="tw-flex tw-items-center tw-gap-4">
-        <SparkleIcon :animated="isAnimated" size="lg" />
-        <button 
-          class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded hover:tw-bg-blue-600"
-          @click="isAnimated = !isAnimated"
-        >
-          {{ isAnimated ? 'Stop Animation' : 'Start Animation' }}
-        </button>
-      </div>
-      <p class="tw-text-sm tw-text-gray-600">
-        Click the button to toggle animation
-      </p>
-    </div>
-  `,
-});
-
-Interactive.story = {
-  name: 'Interactive Toggle',
-};
-
-// Animated with spinner story
-export const WithSpinner = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-p-4">
-      <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
-        Note: Spinner variant uses larger sizes (sm=36px, md=48px, lg=60px) for better visibility
-      </p>
-      <div class="tw-flex tw-gap-4 tw-items-center">
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
-          <p class="tw-text-xs tw-mt-2">Small (36px)</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" :withSpinner="true" size="md" />
-          <p class="tw-text-xs tw-mt-2">Medium (48px)</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
-          <p class="tw-text-xs tw-mt-2">Large (60px)</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-WithSpinner.story = {
-  name: 'Animated with Spinner',
-};
-
-// Comparison story
-export const Comparison = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-p-6">
-      <div class="tw-mb-6">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Regular Sparkle (12px, 16px, 20px)</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="sm" />
-            <p class="tw-text-xs tw-mt-2">sm</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="md" />
-            <p class="tw-text-xs tw-mt-2">md</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="lg" />
-            <p class="tw-text-xs tw-mt-2">lg</p>
-          </div>
-        </div>
-      </div>
-      
-      <div>
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Sparkle with Spinner (36px, 48px, 60px)</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
-            <p class="tw-text-xs tw-mt-2">sm</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="md" />
-            <p class="tw-text-xs tw-mt-2">md</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
-            <p class="tw-text-xs tw-mt-2">lg</p>
-          </div>
-        </div>
-      </div>
-      
-      <p class="tw-text-sm tw-text-gray-600 tw-mt-4">
-        Note: The spinner variant automatically uses larger sizes for better visibility of the spinner arc.
-      </p>
-    </div>
-  `,
-});
-
-Comparison.story = {
-  name: 'Regular vs Spinner Comparison',
-};
-
-// Color prop story
-export const ColorProps = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-p-6">
-      <div class="tw-mb-4">
-        <h3 class="tw-text-lg tw-font-bold tw-mb-2">Color Prop</h3>
-        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
-          Use the color prop to customize the icon color with hex values.
-        </p>
-      </div>
-      
-      <div class="tw-flex tw-gap-4 tw-items-center">
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color="#FF0000" />
-          <p class="tw-text-xs tw-mt-2">Red</p>
-          <p class="tw-text-xs tw-text-gray-500">#FF0000</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color="#00FF00" />
-          <p class="tw-text-xs tw-mt-2">Green</p>
-          <p class="tw-text-xs tw-text-gray-500">#00FF00</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color="#0000FF" />
-          <p class="tw-text-xs tw-mt-2">Blue</p>
-          <p class="tw-text-xs tw-text-gray-500">#0000FF</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color="#FF6B00" />
-          <p class="tw-text-xs tw-mt-2">Orange</p>
-          <p class="tw-text-xs tw-text-gray-500">#FF6B00</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" />
-          <p class="tw-text-xs tw-mt-2">Default</p>
-          <p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-ColorProps.story = {
-  name: 'Color Prop',
-};
-
-// ColorClass prop story
-export const ColorClassProps = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-p-6">
-      <div class="tw-mb-4">
-        <h3 class="tw-text-lg tw-font-bold tw-mb-2">ColorClass Prop</h3>
-        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
-          Use the colorClass prop to apply Tailwind color classes to the icon.
-        </p>
-      </div>
-      
-      <div class="tw-flex tw-gap-4 tw-items-center">
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color-class="tw-text-secondary-500" />
-          <p class="tw-text-xs tw-mt-2">Secondary</p>
-          <p class="tw-text-xs tw-text-gray-500">tw-text-secondary-500</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color-class="tw-text-info-500" />
-          <p class="tw-text-xs tw-mt-2">Info</p>
-          <p class="tw-text-xs tw-text-gray-500">tw-text-info-500</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" color-class="tw-text-error-500" />
-          <p class="tw-text-xs tw-mt-2">Error</p>
-          <p class="tw-text-xs tw-text-gray-500">tw-text-error-500</p>
-        </div>
-        <div class="tw-text-center">
-          <SparkleIcon :animated="true" size="lg" />
-          <p class="tw-text-xs tw-mt-2">Default</p>
-          <p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-ColorClassProps.story = {
-  name: 'ColorClass Prop',
-};
-
-// All variations showcase
-export const Showcase = () => ({
-  components: { SparkleIcon },
-  template: `
-    <div class="tw-p-6">
-      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Sparkle Icon Showcase</h3>
-      
-      <div class="tw-mb-6">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Static Icons</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon size="sm" />
-            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon size="md" />
-            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon size="lg" />
-            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
-          </div>
-        </div>
-      </div>
-
-      <div class="tw-mb-6">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated Icons</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="sm" />
-            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="md" />
-            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" size="lg" />
-            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
-          </div>
-        </div>
-      </div>
-
-      <div class="tw-mb-6">
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated with Spinner</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
-            <p class="tw-text-xs tw-mt-1">Small (36px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="md" />
-            <p class="tw-text-xs tw-mt-1">Medium (48px)</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
-            <p class="tw-text-xs tw-mt-1">Large (60px)</p>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Custom Sizes</h4>
-        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :size="24" />
-            <p class="tw-text-xs tw-mt-1">24px</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :size="36" />
-            <p class="tw-text-xs tw-mt-1">36px</p>
-          </div>
-          <div class="tw-text-center">
-            <SparkleIcon :animated="true" :size="48" />
-            <p class="tw-text-xs tw-mt-1">48px</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-});
-
-Showcase.story = {
-  name: 'Complete Showcase',
-};
+import SparkleIcon from './SparkleIcon.vue';
+
+export default {
+  title: 'Components/SparkleIcon',
+  component: SparkleIcon,
+  argTypes: {
+    animated: {
+      control: 'boolean',
+      description: 'Whether the sparkle icon should animate',
+      defaultValue: false,
+    },
+    withSpinner: {
+      control: 'boolean',
+      description: 'Whether to show spinner arc with sparkle (only applies when animated)',
+      defaultValue: false,
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg', 12, 16, 20, 24, 32, 48],
+      description: 'Size of the icon (predefined or custom number)',
+      defaultValue: 'md',
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the icon (hex value)',
+      defaultValue: '#3F59F6',
+    },
+    colorClass: {
+      control: 'text',
+      description: 'Tailwind color class (e.g., tw-text-red-500)',
+    },
+  },
+};
+
+// Default story
+export const Default = (args) => ({
+  components: { SparkleIcon },
+  setup() {
+    return { args };
+  },
+  template: '<SparkleIcon v-bind="args" />',
+});
+
+Default.args = {
+  animated: false,
+  withSpinner: false,
+  size: 'md',
+};
+
+// Static icon story
+export const Static = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <SparkleIcon size="sm" />
+      <SparkleIcon size="md" />
+      <SparkleIcon size="lg" />
+    </div>
+  `,
+});
+
+Static.story = {
+  name: 'Static Sizes',
+};
+
+// Animated icon story
+export const Animated = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center tw-text-black">
+      <SparkleIcon :animated="true" size="sm" />
+      <SparkleIcon :animated="true" size="md" />
+      <SparkleIcon :animated="true" size="lg" />
+    </div>
+  `,
+});
+
+Animated.story = {
+  name: 'Animated Sizes',
+};
+
+// Custom sizes story
+export const CustomSizes = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <SparkleIcon :size="12" />
+      <SparkleIcon :size="16" />
+      <SparkleIcon :size="20" />
+      <SparkleIcon :size="24" />
+      <SparkleIcon :size="32" />
+      <SparkleIcon :size="48" />
+    </div>
+  `,
+});
+
+CustomSizes.story = {
+  name: 'Custom Number Sizes',
+};
+
+// Interactive toggle story
+export const Interactive = () => ({
+  components: { SparkleIcon },
+  data() {
+    return {
+      isAnimated: false,
+    };
+  },
+  template: `
+    <div class="tw-flex tw-flex-col tw-gap-4">
+      <div class="tw-flex tw-items-center tw-gap-4">
+        <SparkleIcon :animated="isAnimated" size="lg" />
+        <button 
+          class="tw-px-4 tw-py-2 tw-bg-primary-500 tw-text-white tw-rounded hover:tw-bg-blue-600"
+          @click="isAnimated = !isAnimated"
+        >
+          {{ isAnimated ? 'Stop Animation' : 'Start Animation' }}
+        </button>
+      </div>
+      <p class="tw-text-sm tw-text-gray-600">
+        Click the button to toggle animation
+      </p>
+    </div>
+  `,
+});
+
+Interactive.story = {
+  name: 'Interactive Toggle',
+};
+
+// Animated with spinner story
+export const WithSpinner = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-4">
+      <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
+        Note: Spinner variant uses larger sizes (sm=36px, md=48px, lg=60px) for better visibility
+      </p>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
+          <p class="tw-text-xs tw-mt-2">Small (36px)</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" :withSpinner="true" size="md" />
+          <p class="tw-text-xs tw-mt-2">Medium (48px)</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
+          <p class="tw-text-xs tw-mt-2">Large (60px)</p>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+WithSpinner.story = {
+  name: 'Animated with Spinner',
+};
+
+// Comparison story
+export const Comparison = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-6">
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Regular Sparkle (12px, 16px, 20px)</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="sm" />
+            <p class="tw-text-xs tw-mt-2">sm</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="md" />
+            <p class="tw-text-xs tw-mt-2">md</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="lg" />
+            <p class="tw-text-xs tw-mt-2">lg</p>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Sparkle with Spinner (36px, 48px, 60px)</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
+            <p class="tw-text-xs tw-mt-2">sm</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="md" />
+            <p class="tw-text-xs tw-mt-2">md</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
+            <p class="tw-text-xs tw-mt-2">lg</p>
+          </div>
+        </div>
+      </div>
+      
+      <p class="tw-text-sm tw-text-gray-600 tw-mt-4">
+        Note: The spinner variant automatically uses larger sizes for better visibility of the spinner arc.
+      </p>
+    </div>
+  `,
+});
+
+Comparison.story = {
+  name: 'Regular vs Spinner Comparison',
+};
+
+// Color prop story
+export const ColorProps = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-6">
+      <div class="tw-mb-4">
+        <h3 class="tw-text-lg tw-font-bold tw-mb-2">Color Prop</h3>
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
+          Use the color prop to customize the icon color with hex values.
+        </p>
+      </div>
+      
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color="#FF0000" />
+          <p class="tw-text-xs tw-mt-2">Red</p>
+          <p class="tw-text-xs tw-text-gray-500">#FF0000</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color="#00FF00" />
+          <p class="tw-text-xs tw-mt-2">Green</p>
+          <p class="tw-text-xs tw-text-gray-500">#00FF00</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color="#0000FF" />
+          <p class="tw-text-xs tw-mt-2">Blue</p>
+          <p class="tw-text-xs tw-text-gray-500">#0000FF</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color="#FF6B00" />
+          <p class="tw-text-xs tw-mt-2">Orange</p>
+          <p class="tw-text-xs tw-text-gray-500">#FF6B00</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" />
+          <p class="tw-text-xs tw-mt-2">Default</p>
+          <p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+ColorProps.story = {
+  name: 'Color Prop',
+};
+
+// ColorClass prop story
+export const ColorClassProps = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-6">
+      <div class="tw-mb-4">
+        <h3 class="tw-text-lg tw-font-bold tw-mb-2">ColorClass Prop</h3>
+        <p class="tw-text-sm tw-text-gray-600 tw-mb-4">
+          Use the colorClass prop to apply Tailwind color classes to the icon.
+        </p>
+      </div>
+      
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color-class="tw-text-secondary-500" />
+          <p class="tw-text-xs tw-mt-2">Secondary</p>
+          <p class="tw-text-xs tw-text-gray-500">tw-text-secondary-500</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color-class="tw-text-info-500" />
+          <p class="tw-text-xs tw-mt-2">Info</p>
+          <p class="tw-text-xs tw-text-gray-500">tw-text-info-500</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" color-class="tw-text-error-500" />
+          <p class="tw-text-xs tw-mt-2">Error</p>
+          <p class="tw-text-xs tw-text-gray-500">tw-text-error-500</p>
+        </div>
+        <div class="tw-text-center">
+          <SparkleIcon :animated="true" size="lg" />
+          <p class="tw-text-xs tw-mt-2">Default</p>
+          <p class="tw-text-xs tw-text-gray-500">#3F59F6</p>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+ColorClassProps.story = {
+  name: 'ColorClass Prop',
+};
+
+// All variations showcase
+export const Showcase = () => ({
+  components: { SparkleIcon },
+  template: `
+    <div class="tw-p-6">
+      <h3 class="tw-text-lg tw-font-bold tw-mb-4">Sparkle Icon Showcase</h3>
+      
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Static Icons</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon size="sm" />
+            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon size="md" />
+            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon size="lg" />
+            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated Icons</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="sm" />
+            <p class="tw-text-xs tw-mt-1">Small (12px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="md" />
+            <p class="tw-text-xs tw-mt-1">Medium (16px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" size="lg" />
+            <p class="tw-text-xs tw-mt-1">Large (20px)</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-mb-6">
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Animated with Spinner</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="sm" />
+            <p class="tw-text-xs tw-mt-1">Small (36px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="md" />
+            <p class="tw-text-xs tw-mt-1">Medium (48px)</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :withSpinner="true" size="lg" />
+            <p class="tw-text-xs tw-mt-1">Large (60px)</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h4 class="tw-text-md tw-font-semibold tw-mb-2">Custom Sizes</h4>
+        <div class="tw-flex tw-gap-4 tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="24" />
+            <p class="tw-text-xs tw-mt-1">24px</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="36" />
+            <p class="tw-text-xs tw-mt-1">36px</p>
+          </div>
+          <div class="tw-text-center">
+            <SparkleIcon :animated="true" :size="48" />
+            <p class="tw-text-xs tw-mt-1">48px</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+Showcase.story = {
+  name: 'Complete Showcase',
+};