@getmicdrop/svelte-components 5.4.0 → 5.4.2

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

@@ -1,55 +1,57 @@
-export { default as ChevronLeftOutline } from "./ChevronLeftOutline.svelte";
-export { default as ChevronRightOutline } from "./ChevronRightOutline.svelte";
-export { default as ChevronDownOutline } from "./ChevronDownOutline.svelte";
-export { default as ChevronUpOutline } from "./ChevronUpOutline.svelte";
-export { default as CloseOutline } from "./CloseOutline.svelte";
-export { default as CheckOutline } from "./CheckOutline.svelte";
-export { default as ShareOutline } from "./ShareOutline.svelte";
-export { default as SearchOutline } from "./SearchOutline.svelte";
-export { default as EyeOutline } from "./EyeOutline.svelte";
-export { default as EyeSlashOutline } from "./EyeSlashOutline.svelte";
-export { default as CloseCircleOutline } from "./CloseCircleOutline.svelte";
-export { default as ExclamationCircleOutline } from "./ExclamationCircleOutline.svelte";
-export { default as InfoCircleOutline } from "./InfoCircleOutline.svelte";
-export { default as MinusOutline } from "./MinusOutline.svelte";
-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";
-export { default as ArrowLeft } from "./ArrowLeft.svelte";
-export { default as ArrowRight } from "./ArrowRight.svelte";
-export { default as Availability } from "./Availability.svelte";
-export { default as Back } from "./Back.svelte";
-export { default as CheckCircle } from "./CheckCircle.svelte";
-export { default as CheckCircleOutline } from "./CheckCircleOutline.svelte";
-export { default as ChevronLeft } from "./ChevronLeft.svelte";
-export { default as ChevronRight } from "./ChevronRight.svelte";
-export { default as Copy } from "./Copy.svelte";
-export { default as Cross } from "./Cross.svelte";
-export { default as DownArrow } from "./DownArrow.svelte";
-export { default as ErrorCircle } from "./ErrorCircle.svelte";
-export { default as FacebookIcon } from "./FacebookIcon.svelte";
-export { default as Home } from "./Home.svelte";
-export { default as Icon } from "./Icon.svelte";
-export { default as Info } from "./Info.svelte";
-export { default as InstagramIcon } from "./InstagramIcon.svelte";
-export { default as Message } from "./Message.svelte";
-export { default as MoonIcon } from "./MoonIcon.svelte";
-export { default as More } from "./More.svelte";
-export { default as MoreHori } from "./MoreHori.svelte";
-export { default as Notification } from "./Notification.svelte";
-export { default as Payment } from "./Payment.svelte";
-export { default as Profile } from "./Profile.svelte";
-export { default as Reload } from "./Reload.svelte";
-export { default as Shows } from "./Shows.svelte";
-export { default as Signout } from "./Signout.svelte";
-export { default as SunIcon } from "./SunIcon.svelte";
-export { default as TiktokIcon } from "./TiktokIcon.svelte";
-export { default as TwitterIcon } from "./TwitterIcon.svelte";
-export { default as WarningIcon } from "./WarningIcon.svelte";
+export type { IconProps } from './types';
+export { DEFAULT_ICON_PROPS } from './types';
+export { default as ChevronLeftOutline } from './ChevronLeftOutline.svelte';
+export { default as ChevronRightOutline } from './ChevronRightOutline.svelte';
+export { default as ChevronDownOutline } from './ChevronDownOutline.svelte';
+export { default as ChevronUpOutline } from './ChevronUpOutline.svelte';
+export { default as CloseOutline } from './CloseOutline.svelte';
+export { default as CheckOutline } from './CheckOutline.svelte';
+export { default as ShareOutline } from './ShareOutline.svelte';
+export { default as SearchOutline } from './SearchOutline.svelte';
+export { default as EyeOutline } from './EyeOutline.svelte';
+export { default as EyeSlashOutline } from './EyeSlashOutline.svelte';
+export { default as CloseCircleOutline } from './CloseCircleOutline.svelte';
+export { default as ExclamationCircleOutline } from './ExclamationCircleOutline.svelte';
+export { default as InfoCircleOutline } from './InfoCircleOutline.svelte';
+export { default as MinusOutline } from './MinusOutline.svelte';
+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';
+export { default as ArrowLeft } from './ArrowLeft.svelte';
+export { default as ArrowRight } from './ArrowRight.svelte';
+export { default as Availability } from './Availability.svelte';
+export { default as Back } from './Back.svelte';
+export { default as CheckCircle } from './CheckCircle.svelte';
+export { default as CheckCircleOutline } from './CheckCircleOutline.svelte';
+export { default as ChevronLeft } from './ChevronLeft.svelte';
+export { default as ChevronRight } from './ChevronRight.svelte';
+export { default as Copy } from './Copy.svelte';
+export { default as Cross } from './Cross.svelte';
+export { default as DownArrow } from './DownArrow.svelte';
+export { default as ErrorCircle } from './ErrorCircle.svelte';
+export { default as FacebookIcon } from './FacebookIcon.svelte';
+export { default as Home } from './Home.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Info } from './Info.svelte';
+export { default as InstagramIcon } from './InstagramIcon.svelte';
+export { default as Message } from './Message.svelte';
+export { default as MoonIcon } from './MoonIcon.svelte';
+export { default as More } from './More.svelte';
+export { default as MoreHori } from './MoreHori.svelte';
+export { default as Notification } from './Notification.svelte';
+export { default as Payment } from './Payment.svelte';
+export { default as Profile } from './Profile.svelte';
+export { default as Reload } from './Reload.svelte';
+export { default as Shows } from './Shows.svelte';
+export { default as Signout } from './Signout.svelte';
+export { default as SunIcon } from './SunIcon.svelte';
+export { default as TiktokIcon } from './TiktokIcon.svelte';
+export { default as TwitterIcon } from './TwitterIcon.svelte';
+export { default as WarningIcon } from './WarningIcon.svelte';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/index.ts"],"names":[],"mappings":"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"}

