@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/Alert/AlertAudit.stories.svelte

@@ -1,241 +0,0 @@
-<script context="module">
-  import Alert from "./Alert.svelte";
-
-  export const meta = {
-    title: "Audit/Alert Variants",
-    component: Alert,
-  };
-</script>
-
-<script>
-  import { Story } from '@storybook/addon-svelte-csf';
-
-  let showDismissable = true;
-
-  function resetDismissable() {
-    showDismissable = false;
-    setTimeout(() => showDismissable = true, 500);
-  }
-</script>
-
-<Story name="All Alert Variants">
-  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
-    <div class="max-w-2xl mx-auto">
-      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Alert Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All alert variants as they appear across the performers portal</p>
-
-      <!-- SECTION: Alert Types -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Alert Types
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="info" (default) - blue styling
-            </div>
-            <Alert type="info" title="Information" message="This is an informational alert message." />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="success" - green styling
-            </div>
-            <Alert type="success" title="Success" message="Your changes have been saved successfully." />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="warning" - yellow styling
-            </div>
-            <Alert type="warning" title="Warning" message="Please review your information before proceeding." />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="danger" - red styling
-            </div>
-            <Alert type="danger" title="Error" message="Something went wrong. Please try again." />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Content Variants -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Content Variants
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Title only (no message)
-            </div>
-            <Alert type="info" title="Just a title" />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Message only (no title)
-            </div>
-            <Alert type="info" message="This alert has only a message, no title." />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              With slot content
-            </div>
-            <Alert type="warning" title="Custom Content">
-              <p class="mt-2">This alert uses a <strong>slot</strong> for custom HTML content.</p>
-              <ul class="list-disc list-inside mt-2 text-sm">
-                <li>Item one</li>
-                <li>Item two</li>
-              </ul>
-            </Alert>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Dismissable -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Dismissable Alerts
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              onClose callback provided - shows X button
-            </div>
-            {#if showDismissable}
-              <Alert
-                type="info"
-                title="Dismissable Alert"
-                message="Click the X to dismiss this alert."
-                onClose={resetDismissable}
-              />
-            {:else}
-              <button
-                class="text-blue-500 underline text-sm"
-                on:click={resetDismissable}
-              >
-                Show alert again
-              </button>
-            {/if}
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Real Usage Examples -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Real Usage Examples
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">Payment Settings - Error State</div>
-            <Alert
-              type="danger"
-              title="Payment Failed"
-              message="We couldn't process your payment. Please check your card details and try again."
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">Profile - Missing Info Warning</div>
-            <Alert
-              type="warning"
-              title="Profile Incomplete"
-              message="Please complete your profile to start receiving show invitations."
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">Availability - Success Message</div>
-            <Alert
-              type="success"
-              title="Availability Updated"
-              message="Your availability has been saved and sent to the venue."
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Props Summary -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Props Summary
-        </h2>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Default</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">type</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">"info"</td>
-                <td class="py-2 text-xs">info, success, warning, danger</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">title</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">""</td>
-                <td class="py-2 text-xs">Bold heading text</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">message</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">""</td>
-                <td class="py-2 text-xs">Body text below title</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">onClose</td>
-                <td class="py-2 text-xs">function</td>
-                <td class="py-2 text-xs">undefined</td>
-                <td class="py-2 text-xs">If provided, shows dismiss button</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- SECTION: Consolidation Recommendations -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Consolidation Recommendations
-        </h2>
-
-        <div class="space-y-4 text-sm text-Text-Tartiary">
-          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Keep As-Is</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Clean, simple API with type, title, message props</li>
-              <li>Dark mode support already implemented</li>
-              <li>Slot support for custom content</li>
-              <li>Uses Flowbite under the hood (consistent styling)</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
-            <h3 class="font-semibold text-yellow-700 dark:text-yellow-400 mb-2">Minor Improvements</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Consider adding icon prop for custom icons</li>
-              <li>Add auto-dismiss timeout option</li>
-              <li>Consider border style variant (bordered vs filled)</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</Story>

package/dist/components/Alert/AlertAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlertAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertAudit.stories.svelte.js"],"names":[],"mappings":";;;;;kBAGoB,gBAAgB;;;;;;;;AA4OpC;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/Badges/BadgeAudit.stories.svelte

@@ -1,238 +0,0 @@
-<script context="module">
-  import Badge from "./Badge.svelte";
-
-  export const meta = {
-    title: "Audit/Badge Variants",
-    component: Badge,
-  };
-</script>
-
-<script>
-  import { Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Story name="All Badge Variants">
-  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
-    <div class="max-w-2xl mx-auto">
-      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Badge Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All badge variants as they appear across the performers portal</p>
-
-      <!-- SECTION: Size Variants -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Size Variants
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              size="small" - tiny badge for compact spaces
-            </div>
-            <div class="flex items-center gap-2">
-              <Badge size="small" variant="info">Small</Badge>
-              <span class="text-xs text-Text-Tartiary">px-[2px] text-[7px]</span>
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              size="medium" (default) - standard badge size
-            </div>
-            <div class="flex items-center gap-2">
-              <Badge size="medium" variant="info">Medium</Badge>
-              <span class="text-xs text-Text-Tartiary">px-[8.5px] py-[2px] text-[10px]</span>
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              size="large" - prominent badge
-            </div>
-            <div class="flex items-center gap-2">
-              <Badge size="large" variant="info">Large</Badge>
-              <span class="text-xs text-Text-Tartiary">px-[15.5px] py-[6px] text-sm</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Role Variants (NEW!) -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Role Variants (Semantic)
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          Use the <code class="bg-gray-100 px-1 rounded">variant</code> prop for semantic role badges.
-        </p>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="host"
-            </div>
-            <Badge variant="host">Host</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="headliner"
-            </div>
-            <Badge variant="headliner">Headliner</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="feature"
-            </div>
-            <Badge variant="feature">Feature</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="special-guest"
-            </div>
-            <Badge variant="special-guest">Special Guest</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="opener"
-            </div>
-            <Badge variant="opener">Opener</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="guest"
-            </div>
-            <Badge variant="guest">Guest</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="teacher"
-            </div>
-            <Badge variant="teacher">Teacher</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="assistant"
-            </div>
-            <Badge variant="assistant">Assistant</Badge>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Status Variants -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Status Variants
-        </h2>
-
-        <div class="space-y-4">
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="success"
-            </div>
-            <Badge variant="success">Active</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="warning"
-            </div>
-            <Badge variant="warning">Pending</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="error"
-            </div>
-            <Badge variant="error">Cancelled</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="info"
-            </div>
-            <Badge variant="info">Info</Badge>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              variant="neutral"
-            </div>
-            <Badge variant="neutral">Neutral</Badge>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Real Usage -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Real Usage in ShowItemCard
-        </h2>
-
-        <div class="p-4 bg-BG-Secondary rounded-lg">
-          <div class="text-xs text-Text-Tartiary mb-4 font-mono">
-            Badge is used to display performer role on show cards
-          </div>
-
-          <!-- Simulated Show Card Header -->
-          <div class="bg-BG-Primary p-4 rounded-lg border border-stroke-Primary">
-            <div class="flex items-start gap-3">
-              <div class="w-16 h-16 bg-gray-300 rounded-lg flex items-center justify-center text-gray-500">
-                IMG
-              </div>
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 class="font-semibold text-Text-Primary">Comedy Night Live</h3>
-                  <Badge size="small" variant="headliner">Headliner</Badge>
-                </div>
-                <p class="text-sm text-Text-Tartiary">The Laugh Factory</p>
-                <p class="text-xs text-Text-Tartiary">Saturday, Dec 14 at 8:00 PM</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Props Summary -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Props Summary
-        </h2>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
-          <table class="w-full text-left">
-            <thead>
-              <tr class="border-b border-stroke-Primary">
-                <th class="py-2 text-Text-Primary">Prop</th>
-                <th class="py-2 text-Text-Primary">Type</th>
-                <th class="py-2 text-Text-Primary">Description</th>
-              </tr>
-            </thead>
-            <tbody class="text-Text-Tartiary">
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">variant</td>
-                <td class="py-2 text-xs">string (required)</td>
-                <td class="py-2 text-xs">Semantic variant: host, headliner, feature, special-guest, opener, guest, teacher, assistant, success, warning, error, info, neutral</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">size</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">small, medium (default), large</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">className</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Additional CSS classes</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-    </div>
-  </div>
-</Story>

package/dist/components/Badges/BadgeAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BadgeAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/BadgeAudit.stories.svelte.js"],"names":[],"mappings":";;;;;kBAGoB,gBAAgB;;;;;;;;AA6PpC;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}