@hashrytech/quick-components-kit 0.13.2 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.13.4
+
+### Patch Changes
+
+- refactor: changing inputClasses prop for TextInput to just class
+
+## 0.13.3
+
+### Patch Changes
+
+- patch: updating disabled state for button
+
 ## 0.13.2
 
 ### Patch Changes

package/dist/components/button/Button.svelte

@@ -3,8 +3,10 @@
     import type { ClassNameValue } from 'tailwind-merge';
     
     export type ButtonProps = {
+        disabled?: boolean;
         children?: Snippet;
         icon?: Snippet;
+        loadingIcon?: Snippet;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -14,13 +16,15 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let {children, icon, onclick, ...props}: ButtonProps = $props();
+  let { disabled=$bindable(), children, icon, loadingIcon, onclick, ...props }: ButtonProps = $props();
 
 </script>
 
-<button class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-button-primary hover:bg-button-primary-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", props.class)}
+<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-button-primary hover:bg-button-primary-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", 
+  "disabled:bg-button-primary/60 disabled:cursor-default", props.class)}
   {onclick}>
   {#if icon}<span class="w-10">{@render icon()}</span>{/if}
+  {#if loadingIcon}<span class="w-10">{@render loadingIcon()}</span>{/if}
   {@render children?.()}
 </button>
 

package/dist/components/button/Button.svelte.d.ts

@@ -1,11 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type ButtonProps = {
+    disabled?: boolean;
     children?: Snippet;
     icon?: Snippet;
+    loadingIcon?: Snippet;
     onclick?: (event: MouseEvent) => void;
     class?: ClassNameValue;
 };
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "disabled">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/tab-navigation/TabNavigation.svelte

@@ -19,12 +19,12 @@
 </script>
 
 <script lang="ts">
-    let { links, preload=true, reload=false, divClasses, ...props }: TabNavigationProps = $props();
+    let { links=$bindable(), preload=true, reload=false, divClasses, ...props }: TabNavigationProps = $props();
 </script>
 
 <div class={twMerge("flex flex-row flex-wrap gap-4 justify-start xxxs:justify-center items-start py-2 px-4 mt-8 font-semibold", divClasses)}>
     {#each links as link}
-    <a class={twMerge("px-4 py-1 hover:border-primary-secondary-500 hover:border-b-2 text-gray-900 bg-transparent hover:bg-transparent rounded-none", link.active ? "border-primary-600 border-b-2": "", props.class)}
+    <a class={twMerge("px-4 py-1 hover:border-secondary-500 hover:border-b-2 text-gray-900 bg-transparent hover:bg-transparent rounded-none", link.active ? "border-primary-600 border-b-2": "", props.class)}
         data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false}
         href={link.href}>
         {link.text}

package/dist/components/tab-navigation/TabNavigation.svelte.d.ts

@@ -11,6 +11,6 @@ export type TabNavigationProps = {
     divClasses?: ClassNameValue;
     class?: ClassNameValue;
 };
-declare const TabNavigation: import("svelte").Component<TabNavigationProps, {}, "">;
+declare const TabNavigation: import("svelte").Component<TabNavigationProps, {}, "links">;
 type TabNavigation = ReturnType<typeof TabNavigation>;
 export default TabNavigation;

package/dist/components/text-input/TextInput.svelte

@@ -18,8 +18,7 @@
      * @prop {string} [name] - The name attribute for form submission.
      * @prop {string} [value] - The bound value of the input.
      * @prop {string} [placeholder] - Placeholder text.
-     * @prop {string} [labelText] - Optional label text.
-     * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
+     * @prop {string} [labelText] - Optional label text.     
      * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
      *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
      *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -27,6 +26,7 @@
      * @prop {() => void} [onchange] - Event handler for change events.
      * @prop {() => void} [onmouseup] - Event handler for mouseup events.
      * @prop {Snippet} [label] - Custom label snippet.
+     * @prop {Snippet} [class] - Css classes for the input element.
      */
     export type TextInputProps = {
         id: string;        
@@ -34,8 +34,7 @@
         value?: string;
         type?: TextInputType;
         placeholder?: string;
-        labelText?: string;        
-        inputClasses?: ClassNameValue;
+        labelText?: string;
         size?: TextInputSize;
         disabled?: boolean;
         required?: boolean;
@@ -44,6 +43,7 @@
         onmouseup?: () => void;
         label?: Snippet;
         icon?: Snippet;
+        class?: ClassNameValue;
     };
     
 
@@ -52,7 +52,7 @@
 <script lang="ts">
     import { twMerge } from 'tailwind-merge';
     
-    let { id, type="text", name="", value=$bindable(""), placeholder="", labelText, size="md", inputClasses="", disabled=false, required=false, error, onchange, onmouseup, label, icon}: TextInputProps = $props();
+    let { id, type="text", name="", value=$bindable(""), placeholder="", labelText, size="md", disabled=false, required=false, error, onchange, onmouseup, label, icon, ...props}: TextInputProps = $props();
 
     /**
      * Predefined size classes for the TextBox input.
@@ -76,7 +76,7 @@
             class={twMerge("rounded-primary border-border-primary focus:border-primary-500 focus:ring-primary-500 placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-gray-300/30",
             error ? "bg-red-50 border-red-300 ring-red-300" : "", 
             icon ? "pl-10" : "",
-            sizeStyle[size], inputClasses)}
+            sizeStyle[size], props.class)}
         />
     </div>
     {#if error}

package/dist/components/text-input/TextInput.svelte.d.ts

@@ -16,7 +16,6 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
  * @prop {string} [value] - The bound value of the input.
  * @prop {string} [placeholder] - Placeholder text.
  * @prop {string} [labelText] - Optional label text.
- * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
  * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
  *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
  *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -24,6 +23,7 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
  * @prop {() => void} [onchange] - Event handler for change events.
  * @prop {() => void} [onmouseup] - Event handler for mouseup events.
  * @prop {Snippet} [label] - Custom label snippet.
+ * @prop {Snippet} [class] - Css classes for the input element.
  */
 export type TextInputProps = {
     id: string;
@@ -32,7 +32,6 @@ export type TextInputProps = {
     type?: TextInputType;
     placeholder?: string;
     labelText?: string;
-    inputClasses?: ClassNameValue;
     size?: TextInputSize;
     disabled?: boolean;
     required?: boolean;
@@ -41,6 +40,7 @@ export type TextInputProps = {
     onmouseup?: () => void;
     label?: Snippet;
     icon?: Snippet;
+    class?: ClassNameValue;
 };
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;
 type TextInput = ReturnType<typeof TextInput>;

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.13.2",
+  "version": "0.13.4",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [