@getmicdrop/svelte-components 5.3.10 → 5.3.12

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -322,7 +322,7 @@
     }
 
     triggerHaptic('medium');
-    onmonthChange?.({ year: currentYear, month: currentMonth });
+    onMonthChange?.({ year: currentYear, month: currentMonth });
 
     const enterFrom = direction > 0 ? containerWidth : -containerWidth;
     calendarGridElement.style.transition = 'none';
@@ -615,7 +615,7 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class="w-full max-w-full mx-auto overflow-hidden select-none"
+  class="w-full max-w-full mx-auto select-none"
   class:max-w-xs={variant === 'display'}
   ontouchstart={handleTouchStart}
   ontouchmove={handleTouchMove}
@@ -644,7 +644,7 @@
 
       <div class="flex items-center gap-2">
         <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
           class:scale-90={prevPressed}
           class:bg-gray-100={prevPressed}
           class:dark:bg-gray-700={prevPressed}
@@ -682,7 +682,7 @@
         {/if}
 
         <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
           class:scale-90={nextPressed}
           class:bg-gray-100={nextPressed}
           class:dark:bg-gray-700={nextPressed}

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -8,6 +8,7 @@
   let {
     loading = false,
     quantities = {},
+    donationAmounts = {}, // Map of ticketId -> donation amount string
     eventTickets = [],
     checkoutTicket = null,
     isAgreed = true,
@@ -27,6 +28,24 @@
     onPriceUpdate,
   } = $props();
 
+  // Helper to get effective price for a ticket (handles donation tickets)
+  function getEffectivePrice(ticket) {
+    // Donation ticket (type 2): use user-entered donation amount
+    if (isDonationTicket(ticket)) {
+      const donationAmount = donationAmounts[ticket.ID];
+      return parseFloat(donationAmount) || 0;
+    }
+    // Regular ticket: use ticket price
+    return parseFloat(ticket.price) || 0;
+  }
+
+  // Check if ticket is a donation ticket
+  // Handle both 'type' and 'ticketType' fields, and coerce to number for comparison
+  function isDonationTicket(ticket) {
+    const ticketType = ticket.type ?? ticket.ticketType ?? 0;
+    return Number(ticketType) === 2;
+  }
+
   let showOrderSummaryOnMobile = $state(false);
 
   function feeFor(price) {
@@ -76,12 +95,20 @@
   let subtotalWithoutDiscount = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
-    return acc + quantities[key] * ticket.price;
+    // For donation tickets, use the donation amount; otherwise use ticket price
+    const effectivePrice = getEffectivePrice(ticket);
+    return acc + quantities[key] * effectivePrice;
   }, 0));
 
   let subtotal = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
+    // For donation tickets, use the donation amount (no discounts apply)
+    if (isDonationTicket(ticket)) {
+      const effectivePrice = getEffectivePrice(ticket);
+      return acc + quantities[key] * effectivePrice;
+    }
+    // For regular tickets, apply discounts as usual
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * priceToUse;
@@ -91,7 +118,8 @@
 
   let fees = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
-    if (!ticket || ticket.price == 0) return acc;
+    // Skip fees for: no ticket, free tickets, and donation tickets (type 2)
+    if (!ticket || ticket.price == 0 || isDonationTicket(ticket)) return acc;
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * feeFor(priceToUse);
@@ -126,21 +154,27 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
               <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
                 <div>
                   <p class="{typography.label}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
