@hashrytech/quick-components-kit 0.16.7 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.17.0
+
+### Minor Changes
+
+- refactor: Updating theme variables for each component and adding table component
+
+## 0.16.8
+
+### Patch Changes
+
+- fix: Fix for scroll jump after disable-scroll ends
+
 ## 0.16.7
 
 ### Patch Changes

package/dist/actions/disable-scroll.js

@@ -23,12 +23,17 @@ export function disableScroll(node, enabled = true) {
         document.body.style.width = '100%';
     }
     function removeLock() {
+        const originalScrollBehavior = document.documentElement.style.scrollBehavior;
         document.body.style.position = originalBodyPosition;
         document.body.style.width = originalBodyWidth;
         document.body.style.top = originalTop;
         document.documentElement.style.overflowY = originalOverflow;
-        // Instantly restore scroll position without animation
-        window.scrollTo({ top: scrollTop, behavior: 'auto' });
+        document.documentElement.style.scrollBehavior = 'auto';
+        window.scrollTo(0, scrollTop);
+        // Restore scroll behavior without causing a jump
+        requestAnimationFrame(() => {
+            document.documentElement.style.scrollBehavior = originalScrollBehavior;
+        });
     }
     if (node && enabled)
         applyLock();

package/dist/components/button/Button.svelte

@@ -20,8 +20,8 @@
 
 </script>
 
-<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)}
+<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-primary-button hover:bg-primary-button-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", 
+  "disabled:bg-primary-button/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}

package/dist/components/checkbox/Checkbox.svelte

@@ -4,26 +4,28 @@
     import {twMerge} from 'tailwind-merge';
     
     export type CheckBoxProps = {
-        id: string;
-        name?: string;
-        label?: string;
-        disabled?: boolean;
-        checked?: boolean;
-        group?: any[];
-        labelPosition?: "left" | "right";
-        size?: "sm" | "md" | "lg";
-        children?: Snippet;
-        icon?: Snippet;
-        onclick?: (event: MouseEvent) => void;
-        labelClass?: ClassNameValue;
-        class?: ClassNameValue;
+      id: string;
+      name?: string;
+      label?: string;
+      disabled?: boolean;
+      checked?: boolean;
+      value?: any;
+      group?: any[];
+      labelPosition?: "left" | "right";
+      size?: "sm" | "md" | "lg";
+      children?: Snippet;
+      icon?: Snippet;
+      onclick?: (event: Event) => void;
+      onchange?: (event: Event) => void;
+      labelClass?: ClassNameValue;
+      class?: ClassNameValue;
     };
 
 </script>
 
 <script lang="ts"> 
 
-  let {id, name, label="", labelPosition="right", checked=$bindable(true), group=$bindable(), size="md", disabled=$bindable(false), onclick, labelClass, ...props}: CheckBoxProps = $props();
+  let {id, name, label="", labelPosition="right", checked=$bindable(false), value, group=$bindable(), size="md", disabled=$bindable(false), onclick, onchange, labelClass, ...props}: CheckBoxProps = $props();
 
   const sizeMap = {
     sm: 'w-4 h-4',
@@ -33,9 +35,9 @@
 
 </script>
 
-<label for={id} class="inline-flex items-center gap-2 cursor-pointer select-none">
+<label for={id} class="flex items-center gap-2 cursor-pointer select-none">
   {#if labelPosition === "left"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
-  <input {id} name={name ? name : id} type="checkbox" bind:checked bind:group {disabled} class={twMerge("rounded border-border-primary focus:ring-2 ring-focus-primary text-button-primary accent-button-primary cursor-pointer", 
-    sizeMap[size], props.class)} />
+  <input {id} name={name ? name : id} type="checkbox" bind:checked {group} {disabled} {value} class={twMerge("rounded focus:ring-2 ring-primary-focus text-primary-input-accent accent-primary-input-accent cursor-pointer", 
+    checked === true ? "border-primary-input-accent" : "border-primary-input-border", sizeMap[size], props.class)} {onclick} {onchange} />
   {#if labelPosition === "right"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
 </label>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -6,12 +6,14 @@ export type CheckBoxProps = {
     label?: string;
     disabled?: boolean;
     checked?: boolean;
+    value?: any;
     group?: any[];
     labelPosition?: "left" | "right";
     size?: "sm" | "md" | "lg";
     children?: Snippet;
     icon?: Snippet;
-    onclick?: (event: MouseEvent) => void;
+    onclick?: (event: Event) => void;
+    onchange?: (event: Event) => void;
     labelClass?: ClassNameValue;
     class?: ClassNameValue;
 };

package/dist/components/drawer/Drawer.svelte

@@ -103,7 +103,7 @@ The `<Overlay>` component is used to darken the background and optionally block
 </script>
 
 {#if open}
-<div class="">
+<div class="fixed inset-0">
   <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
   <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}"
     class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto z-50", postionClasses[position], props.class)}

package/dist/components/drawer/index.d.ts

@@ -1 +1,14 @@
+import type { Component } from 'svelte';
 export { default as Drawer } from './Drawer.svelte';
+export type DrawerComponent = Component<{
+    open?: boolean;
+    escapeKeyClose?: boolean;
+    disableBodyScroll?: boolean;
+    ariaLabel?: string;
+    transitionDuration?: number;
+    transitionDistance?: number;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    overlayClasses?: string;
+    class?: string;
+    children?: unknown;
+}>;

package/dist/components/hamburger-menu/HamburgerMenu.svelte

@@ -20,15 +20,15 @@
 
 </script>
 
-<button aria-label={ariaLabel} class={twMerge("px-1 py-0.5 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} {onclick}>
+<button aria-label={ariaLabel} class={twMerge("px-1 py-0.5 rounded focus:outline-none focus:ring-2 focus:ring-primary-focus cursor-pointer w-fit", props.class)} {onclick}>
   <div class={twMerge("flex flex-col items-center justify-center size-7 transition-all gap-2", linesParentClasses)}>
     <!-- Top bar -->
-    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "rotate-45 translate-y-2.5" : "", linesClasses)}></span>
+    <span class={twMerge("h-0.5 w-7 bg-primary-button transition-transform duration-300 origin-center", open && useCloseBtn ? "rotate-45 translate-y-2.5" : "", linesClasses)}></span>
 
     <!-- Middle bar -->
-    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-opacity duration-300", open && useCloseBtn ? "opacity-0" : "opacity-100", linesClasses)}></span>
+    <span class={twMerge("h-0.5 w-7 bg-primary-button transition-opacity duration-300", open && useCloseBtn ? "opacity-0" : "opacity-100", linesClasses)}></span>
 
     <!-- Bottom bar -->
-    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "-rotate-45 -translate-y-2.5" : "", linesClasses)}></span>
+    <span class={twMerge("h-0.5 w-7 bg-primary-button transition-transform duration-300 origin-center", open && useCloseBtn ? "-rotate-45 -translate-y-2.5" : "", linesClasses)}></span>
   </div>
 </button>

package/dist/components/link-button/LinkButton.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <a {href} data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false} 
-  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)}>
+  class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-primary-button hover:bg-primary-button-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", props.class)}>
   {#if icon}<span class="w-10">{@render icon()}</span>{/if}
   {@render children?.()}
 </a>

package/dist/components/overlay/Overlay.svelte

@@ -4,6 +4,7 @@
     import { fade } from 'svelte/transition';
     import {twMerge} from 'tailwind-merge';
     import { disableScroll } from '../../actions/disable-scroll.js';    
+	  import { config } from '../../configs/config.js';
     
     export type OverlayProps = {
       disableBodyScroll?: boolean;
@@ -17,10 +18,10 @@
 </script>
 
 <script lang="ts">
-  let { disableBodyScroll=true, transitionDuration=100, ariaLabel="Overlay", onclick, children, ...props }: OverlayProps = $props();
+  let { disableBodyScroll=true, transitionDuration=config.transitionDuration, ariaLabel="Overlay", onclick, children, ...props }: OverlayProps = $props();
 </script>
 
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-overlay-primary z-40", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll}>
+<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-primary-overlay z-40", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll}>
   {@render children?.()}
 </div>
 

package/dist/components/radio/Radio.svelte

@@ -33,9 +33,11 @@
 
 </script>
 
-<label for={id} class="inline-flex items-center gap-2 cursor-pointer select-none">
+<label for={id} class="flex items-center gap-2 cursor-pointer select-none">
   {#if labelPosition === "left"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
-  <input {id} name={name ? name : id} type="radio" bind:value bind:group {disabled} class={twMerge("border-border-primary focus:ring-2 ring-focus-primary text-button-primary accent-button-primary cursor-pointer", 
-    sizeMap[size], props.class)} />
+  <input {id} name={name ? name : id} type="radio" {value} bind:group {disabled} 
+    class={twMerge("focus:ring-2 ring-primary-focus text-primary-input-accent accent-primary-input-accent cursor-pointer",
+    group === value ? "border-primary-input-accent" : "border-primary-input-border",
+    sizeMap[size], props.class)} {onclick} />
   {#if labelPosition === "right"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
 </label>

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

@@ -24,7 +24,7 @@
 
 <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-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-primary-input-accent/40 hover:border-b-2 text-neutral-800 bg-transparent hover:bg-transparent rounded-none", link.active ? "border-primary-input-accent border-b-2": "", props.class)}
         data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false}
         href={link.href}>
         {link.text}

package/dist/components/table/Table.svelte

@@ -0,0 +1,226 @@
+<!--
+@component Table
+
+A fully responsive, themeable table component for Svelte 5 built with Tailwind CSS.  
+Supports both desktop and mobile rendering, multi-select checkboxes, and custom component rendering via `Snippet`.
+
+## Generic
+- `<Table<T>>` — You must pass a `rows` array of type `T[]` and a `getKey(row: T) => string` function.
+
+## Props
+
+- `rows: T[]`  
+  Required. Array of data rows to render.
+
+- `getKey: (row: T) => string`  
+  Required. Function to return a unique key for each row.
+
+- `showMultiSelect?: boolean = false`  
+  If true, displays a checkbox for selecting rows.
+
+- `selected?: string[]`  
+  A list of selected row keys (bindable).
+
+- `headings?: Snippet`  
+  Custom markup or Svelte block for rendering the `<thead>` row.
+
+- `tableRow?: Snippet<[T]>`  
+  Custom markup or Svelte block for rendering each row in desktop view.
+
+- `tableRowMobile?: Snippet<[T]>`  
+  Optional. Enables mobile view by rendering one `<td>` with stacked content.
+
+- `class?: ClassNameValue`  
+  Tailwind classes to apply to the `<table>` element.
+
+- `outerDivClass?: ClassNameValue`  
+  Tailwind classes for the outer scroll wrapper `<div>`.
+
+- `headingsRowClass?: ClassNameValue`  
+  Tailwind classes for the table heading `<tr>`.
+
+- `tableRowClass?: ClassNameValue`  
+  Tailwind classes for each row in desktop view.
+
+- `tableRowMobileClass?: ClassNameValue`  
+  Tailwind classes for each mobile row.
+
+- `tableMobileTdClass?: ClassNameValue`  
+  Tailwind classes for the mobile row's single `<td>` cell.
+
+## Features
+
+- Multi-select checkboxes with "select all" support
+- Dual rendering paths for desktop and mobile (controlled by `tableRowMobile`)
+- Sticky selection column (`left-0`)
+- Class merging via `tailwind-merge` to avoid duplicate styles
+- Fully customizable using Svelte `Snippet` syntax
+
+## Example Usage
+
+```svelte
+<Table rows={[ { id: 1, name: "John Doe", age: 30 }, { id: 2, name: "Jane Smith", age: 25 }, { id: 3, name: "Alice Johnson", age: 28 }]} getKey={(u) => u.id.toString()} showMultiSelect={true}>
+    {#snippet headings()}
+    <TableTd>ID</TableTd>
+    <TableTd>Name</TableTd>
+    <TableTd>Age</TableTd>        
+    {/snippet}
+
+    {#snippet tableRow(row)}
+    <TableTd>{row.id}</TableTd>
+    <TableTd>{row.name}</TableTd>
+    <TableTd>{row.age}</TableTd>        
+    {/snippet}
+
+    {#snippet tableRowMobile(row)}
+    <div class="flex flex-col gap-2">
+        <p class="font-semibold">ID: {row.id}</p>
+        <p class="font-semibold">Name: {row.name}</p>
+        <p class="font-semibold">Age: {row.age}</p>
+    </div>        
+    {/snippet}
+</Table>
+```
+-->
+  
+<script lang="ts" module>
+    import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';    
+
+    /**
+     * Props for the generic Table component
+     * @template T - Type of each row object
+     */
+    export type TableProps<T> = {
+        /** Enable multi-select checkboxes */
+        showMultiSelect?: boolean;
+
+        /** Currently selected row keys */
+        selected?: string[];
+
+        /** Data to render as rows */
+        rows: T[];
+
+        /** Function to extract a unique key for each row */
+        getKey: (obj: T) => string;
+
+        /** Snippet for rendering table headings */
+        headings?: Snippet;
+
+        /** Snippet for rendering a desktop table row */
+        tableRow?: Snippet<[T]>;
+
+        /** Snippet for rendering a mobile table row */
+        tableRowMobile?: Snippet<[T]>;
+
+        /** Snippet for the multi-select checkbox area which should be a TH */
+        multiSelectTh?: Snippet;
+
+        /** Snippet for the multi-select checkbox area which should be a TD */
+        multiSelectTd?: Snippet<[T]>;
+
+        /** Class for the <table> element */
+        class?: ClassNameValue;
+
+        /** Class for the outer <div> wrapper */
+        outerDivClass?: ClassNameValue;
+
+        /** Class for the table headings row */
+        headingsRowClass?: ClassNameValue;
+
+        /** Class for the multi-select checkbox <th> */
+        multiSelectThClass?: ClassNameValue;
+
+        /** Class for each row (desktop) */
+        tableRowClass?: ClassNameValue;
+
+        /** Class for the multi-select checkbox <td> */
+        multiSelectTdClass?: ClassNameValue;
+
+        /** Class for each row (mobile) */
+        tableRowMobileClass?: ClassNameValue;
+
+        /** Class for the <td> cell in mobile view */
+        tableMobileTdClass?: ClassNameValue;
+    };
+</script>
+
+<script lang="ts" generics="T">
+	import { twMerge } from "tailwind-merge";
+  import {Checkbox} from '../checkbox/index.js';
+
+  let { showMultiSelect=$bindable(false), selected=$bindable([]), rows=$bindable([]), getKey, headings, tableRow, tableRowMobile, multiSelectTh, multiSelectTd,
+    tableMobileTdClass, outerDivClass, headingsRowClass, multiSelectThClass, tableRowClass, multiSelectTdClass, tableRowMobileClass, ...props }: TableProps<T> = $props();
+
+  function addSelected(rowkey: string){
+      if(selected.includes(rowkey)){
+          selected = selected.filter((item) => item !== rowkey);
+      }else{
+          selected.push(rowkey);
+      }
+  }
+
+  function handleSelectAll(event: any){
+      if (event.target.checked) {
+          for(let i = 0; i < rows.length; i++){
+              selected.push(getKey(rows[i]));
+          }
+      }
+      else{
+          selected = [];
+      }
+  }
+
+</script>
+
+
+<div class={twMerge("rounded-lg border-primary-table-border w-full overflow-x-auto", tableRowMobile ? "border-0 md:border bg-transparent" : "border bg-white",  outerDivClass)}>
+    <table class={twMerge("table-fixed w-full text-sm", tableRowMobile ? "border-separate border-spacing-y-2 md:border-collapse md:border-spacing-y-0": "", props.class)} cellpadding="10px">
+        <thead class={twMerge("bg-primary-table-heading", tableRowMobile ? "hidden md:table-header-group" : "")}>
+            <tr class={twMerge("text-xs text-primary-table-heading-text whitespace-nowrap bg-inherit", headingsRowClass)}>
+                {#if showMultiSelect}
+                {#if multiSelectTh}
+                  {@render multiSelectTh()}
+                {:else}
+                <th class={twMerge("w-12 px-4 py-2 text-center bg-inherit", multiSelectThClass)}>
+                    <Checkbox id="header-multiselect-checkbox" onchange={handleSelectAll} checked={ rows ? selected.length === rows.length: false} />
+                </th>
+                {/if}
+				        {/if}
+                {@render headings?.()}
+		    </tr>
+        </thead>
+
+        <tbody>
+            {#each rows as row, index (getKey ? getKey(row) : index)}
+            {@const rowKey = getKey(row)}
+            {@const isSelected = selected.includes(rowKey)}
+            
+            {#if tableRow}
+            <tr class={twMerge("group border-t border-primary-table-border text-primary-table-row-text", tableRowMobile ? "hidden md:table-row" : "", 
+                tableRowClass, isSelected ? "bg-primary-table-row-selected" : "hover:bg-primary-table-row-hover bg-white")}>
+                {#if showMultiSelect}
+                  {#if multiSelectTd}
+                  {@render multiSelectTd(row)}
+                  {:else}
+                  <td class={twMerge("text-center px-4 py-2 bg-inherit", multiSelectTdClass )}>
+                      <Checkbox id={"checkbox-" + rowKey} value={rowKey} checked={isSelected} onchange={()=>{addSelected(rowKey)}} />
+                  </td>
+                  {/if}
+                {/if}
+                {@render tableRow?.(row)}
+            </tr>
+            {/if}
+
+            {#if tableRowMobile}
+            <tr class={twMerge("md:hidden text-primary-table-row-text", isSelected ? "bg-primary-table-row-selected" : "bg-white", tableRowMobileClass)}>
+                <td class={twMerge("border border-primary-table-border border-t-4 rounded-primary px-2 pb-2 relative bg-inherit", tableMobileTdClass)}>
+                    {#if showMultiSelect}<button onclick={()=>{ addSelected(rowKey)}} aria-label="select row" class="absolute inset-0 cursor-pointer"></button>{/if}
+                    {@render tableRowMobile?.(row)}
+                </td>
+            </tr>
+            {/if}
+            {/each}
+		</tbody>
+    </table>
+</div>

package/dist/components/table/Table.svelte.d.ts

@@ -0,0 +1,143 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+/**
+ * Props for the generic Table component
+ * @template T - Type of each row object
+ */
+export type TableProps<T> = {
+    /** Enable multi-select checkboxes */
+    showMultiSelect?: boolean;
+    /** Currently selected row keys */
+    selected?: string[];
+    /** Data to render as rows */
+    rows: T[];
+    /** Function to extract a unique key for each row */
+    getKey: (obj: T) => string;
+    /** Snippet for rendering table headings */
+    headings?: Snippet;
+    /** Snippet for rendering a desktop table row */
+    tableRow?: Snippet<[T]>;
+    /** Snippet for rendering a mobile table row */
+    tableRowMobile?: Snippet<[T]>;
+    /** Snippet for the multi-select checkbox area which should be a TH */
+    multiSelectTh?: Snippet;
+    /** Snippet for the multi-select checkbox area which should be a TD */
+    multiSelectTd?: Snippet<[T]>;
+    /** Class for the <table> element */
+    class?: ClassNameValue;
+    /** Class for the outer <div> wrapper */
+    outerDivClass?: ClassNameValue;
+    /** Class for the table headings row */
+    headingsRowClass?: ClassNameValue;
+    /** Class for the multi-select checkbox <th> */
+    multiSelectThClass?: ClassNameValue;
+    /** Class for each row (desktop) */
+    tableRowClass?: ClassNameValue;
+    /** Class for the multi-select checkbox <td> */
+    multiSelectTdClass?: ClassNameValue;
+    /** Class for each row (mobile) */
+    tableRowMobileClass?: ClassNameValue;
+    /** Class for the <td> cell in mobile view */
+    tableMobileTdClass?: ClassNameValue;
+};
+declare class __sveltets_Render<T> {
+    props(): TableProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "showMultiSelect" | "selected" | "rows";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Table
+ *
+ * A fully responsive, themeable table component for Svelte 5 built with Tailwind CSS.
+ * Supports both desktop and mobile rendering, multi-select checkboxes, and custom component rendering via `Snippet`.
+ *
+ * ## Generic
+ * - `<Table<T>>` — You must pass a `rows` array of type `T[]` and a `getKey(row: T) => string` function.
+ *
+ * ## Props
+ *
+ * - `rows: T[]`
+ * Required. Array of data rows to render.
+ *
+ * - `getKey: (row: T) => string`
+ * Required. Function to return a unique key for each row.
+ *
+ * - `showMultiSelect?: boolean = false`
+ * If true, displays a checkbox for selecting rows.
+ *
+ * - `selected?: string[]`
+ * A list of selected row keys (bindable).
+ *
+ * - `headings?: Snippet`
+ * Custom markup or Svelte block for rendering the `<thead>` row.
+ *
+ * - `tableRow?: Snippet<[T]>`
+ * Custom markup or Svelte block for rendering each row in desktop view.
+ *
+ * - `tableRowMobile?: Snippet<[T]>`
+ * Optional. Enables mobile view by rendering one `<td>` with stacked content.
+ *
+ * - `class?: ClassNameValue`
+ * Tailwind classes to apply to the `<table>` element.
+ *
+ * - `outerDivClass?: ClassNameValue`
+ * Tailwind classes for the outer scroll wrapper `<div>`.
+ *
+ * - `headingsRowClass?: ClassNameValue`
+ * Tailwind classes for the table heading `<tr>`.
+ *
+ * - `tableRowClass?: ClassNameValue`
+ * Tailwind classes for each row in desktop view.
+ *
+ * - `tableRowMobileClass?: ClassNameValue`
+ * Tailwind classes for each mobile row.
+ *
+ * - `tableMobileTdClass?: ClassNameValue`
+ * Tailwind classes for the mobile row's single `<td>` cell.
+ *
+ * ## Features
+ *
+ * - Multi-select checkboxes with "select all" support
+ * - Dual rendering paths for desktop and mobile (controlled by `tableRowMobile`)
+ * - Sticky selection column (`left-0`)
+ * - Class merging via `tailwind-merge` to avoid duplicate styles
+ * - Fully customizable using Svelte `Snippet` syntax
+ *
+ * ## Example Usage
+ *
+ * ```svelte
+ * <Table rows={[ { id: 1, name: "John Doe", age: 30 }, { id: 2, name: "Jane Smith", age: 25 }, { id: 3, name: "Alice Johnson", age: 28 }]} getKey={(u) => u.id.toString()} showMultiSelect={true}>
+ *   {#snippet headings()}
+ *   <TableTd>ID</TableTd>
+ *   <TableTd>Name</TableTd>
+ *   <TableTd>Age</TableTd>
+ *   {/snippet}
+ *
+ *   {#snippet tableRow(row)}
+ *   <TableTd>{row.id}</TableTd>
+ *   <TableTd>{row.name}</TableTd>
+ *   <TableTd>{row.age}</TableTd>
+ *   {/snippet}
+ *
+ *   {#snippet tableRowMobile(row)}
+ *   <div class="flex flex-col gap-2">
+ *       <p class="font-semibold">ID: {row.id}</p>
+ *       <p class="font-semibold">Name: {row.name}</p>
+ *       <p class="font-semibold">Age: {row.age}</p>
+ *   </div>
+ *   {/snippet}
+ * </Table>
+ * ```
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<T> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/components/table/TableTd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';	   
+    
+    export type TableColProps = {
+        children: Snippet
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { children, ...props }: TableColProps = $props();
+
+</script>
+
+<td class={twMerge("text-left align-middle p-2.5 bg-inherit", props.class)}>{@render children?.()}</td>

package/dist/components/table/TableTd.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type TableColProps = {
+    children: Snippet;
+    class?: ClassNameValue;
+};
+declare const TableTd: import("svelte").Component<TableColProps, {}, "">;
+type TableTd = ReturnType<typeof TableTd>;
+export default TableTd;

package/dist/components/table/TableTh.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';	   
+    
+    export type TableThProps = {
+        children: Snippet
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { children, ...props }: TableThProps = $props();
+
+</script>
+
+<th scope="col" class={twMerge("p-3 text-left uppercase font-semibold", props.class)}>{@render children?.()}</th>

package/dist/components/table/TableTh.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type TableThProps = {
+    children: Snippet;
+    class?: ClassNameValue;
+};
+declare const TableTh: import("svelte").Component<TableThProps, {}, "">;
+type TableTh = ReturnType<typeof TableTh>;
+export default TableTh;

package/dist/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Table } from './Table.svelte';
+export { default as TableTd } from './TableTd.svelte';
+export { default as TableTh } from './TableTh.svelte';

package/dist/components/table/index.js

@@ -0,0 +1,3 @@
+export { default as Table } from './Table.svelte';
+export { default as TableTd } from './TableTd.svelte';
+export { default as TableTh } from './TableTh.svelte';

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

@@ -69,12 +69,12 @@
 </script>
 
 <div class="flex flex-col gap-1 w-full">
-    {#if label}{@render label()}{:else}{#if labelText}<label for={id} class="text-sm font-medium text-neutral-600 ml-1">{labelText}</label>{/if}{/if}
+    {#if label}{@render label()}{:else}{#if labelText}<label for={id} class="text-sm font-medium text-primary-label-text ml-1">{labelText}</label>{/if}{/if}
     <div class="relative">
         {#if icon}<div class="absolute inset-y-0 left-0 flex items-center justify-center rounded-l-primary m-0.5 w-10">{@render icon()}</div>{/if}
         <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onchange} {onmouseup} bind:value 
-            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" : "", 
+            class={twMerge("rounded-primary border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
+            error ? "bg-red-50 border-red-300" : "", 
             icon ? "pl-10" : "",
             sizeStyle[size], props.class)}
         />

package/package.json

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