@getmicdrop/svelte-components 5.18.2 → 5.20.0

package/dist/base.css

@@ -0,0 +1,18 @@
+/* ==========================================================================
+   BASE CSS
+   Single entry point for all Micdrop shared CSS.
+   Import this in every consuming app's CSS file.
+
+   Usage:
+     @import '@getmicdrop/svelte-components/base';
+
+   Includes:
+     - Color tokens (light + dark mode variables)
+     - Typography base styles (heading/body defaults)
+     - Utility classes (layout, text, cards, badges, etc.)
+     - Base resets (form fixes, a11y, iOS, desktop scaling)
+   ========================================================================== */
+@import './tokens/tokens.css';
+@import './tokens/typography-base.css';
+@import './tokens/utilities.css';
+@import './tokens/base-resets.css';

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -73,6 +73,8 @@
   const SWIPE_THRESHOLD = 0.15;
   const VELOCITY_THRESHOLD = 0.3;
   const DRAG_RESISTANCE = 0.8;
+  /** Shadow color for swipe drag effect (black with dynamic opacity) */
+  const SWIPE_SHADOW_COLOR = 'rgba(0,0,0,';
 
   let MONTH_NAMES = $derived(labels.monthNames);
   let DAY_NAMES = $derived(labels.dayNames);
@@ -439,9 +441,9 @@
         const spreadRadius = shadowIntensity * 4;
 
         if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
         } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
         }
       }
     }
