@getmicdrop/svelte-components 5.12.0 → 5.13.0

package/dist/recipes/modals/StatusModal.svelte

@@ -6,8 +6,8 @@
   import { typography } from '../../tokens/typography';
 
   let {
-    show = $bindable(false),
-    size = "small",
+    open = $bindable(false),
+    size = "sm",
     title = "",
     subtitle = "",
     description = "",
@@ -45,7 +45,7 @@
   };
 
   const closeModal = () => {
-    show = false;
+    open = false;
     onclose?.();
   };
 
@@ -111,7 +111,7 @@
   let buttonVariant = $derived(getButtonVariant(effectiveVariant));
 </script>
 
-<Modal bind:show {size} oncancel={handleClose} {...restProps}>
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
   {#snippet header()}
     <div class="text-center">
       {#if closeBtn}

package/dist/recipes/modals/StatusModal.svelte.d.ts

@@ -4,7 +4,7 @@ type StatusModal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const StatusModal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;
@@ -20,9 +20,9 @@ declare const StatusModal: import("svelte").Component<{
     closeBtn?: boolean;
     onconfirm: any;
     onclose: any;
-} & Record<string, any>, {}, "show">;
+} & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
-    show?: boolean;
+    open?: boolean;
     size?: string;
     title?: string;
     subtitle?: string;

package/dist/stories/ComponentConsolidation.stories.svelte

@@ -326,13 +326,13 @@ grep -r "<button" /Users/peet/repos/performers-portal/src --include="*.svelte
         </div>
       </div>
 
-      <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
-        <strong class="text-blue-700 dark:text-blue-400">New Button variants added:</strong>
-        <ul class="mt-2 list-disc list-inside text-blue-600 dark:text-blue-400 space-y-1">
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="avatar"</code> - Avatar/image trigger buttons (opacity hover)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item"</code> - Dropdown menu items (full width, left-aligned)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="menu-item-danger"</code> - Destructive menu items (red text)</li>
-          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">variant="card"</code> - Selectable card buttons (bordered)</li>
+      <div class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded text-sm">
+        <strong class="text-green-700 dark:text-green-400">Extracted to dedicated components:</strong>
+        <ul class="mt-2 list-disc list-inside text-green-600 dark:text-green-400 space-y-1">
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;AvatarButton&gt;</code> - Avatar/image trigger buttons (opacity hover)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem&gt;</code> - Dropdown menu items (full width, left-aligned)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;MenuItem danger&gt;</code> - Destructive menu items (red text)</li>
+          <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">&lt;CardAction&gt;</code> - Selectable card buttons (bordered)</li>
         </ul>
       </div>
     </div>
@@ -505,7 +505,7 @@ grep -r "&lt;button" /Users/peet/repos/performers-portal/src --include="*.svelte
       </h2>
       <p class="text-sm text-green-700 dark:text-green-400">
         No raw <code class="bg-green-100 dark:bg-green-800 px-1 rounded">&lt;select&gt;</code> elements found outside of primitives.
-        All select functionality uses custom dropdown components (MultiSelect, SelectDropdown).
+        All select functionality uses the MultiSelect custom dropdown component.
       </p>
     </div>
 
@@ -1161,8 +1161,8 @@ grep -r "from '\$lib/components/Button" /Users/peet/repos/micdrop-frontend/src -
           <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Are these all necessary, or can some be variants of one component?</span>
         </li>
         <li>
-          <strong>Select vs SelectDropdown vs MultiSelect</strong>
-          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code?</span>
+          <strong>Select vs MultiSelect</strong>
+          <br/><span class="text-blue-500 dark:text-blue-500 ml-4">→ Should these share more code? (SelectDropdown removed)</span>
         </li>
         <li>
           <strong>Input vs OTPInput vs PlaceAutocomplete</strong>

package/dist/stories/PrimitivesGallery.svelte

@@ -25,6 +25,10 @@
 
   // Button
   import Button from '../primitives/Button/Button.svelte';
+  import MenuItem from '../primitives/MenuItem/MenuItem.svelte';
+  import AvatarButton from '../primitives/AvatarButton/AvatarButton.svelte';
+  import CardAction from '../primitives/CardAction/CardAction.svelte';
+  import NavItem from '../primitives/NavItem/NavItem.svelte';
 
   // Card
   import Card from '../primitives/Card.svelte';
@@ -162,51 +166,51 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Nav Variant (Mobile Navigation)</p>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">NavItem (Mobile Navigation)</p>
         <div class="flex gap-6 items-end bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
-          <Button variant="nav">
+          <NavItem>
             <Home class="w-5 h-5" />
             <span>Home</span>
-          </Button>
-          <Button variant="nav" active={true}>
+          </NavItem>
+          <NavItem active={true}>
             <Notification class="w-5 h-5" />
             <span>Events</span>
-          </Button>
-          <Button variant="nav">
+          </NavItem>
+          <NavItem>
             <Profile class="w-5 h-5" />
             <span>Profile</span>
-          </Button>
+          </NavItem>
         </div>
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Variants</p>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Components</p>
         <div class="flex gap-6 items-start">
           <div class="flex flex-col items-center gap-2">
-            <Button variant="avatar">
+            <AvatarButton>
               <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%238b5cf6'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E" rounded size="md" />
-            </Button>
-            <span class="text-xs text-gray-500">Avatar trigger</span>
+            </AvatarButton>
+            <span class="text-xs text-gray-500">AvatarButton</span>
           </div>
           <div class="w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
-            <Button variant="menu-item">Settings</Button>
-            <Button variant="menu-item">Profile</Button>
+            <MenuItem>Settings</MenuItem>
+            <MenuItem>Profile</MenuItem>
             <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button variant="menu-item-danger">Sign out</Button>
+            <MenuItem danger>Sign out</MenuItem>
           </div>
           <div class="w-64 space-y-2">
-            <Button variant="card">
+            <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Select this option</span>
                 <span class="text-sm text-gray-500">Description text here</span>
               </span>
-            </Button>
-            <Button variant="card">
+            </CardAction>
+            <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Another option</span>
                 <span class="text-sm text-gray-500">More description</span>
               </span>
-            </Button>
+            </CardAction>
           </div>
         </div>
       </div>
@@ -703,7 +707,7 @@
   </section>
 
   <!-- Modal -->
-  <Modal bind:show={showModal}>
+  <Modal bind:open={showModal}>
     {#snippet header()}
       <h3 class="text-lg font-semibold">Example Modal</h3>
     {/snippet}
@@ -717,7 +721,7 @@
   </Modal>
 
   <!-- Drawer -->
-  <Drawer bind:show={showDrawer} placement="right">
+  <Drawer bind:open={showDrawer} placement="right">
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Drawer Content</h3>
       <p class="text-gray-600">This drawer slides in from the right.</p>
@@ -726,7 +730,7 @@
   </Drawer>
 
   <!-- BottomSheet -->
-  <BottomSheet show={showBottomSheet} onclose={() => showBottomSheet = false}>
+  <BottomSheet open={showBottomSheet} onclose={() => showBottomSheet = false}>
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Bottom Sheet</h3>
       <p class="text-gray-600">This sheet slides up from the bottom on mobile.</p>

package/dist/stories/PrimitivesGallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/PrimitivesGallery.svelte.ts"],"names":[],"mappings":"AAuxBA,QAAA,MAAM,iBAAiB,2DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PrimitivesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/PrimitivesGallery.svelte.ts"],"names":[],"mappings":"AA+xBA,QAAA,MAAM,iBAAiB,2DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/stories/RecipesGallery.spec.js

@@ -17,7 +17,7 @@ import { expect } from 'vitest';
  * 1. Header with title, description, and dark mode toggle
  * 2. Feedback Components section (EmptyState, ErrorDisplay, StatusIndicator)
  * 3. Form Fields section (FormField, SelectField, TextareaField, CheckboxField, ToggleField, RadioGroup)
- * 4. Special Inputs section (PasswordInput, PasswordStrengthIndicator, OTPInput, Search, MultiSelect, SelectDropdown)
+ * 4. Special Inputs section (PasswordInput, PasswordStrengthIndicator, OTPInput, Search, MultiSelect)
  * 5. Modals section (AlertModal, ConfirmationModal, InputModal, StatusModal)
  * 6. Common Recipe Patterns section (Registration Form, Settings Form)
  *
@@ -38,7 +38,7 @@ describe('RecipesGallery Component - Documentation', () => {
     const componentStructure = {
       imports: {
         feedback: ['EmptyState', 'ErrorDisplay', 'StatusIndicator'],
-        inputs: ['MultiSelect', 'OTPInput', 'PasswordInput', 'PasswordStrengthIndicator', 'Search', 'SelectDropdown'],
+        inputs: ['MultiSelect', 'OTPInput', 'PasswordInput', 'PasswordStrengthIndicator', 'Search'],
         modals: ['AlertModal', 'ConfirmationModal', 'InputModal', 'StatusModal'],
         fields: ['CheckboxField', 'FormField', 'RadioGroup', 'SelectField', 'TextareaField', 'ToggleField'],
         primitives: ['Button', 'Card']
@@ -54,7 +54,6 @@ describe('RecipesGallery Component - Documentation', () => {
         passwordValue: 'string',
         searchValue: 'string',
         multiSelectValue: 'string[]',
-        selectDropdownValue: '{label: string, value: string} | null',
         checkboxChecked: 'boolean',
         toggleChecked: 'boolean',
         radioValue: 'string',
@@ -109,7 +108,6 @@ describe('RecipesGallery Component - Documentation', () => {
       'PasswordInput',
       'PasswordStrengthIndicator',
       'Search',
-      'SelectDropdown',
       'AlertModal',
       'ConfirmationModal',
       'InputModal',
@@ -123,7 +121,7 @@ describe('RecipesGallery Component - Documentation', () => {
     ];
 
     // All components are imported in the file
-    expect(recipeComponents).toHaveLength(19);
+    expect(recipeComponents).toHaveLength(18);
     expect(recipeComponents).toContain('EmptyState');
     expect(recipeComponents).toContain('PasswordInput');
     expect(recipeComponents).toContain('AlertModal');
@@ -132,13 +130,13 @@ describe('RecipesGallery Component - Documentation', () => {
 
   test('Modal state management is properly implemented', () => {
     const modalStates = {
-      alert: { show: false, autoClose: 0 },
-      confirm: { show: false },
-      input: { show: false },
-      status: { show: false, type: 'success', autoCloseDelay: 2000 }
+      alert: { open: false, autoClose: 0 },
+      confirm: { open: false },
+      input: { open: false },
+      status: { open: false, type: 'success', autoCloseDelay: 2000 }
     };
 
-    expect(modalStates.alert.show).toBe(false);
+    expect(modalStates.alert.open).toBe(false);
     expect(modalStates.status.autoCloseDelay).toBe(2000);
   });
 
@@ -148,7 +146,6 @@ describe('RecipesGallery Component - Documentation', () => {
       passwordValue: 'string',
       searchValue: 'string',
       multiSelectValue: 'string[]',
-      selectDropdownValue: '{label: string, value: string} | null',
       checkboxChecked: 'boolean',
       toggleChecked: 'boolean',
       radioValue: 'string',
@@ -158,7 +155,7 @@ describe('RecipesGallery Component - Documentation', () => {
     };
 
     expect(fieldBindings.otpValue).toBe('string[]');
-    expect(fieldBindings.selectDropdownValue).toContain('label');
+    // Note: selectDropdownValue removed - SelectDropdown has been deprecated, use Select
     expect(fieldBindings.checkboxChecked).toBe('boolean');
   });
 
@@ -177,11 +174,6 @@ describe('RecipesGallery Component - Documentation', () => {
         { value: 'lg', name: 'Large' },
         { value: 'xl', name: 'Extra Large' }
       ],
-      selectDropdownOptions: [
-        { value: 'low', label: 'Low Priority' },
-        { value: 'medium', label: 'Medium Priority' },
-        { value: 'high', label: 'High Priority' }
-      ],
       radioOptions: [
         { value: 'daily', label: 'Daily', description: 'Get updates every day' },
         { value: 'weekly', label: 'Weekly', description: 'Get updates once a week' },
@@ -191,7 +183,6 @@ describe('RecipesGallery Component - Documentation', () => {
 
     expect(demoData.multiSelectItems).toHaveLength(5);
     expect(demoData.selectFieldItems).toHaveLength(4);
-    expect(demoData.selectDropdownOptions).toHaveLength(3);
     expect(demoData.radioOptions).toHaveLength(3);
   });
 

package/dist/stories/RecipesGallery.svelte

@@ -15,7 +15,6 @@
   import PasswordInput from '../recipes/inputs/PasswordInput.svelte';
   import PasswordStrengthIndicator from '../recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
   import Search from '../recipes/inputs/Search.svelte';
-  import SelectDropdown from '../recipes/inputs/SelectDropdown.svelte';
 
   // Modals
   import AlertModal from '../recipes/modals/AlertModal.svelte';
@@ -50,7 +49,6 @@
   let passwordValue = $state('');
   let searchValue = $state('');
   let multiSelectValue = $state<string[]>([]);
-  let selectDropdownValue = $state<{label: string, value: string} | null>(null);  // SelectDropdown expects object
 
   // Field states
   let checkboxChecked = $state(false);
@@ -92,13 +90,6 @@
     { value: 'xl', name: 'Extra Large' },
   ];
 
-  // SelectDropdown uses 'options' with {label, value} format
-  const selectDropdownOptions = [
-    { value: 'low', label: 'Low Priority' },
-    { value: 'medium', label: 'Medium Priority' },
-    { value: 'high', label: 'High Priority' },
-  ];
-
   const radioOptions = [
     { value: 'daily', label: 'Daily', description: 'Get updates every day' },
     { value: 'weekly', label: 'Weekly', description: 'Get updates once a week' },
@@ -259,7 +250,7 @@
   <!-- ========== SPECIAL INPUTS ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>Special Inputs</h2>
-    <p class={subheadingClass(isDark)}>Password, OTP, Search, MultiSelect, SelectDropdown</p>
+    <p class={subheadingClass(isDark)}>Password, OTP, Search, MultiSelect</p>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
       <div>
@@ -303,14 +294,6 @@
         />
       </div>
 
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">SelectDropdown</p>
-        <SelectDropdown
-          options={selectDropdownOptions}
-          bind:selected={selectDropdownValue}
-          placeholder="Priority"
-        />
-      </div>
     </div>
   </section>
 
@@ -360,7 +343,7 @@
 
   <!-- AlertModal -->
   <AlertModal
-    bind:show={showAlertModal}
+    bind:open={showAlertModal}
     title="Alert"
     message="This is an alert message that requires your attention."
     buttonText="OK"
@@ -370,7 +353,7 @@
 
   <!-- ConfirmationModal -->
   <ConfirmationModal
-    bind:show={showConfirmModal}
+    bind:open={showConfirmModal}
     title="Confirm Action"
     description="Are you sure you want to proceed? This action cannot be undone."
     primaryButtonText="Yes, proceed"
@@ -385,7 +368,7 @@
 
   <!-- InputModal -->
   <InputModal
-    bind:show={showInputModal}
+    bind:open={showInputModal}
     title="Enter Information"
     inputLabel="Name"
     inputPlaceholder="Enter your name"
@@ -400,7 +383,7 @@
 
   <!-- StatusModal -->
   <StatusModal
-    bind:show={showStatusModal}
+    bind:open={showStatusModal}
     iconType={statusModalType}
     title={statusModalType === 'loading' ? 'Processing...' : statusModalType === 'success' ? 'Success!' : 'Error'}
     description={statusModalType === 'loading' ? 'Please wait...' : statusModalType === 'success' ? 'Operation completed successfully.' : 'Something went wrong.'}

package/dist/stories/RecipesGallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecipesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/RecipesGallery.svelte.ts"],"names":[],"mappings":"AAoYA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RecipesGallery.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/RecipesGallery.svelte.ts"],"names":[],"mappings":"AAsXA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",

package/dist/recipes/inputs/SelectDropdown.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=SelectDropdown.spec.d.ts.map

package/dist/recipes/inputs/SelectDropdown.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDropdown.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/SelectDropdown.spec.js"],"names":[],"mappings":""}