package/dist/primitives/Icons/index.js

@@ -1,61 +1,59 @@
-// Outline icons (stroke-based)
-export { default as ChevronLeftOutline } from './ChevronLeftOutline.svelte';
-export { default as ChevronRightOutline } from './ChevronRightOutline.svelte';
-export { default as ChevronDownOutline } from './ChevronDownOutline.svelte';
-export { default as ChevronUpOutline } from './ChevronUpOutline.svelte';
-export { default as CloseOutline } from './CloseOutline.svelte';
-export { default as CheckOutline } from './CheckOutline.svelte';
-export { default as ShareOutline } from './ShareOutline.svelte';
-export { default as SearchOutline } from './SearchOutline.svelte';
-export { default as EyeOutline } from './EyeOutline.svelte';
-export { default as EyeSlashOutline } from './EyeSlashOutline.svelte';
-export { default as CloseCircleOutline } from './CloseCircleOutline.svelte';
-export { default as ExclamationCircleOutline } from './ExclamationCircleOutline.svelte';
-export { default as InfoCircleOutline } from './InfoCircleOutline.svelte';
-export { default as MinusOutline } from './MinusOutline.svelte';
-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';
-export { default as HomeSolid } from './HomeSolid.svelte';
-
-// Brand icons
-export { default as LogoInstagram } from './LogoInstagram.svelte';
-
-// Legacy icons (kept for backward compatibility)
-export { default as ArrowLeft } from './ArrowLeft.svelte';
-export { default as ArrowRight } from './ArrowRight.svelte';
-export { default as Availability } from './Availability.svelte';
-export { default as Back } from './Back.svelte';
-export { default as CheckCircle } from './CheckCircle.svelte';
-export { default as CheckCircleOutline } from './CheckCircleOutline.svelte';
-export { default as ChevronLeft } from './ChevronLeft.svelte';
-export { default as ChevronRight } from './ChevronRight.svelte';
-export { default as Copy } from './Copy.svelte';
-export { default as Cross } from './Cross.svelte';
-export { default as DownArrow } from './DownArrow.svelte';
-export { default as ErrorCircle } from './ErrorCircle.svelte';
-export { default as FacebookIcon } from './FacebookIcon.svelte';
-export { default as Home } from './Home.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default as Info } from './Info.svelte';
-export { default as InstagramIcon } from './InstagramIcon.svelte';
-export { default as Message } from './Message.svelte';
-export { default as MoonIcon } from './MoonIcon.svelte';
-export { default as More } from './More.svelte';
-export { default as MoreHori } from './MoreHori.svelte';
-export { default as Notification } from './Notification.svelte';
-export { default as Payment } from './Payment.svelte';
-export { default as Profile } from './Profile.svelte';
-export { default as Reload } from './Reload.svelte';
-export { default as Shows } from './Shows.svelte';
-export { default as Signout } from './Signout.svelte';
-export { default as SunIcon } from './SunIcon.svelte';
-export { default as TiktokIcon } from './TiktokIcon.svelte';
-export { default as TwitterIcon } from './TwitterIcon.svelte';
-export { default as WarningIcon } from './WarningIcon.svelte';
+export { DEFAULT_ICON_PROPS } from './types';
+// Outline icons (stroke-based)
+export { default as ChevronLeftOutline } from './ChevronLeftOutline.svelte';
+export { default as ChevronRightOutline } from './ChevronRightOutline.svelte';
+export { default as ChevronDownOutline } from './ChevronDownOutline.svelte';
+export { default as ChevronUpOutline } from './ChevronUpOutline.svelte';
+export { default as CloseOutline } from './CloseOutline.svelte';
+export { default as CheckOutline } from './CheckOutline.svelte';
+export { default as ShareOutline } from './ShareOutline.svelte';
+export { default as SearchOutline } from './SearchOutline.svelte';
+export { default as EyeOutline } from './EyeOutline.svelte';
+export { default as EyeSlashOutline } from './EyeSlashOutline.svelte';
+export { default as CloseCircleOutline } from './CloseCircleOutline.svelte';
+export { default as ExclamationCircleOutline } from './ExclamationCircleOutline.svelte';
+export { default as InfoCircleOutline } from './InfoCircleOutline.svelte';
+export { default as MinusOutline } from './MinusOutline.svelte';
+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';
+export { default as HomeSolid } from './HomeSolid.svelte';
+// Brand icons
+export { default as LogoInstagram } from './LogoInstagram.svelte';
+// Legacy icons (kept for backward compatibility)
+export { default as ArrowLeft } from './ArrowLeft.svelte';
+export { default as ArrowRight } from './ArrowRight.svelte';
+export { default as Availability } from './Availability.svelte';
+export { default as Back } from './Back.svelte';
+export { default as CheckCircle } from './CheckCircle.svelte';
+export { default as CheckCircleOutline } from './CheckCircleOutline.svelte';
+export { default as ChevronLeft } from './ChevronLeft.svelte';
+export { default as ChevronRight } from './ChevronRight.svelte';
+export { default as Copy } from './Copy.svelte';
+export { default as Cross } from './Cross.svelte';
+export { default as DownArrow } from './DownArrow.svelte';
+export { default as ErrorCircle } from './ErrorCircle.svelte';
+export { default as FacebookIcon } from './FacebookIcon.svelte';
+export { default as Home } from './Home.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Info } from './Info.svelte';
+export { default as InstagramIcon } from './InstagramIcon.svelte';
+export { default as Message } from './Message.svelte';
+export { default as MoonIcon } from './MoonIcon.svelte';
+export { default as More } from './More.svelte';
+export { default as MoreHori } from './MoreHori.svelte';
+export { default as Notification } from './Notification.svelte';
+export { default as Payment } from './Payment.svelte';
+export { default as Profile } from './Profile.svelte';
+export { default as Reload } from './Reload.svelte';
+export { default as Shows } from './Shows.svelte';
+export { default as Signout } from './Signout.svelte';
+export { default as SunIcon } from './SunIcon.svelte';
+export { default as TiktokIcon } from './TiktokIcon.svelte';
+export { default as TwitterIcon } from './TwitterIcon.svelte';
+export { default as WarningIcon } from './WarningIcon.svelte';

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

