@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Input/SelectAudit.stories.svelte

@@ -1,364 +0,0 @@
-<script context="module">
-  import Select from "./Select.svelte";
-  import MultiSelect from "./MultiSelect.svelte";
-  import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
-
-  export const meta = {
-    title: "Audit/Select & Dropdown Variants",
-    component: Select,
-  };
-</script>
-
-<script>
-  import { Story } from "@storybook/addon-svelte-csf";
-
-  let singleValue = "";
-  let multiValue = [];
-  let genderValue = "";
-  let ethnicityValue = [];
-
-  const countryItems = [
-    { value: "us", name: "United States" },
-    { value: "ca", name: "Canada" },
-    { value: "uk", name: "United Kingdom" },
-    { value: "au", name: "Australia" },
-  ];
-
-  const roleItems = [
-    { value: "host", name: "Host" },
-    { value: "headliner", name: "Headliner" },
-    { value: "feature", name: "Feature" },
-    { value: "opener", name: "Opener" },
-  ];
-
-  const genreItems = [
-    { value: "standup", name: "Stand-up Comedy" },
-    { value: "improv", name: "Improv" },
-    { value: "sketch", name: "Sketch Comedy" },
-    { value: "musical", name: "Musical Comedy" },
-  ];
-</script>
-
-<Story name="All Select 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">Select & Dropdown Component Audit</h1>
-      <p class="text-Text-Tartiary mb-8">All dropdown/select variants across the performers portal</p>
-
-      <!-- SECTION: Base Select -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Select Component (Single Selection)
-        </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">
-              Basic Select with label
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={countryItems}
-              label="Country"
-              placeholder="Select a country"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Required Select
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={roleItems}
-              label="Role"
-              placeholder="Select your role"
-              required
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Select with error
-            </div>
-            <Select
-              bind:value={singleValue}
-              items={countryItems}
-              label="Country"
-              placeholder="Select a country"
-              error="Please select a country"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Disabled Select
-            </div>
-            <Select
-              value="us"
-              items={countryItems}
-              label="Country"
-              disabled
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: MultiSelect -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          MultiSelect Component (Multiple Selection)
-        </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">
-              Basic MultiSelect
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres"
-              placeholder="Select genres"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              MultiSelect with hideClear=true
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres (No Clear Button)"
-              placeholder="Select genres"
-              hideClear
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              Required MultiSelect with error
-            </div>
-            <MultiSelect
-              bind:value={multiValue}
-              items={genreItems}
-              label="Genres"
-              placeholder="Select at least one"
-              required
-              error="Please select at least one genre"
-            />
-          </div>
-        </div>
-      </section>
-
-      <!-- SECTION: Using Constants for Options -->
-      <section class="mb-10">
-        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
-          Using Shared Constants for Options
-        </h2>
-        <p class="text-sm text-Text-Tartiary mb-4">
-          Instead of wrapper components, use Select/MultiSelect with constants from <code>$lib/constants/formOptions</code>.
-        </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">
-              Select with GENDER_OPTIONS constant
-            </div>
-            <Select
-              bind:value={genderValue}
-              items={GENDER_OPTIONS}
-              label="Gender"
-              placeholder="Select gender"
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Options:</strong> Male (1), Female (2), Non-Binary (3)
-            </div>
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              MultiSelect with ETHNICITY_OPTIONS constant
-            </div>
-            <MultiSelect
-              bind:value={ethnicityValue}
-              items={ETHNICITY_OPTIONS}
-              label="Ethnicity"
-              placeholder="Select ethnicity"
-              hideClear
-            />
-            <div class="mt-2 text-xs text-Text-Tartiary">
-              <strong>Options:</strong> American Indian, Asian, Black, Hispanic, Middle Eastern, Native Hawaiian, White
-            </div>
-          </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-form.svelte - Gender field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              &lt;Select items=&#123;GENDER_OPTIONS&#125; bind:value=&#123;formData.gender&#125; /&gt;
-            </div>
-            <Select
-              value=""
-              items={GENDER_OPTIONS}
-              label="Gender"
-              placeholder="Select gender"
-            />
-          </div>
-
-          <div class="p-4 bg-BG-Secondary rounded-lg">
-            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Ethnicity field</div>
-            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
-              &lt;MultiSelect items=&#123;ETHNICITY_OPTIONS&#125; bind:value=&#123;formData.ethnicity&#125; hideClear /&gt;
-            </div>
-            <MultiSelect
-              value={[]}
-              items={ETHNICITY_OPTIONS}
-              label="Ethnicity"
-              placeholder="Select ethnicity"
-              hideClear
-            />
-          </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 mb-4">
-          <h3 class="font-semibold text-Text-Primary mb-2">Select</h3>
-          <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">value</td>
-                <td class="py-2 text-xs">any</td>
-                <td class="py-2 text-xs">Selected value (bindable)</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">items</td>
-                <td class="py-2 text-xs">array</td>
-                <td class="py-2 text-xs">Options: &#123;value, name&#125;</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">Label text above select</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</td>
-                <td class="py-2 text-xs">Placeholder text</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">Shows * indicator</td>
-              </tr>
-              <tr class="border-b border-stroke-Secondary">
-                <td class="py-2 font-mono text-xs">disabled</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Disables interaction</td>
-              </tr>
-              <tr>
-                <td class="py-2 font-mono text-xs">error</td>
-                <td class="py-2 text-xs">string</td>
-                <td class="py-2 text-xs">Error message</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
-          <h3 class="font-semibold text-Text-Primary mb-2">MultiSelect (same as Select, plus:)</h3>
-          <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">hideClear</td>
-                <td class="py-2 text-xs">boolean</td>
-                <td class="py-2 text-xs">Hides the clear/X button</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>Removed GenderInput</strong> - was just wrapping Select with hardcoded items</li>
-              <li><strong>Removed EthnicityDropdown</strong> - was just wrapping MultiSelect with hardcoded items</li>
-              <li><strong>Created constants file</strong> - GENDER_OPTIONS and ETHNICITY_OPTIONS in <code>$lib/constants/formOptions.js</code></li>
-              <li><strong>Updated profile-form.svelte</strong> - now uses Select/MultiSelect directly with constants</li>
-            </ul>
-          </div>
-
-          <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">Current State</h3>
-            <ul class="list-disc list-inside space-y-1">
-              <li>Select and MultiSelect are the only dropdown components needed</li>
-              <li>Pass items as props - no need for wrapper components</li>
-              <li>Consistent API across both components</li>
-              <li>Error handling and label display work well</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">Usage Pattern</h3>
-            <pre class="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs overflow-x-auto">
-{`import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
-
-// Gender dropdown
-<Select
-  items={GENDER_OPTIONS}
-  bind:value={formData.gender}
-  label="Gender"
-  placeholder="Select gender"
-/>
-
-// Ethnicity multi-select
-<MultiSelect
-  items={ETHNICITY_OPTIONS}
-  bind:value={formData.ethnicity}
-  label="Ethnicity"
-  hideClear
-/>`}
-            </pre>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</Story>

package/dist/components/Input/SelectAudit.stories.svelte.d.ts

@@ -1,32 +0,0 @@
-export namespace meta {
-    export let title: string;
-    export { Select as component };
-}
-export default SelectAudit;
-import Select from "./Select.svelte";
-type SelectAudit = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SelectAudit: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=SelectAudit.stories.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/SelectAudit.stories.svelte.js"],"names":[],"mappings":";;;;;mBAGqB,iBAAiB;;;;;;;;AA6TtC;;;;mBAAuH;6CAT1E,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"}