@getmicdrop/svelte-components 5.3.3 → 5.3.10

package/dist/primitives/Dropdown/Dropdown.stories.svelte

@@ -0,0 +1,137 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Dropdown from './Dropdown.svelte';
+  import DropdownItem from './DropdownItem.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Dropdown menu component for actions and navigation.',
+        },
+      },
+    },
+  });
+
+  let open1 = $state(false);
+  let open2 = $state(false);
+  let open3 = $state(false);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        Options ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => { console.log('Edit'); open1 = false; }}>Edit</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Duplicate'); open1 = false; }}>Duplicate</DropdownItem>
+          <DropdownItem onclick={() => { console.log('Archive'); open1 = false; }}>Archive</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Dividers">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open2 = !open2}>
+        Actions ▼
+      </Button>
+      {#if open2}
+        <Dropdown class="absolute mt-1 z-10">
+          <DropdownItem onclick={() => open2 = false}>View Details</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Edit</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false}>Share</DropdownItem>
+          <DropdownItem onclick={() => open2 = false}>Export</DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open2 = false} class="text-red-600">Delete</DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Right Aligned">
+  {#snippet template()}
+    <div class="flex justify-end">
+      <div class="relative inline-block">
+        <Button onclick={() => open3 = !open3}>
+          Menu ▼
+        </Button>
+        {#if open3}
+          <Dropdown class="absolute mt-1 right-0 z-10">
+            <DropdownItem onclick={() => open3 = false}>Profile</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Settings</DropdownItem>
+            <DropdownItem onclick={() => open3 = false}>Help</DropdownItem>
+            <div class="border-t my-1"></div>
+            <DropdownItem onclick={() => open3 = false}>Sign Out</DropdownItem>
+          </Dropdown>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <div class="relative inline-block">
+      <Button onclick={() => open1 = !open1}>
+        User Menu ▼
+      </Button>
+      {#if open1}
+        <Dropdown class="absolute mt-1 z-10 min-w-[180px]">
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">👤</span> Profile
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">⚙️</span> Settings
+          </DropdownItem>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">📊</span> Analytics
+          </DropdownItem>
+          <div class="border-t my-1"></div>
+          <DropdownItem onclick={() => open1 = false}>
+            <span class="mr-2">🚪</span> Sign Out
+          </DropdownItem>
+        </Dropdown>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="In Card Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4 max-w-sm">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-medium">Card Title</h3>
+        <div class="relative">
+          <button
+            class="p-1 hover:bg-gray-100 rounded"
+            onclick={() => open1 = !open1}
+          >
+            ⋮
+          </button>
+          {#if open1}
+            <Dropdown class="absolute mt-1 right-0 z-10">
+              <DropdownItem onclick={() => open1 = false}>Edit</DropdownItem>
+              <DropdownItem onclick={() => open1 = false}>Share</DropdownItem>
+              <DropdownItem onclick={() => open1 = false} class="text-red-600">Delete</DropdownItem>
+            </Dropdown>
+          {/if}
+        </div>
+      </div>
+      <p class="text-gray-600 text-sm">
+        This is a card with a dropdown menu in the header for common actions.
+      </p>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Dropdown/Dropdown.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Dropdown;
+type Dropdown = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Dropdown from './Dropdown.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Dropdown.stories.svelte.d.ts.map

package/dist/primitives/Dropdown/Dropdown.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoJA;;;;mBAAoH;qBAhJ7F,mBAAmB;6CAuIG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -133,18 +133,16 @@
   };
 </script>
 
-<div bind:this={containerRef} class="relative inline-block">
-  {#if open}
-    <div
-      bind:this={dropdownRef}
-      class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {placementClasses[placement] || placementClasses.bottom} {className}"
-      role="menu"
-      aria-label={ariaLabel}
-      {...restProps}
-    >
-      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-        {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-      </ul>
-    </div>
-  {/if}
-</div>
+{#if open}
+  <div
+    bind:this={containerRef}
+    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    {...restProps}
+  >
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </ul>
+  </div>
+{/if}

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;AAwJA;WAhJ4B,OAAO;gBAAc,MAAM;gBAAc,MAAM;YAAU,MAAM;gBAAc,MAAM;aAAW,GAAG;cAAY,GAAG;qCAgJrF;wBAhJpC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;AAsJA;WA9I4B,OAAO;gBAAc,MAAM;gBAAc,MAAM;YAAU,MAAM;gBAAc,MAAM;aAAW,GAAG;cAAY,GAAG;qCA8IrF;wBA9IpC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Icons/Icon.svelte

@@ -56,7 +56,8 @@
 </script>
 
 {#if Component}
-  <svelte:component this={Component} {size} {color} />
+  {@const IconComponent = Component}
+  <IconComponent {size} {color} />
 {:else}
   <span>Icon "{name}" not found.</span>
 {/if}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA6FA,QAAA,MAAM,IAAI;;WAfyD,MAAM;YAAU,MAAM;UAevC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA8FA,QAAA,MAAM,IAAI;;WAhByD,MAAM;YAAU,MAAM;UAgBvC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/primitives/Input/Input.svelte

@@ -2,11 +2,17 @@
   /**
    * Input Component - Flowbite Native
    * Migrated to Svelte 5 runes
+   *
+   * NOTE: This component does NOT perform any validation.
+   * All validation should be handled externally (e.g., via Zod schemas).
+   * Use the `errorText` prop to display validation errors.
+   * Use the `color` prop ('red' | 'base') to style the border.
    */
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { onDestroy } from "svelte";
   import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   /** @type {{
     required?: boolean,
@@ -26,6 +32,7 @@
     size?: 'sm' | 'md' | 'lg',
     textareaSize?: string,
     errorText?: string,
+    color?: 'base' | 'red',
     helperText?: string,
     helperIcon?: string,
     hintText?: string,
@@ -34,7 +41,7 @@
     readonly?: boolean,
     controlled?: boolean,
     onButtonClick?: ((value: string) => void) | null,
-    value?: string,
+    value?: string | number | null,
     autocomplete?: string | null,
     autofocus?: boolean,
     showPasswordToggle?: boolean,
@@ -43,8 +50,6 @@
     statusType?: string,
     buttonDisabled?: boolean,
     inputmode?: string | null,
-    showErrors?: boolean,
-    disableBuiltInValidation?: boolean,
     instantSearch?: boolean,
     debounceMs?: number,
     minSearchChars?: number,
@@ -74,6 +79,7 @@
     size = "md",
     textareaSize = "",
     errorText = "",
+    color = "base",
     helperText = "",
     helperIcon = "",
     hintText = "",
@@ -91,8 +97,6 @@
     statusType = "",
     buttonDisabled = false,
     inputmode = null,
-    showErrors = false,
-    disableBuiltInValidation = false,
     instantSearch = false,
     debounceMs = 250,
     minSearchChars = 2,
@@ -136,10 +140,11 @@
     }
   }
 
-  let touched = $state(false);
-  let displayErrorText = $state("");
   let isPasswordVisible = $state(false);
 
+  // Error state derived from color prop or errorText
+  let hasError = $derived(color === 'red' || Boolean(errorText));
+
   let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
   let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
 
@@ -157,16 +162,16 @@
 
   const handleInput = (event) => {
     inputValue = event.target.value;
-    let rawInput = inputValue;
 
+    // Format special input types
     if (type === "creditCardNumber") {
-      rawInput = inputValue.replace(/\D/g, "");
+      const rawInput = inputValue.replace(/\D/g, "");
       inputValue = formatCreditCardNumber(rawInput);
       event.target.value = inputValue;
     }
 
     if (type === "phoneNumber") {
-      rawInput = inputValue.replace(/\D/g, "");
+      const rawInput = inputValue.replace(/\D/g, "");
       inputValue = formatPhoneNumber(rawInput);
       event.target.value = inputValue;
     }
@@ -182,35 +187,6 @@
       sanitized = sanitized.replace(/[^A-Za-z0-9._]/g, "");
       inputValue = sanitized;
       event.target.value = inputValue;
-      rawInput = sanitized;
-    }
-
-    if (type === "email") {
-      if (!isValidEmail(inputValue)) {
-        displayErrorText = errorText;
-      } else {
-        displayErrorText = "";
-      }
-    }
-
-    if (type === "password") {
-      if (!isStrongPassword(inputValue)) {
-        displayErrorText = "Password must be at least 8 characters long and include uppercase, lowercase, a number, and a special character.";
-      } else {
-        displayErrorText = "";
-      }
-    }
-
-    if (minlength !== null && rawInput.length < minlength) {
-      displayErrorText = errorText;
-    } else {
-      displayErrorText = "";
-    }
-
-    if (!disableBuiltInValidation && required && !inputValue.trim()) {
-      displayErrorText = "This field is required.";
-    } else if (!disableBuiltInValidation) {
-      displayErrorText = "";
     }
 
     value = inputValue;
@@ -218,13 +194,15 @@
     // Call oninputchange callback if provided
     oninputchange?.(inputValue);
 
+    // Handle instant search
     if (instantSearch) {
+      const inputValueStr = inputValue ?? '';
       clearTimeout(debounceTimer);
-      if (inputValue.length === 0) {
+      if (inputValueStr.length === 0) {
         onsearch?.({ query: '' });
         return;
       }
-      if (inputValue.length >= minSearchChars) {
+      if (inputValueStr.length >= minSearchChars) {
         debounceTimer = setTimeout(() => {
           onsearch?.({ query: inputValue });
         }, debounceMs);
@@ -260,15 +238,6 @@
     clearTimeout(debounceTimer);
   });
 
-  const isStrongPassword = (password) => {
-    const minLength = 8;
-    const hasUpperCase = /[A-Z]/.test(password);
-    const hasLowerCase = /[a-z]/.test(password);
-    const hasNumber = /[0-9]/.test(password);
-    const hasSpecialChar = /[!@#$%^&*]/.test(password);
-    return password.length >= minLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar;
-  };
-
   const formatCreditCardNumber = (value) => {
     return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
   };
@@ -283,29 +252,13 @@
   };
 
   const handleBlur = () => {
-    touched = true;
     onblur?.();
-    if (disableBuiltInValidation) return;
-    if (required && !inputValue.trim()) {
-      displayErrorText = "This field is required.";
-    } else if (type === "email" && !isValidEmail(inputValue)) {
-      displayErrorText = errorText;
-    } else if (minlength !== null && inputValue.length < minlength) {
-      displayErrorText = errorText;
-    } else {
-      displayErrorText = "";
-    }
   };
 
   const handleFocus = () => {
     onfocus?.();
   };
 
-  const isValidEmail = (email) => {
-    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return re.test(String(email).toLowerCase());
-  };
-
   const getContentFloatClass = () => {
     switch (contentFloat) {
       case "center": return "text-center";
@@ -328,23 +281,19 @@
       onButtonClick(inputValue);
     }
   };
-
-  $effect(() => {
-    displayErrorText = errorText || (touched && !disableBuiltInValidation && (errorText || (required && !inputValue.trim() ? "This field is required." : "")));
-  });
 </script>
 
 <div class="flex flex-col gap-2 {className}" {...restProps}>
   {#if label}
     <div class="flex justify-start items-center gap-1">
-      <label for={id} class="text-sm font-medium text-gray-900 dark:text-white leading-tight sm:leading-none">
+      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
         {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
       </label>
       {#if statusText}
         <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
       {/if}
       {#if optional}
-        <span class="text-sm text-gray-500 dark:text-gray-400">(optional)</span>
+        <span class={typography.smMuted}>(optional)</span>
       {/if}
     </div>
   {/if}
@@ -360,7 +309,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border rounded-lg text-sm font-medium text-gray-900 dark:text-white 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 {displayErrorText ? '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-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]' : ''}"
         required={false}
         {disabled}
         {readonly}
@@ -368,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 {displayErrorText ? '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-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]' : ''}">
         <input
           bind:this={inputElement}
           {id}
@@ -382,7 +331,7 @@
           onfocus={handleFocus}
           {maxlength}
           {minlength}
-          class="flex-1 w-full {sizeClass} bg-transparent border-none text-gray-900 dark:text-white font-medium text-sm placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
+          class="{typography.sm} flex-1 w-full {sizeClass} bg-transparent border-none font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
           required={false}
           {disabled}
           {readonly}
@@ -426,7 +375,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {displayErrorText ? '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-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' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -450,7 +399,7 @@
             type="button"
             onclick={handleButtonClick}
             disabled={buttonDisabled}
-            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || displayErrorText ? 'mb-7' : ''}"
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || errorText ? 'mb-7' : ''}"
           >
             {#if buttonIcon}
               <img src={buttonIcon} alt="Button Icon" class="w-5 h-5" />
@@ -466,13 +415,13 @@
       </div>
     {/if}
 
-    {#if displayErrorText && (touched || showErrors)}
+    {#if errorText}
       <div transition:slide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
         <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
-        <p class="text-sm text-red-500">{displayErrorText}</p>
+        <p class={typography.error}>{errorText}</p>
       </div>
     {:else if helperText || hintText}
-      <div class="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-400 opacity-65">
+      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
         {#if helperIcon || hintIcon}
           <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
         {/if}
@@ -481,3 +430,15 @@
     {/if}
   </div>
 </div>
+
+<style>
+  /* Hide number input spinners globally */
+  :global(input[type="number"]::-webkit-outer-spin-button),
+  :global(input[type="number"]::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  :global(input[type="number"]) {
+    -moz-appearance: textfield;
+  }
+</style>

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

@@ -20,6 +20,7 @@ type Input = {
         size?: "sm" | "md" | "lg" | undefined;
         textareaSize?: string | undefined;
         errorText?: string | undefined;
+        color?: "red" | "base" | undefined;
         helperText?: string | undefined;
         helperIcon?: string | undefined;
         hintText?: string | undefined;
@@ -28,7 +29,7 @@ type Input = {
         readonly?: boolean | undefined;
         controlled?: boolean | undefined;
         onButtonClick?: ((value: string) => void) | null | undefined;
-        value?: string | undefined;
+        value?: string | number | null | undefined;
         autocomplete?: string | null | undefined;
         autofocus?: boolean | undefined;
         showPasswordToggle?: boolean | undefined;
@@ -37,8 +38,6 @@ type Input = {
         statusType?: string | undefined;
         buttonDisabled?: boolean | undefined;
         inputmode?: string | null | undefined;
-        showErrors?: boolean | undefined;
-        disableBuiltInValidation?: boolean | undefined;
         instantSearch?: boolean | undefined;
         debounceMs?: number | undefined;
         minSearchChars?: number | undefined;
@@ -71,6 +70,7 @@ declare const Input: import("svelte").Component<{
     size?: "sm" | "md" | "lg";
     textareaSize?: string;
     errorText?: string;
+    color?: "base" | "red";
     helperText?: string;
     helperIcon?: string;
     hintText?: string;
@@ -79,7 +79,7 @@ declare const Input: import("svelte").Component<{
     readonly?: boolean;
     controlled?: boolean;
     onButtonClick?: ((value: string) => void) | null;
-    value?: string;
+    value?: string | number | null;
     autocomplete?: string | null;
     autofocus?: boolean;
     showPasswordToggle?: boolean;
@@ -88,8 +88,6 @@ declare const Input: import("svelte").Component<{
     statusType?: string;
     buttonDisabled?: boolean;
     inputmode?: string | null;
-    showErrors?: boolean;
-    disableBuiltInValidation?: boolean;
     instantSearch?: boolean;
     debounceMs?: number;
     minSearchChars?: number;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkdA;;eA/Ce,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;iBACL,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;mBACC,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;iBACZ,OAAO;+BACO,OAAO;oBAClB,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}