@@ -0,0 +1,31 @@
+/**
+ * Standardized icon props interface.
+ *
+ * All icons in this library accept these props for consistent styling.
+ */
+export interface IconProps {
+    /**
+     * Icon size in pixels as a string (e.g., "24", "32").
+     * @default "24"
+     */
+    size?: string;
+    /**
+     * Icon color. Accepts any valid CSS color value.
+     * @default "currentColor"
+     */
+    color?: string;
+    /**
+     * Additional CSS classes to apply to the SVG element.
+     * @default ""
+     */
+    class?: string;
+}
+/**
+ * Default icon props values.
+ */
+export declare const DEFAULT_ICON_PROPS: {
+    readonly size: "24";
+    readonly color: "currentColor";
+    readonly class: "";
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/Icons/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC"}

package/dist/primitives/Icons/types.js

@@ -0,0 +1,8 @@
+/**
+ * Default icon props values.
+ */
+export const DEFAULT_ICON_PROPS = {
+    size: '24',
+    color: 'currentColor',
+    class: '',
+};

package/dist/primitives/Input/Input.svelte

@@ -13,6 +13,8 @@
   import { onDestroy } from "svelte";
   import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
   import { typography } from "../../tokens/typography";
+  import { formInputSizes } from "../../tokens/sizing";
+  import { formatCreditCardNumber, formatPhoneNumber } from "../../utils/formatters";
 
   /** @type {{
     required?: boolean,
@@ -148,13 +150,7 @@
   let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
   let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
 
-  const sizeClasses = {
-    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"
-  };
-
-  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+  let sizeClass = $derived(formInputSizes[size] || formInputSizes.md);
 
   const togglePasswordVisibility = () => {
     isPasswordVisible = !isPasswordVisible;
@@ -238,19 +234,6 @@
     clearTimeout(debounceTimer);
   });
 
-  const formatCreditCardNumber = (value) => {
-    return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
-  };
-
-  const formatPhoneNumber = (value) => {
-    const cleanedValue = value.replace(/\D/g, "");
-    let formattedValue = "";
-    if (cleanedValue.length > 0) formattedValue += cleanedValue.substring(0, 3);
-    if (cleanedValue.length >= 4) formattedValue += "-" + cleanedValue.substring(3, 6);
-    if (cleanedValue.length >= 7) formattedValue += "-" + cleanedValue.substring(6, 10);
-    return formattedValue;
-  };
-
   const handleBlur = () => {
     onblur?.();
   };
@@ -318,6 +301,7 @@
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
       <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]' : ''}">
+        <!-- svelte-ignore a11y_autofocus -->
         <input
           bind:this={inputElement}
           {id}
@@ -361,6 +345,7 @@
             {@render leftIcon()}
           </div>
         {/if}
+        <!-- svelte-ignore a11y_autofocus -->
         <input
           bind:this={inputElement}
           {id}
@@ -440,5 +425,7 @@
   }
   :global(input[type="number"]) {
     -moz-appearance: textfield;
+    -webkit-appearance: textfield;
+            appearance: textfield;
   }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiaA;;eA9Ce,OAAO;eACP,OAAO;eACP,OAAO;WACX,MAAM,GAAG,IAAI;iBACP,MAAM,GAAG,IAAI;iBACb,MAAM,GAAG,IAAI;gBACd,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;WAClB,MAAM;kBACC,MAAM;YACZ,MAAM;SACT,MAAM;WACJ,MAAM;gBACD,MAAM;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,MAAM;gBACT,MAAM;YACV,MAAM,GAAG,KAAK;iBACT,MAAM;iBACN,MAAM;eACR,MAAM;eACN,MAAM;mBACF,MAAM;eACV,OAAO;iBACL,OAAO;oBACJ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;YACxC,MAAM,GAAG,MAAM,GAAG,IAAI;mBACf,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;oBACT,OAAO;iBACV,MAAM;qBACF,MAAM;sBACL,OAAO;eACd,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;cACpC,MAAM,IAAI;aACX,MAAM,IAAI;oBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,GAAG;gBAGkC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoZA;;eA9Ce,OAAO;eACP,OAAO;eACP,OAAO;WACX,MAAM,GAAG,IAAI;iBACP,MAAM,GAAG,IAAI;iBACb,MAAM,GAAG,IAAI;gBACd,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;WAClB,MAAM;kBACC,MAAM;YACZ,MAAM;SACT,MAAM;WACJ,MAAM;gBACD,MAAM;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,MAAM;gBACT,MAAM;YACV,MAAM,GAAG,KAAK;iBACT,MAAM;iBACN,MAAM;eACR,MAAM;eACN,MAAM;mBACF,MAAM;eACV,OAAO;iBACL,OAAO;oBACJ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;YACxC,MAAM,GAAG,MAAM,GAAG,IAAI;mBACf,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;oBACT,OAAO;iBACV,MAAM;qBACF,MAAM;sBACL,OAAO;eACd,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;cACpC,MAAM,IAAI;aACX,MAAM,IAAI;oBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,GAAG;gBAGkC"}

package/dist/primitives/Input/Select.svelte

@@ -1,8 +1,30 @@
-<script>
+<script lang="ts">
   import { onMount, tick } from "svelte";
   import { ChevronDownOutline } from "../Icons";
   import { portal as portalAction } from "../../utils/portal.js";
   import { typography } from "../../tokens/typography";
+  import { formControlSizes } from "../../tokens/sizing";
+
+  interface SelectItem {
+    value: string;
+    name: string;
+  }
+
+  interface Props {
+    value?: string;
+    items?: SelectItem[];
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    name?: string;
+    id?: string;
+    size?: "sm" | "md" | "lg";
+    portal?: boolean;
+    onchange?: (detail: { value: string; item: SelectItem }) => void;
+    [key: string]: unknown;
+  }
 
   let {
     value = $bindable(""),
@@ -18,11 +40,11 @@
     portal = false,
     onchange,
     ...restProps
-  } = $props();
+  }: Props = $props();
 
   let isOpen = $state(false);
-  let triggerElement = $state(null);
-  let dropdownElement = $state(null);
+  let triggerElement = $state<HTMLButtonElement | null>(null);
+  let dropdownElement = $state<HTMLUListElement | null>(null);
   let focusedIndex = $state(-1);
   let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
 
@@ -31,13 +53,7 @@
   let selectedItem = $derived(items.find((item) => item.value === value));
   let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
 
-  const sizeClasses = {
-    sm: "py-2 px-3 text-sm",
-    md: "py-2.5 px-4 text-sm",
-    lg: "py-3 px-4 text-base"
-  };
-
-  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+  let sizeClass = $derived(formControlSizes[size] || formControlSizes.md);
 
   function updateDropdownPosition() {
     if (!triggerElement || !portal) return;
@@ -62,8 +78,9 @@
     }
   }
 
-  function handleOtherSelectOpened(event) {
-    if (event.detail.instanceId !== instanceId && isOpen) {
+  function handleOtherSelectOpened(event: Event) {
+    const customEvent = event as CustomEvent<{ instanceId: string }>;
+    if (customEvent.detail.instanceId !== instanceId && isOpen) {
       close();
     }
   }
@@ -73,14 +90,14 @@
     focusedIndex = -1;
   }
 
-  function selectItem(item) {
+  function selectItem(item: SelectItem) {
     value = item.value;
     onchange?.({ value: item.value, item });
     close();
     triggerElement?.focus();
   }
 
-  function handleKeydown(event) {
+  function handleKeydown(event: KeyboardEvent) {
     if (disabled) return;
 
     switch (event.key) {
@@ -118,10 +135,10 @@
     }
   }
 
-  function handleClickOutside(event) {
+  function handleClickOutside(event: MouseEvent) {
     if (!isOpen) return;
-    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(event.target);
-    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(event.target);
+    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(event.target as Node);
+    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(event.target as Node);
     if (clickedOutsideTrigger && clickedOutsideDropdown) {
       close();
     }

package/dist/primitives/Input/Select.svelte.d.ts

@@ -1,11 +1,10 @@
-export default Select;
-type Select = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const Select: import("svelte").Component<{
+interface SelectItem {
+    value: string;
+    name: string;
+}
+interface Props {
     value?: string;
-    items?: any[];
+    items?: SelectItem[];
     placeholder?: string;
     label?: string;
     required?: boolean;
@@ -13,22 +12,15 @@ declare const Select: import("svelte").Component<{
     error?: string;
     name?: string;
     id?: string;
-    size?: string;
+    size?: "sm" | "md" | "lg";
     portal?: boolean;
-    onchange: any;
-} & Record<string, any>, {}, "value">;
-type $$ComponentProps = {
-    value?: string;
-    items?: any[];
-    placeholder?: string;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    error?: string;
-    name?: string;
-    id?: string;
-    size?: string;
-    portal?: boolean;
-    onchange: any;
-} & Record<string, any>;
+    onchange?: (detail: {
+        value: string;
+        item: SelectItem;
+    }) => void;
+    [key: string]: unknown;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;
 //# sourceMappingURL=Select.svelte.d.ts.map

package/dist/primitives/Input/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AA8MA;YAhM6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;aAAW,OAAO;cAAY,GAAG;sCAgMvK;wBAhMlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqMH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/Input/Textarea.svelte

@@ -1,6 +1,30 @@
-<script>
+<script lang="ts">
   import { typography } from "../../tokens/typography";
 
+  interface Props {
+    value?: unknown;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    error?: string;
+    maxlength?: number | null;
+    minlength?: number | null;
+    class?: string;
+    oninput?: (detail: { value: string }) => void;
+    onchange?: (detail: { value: string }) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    [key: string]: unknown;
+  }
+
   let {
     value = $bindable(""),
     placeholder = "",
@@ -23,22 +47,24 @@
     onkeyup,
     onkeypress,
     ...restProps
-  } = $props();
+  }: Props = $props();
 
-  function handleInput(event) {
-    value = event.target.value;
-    oninput?.({ value });
+  function handleInput(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    value = target.value;
+    oninput?.({ value: target.value });
   }
 
-  function handleChange(event) {
-    onchange?.({ value: event.target.value });
+  function handleChange(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    onchange?.({ value: target.value });
   }
 
-  function handleBlur(event) {
+  function handleBlur(event: FocusEvent) {
     onblur?.(event);
   }
 
-  function handleFocus(event) {
+  function handleFocus(event: FocusEvent) {
     onfocus?.(event);
   }
 </script>