@getmicdrop/svelte-components 5.12.0 → 5.14.0

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/dist/tokens/__tests__/sizing.test.js

@@ -22,9 +22,8 @@ describe('sizing tokens', () => {
             expect(formInputSizes.md).toContain('h-10');
             expect(formInputSizes.lg).toContain('h-12');
         });
-        it('includes padding and text size classes', () => {
+        it('includes horizontal padding and text size classes', () => {
             for (const size of Object.values(formInputSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -39,14 +38,13 @@ describe('sizing tokens', () => {
             expect(formControlSizes).toHaveProperty('md');
             expect(formControlSizes).toHaveProperty('lg');
         });
-        it('does NOT include height classes (for flexible controls)', () => {
+        it('includes explicit height classes for toolbar alignment', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).not.toMatch(/h-\d/);
+                expect(size).toMatch(/h-\d+/);
             }
         });
         it('includes padding and text size classes', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -170,11 +168,11 @@ describe('sizing tokens', () => {
             expect(buttonSizes).toHaveProperty('full-md-auto');
             expect(buttonSizes).toHaveProperty('half');
         });
-        it('standard sizes include padding and text sizing', () => {
+        it('standard sizes include explicit height, padding and text sizing', () => {
             const standardSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
             for (const size of standardSizes) {
+                expect(buttonSizes[size]).toMatch(/h-\d+/);
                 expect(buttonSizes[size]).toMatch(/px-\d/);
-                expect(buttonSizes[size]).toMatch(/py-\d/);
                 expect(buttonSizes[size]).toMatch(/text-(xs|sm)/);
             }
         });

package/dist/tokens/sizing.d.ts

@@ -6,21 +6,21 @@
  */
 /**
  * Form input sizes - for Input component with fixed heights
- * Provides consistent height, padding, and text sizing for text inputs.
+ * Uses explicit heights for consistent toolbar alignment.
  */
 export declare const formInputSizes: {
-    readonly sm: "py-2 px-3 text-sm h-9";
-    readonly md: "py-2.5 px-4 text-sm h-10";
-    readonly lg: "py-3 px-4 text-base h-12";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-4 text-base";
 };
 /**
- * Form control sizes - for Select and other form controls without fixed heights
- * Provides consistent padding and text sizing.
+ * Form control sizes - for Select and other form controls
+ * Uses explicit heights to match buttons and inputs for toolbar alignment.
  */
 export declare const formControlSizes: {
-    readonly sm: "py-2 px-3 text-sm";
-    readonly md: "py-2.5 px-4 text-sm";
-    readonly lg: "py-3 px-4 text-base";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-4 text-base";
 };
 export type FormInputSize = keyof typeof formInputSizes;
 export type FormControlSize = keyof typeof formControlSizes;
@@ -63,18 +63,19 @@ export declare const skeletonSizes: {
 };
 export type SkeletonSize = keyof typeof skeletonSizes;
 /**
- * Standard button sizes - padding and text sizing.
+ * Standard button sizes - padding, text sizing, and explicit heights for consistency.
+ * All toolbar elements (buttons, inputs, selects) should align at the same height.
  */
 export declare const buttonSizes: {
-    readonly xs: "px-3 py-1.5 text-xs";
-    readonly sm: "px-3 py-2 text-sm";
-    readonly md: "px-4 py-2.5 text-sm";
-    readonly lg: "px-5 py-3 text-sm";
-    readonly xl: "px-6 py-3.5 text-sm";
-    readonly 'xl-medium': "w-full px-6 py-3.5 text-sm";
-    readonly full: "w-full px-5 py-3 text-sm";
-    readonly 'full-md-auto': "w-full px-5 py-3 text-sm md:w-auto";
-    readonly half: "w-1/2 px-4 py-2.5 text-sm";
+    readonly xs: "h-8 px-3 text-xs";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-11 px-5 text-sm";
+    readonly xl: "h-12 px-6 text-sm";
+    readonly 'xl-medium': "w-full h-12 px-6 text-sm";
+    readonly full: "w-full h-11 px-5 text-sm";
+    readonly 'full-md-auto': "w-full h-11 px-5 text-sm md:w-auto";
+    readonly half: "w-1/2 h-10 px-4 text-sm";
     readonly landing: "h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg";
 };
 /**

package/dist/tokens/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}

package/dist/tokens/sizing.js

@@ -9,21 +9,21 @@
 // =============================================================================
 /**
  * Form input sizes - for Input component with fixed heights
- * Provides consistent height, padding, and text sizing for text inputs.
+ * Uses explicit heights for consistent toolbar alignment.
  */
 export const formInputSizes = {
-    sm: 'py-2 px-3 text-sm h-9',
-    md: 'py-2.5 px-4 text-sm h-10',
-    lg: 'py-3 px-4 text-base h-12',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-12 px-4 text-base',
 };
 /**
- * Form control sizes - for Select and other form controls without fixed heights
- * Provides consistent padding and text sizing.
+ * Form control sizes - for Select and other form controls
+ * Uses explicit heights to match buttons and inputs for toolbar alignment.
  */
 export const formControlSizes = {
-    sm: 'py-2 px-3 text-sm',
-    md: 'py-2.5 px-4 text-sm',
-    lg: 'py-3 px-4 text-base',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-12 px-4 text-base',
 };
 // =============================================================================
 // ICON/SPINNER SIZES
@@ -76,18 +76,19 @@ export const skeletonSizes = {
 // BUTTON SIZES
 // =============================================================================
 /**
- * Standard button sizes - padding and text sizing.
+ * Standard button sizes - padding, text sizing, and explicit heights for consistency.
+ * All toolbar elements (buttons, inputs, selects) should align at the same height.
  */
 export const buttonSizes = {
-    xs: 'px-3 py-1.5 text-xs',
-    sm: 'px-3 py-2 text-sm',
-    md: 'px-4 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-sm',
-    xl: 'px-6 py-3.5 text-sm',
-    'xl-medium': 'w-full px-6 py-3.5 text-sm',
-    full: 'w-full px-5 py-3 text-sm',
-    'full-md-auto': 'w-full px-5 py-3 text-sm md:w-auto',
-    half: 'w-1/2 px-4 py-2.5 text-sm',
+    xs: 'h-8 px-3 text-xs',
+    sm: 'h-9 px-3 text-sm',
+    md: 'h-10 px-4 text-sm',
+    lg: 'h-11 px-5 text-sm',
+    xl: 'h-12 px-6 text-sm',
+    'xl-medium': 'w-full h-12 px-6 text-sm',
+    full: 'w-full h-11 px-5 text-sm',
+    'full-md-auto': 'w-full h-11 px-5 text-sm md:w-auto',
+    half: 'w-1/2 h-10 px-4 text-sm',
     // Landing page hero buttons - taller with larger text
     landing: 'h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.12.0",
+  "version": "5.14.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":""}