@@ -544,9 +546,9 @@
         const spreadRadius = shadowIntensity * 4;
 
         if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
         } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px ${SWIPE_SHADOW_COLOR}${shadowIntensity})`;
         }
       }
     }
@@ -739,7 +741,7 @@
       {/each}
 
       {#each prevMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
           <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}
@@ -748,8 +750,8 @@
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
-            shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)]
-            sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
+            border-b border-gray-200 dark:border-gray-700
+            sm:border-b-0 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
             {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
             {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
             {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
@@ -779,7 +781,7 @@
       {/each}
 
       {#each nextMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 sm:border-b last:sm:border-r" role="gridcell" aria-disabled="true">
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent border-b border-gray-200 dark:border-gray-700 sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
           <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAquBA;cAlsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;aAAW,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;wBAksBtS;wBAlsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAuuBA;cApsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;aAAW,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;wBAosBtS;wBApsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/components/Heading.svelte

@@ -5,6 +5,7 @@
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'default' | 'none';
     class?: string;
     id?: string;
     children: Snippet;
@@ -14,6 +15,7 @@
     level = 2,
     size = 'lg',
     weight,
+    color = 'default',
     class: className = '',
     id,
     children,
@@ -39,10 +41,14 @@
     bold: 'font-bold',
   };
 
-  const baseClasses = 'text-gray-900 dark:text-white';
+  const colorClasses: Record<string, string> = {
+    default: 'text-gray-900 dark:text-white',
+    none: '',
+  };
   let sizeClass = $derived(sizeClasses[size] || 'text-lg');
   let weightClass = $derived(weight ? weightClasses[weight] : '');
-  let classes = $derived(`${baseClasses} ${sizeClass} ${weightClass} ${className}`.trim());
+  let colorClass = $derived(colorClasses[color] || '');
+  let classes = $derived(`${colorClass} ${sizeClass} ${weightClass} ${className}`.trim());
 </script>
 
 {#if level === 1}

package/dist/components/Heading.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: 'default' | 'none';
     class?: string;
     id?: string;
     children: Snippet;

package/dist/components/Heading.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Heading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;CACnB;AAwDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Heading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;CACnB;AA6DH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Text.svelte

@@ -2,14 +2,16 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
+    as?: 'span' | 'p' | 'label' | 'div';
     size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
     leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
-    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'none';
     class?: string;
     children: Snippet;
   }
 
   let {
+    as = 'span',
     size = 'md',
     leading,
     color = 'default',
@@ -35,6 +37,7 @@
     success: 'text-green-600 dark:text-green-400',
     warning: 'text-yellow-600 dark:text-yellow-400',
     error: 'text-red-600 dark:text-red-400',
+    none: '',
   };
 
   const leadingClasses: Record<string, string> = {
@@ -50,4 +53,12 @@
   let classes = $derived(`${sizeClasses[size] || 'text-base'} ${leadingClass} ${colorClasses[color] || ''} ${className}`.trim());
 </script>
 
-<span class={classes}>{@render children()}</span>
+{#if as === 'p'}
+  <p class={classes}>{@render children()}</p>
+{:else if as === 'label'}
+  <label class={classes}>{@render children()}</label>
+{:else if as === 'div'}
+  <div class={classes}>{@render children()}</div>
+{:else}
+  <span class={classes}>{@render children()}</span>
+{/if}

package/dist/components/Text.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    as?: 'span' | 'p' | 'label' | 'div';
     size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
     leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
-    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'none';
     class?: string;
     children: Snippet;
 }

package/dist/components/Text.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACrE,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAkDH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Text.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,OAAO,GAAG,KAAK,CAAC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACrE,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AA4DH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/constants/formOptions.d.ts

@@ -7,13 +7,10 @@
  *   import { GENDER_OPTIONS } from '@getmicdrop/svelte-components/constants/formOptions';
  *   <Select items={GENDER_OPTIONS} label="Gender" />
  */
-export const GENDER_OPTIONS: ({
-    name: string;
-    value: null;
-} | {
+export const GENDER_OPTIONS: {
     name: string;
     value: number;
-})[];
+}[];
 export const GENDER_OPTIONS_VALUE_LABEL: {
     value: number;
     label: string;

package/dist/constants/formOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formOptions.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH;;;;;;KAME;AAGF;;;IAKE;AAGF;;;IAQE;AAGF,uCAQE"}
+{"version":3,"file":"formOptions.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH;;;IAKE;AAIF;;;IAIE;AAGF;;;IAQE;AAGF,uCAQE"}

package/dist/constants/formOptions.js

@@ -9,20 +9,20 @@
  */
 
 // Primary format: { name, value } for Select/MultiSelect components
+// Backend: 0=Unspecified, 1=Male, 2=Female, 3=Non-binary
 export const GENDER_OPTIONS = [
-  { name: "", value: null },
+  { name: "", value: 0 },
   { name: "Male", value: 1 },
   { name: "Female", value: 2 },
   { name: "Non-binary", value: 3 },
-  { name: "Rather not say", value: 4 },
 ];
 
 // Alternative format: { value, label } for components using that convention
+// Backend: 0=Unspecified, 1=Male, 2=Female, 3=Non-binary
 export const GENDER_OPTIONS_VALUE_LABEL = [
-  { value: 0, label: 'Male' },
-  { value: 1, label: 'Female' },
-  { value: 2, label: 'Non-binary' },
-  { value: 3, label: 'Rather not say' },
+  { value: 1, label: 'Male' },
+  { value: 2, label: 'Female' },
+  { value: 3, label: 'Non-binary' },
 ];
 
 // Primary format: { name, value } for Select/MultiSelect components

package/dist/constants/formOptions.spec.js

@@ -6,8 +6,8 @@ describe('formOptions', () => {
             expect(GENDER_OPTIONS).toBeDefined();
             expect(Array.isArray(GENDER_OPTIONS)).toBe(true);
         });
-        it('has five options (including empty placeholder and rather not say)', () => {
-            expect(GENDER_OPTIONS.length).toBe(5);
+        it('has four options (empty placeholder + male/female/non-binary)', () => {
+            expect(GENDER_OPTIONS.length).toBe(4);
         });
         it('contains Male option with value 1', () => {
             const male = GENDER_OPTIONS.find(opt => opt.name === 'Male');
@@ -24,11 +24,6 @@ describe('formOptions', () => {
             expect(nonBinary).toBeDefined();
             expect(nonBinary.value).toBe(3);
         });
-        it('contains Rather not say option with value 4', () => {
-            const ratherNotSay = GENDER_OPTIONS.find(opt => opt.name === 'Rather not say');
-            expect(ratherNotSay).toBeDefined();
-            expect(ratherNotSay.value).toBe(4);
-        });
         it('each option has name and value properties', () => {
             GENDER_OPTIONS.forEach(option => {
                 expect(option).toHaveProperty('name');

package/dist/index.d.ts

@@ -6,11 +6,15 @@ export * from "./calendar/index.js";
 export * from "./constants/formOptions.js";
 export * from "./constants/validation.js";
 export * from "./presets/index.js";
+export { clickOutside } from "./utils/clickOutside.js";
+export { focusTrap } from "./utils/focusTrap.js";
 export { portal } from "./utils/portal.js";
-export { roundCurrency } from "./utils/formatters.js";
 export { typography } from "./tokens/typography.js";
 export type HapticStyle = import("./utils/haptic.js").HapticStyle;
-export { safeSlide, bloom } from "./utils/transitions.js";
+export { safeSlide, bloom, fadeScale, slideUp, slideInLeft, popIn, staggerDelay, crossFadeParams, prefersReducedMotion, getAnimationDuration, DURATION, EASING, ANIMATION_CLASSES } from "./utils/transitions.js";
 export { optimizeImage, supportsWebP, createImage } from "./utils/imageOptimizer.js";
+export { roundCurrency, formatCurrency, formatDate, formatDateTime, formatTime, formatNumber, formatPhoneNumber, truncateTitle } from "./utils/formatters.js";
+export { classNames, cn } from "./utils/classNames.js";
+export { getDays, getDaysNumberOptions } from "./utils/dateHelpers.js";
 export { triggerHaptic, isHapticAvailable, getHapticForButtonVariant } from "./utils/haptic.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.js"],"names":[],"mappings":";;;;;;;;;;;0BAsDc,OAAO,mBAAmB,EAAE,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.js"],"names":[],"mappings":";;;;;;;;;;;;0BAiFc,OAAO,mBAAmB,EAAE,WAAW"}

package/dist/index.js

@@ -43,10 +43,37 @@ export * from './constants/validation.js';
 export * from './presets/index.js';
 
 // Utils / Actions
+export { clickOutside } from './utils/clickOutside.js';
+export { focusTrap } from './utils/focusTrap.js';
 export { portal } from './utils/portal.js';
-export { safeSlide, bloom } from './utils/transitions.js';
+export {
+  safeSlide,
+  bloom,
+  fadeScale,
+  slideUp,
+  slideInLeft,
+  popIn,
+  staggerDelay,
+  crossFadeParams,
+  prefersReducedMotion,
+  getAnimationDuration,
+  DURATION,
+  EASING,
+  ANIMATION_CLASSES,
+} from './utils/transitions.js';
 export { optimizeImage, supportsWebP, createImage } from './utils/imageOptimizer.js';
-export { roundCurrency } from './utils/formatters.js';
+export {
+  roundCurrency,
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  formatTime,
+  formatNumber,
+  formatPhoneNumber,
+  truncateTitle,
+} from './utils/formatters.js';
+export { classNames, cn } from './utils/classNames.js';
+export { getDays, getDaysNumberOptions } from './utils/dateHelpers.js';
 export {
   triggerHaptic,
   isHapticAvailable,

package/dist/patterns/forms/FormSection.svelte

@@ -4,13 +4,14 @@
   let {
     title = '',
     description = '',
+    bordered = false,
     divider = false,
     class: className = '',
     children,
   } = $props();
 </script>
 
-<section class="space-y-4 {className}">
+<section class="space-y-4 {bordered ? 'border border-gray-200 dark:border-gray-700 rounded-lg p-4' : ''} {className}">
   {#if divider}
     <hr class="border-gray-200 dark:border-gray-700" />
   {/if}

package/dist/patterns/forms/FormSection.svelte.d.ts

@@ -6,6 +6,7 @@ type FormSection = {
 declare const FormSection: import("svelte").Component<{
     title?: string;
     description?: string;
+    bordered?: boolean;
     divider?: boolean;
     class?: string;
     children: any;
@@ -13,6 +14,7 @@ declare const FormSection: import("svelte").Component<{
 type $$ComponentProps = {
     title?: string;
     description?: string;
+    bordered?: boolean;
     divider?: boolean;
     class?: string;
     children: any;

package/dist/patterns/forms/FormSection.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;AAwCA;YAhC6B,MAAM;kBAAgB,MAAM;cAAY,OAAO;YAAU,MAAM;cAAY,GAAG;WAgCjD;wBAhCvC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormSection.svelte.js"],"names":[],"mappings":";;;;;AAyCA;YAjC6B,MAAM;kBAAgB,MAAM;eAAa,OAAO;cAAY,OAAO;YAAU,MAAM;cAAY,GAAG;WAiCrE;wBAjCvC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/layout/SidebarTestWrapper.svelte.d.ts

@@ -2,7 +2,7 @@ export default SidebarTestWrapper;
 type SidebarTestWrapper = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
-        sidebarWidth?: "medium" | "narrow" | "wide" | undefined;
+        sidebarWidth?: "narrow" | "medium" | "wide" | undefined;
         sidebarPosition?: "left" | "right" | undefined;
         class?: string | undefined;
         showSidebar?: boolean | undefined;

package/dist/patterns/navigation/Header.svelte

@@ -107,7 +107,7 @@
           size="md"
           onclick={() => showDesktopDropdown = !showDesktopDropdown}
         >
-          <Avatar src={avatar} rounded size="md" />
+          <Avatar src={avatar} size="md" />
         </AvatarButton>
 
         {#if showDesktopDropdown}
@@ -167,7 +167,7 @@
         class="block md:hidden"
         onclick={() => showMobileSheet = true}
       >
-        <Avatar src={avatar} rounded size="md" />
+        <Avatar src={avatar} size="md" />
       </AvatarButton>
 
       <AvatarButton
@@ -175,7 +175,7 @@
         class="hidden md:block"
         onclick={() => showDesktopDropdown = !showDesktopDropdown}
       >
-        <Avatar src={avatar} rounded size="md" />
+        <Avatar src={avatar} size="md" />
       </AvatarButton>
 
       {#if showDesktopDropdown}

package/dist/primitives/Input/Select.svelte

@@ -229,7 +229,7 @@
   <ul
     bind:this={dropdownElement}
     use:portalAction
-    class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+    class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
     style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
     role="listbox"
     tabindex="-1"

package/dist/primitives/Pagination/DotIndicator.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  interface Props {
+    /** Total number of items */
+    count: number;
+    /** Currently active index (0-based) */
+    activeIndex?: number;
+    /** Dot size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color scheme */
+    variant?: 'light' | 'dark';
+    /** Called when a dot is clicked */
+    onselect?: (index: number) => void;
+    /** Additional CSS classes on the container */
+    class?: string;
+  }
+
+  let {
+    count,
+    activeIndex = 0,
+    size = 'md',
+    variant = 'dark',
+    onselect,
+    class: className = '',
+  }: Props = $props();
+
+  const sizeClasses: Record<string, { dot: string; active: string }> = {
+    sm: { dot: 'h-1.5 w-1.5', active: 'scale-125' },
+    md: { dot: 'h-2.5 w-2.5', active: 'scale-125' },
+    lg: { dot: 'h-3 w-3', active: 'scale-125' },
+  };
+
+  const variantClasses: Record<string, { active: string; inactive: string; hover: string }> = {
+    light: {
+      active: 'bg-white',
+      inactive: 'bg-white/30',
+      hover: 'hover:bg-white/50',
+    },
+    dark: {
+      active: 'bg-gray-900 dark:bg-white',
+      inactive: 'bg-gray-300 dark:bg-gray-600',
+      hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
+    },
+  };
+
+  let sizeConfig = $derived(sizeClasses[size] || sizeClasses.md);
+  let variantConfig = $derived(variantClasses[variant] || variantClasses.dark);
+</script>
+
+<div
+  class="flex items-center gap-2 {className}"
+  role="tablist"
+  aria-label="Item selector"
+>
+  {#each { length: count } as _, i}
+    <button
+      type="button"
+      class="rounded-full transition-all {sizeConfig.dot} {i === activeIndex
+        ? `${sizeConfig.active} ${variantConfig.active}`
+        : `${variantConfig.inactive} ${variantConfig.hover}`}"
+      role="tab"
+      aria-selected={i === activeIndex}
+      aria-label="Item {i + 1} of {count}"
+      onclick={() => onselect?.(i)}
+    ></button>
+  {/each}
+</div>

package/dist/primitives/Pagination/DotIndicator.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /** Total number of items */
+    count: number;
+    /** Currently active index (0-based) */
+    activeIndex?: number;
+    /** Dot size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color scheme */
+    variant?: 'light' | 'dark';
+    /** Called when a dot is clicked */
+    onselect?: (index: number) => void;
+    /** Additional CSS classes on the container */
+    class?: string;
+}
+declare const DotIndicator: import("svelte").Component<Props, {}, "">;
+type DotIndicator = ReturnType<typeof DotIndicator>;
+export default DotIndicator;
+//# sourceMappingURL=DotIndicator.svelte.d.ts.map

package/dist/primitives/Pagination/DotIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/DotIndicator.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/primitives/index.d.ts

@@ -25,6 +25,7 @@ export { default as Label } from "./Label/Label.svelte";
 export { default as NumberInput } from "./NumberInput/NumberInput.svelte";
 export { default as Modal } from "./Modal/Modal.svelte";
 export { default as Pagination } from "./Pagination/Pagination.svelte";
+export { default as DotIndicator } from "./Pagination/DotIndicator.svelte";
 export { default as Radio } from "./Radio/Radio.svelte";
 export { default as Spinner } from "./Spinner/Spinner.svelte";
 export { default as Tabs } from "./Tabs/Tabs.svelte";

package/dist/primitives/index.js

@@ -65,6 +65,7 @@ export { default as Modal } from './Modal/Modal.svelte';
 
 // Pagination
 export { default as Pagination } from './Pagination/Pagination.svelte';
+export { default as DotIndicator } from './Pagination/DotIndicator.svelte';
 
 // Radio
 export { default as Radio } from './Radio/Radio.svelte';

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte

@@ -194,7 +194,7 @@
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       bind:this={dropdownElement}
-      class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+      class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
       style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
       role="listbox"
       tabindex="-1"