@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/CardAudit.stories.svelte

@@ -1,175 +0,0 @@
-<script context="module">
-  import Card from "./Card.svelte";
-
-  export const meta = {
-    title: "Audit/Card Variants",
-    component: Card,
-  };
-</script>
-
-<script>
-  import { Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Story name="All Card 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">Card Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">Card component usage across the performers portal</p>
-
-      <!-- SECTION: Base Card -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Base Card Component
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          Simple wrapper component with consistent padding and styling.
-        </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">
-              Default Card (no className)
-            </div>
-            <Card>
-              <p class="text-Text-Primary">This is a basic card with default styling.</p>
-              <p class="text-Text-Tartiary text-sm mt-2">Cards provide consistent padding and shadow on desktop.</p>
-            </Card>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Card with custom className
-            </div>
-            <Card className="border-2 border-blue-500">
-              <p class="text-Text-Primary">Card with custom border styling via className prop.</p>
-            </Card>
-          </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">Profile Page - Info Section</div>
-            <Card>
-              <h3 class="text-lg font-semibold text-Text-Primary mb-2">Personal Information</h3>
-              <div class="space-y-2 text-sm text-Text-Tartiary">
-                <p><strong>Name:</strong> John Doe</p>
-                <p><strong>Email:</strong> john@example.com</p>
-                <p><strong>Phone:</strong> (555) 123-4567</p>
-              </div>
-            </Card>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">Payment Settings - Payment Method Card</div>
-            <Card>
-              <div class="flex items-center justify-between">
-                <div>
-                  <p class="font-semibold text-Text-Primary">Venmo</p>
-                  <p class="text-sm text-Text-Tartiary">@johndoe</p>
-                </div>
-                <span class="text-green-500 text-sm">Active</span>
-              </div>
-            </Card>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">Notification Settings - Toggle Group</div>
-            <Card>
-              <div class="space-y-4">
-                <div class="flex items-center justify-between">
-                  <span class="text-Text-Primary">Email notifications</span>
-                  <input type="checkbox" checked class="toggle" />
-                </div>
-                <div class="flex items-center justify-between">
-                  <span class="text-Text-Primary">SMS notifications</span>
-                  <input type="checkbox" class="toggle" />
-                </div>
-              </div>
-            </Card>
-          </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>
-                <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>
-
-        <div class="mt-4 p-4 bg-BG-Secondary rounded-lg">
-          <h3 class="font-semibold text-Text-Primary mb-2">Built-in Styling</h3>
-          <ul class="list-disc list-inside text-sm text-Text-Tartiary space-y-1">
-            <li><code>w-full</code> - Full width</li>
-            <li><code>bg-bg-primary</code> - Background color (respects dark mode)</li>
-            <li><code>p-3.5 sm:p-4 md:p-5</code> - Responsive padding</li>
-            <li><code>md:shadow</code> - Shadow on desktop only</li>
-            <li><code>md:rounded-lg</code> - Rounded corners on desktop only</li>
-          </ul>
-        </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>Simple, minimal component - does one thing well</li>
-              <li>Already uses bg-bg-primary which respects dark mode CSS variables</li>
-              <li>Responsive padding is appropriate</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">Consider Adding</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li><strong>variant prop</strong> - default, bordered, elevated</li>
-              <li><strong>padding prop</strong> - none, sm, md, lg</li>
-              <li><strong>header/footer slots</strong> - for consistent card layouts</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-            <h3 class="font-semibold text-blue-700 dark:text-blue-400 mb-2">Related Components</h3>
-            <p class="mb-2">These page-specific "card" components could potentially use the base Card:</p>
-            <ul class="list-disc list-inside space-y-1">
-              <li><strong>ShowItemCard</strong> (933 lines) - complex, but could use Card as base</li>
-              <li><strong>VenueItemCard</strong> (222 lines) - could use Card as base</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</Story>

package/dist/components/CardAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CardAudit.stories.svelte.js"],"names":[],"mappings":";;;;;iBAGmB,eAAe;;;;;;;;AA8LlC;;;;mBAAqH;6CATxE,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/Input/InputAudit.stories.svelte

@@ -1,483 +0,0 @@
-<script context="module">
-  import Input from "./Input.svelte";
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-
-  export const meta = {
-    title: "Audit/Input Variants",
-    component: Input,
-  };
-</script>
-
-<script>
-  // Sample values for demonstration
-  let textValue = "John Doe";
-  let emailValue = "john@example.com";
-  let passwordValue = "Password123!";
-  let phoneValue = "555-123-4567";
-  let textareaValue = "This is a sample note that demonstrates the textarea input variant.";
-  let emptyValue = "";
-  let usernameValue = "johndoe_123";
-</script>
-
-<Story name="All Input 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">Input Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All input variants as they appear across the performers portal</p>
-
-      <!-- SECTION: Input Types -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Input Types
-        </h2>
-
-        <div class="space-y-6">
-          <!-- Text Input -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="text" | label="Full Name" | size="full"
-            </div>
-            <Input
-              type="text"
-              label="Full Name"
-              placeholder="Enter your full name"
-              size="full"
-              bind:value={textValue}
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> profile-form.svelte, payment-settings
-            </div>
-          </div>
-
-          <!-- Email Input -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="email" | size="full" | autocomplete="username"
-            </div>
-            <Input
-              type="email"
-              label="Email"
-              placeholder=""
-              size="full"
-              bind:value={emailValue}
-              autocomplete="username"
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> login/+page.svelte (sign in, reset, login-link views)
-            </div>
-          </div>
-
-          <!-- Password Input -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="password" | size="full" | showPasswordToggle=&#123;true&#125; (default)
-            </div>
-            <Input
-              type="password"
-              label="Password"
-              placeholder=""
-              size="full"
-              bind:value={passwordValue}
-              autocomplete="current-password"
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> login/+page.svelte (sign in, setup password views)
-            </div>
-            <div class="mt-1 text-xs text-primary-700">
-              <strong>Note:</strong> Show/hide toggle is now enabled by default for all password fields.
-              Use <code>showPasswordToggle=&#123;false&#125;</code> to hide it.
-            </div>
-          </div>
-
-          <!-- Phone Number -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="phoneNumber" | maxlength=&#123;12&#125;
-            </div>
-            <Input
-              type="phoneNumber"
-              label="Phone Number"
-              placeholder="xxx-xxx-xxxx"
-              size="full"
-              bind:value={phoneValue}
-              maxlength={12}
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> profile-form.svelte
-            </div>
-          </div>
-
-          <!-- Username -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="username" | sanitizes to alphanumeric + . _ @
-            </div>
-            <Input
-              type="username"
-              label="Instagram Handle"
-              placeholder="@username"
-              size="full"
-              bind:value={usernameValue}
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> profile-form.svelte (social media section)
-            </div>
-          </div>
-
-          <!-- Textarea -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="textarea" | className="h-44"
-            </div>
-            <Input
-              type="textarea"
-              label="Bio"
-              placeholder=""
-              size="full"
-              bind:value={textareaValue}
-              className="h-44"
-              maxlength={500}
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Used in:</strong> ShowItemCard modals, VenueItemCard modal, profile-form.svelte
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 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="full" (w-full)</div>
-            <Input type="text" placeholder="Full width" size="full" />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">size="large" (w-96)</div>
-            <Input type="text" placeholder="Large width" size="large" />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">size="medium" (w-64)</div>
-            <Input type="text" placeholder="Medium width" size="medium" />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">size="small" (w-52)</div>
-            <Input type="text" placeholder="Small width" size="small" />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">size="" (default: w-44)</div>
-            <Input type="text" placeholder="Default width" />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: States -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Input States
-        </h2>
-
-        <div class="space-y-4">
-          <!-- Default -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">Default state</div>
-            <Input type="text" label="Default" placeholder="Enter value" size="full" />
-          </div>
-
-          <!-- Required -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">required=&#123;true&#125;</div>
-            <Input type="text" label="Required Field" placeholder="This field is required" size="full" required />
-          </div>
-
-          <!-- Optional -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">optional=&#123;true&#125;</div>
-            <Input type="text" label="Optional Field" placeholder="Optional" size="full" optional />
-          </div>
-
-          <!-- Disabled -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">disabled=&#123;true&#125;</div>
-            <Input type="text" label="Disabled" placeholder="Cannot edit" size="full" disabled value="Disabled value" />
-          </div>
-
-          <!-- Readonly -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">readonly=&#123;true&#125;</div>
-            <Input type="text" label="Readonly" size="full" readonly value="Read only value" />
-          </div>
-
-          <!-- With Error -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">errorText="Error message"</div>
-            <Input
-              type="text"
-              label="With Error"
-              placeholder="Enter value"
-              size="full"
-              errorText="This field has an error"
-              value=""
-            />
-          </div>
-
-          <!-- With Helper Text -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">helperText="Helper text"</div>
-            <Input type="text" label="With Helper" placeholder="Enter value" size="full" helperText="This is helper text below the input" />
-            <div class="mt-1 text-xs text-primary-700">
-              <strong>Note:</strong> helperText and hintText have been merged. Use helperText (with optional helperIcon).
-            </div>
-          </div>
-
-          <!-- Animate Focus (default behavior) -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">animateFocus=&#123;true&#125; (default)</div>
-            <Input type="text" label="Animate Focus" placeholder="Click to see scale effect" size="full" />
-            <div class="mt-1 text-xs text-primary-700">
-              <strong>Effect:</strong> Subtle scale(1.01) on focus. Now enabled by default on all inputs.
-              Auto-disabled on disabled/readonly inputs.
-            </div>
-          </div>
-
-          <!-- Animate Focus Disabled -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">animateFocus=&#123;false&#125; (opt-out)</div>
-            <Input type="text" label="No Animation" placeholder="Click - no scale effect" size="full" animateFocus={false} />
-          </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 (Exact Props)
-        </h2>
-
-        <div class="space-y-6">
-          <!-- Login Email -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">login/+page.svelte - Email field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              className="font-normal text-sm text-gray-500" size="full" placeholder="" autocomplete="username"
-            </div>
-            <Input
-              className="font-normal text-sm text-gray-500"
-              size="full"
-              id="email"
-              placeholder=""
-              autocomplete="username"
-            />
-          </div>
-
-          <!-- Login Password -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">login/+page.svelte - Password field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="password" size="full" autocomplete="current-password" (toggle shows by default)
-            </div>
-            <Input
-              className="font-normal text-sm text-gray-500"
-              size="full"
-              id="password"
-              placeholder=""
-              type="password"
-              autocomplete="current-password"
-            />
-          </div>
-
-          <!-- Profile Form Field -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Generic field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              &#123;...field&#125; size="full" (spread props from field config)
-            </div>
-            <Input
-              label="Stage Name"
-              name="stageName"
-              placeholder=""
-              size="full"
-            />
-          </div>
-
-          <!-- Profile Bio (textarea with maxlength) -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Bio textarea</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="textarea" maxlength=&#123;500&#125; className="text-sm"
-            </div>
-            <Input
-              type="textarea"
-              label="Bio"
-              placeholder=""
-              size="full"
-              maxlength={500}
-              className="text-sm"
-              bind:value={textareaValue}
-            />
-            <div class="text-xs text-Text-Tartiary text-right mt-1">
-              {textareaValue?.length || 0}/500 characters
-            </div>
-          </div>
-
-          <!-- Modal Textarea (no placeholder) -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">ShowItemCard.svelte - Modal note textarea</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              type="textarea" className="h-44 mt-1" size="full" (no placeholder)
-            </div>
-            <Input
-              type="textarea"
-              id="notes"
-              className="h-44 mt-1"
-              size="full"
-            />
-          </div>
-
-          <!-- Payment Settings -->
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">payment-settings/[paymentMethod] - Form field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              label required placeholder className="w-full" size="full" errorText=&#123;touched ? error : ""&#125;
-            </div>
-            <Input
-              label="Account Number"
-              id="accountNumber"
-              name="accountNumber"
-              placeholder="Enter account number"
-              required
-              className="w-full"
-              size="full"
-            />
-          </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">Values</th>
-                <th class="py-2 text-Text-Primary">Usage</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">text, email, password, textarea, phoneNumber, creditCardNumber, username</td>
-                <td class="py-2 text-xs">High</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">full, large, medium, small, "" (default)</td>
-                <td class="py-2 text-xs">High - almost always "full"</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">label</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">High</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">placeholder</td>
-                <td class="py-2 text-xs">string (often empty "")</td>
-                <td class="py-2 text-xs">Medium</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">required</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Medium</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">errorText</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Medium</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">showPasswordToggle</td>
-                <td class="py-2 text-xs">boolean (default: true)</td>
-                <td class="py-2 text-xs">Auto-enabled for password fields</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">autocomplete</td>
-                <td class="py-2 text-xs">username, current-password, new-password</td>
-                <td class="py-2 text-xs">Low - login forms only</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">maxlength</td>
-                <td class="py-2 text-xs">number</td>
-                <td class="py-2 text-xs">Low - bio, intro credits</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">className</td>
-                <td class="py-2 text-xs">string (h-44, text-sm, w-full)</td>
-                <td class="py-2 text-xs">Medium - override styling</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">helperText</td>
-                <td class="py-2 text-xs">string (+ optional helperIcon)</td>
-                <td class="py-2 text-xs">Low - merged with hintText</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">optional</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Low</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">disabled/readonly</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Low</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- SECTION: Consolidation Status -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Consolidation Status
-        </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">Completed</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li><strong>Dark mode:</strong> Added CSS variable support</li>
-              <li><strong>Size prop:</strong> "full" is now the default</li>
-              <li><strong>Textarea height:</strong> Added textareaSize prop (sm, md, lg)</li>
-              <li><strong>animateFocus prop:</strong> Now defaults to true (auto-disabled on disabled/readonly)</li>
-              <li><strong>showPasswordToggle:</strong> Now defaults to true for password fields</li>
-              <li><strong>helperText/hintText:</strong> Merged into single helperText (with optional helperIcon)</li>
-            </ul>
-          </div>
-
-          <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-            <h3 class="font-semibold text-blue-700 dark:text-blue-400 mb-2">Current State</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Single Input component handles all input types via <code>type</code> prop</li>
-              <li>Types: text, email, password, textarea, phoneNumber, creditCardNumber, username</li>
-              <li>Consistent API across all variants</li>
-              <li>Dark mode support via CSS variables</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-    </div>
-  </div>
-</Story>

package/dist/components/Input/InputAudit.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/InputAudit.stories.svelte.js"],"names":[],"mappings":";;;;;kBAGoB,gBAAgB;;;;;;;;AAwZpC;;;;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"}