@hashrytech/quick-components-kit 0.19.0 → 0.19.2

package/CHANGELOG.md

@@ -1,10 +1,23 @@
 # @hashrytech/quick-components-kit
 
+## 0.19.2
+
+### Patch Changes
+
+- patch: minor change to TextInput styling
+
+## 0.19.1
+
+### Patch Changes
+
+- fix padding for TextInput and add prepend for api proxy
+
 ## 0.19.0
 
 ### Minor Changes
 
 - Update: adding ui components and refactoring textbox and select components
+
 ## 0.18.1
 
 ### Patch Changes

package/README.md

@@ -15,6 +15,12 @@ or via yarn:
 yarn add @hashrytech/quick-components-kit
 ```
 
+## To Update Version
+```bash
+npm run change
+npm run version
+```
+
 ## Configurations
 Set default theme values for primary and secondary variables:
 - Color gradient

package/dist/components/select/Select.svelte

@@ -4,7 +4,7 @@
 
   export type Option = {
     value: string | number;
-    label: string;
+    key: string;
     disabled?: boolean;
   };
 
@@ -83,7 +83,7 @@
       {@render optionsSnippet?.()}
       {#each options as option}
         <option value={option.value} disabled={option.disabled} class={twMerge("", optionsClass)}>
-          {option.label}
+          {option.key}
         </option>
       {/each}
     </select>

package/dist/components/select/Select.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 import type { Snippet } from 'svelte';
 export type Option = {
     value: string | number;
-    label: string;
+    key: string;
     disabled?: boolean;
 };
 export type SelectProps = {

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
-	import type { FullAutoFill } from 'svelte/elements';
+	import type { FullAutoFill, HTMLAttributes } from 'svelte/elements';
     import type { ClassNameValue } from 'tailwind-merge';
 
     /**
@@ -11,6 +11,7 @@
     */
     export type TextInputSize = "sm" | "md" | "lg";
     export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url" | "search";
+    export type InputMode = "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
 
     /**
      * Props for the TextBox component.
@@ -32,7 +33,7 @@
     export type TextInputProps = {
         id: string;        
         name?: string;
-        value?: string;
+        value?: string|number;
         type?: TextInputType;
         placeholder?: string;
         labelText?: string;
@@ -46,8 +47,11 @@
         secondDivClass?: ClassNameValue;        
         thirdDivClass?: ClassNameValue;
         autocomplete?: FullAutoFill | null;
+        inputmode?: InputMode;
+        min?: number;
+        max?: number;
         debounceDelay?: number;
-        onInput?: (value: string) => void;
+        onInput?: (value: string|number) => void;
         onchange?: (event: Event) => void;
         onmouseup?: () => void;
         label?: Snippet;
@@ -79,6 +83,9 @@
         secondDivClass,
         thirdDivClass,
         autocomplete, 
+        inputmode,
+        min,
+        max,
         debounceDelay=300, //ms
         onchange,
         onInput,
@@ -95,15 +102,15 @@
      * - "lg": h-[2.8rem] text-lg placeholder:text-lg
      */
     let sizeStyle: Record<TextInputSize, string> = {
-        sm: "text-sm placeholder:text-sm",
-        md: "text-sm placeholder:text-sm",
-        lg: "text-base placeholder:text-base"
+        sm: "text-sm placeholder:text-sm px-2.5",
+        md: "text-sm placeholder:text-sm px-2.5",
+        lg: "text-base placeholder:text-base px-3"
     };
 
     let textBoxStyle: Record<TextInputSize, string> = {
-        sm: "h-[2.05rem] pl-2 pr-1.5",
+        sm: "h-[2.05rem]",
         md: "h-[2.375rem]",
-        lg: "h-[2.8rem] pl-3 pr-2"
+        lg: "h-[2.8rem]"
     };
 
     const directionClass = {
@@ -135,15 +142,15 @@
         {#if !label && labelText}<label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1", labelClass)}>{labelText}</label>{/if}
 
         <!-- Text Box -->
-        <div class={twMerge("flex flex-row items-center rounded-primary border border-primary-input-border gap-2 focus-within:ring focus-within:border-primary-focus focus-within:ring-primary-focus has-[input:disabled]:bg-neutral-300/30 has-[input:disabled]:border-neutral-300/30", 
+        <div class={twMerge("flex flex-row items-center rounded-primary border border-primary-input-border focus-within:ring focus-within:border-primary-focus focus-within:ring-primary-focus has-[input:disabled]:bg-neutral-300/30 has-[input:disabled]:border-neutral-300/30", 
             error ? "bg-red-50 border-red-300" : "", textBoxStyle[size], thirdDivClass)}>
             
-            {#if leftIcon}<div class="h-full flex flex-col items-center justify-center">{@render leftIcon()}</div>{/if}
+            {#if leftIcon}<div class="h-full flex flex-col items-center justify-center pl-2">{@render leftIcon()}</div>{/if}
             
-            <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onmouseup} bind:value {autocomplete} oninput={handleInput}
+            <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onmouseup} bind:value {autocomplete} {inputmode} {min} {max} oninput={handleInput}
                 class={twMerge("border-0 focus:border-0 focus:ring-0 active:border-0 outline-none p-0 bg-transparent placeholder:text-neutral-600/50 h-full w-full", sizeStyle[size], restProps.class)} />
 
-            {#if rightIcon}<div class="h-full flex flex-col items-center justify-center">{@render rightIcon()}</div>{/if}
+            {#if rightIcon}<div class="h-full flex flex-col items-center justify-center pr-2">{@render rightIcon()}</div>{/if}
         </div>
         
     </div>

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

@@ -9,6 +9,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 */
 export type TextInputSize = "sm" | "md" | "lg";
 export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url" | "search";
+export type InputMode = "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
 /**
  * Props for the TextBox component.
  *
@@ -29,7 +30,7 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
 export type TextInputProps = {
     id: string;
     name?: string;
-    value?: string;
+    value?: string | number;
     type?: TextInputType;
     placeholder?: string;
     labelText?: string;
@@ -43,8 +44,11 @@ export type TextInputProps = {
     secondDivClass?: ClassNameValue;
     thirdDivClass?: ClassNameValue;
     autocomplete?: FullAutoFill | null;
+    inputmode?: InputMode;
+    min?: number;
+    max?: number;
     debounceDelay?: number;
-    onInput?: (value: string) => void;
+    onInput?: (value: string | number) => void;
     onchange?: (event: Event) => void;
     onmouseup?: () => void;
     label?: Snippet;

package/dist/modules/api-proxy.d.ts

@@ -15,6 +15,8 @@ export interface RestApiProxyConfig {
     safeResponseHeaders?: string[];
     /** Optional function to extract token from session */
     extractToken?: (locals: App.Locals) => string | undefined;
+    /** Optional path to prepend to the proxied path */
+    prependPath?: string;
     /** Optional flag to enable debug logging */
     debug?: boolean;
 }

package/dist/modules/api-proxy.js

@@ -11,7 +11,9 @@ export function createProxyHandlers(config) {
         const path = event.params.path;
         const queryString = event.url.searchParams.toString();
         const slash = config.appendSlash ? '/' : '';
-        const fullPath = `/${path}${slash}${queryString ? `?${queryString}` : ''}`;
+        const prepend = config.prependPath ? `/${config.prependPath}/` : '/';
+        const fullPath = `${prepend}${path}${slash}${queryString ? `?${queryString}` : ''}`;
+        console.log("Full Path:", fullPath);
         const url = `${config.host}${fullPath}`;
         if (config.debug)
             console.debug(`API Proxy: Proxying ${event.request.method} request to: ${url}`);

package/dist/ui/order-product-line-item/order-product-line-item-1/OrderProductLineItem1.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+    import TextInput from '../../../components/text-input/TextInput.svelte';	
+    import type { ClassNameValue } from 'tailwind-merge';
+
+    export type OrderProduct = {
+        name: string;
+        quantity: number;
+        price: string;
+        class?: ClassNameValue;
+    };
+    
+    export type ShoppingCartList1Props = {
+        orderProduct: OrderProduct;
+        index: number;
+        class?: ClassNameValue;
+    };    
+
+</script>
+
+<script lang="ts">
+
+    let { orderProduct, index=0, ...restProps }: ShoppingCartList1Props = $props();
+
+</script>
+
+<div class="rounded-primary border border-primary-input-border p-2">
+    <div class="flex gap-4">
+        <img src="https://placehold.co/120" alt="Product" class="h-24 w-24 rounded-primary object-cover flex-shrink-0" loading="lazy" />
+        <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                    <h3 class="text-base font-medium text-neutral-900 truncate">{orderProduct.name}</h3>
+                    <p class="text-sm text-neutral-500 mt-0.5">Color: Black • Size: One Size</p>
+                </div>
+                <p class="text-base font-semibold text-neutral-900">{orderProduct.price}</p>
+            </div>
+
+            
+            <div class="mt-3 flex flex-wrap items-center gap-3">
+                <!-- Quantity -->
+                <label class="sr-only" for={"qtyId" + index}>Quantity</label>
+                <div class="inline-flex items-center gap-2">
+                    <button type="button" class="p-0.5 text-neutral-700 hover:bg-primary-button-hover cursor-pointer text-2xl rounded-full" aria-label="Increase quantity">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
+                    </button>
+                    <TextInput bind:value={orderProduct.quantity} id={"qtyId" + index} type="number" inputmode="numeric" min={1} class="w-12 text-center" />
+                    <button type="button" class="p-0.5 text-neutral-700 hover:bg-primary-button-hover cursor-pointer text-2xl rounded-full" aria-label="Increase quantity">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
+                    </button>
+                </div>
+
+                <!-- Actions -->
+                <button type="button" class="text-sm text-red-600 hover:text-red-700 cursor-pointer" aria-label="Remove item">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-neutral-600 hover:text-red-500" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"></path></svg>
+                </button>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- Price breakdown (mobile) -->
+    <div class="mt-3 border-t border-primary-input-border pt-3 text-sm text-neutral-500 md:hidden">
+        <div class="flex justify-between">
+            <span>Item</span><span>$120.00</span>
+        </div>
+    </div>
+    <div class="flex justify-between">
+        <span>Qty</span><span>1</span>
+    </div>
+    <div class="flex justify-between font-medium text-neutral-800">
+        <span>Line total</span><span>$120.00</span>
+    </div>
+</div>
+

package/dist/ui/order-product-line-item/order-product-line-item-1/OrderProductLineItem1.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type OrderProduct = {
+    name: string;
+    quantity: number;
+    price: string;
+    class?: ClassNameValue;
+};
+export type ShoppingCartList1Props = {
+    orderProduct: OrderProduct;
+    index: number;
+    class?: ClassNameValue;
+};
+declare const OrderProductLineItem1: import("svelte").Component<ShoppingCartList1Props, {}, "">;
+type OrderProductLineItem1 = ReturnType<typeof OrderProductLineItem1>;
+export default OrderProductLineItem1;

package/dist/ui/order-product-line-item/order-product-line-item-1/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/order-product-line-item/order-product-line-item-1/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/ui/searchbox/Searchbox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import TextInput from '../../components/text-input/TextInput.svelte';	
-    import type { ClassNameValue } from 'tailwind-merge';
+  import type { ClassNameValue } from 'tailwind-merge';
 
   export type ProductListNavigation1Props = {
     searchTerm?: string;
@@ -9,7 +9,7 @@
     thirdDivClass?: string;
     class?: ClassNameValue;
     onclick?: (event: Event) => void;
-    onInput?: (value: string) => void;
+    onInput?: (value: string|number) => void
   };
 
 </script>

package/dist/ui/searchbox/Searchbox.svelte.d.ts

@@ -6,7 +6,7 @@ export type ProductListNavigation1Props = {
     thirdDivClass?: string;
     class?: ClassNameValue;
     onclick?: (event: Event) => void;
-    onInput?: (value: string) => void;
+    onInput?: (value: string | number) => void;
 };
 declare const Searchbox: import("svelte").Component<ProductListNavigation1Props, {}, "searchTerm">;
 type Searchbox = ReturnType<typeof Searchbox>;

package/package.json

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