-                    {#if ticket.price === 0}
+                    {#if ticket.price === 0 && !isDonation}
                       Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
                       ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
                 <div class="{typography.label}">
-                  {ticket.price === 0
-                    ? 'Free'
-                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
                 </div>
               </div>
             {/if}
@@ -236,21 +270,27 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
               <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
                 <div>
                   <p class="{typography.h5}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
-                    {#if ticket.price === 0}
+                    {#if ticket.price === 0 && !isDonation}
                       Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
                       ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
                 <div class="{typography.h5}">
-                  {ticket.price === 0
-                    ? 'Free'
-                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
                 </div>
               </div>
             {/if}

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts

@@ -6,6 +6,7 @@ type OrderSummary = {
 declare const OrderSummary: import("svelte").Component<{
     loading?: boolean;
     quantities?: Record<string, any>;
+    donationAmounts?: Record<string, any>;
     eventTickets?: any[];
     checkoutTicket?: any;
     isAgreed?: boolean;
@@ -21,6 +22,7 @@ declare const OrderSummary: import("svelte").Component<{
 type $$ComponentProps = {
     loading?: boolean;
     quantities?: Record<string, any>;
+    donationAmounts?: Record<string, any>;
     eventTickets?: any[];
     checkoutTicket?: any;
     isAgreed?: boolean;

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAoTA;cApS+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoS5Q;wBApSxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAoVA;cApU+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoUnT;wBApUxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -61,7 +61,7 @@
     typography.smMuted,
     "bg-gray-100 dark:bg-gray-800",
     "hover:bg-gray-200 dark:hover:bg-gray-700",
-    "focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
+    "focus:outline-none",
     "gap-3",
     isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
   ].join(" "));

package/dist/primitives/Button/Button.svelte

@@ -130,9 +130,9 @@
     // Avatar/image trigger - no background, opacity hover
     avatar: "bg-transparent border-transparent hover:opacity-80",
     // Menu items - full width, left-aligned, for dropdowns/sheets and sidebar nav
-    "menu-item": "w-full text-left text-gray-900 bg-transparent border-transparent hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
+    "menu-item": "w-full text-left whitespace-nowrap text-gray-900 bg-transparent border-transparent hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
     // Danger menu item - red text version
-    "menu-item-danger": "w-full text-left text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600",
+    "menu-item-danger": "w-full text-left whitespace-nowrap text-red-600 bg-transparent border-transparent hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600",
     // Selectable card - bordered card-like button for list selections
     card: "w-full text-left text-gray-900 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700",
     // Search result item - blue hover for search dropdowns
@@ -155,6 +155,8 @@
 
   // Disabled classes
   const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
+  // Disabled classes for transparent variants (link, ghost) - no background
+  const disabledTransparentClasses = "text-gray-400 cursor-not-allowed dark:text-gray-500";
 
   let sizeClass = $derived((() => {
     if (resolvedVariant === "icon") return iconSizes[size] || iconSizes.sm;
@@ -169,9 +171,16 @@
     return sizeClasses[size] || sizeClasses.md;
   })());
 
+  // Variants that should stay transparent when disabled
+  const transparentVariants = ["link", "ghost", "ghost-red", "icon"];
+
   let variantClass = $derived((() => {
     if (success) return variantClasses.success;
-    if (disabled && !loading && !success) return disabledClasses;
+    if (disabled && !loading && !success) {
+      return transparentVariants.includes(resolvedVariant)
+        ? disabledTransparentClasses
+        : disabledClasses;
+    }
     if (active && activeClasses[resolvedVariant]) {
       // When active, use ONLY active classes (they include all necessary styling)
       return activeClasses[resolvedVariant];

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAyQA;;cAfc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;WACb,QAAQ,GAAG,QAAQ,GAAG,OAAO;eACzB,GAAG;eACH,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAkRA;;cAfc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;WACb,QAAQ,GAAG,QAAQ,GAAG,OAAO;eACzB,GAAG;eACH,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -42,12 +42,12 @@
   }
 
   const colorClasses = {
-    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600",
-    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
-    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
-    purple: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600",
-    orange: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600",
-    yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
+    blue: "text-blue-600",
+    red: "text-red-600",
+    green: "text-green-600",
+    purple: "text-purple-600",
+    orange: "text-orange-500",
+    yellow: "text-yellow-400"
   };
 
   let colorClass = $derived(colorClasses[color] || colorClasses.blue);
@@ -55,8 +55,8 @@
   let inputClasses = $derived([
     "w-4 h-4 rounded",
     "bg-gray-100 border-gray-300",
-    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
-    "focus:ring-2",
+    "dark:bg-gray-700 dark:border-gray-600",
+    "focus:outline-none",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
   ].join(" "));

package/dist/primitives/Icons/ImageOutline.svelte

@@ -0,0 +1,19 @@
+<script>
+  let { class: className = 'w-5 h-5', ...restProps } = $props();
+</script>
+
+<svg
+  class={className}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  {...restProps}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  />
+</svg>

package/dist/primitives/Icons/ImageOutline.svelte.d.ts

@@ -0,0 +1,12 @@
+export default ImageOutline;
+type ImageOutline = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ImageOutline: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+} & Record<string, any>;
+//# sourceMappingURL=ImageOutline.svelte.d.ts.map

package/dist/primitives/Icons/ImageOutline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/ImageOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;YAT6B,MAAM;iCASwB;wBATxC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Icons/TrashBinOutline.svelte

@@ -0,0 +1,19 @@
+<script>
+  let { class: className = 'w-5 h-5', ...restProps } = $props();
+</script>
+
+<svg
+  class={className}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  {...restProps}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+  />
+</svg>

package/dist/primitives/Icons/TrashBinOutline.svelte.d.ts

@@ -0,0 +1,12 @@
+export default TrashBinOutline;
+type TrashBinOutline = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TrashBinOutline: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+} & Record<string, any>;
+//# sourceMappingURL=TrashBinOutline.svelte.d.ts.map

package/dist/primitives/Icons/TrashBinOutline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashBinOutline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/TrashBinOutline.svelte.js"],"names":[],"mappings":";;;;;AAaA;YAT6B,MAAM;iCAS2B;wBAT3C;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Icons/index.d.ts

@@ -16,6 +16,8 @@ export { default as PlusOutline } from "./PlusOutline.svelte";
 export { default as ExclamationTriangleOutline } from "./ExclamationTriangleOutline.svelte";
 export { default as DotsHorizontalOutline } from "./DotsHorizontalOutline.svelte";
 export { default as FileCopyOutline } from "./FileCopyOutline.svelte";
+export { default as ImageOutline } from "./ImageOutline.svelte";
+export { default as TrashBinOutline } from "./TrashBinOutline.svelte";
 export { default as CheckCircleSolid } from "./CheckCircleSolid.svelte";
 export { default as HomeSolid } from "./HomeSolid.svelte";
 export { default as LogoInstagram } from "./LogoInstagram.svelte";

package/dist/primitives/Icons/index.js

@@ -17,6 +17,8 @@ export { default as PlusOutline } from './PlusOutline.svelte';
 export { default as ExclamationTriangleOutline } from './ExclamationTriangleOutline.svelte';
 export { default as DotsHorizontalOutline } from './DotsHorizontalOutline.svelte';
 export { default as FileCopyOutline } from './FileCopyOutline.svelte';
+export { default as ImageOutline } from './ImageOutline.svelte';
+export { default as TrashBinOutline } from './TrashBinOutline.svelte';
 
 // Solid icons (fill-based)
 export { default as CheckCircleSolid } from './CheckCircleSolid.svelte';

package/dist/primitives/Input/Input.svelte

@@ -309,7 +309,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
+        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
         required={false}
         {disabled}
         {readonly}
@@ -317,7 +317,7 @@
         aria-required={required}
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
-      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-700 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
+      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
         <input
           bind:this={inputElement}
           {id}
@@ -375,7 +375,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}

package/dist/primitives/Input/Select.svelte

@@ -163,7 +163,7 @@
       bind:this={triggerElement}
       {id}
       {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
+      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
       {disabled}
       aria-haspopup="listbox"
       aria-expanded={isOpen}

package/dist/primitives/Input/Textarea.svelte

@@ -59,7 +59,7 @@
     {readonly}
     {maxlength}
     {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-700 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}

package/dist/primitives/Radio/Radio.svelte

@@ -35,12 +35,12 @@
   }
 
   const colorClasses = {
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600',
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600'
+    blue: 'text-blue-600',
+    red: 'text-red-600',
+    green: 'text-green-600',
+    purple: 'text-purple-600',
+    orange: 'text-orange-500',
+    yellow: 'text-yellow-400'
   };
 
   let colorClass = $derived(colorClasses[color] || colorClasses.blue);
@@ -57,7 +57,7 @@
     {disabled}
     checked={isChecked}
     onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-none dark:bg-gray-700 dark:border-gray-600 {colorClass}"
   />
   {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -23,7 +23,8 @@
   import Sortable from 'sortablejs';
   import CropImage from '../CropImage/CropImage.svelte';
   import Badge from '../../primitives/Badges/Badge.svelte';
-  import { CloseOutline, PlusOutline } from '../../primitives/Icons';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CloseOutline, ImageOutline, PlusOutline, TrashBinOutline } from '../../primitives/Icons';
   import { typography } from '../../tokens/typography';
 
   // Register FilePond plugins once
@@ -62,6 +63,8 @@
     acceptedTypes?: string[];
     /** Label shown when empty */
     emptyLabel?: string;
+    /** Constraints text shown inside dropzone (e.g., "Max 10MB, 2160px") */
+    constraintsText?: string;
     /** Helper text shown below dropzone */
     helperText?: string;
     /** Callback when image is uploaded - receives File, optionally returns URL
@@ -98,6 +101,7 @@
     maxFileSize = '20MB',
     acceptedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/heic', 'image/heif'],
     emptyLabel = 'Drag & drop or click to upload',
+    constraintsText = '',
     helperText = '',
     onUpload,
     onRemove,
@@ -147,6 +151,9 @@
   let isModalDragOver = $state(false);
   let modalFileInput: HTMLInputElement;
 
+  // Single-mode file input for replace functionality
+  let singleModeFileInput: HTMLInputElement;
+
   // Prevent browser from opening dragged files in new tab
   // This MUST be at document level to intercept before browser default behavior
   $effect(() => {
@@ -223,11 +230,12 @@
     dropOnElement: true,
     labelIdle: `
       <div class="filepond-custom-label">
-        <svg class="w-8 h-8 mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-8 h-8 mb-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
-        <span class="text-sm text-gray-500 dark:text-gray-400">${emptyLabel}</span>
-        <span class="text-xs text-gray-400 dark:text-gray-500 mt-1">JPG, PNG, WebP</span>
+        <span class="text-sm font-medium text-gray-600 dark:text-gray-300">${emptyLabel}</span>
+        <span class="text-[11px] text-gray-400 dark:text-gray-500 mt-2 block">JPG, PNG, WebP</span>
+        ${constraintsText ? `<span class="text-[10px] text-gray-400/50 dark:text-gray-500/50 mt-1 block">${constraintsText}</span>` : ''}
       </div>
     `,
     credits: false,
@@ -460,6 +468,26 @@
     input.value = '';
   }
 
+  // Handle single-mode file input selection (for replace)
+  function handleSingleModeFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input?.files?.[0];
+    if (!file) return;
+
+    targetSlotIndex = 0; // Replace the existing image
+
+    if (enableCrop) {
+      const objectUrl = URL.createObjectURL(file);
+      imageForCrop = objectUrl;
+      showCropModal = true;
+    } else {
+      handleUpload(file);
+    }
+
+    // Clear input for next selection
+    input.value = '';
+  }
+
   // Initialize sortable for multi-image grid
   function initSortable() {
     if (!browser || !gridContainer || !enableReorder || !isMultiMode) return;
@@ -543,6 +571,7 @@
   });
 </script>
 
+
 <!-- Single Image Mode -->
 {#if !isMultiMode}
   <div class="image-uploader-single {className}">
@@ -555,24 +584,32 @@
           class="w-full h-full object-cover"
         />
         {#if !disabled}
-          <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-            <button
-              type="button"
-              class="p-2 bg-white/90 rounded-full hover:bg-white transition-colors"
-              onclick={() => openUploadModal(0)}
-              aria-label="Replace image"
+          <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+            <Button
+              variant="default"
+              size="sm"
+              onclick={() => singleModeFileInput?.click()}
             >
-              <PlusOutline class="w-5 h-5 text-gray-700" />
-            </button>
-            <button
-              type="button"
-              class="p-2 bg-red-500/90 rounded-full hover:bg-red-500 transition-colors"
+              <ImageOutline class="w-4 h-4 mr-1.5" />
+              Replace
+            </Button>
+            <Button
+              variant="red"
+              size="sm"
               onclick={() => handleRemoveImage(0)}
-              aria-label="Remove image"
             >
-              <CloseOutline class="w-5 h-5 text-white" />
-            </button>
+              <TrashBinOutline class="w-4 h-4 mr-1.5" />
+              Delete
+            </Button>
           </div>
+          <!-- Hidden file input for replace -->
+          <input
+            bind:this={singleModeFileInput}
+            type="file"
+            accept={acceptedTypes.join(',')}
+            class="hidden"
+            onchange={handleSingleModeFileSelect}
+          />
         {/if}
       </div>
     {:else}
@@ -779,6 +816,10 @@
     justify-content: center;
   }
 
+  /* Note: FilePond dark mode is handled via runtime JS injection
+     because Svelte's scoped :global() can't reliably override
+     FilePond's CSS that loads from node_modules */
+
   :global(.filepond-wrapper .filepond--drop-label label) {
     display: flex;
     flex-direction: column;

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts

@@ -26,6 +26,8 @@ interface Props {
     acceptedTypes?: string[];
     /** Label shown when empty */
     emptyLabel?: string;
+    /** Constraints text shown inside dropzone (e.g., "Max 10MB, 2160px") */
+    constraintsText?: string;
     /** Helper text shown below dropzone */
     helperText?: string;
     /** Callback when image is uploaded - receives File, optionally returns URL

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAU5E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;sEAEkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAumBH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAW5E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;sEAEkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsoBH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/recipes/fields/FormField.svelte

@@ -48,9 +48,9 @@
 
   {#if !error}
     {#if hintContent}
-      <p class={typography.smMuted}>{@render hintContent()}</p>
+      <p class={typography.xsMuted}>{@render hintContent()}</p>
     {:else if hint}
-      <p class={typography.smMuted}>{hint}</p>
+      <p class={typography.xsMuted}>{hint}</p>
     {/if}
   {/if}
 

package/dist/recipes/fields/TextareaField.svelte

@@ -96,6 +96,6 @@
   />
 
   {#if hint && !error}
-    <p class={`${typography.smMuted} mt-1`}>{hint}</p>
+    <p class={`${typography.xsMuted} mt-1`}>{hint}</p>
   {/if}
 </div>

package/dist/recipes/inputs/MultiSelect.svelte

@@ -152,7 +152,7 @@
       bind:this={triggerElement}
       {id}
       {name}
-      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg cursor-pointer text-left transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
+      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
         {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 focus:border-blue-500 dark:focus:border-blue-500'}
         {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
       {disabled}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -136,7 +136,8 @@
     <div class="flex gap-3">
       {#each resolvedActions as action}
         <Button
-          size="full"
+          size="md"
+          class="flex-1"
           variant={getVariant(action)}
           {...cleanActionProps(action)}
           disabled={disabled || action.disabled}

package/package.json

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