@getmicdrop/svelte-components 2.8.1 → 3.1.0

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"}