@hashrytech/quick-components-kit 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -1,14 +1,19 @@
-# quick-components-kit
+# @hashrytech/quick-components-kit
 
-## 0.1.1
+## 0.3.0
+
+### Minor Changes
+
+- feat: adding textinput component
+
+## 0.2.1
 
 ### Patch Changes
 
-- Moving changeset to dev dependency
-- Testing publish config update
+- Removing private from package.json
 
-## 0.1.0
+## 0.2.0
 
 ### Minor Changes
 
-- Initial testing and setup
+- Repo formatting and inclusion of actions

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Hashry Tech
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Hashry Tech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
 # quick-components-kit
-A Svelte component library and toolset
+A Svelte component library and toolkit
 
 ## Install
 
@@ -13,4 +13,52 @@ or via yarn:
 
 ```bash
 yarn add @hashrytech/quick-components-kit
+```
+
+## Configurations
+Set default theme values for primary and secondary variables:
+- Color gradient
+- Shadow
+- Border radius
+
+## Default Theme
+
+``` 
+@theme {
+
+    --breakpoint-xs: 480px;
+    --breakpoint-xxs: 400px;
+    --breakpoint-xxxs: 360px;
+    --breakpoint-xxxxs: 320px;
+
+    --color-primary-50: oklch(0.967 0.07 95.38);
+    --color-primary-100: oklch(0.933 0.094 95.47);
+    --color-primary-200: oklch(0.864 0.128 95.3);
+    --color-primary-300: oklch(0.767 0.165 95.31);
+    --color-primary-400: oklch(0.678 0.19 95.1);
+    --color-primary-500: oklch(0.608 0.2 94.82);
+    --color-primary-600: oklch(0.496 0.17 94.91);
+    --color-primary-700: oklch(0.397 0.145 94.53);
+    --color-primary-800: oklch(0.326 0.123 94.55);
+    --color-primary-900: oklch(0.282 0.106 94.7);
+    --color-primary-950: oklch(0.161 0.081 94.91);
+
+    --color-secondary-50: oklch(0.972 0.037 19.87);
+    --color-secondary-100: oklch(0.945 0.046 19.95);
+    --color-secondary-200: oklch(0.868 0.092 19.81);
+    --color-secondary-300: oklch(0.749 0.158 20.04);
+    --color-secondary-400: oklch(0.618 0.226 20.19);
+    --color-secondary-500: oklch(0.519 0.26 20.31);
+    --color-secondary-600: oklch(0.437 0.229 20.44);
+    --color-secondary-700: oklch(0.352 0.197 20.45);
+    --color-secondary-800: oklch(0.293 0.172 20.38);
+    --color-secondary-900: oklch(0.252 0.15 20.25);
+    --color-secondary-950: oklch(0.131 0.098 19.98);
+
+    --shadow-primary: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-secondary: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+    --radius-primary: 0.5rem;
+    --radius-secondary: 0.375rem;
+}
 ```

package/dist/button/Button.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-  export let type: 'button' | 'submit' | 'reset' = 'button';
-  export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-  export let disabled: boolean = false;
-  export let className: string = ''; // Allow extra classes
-</script>
-
-<button
-  type={type}
-  class={`inline-flex items-center justify-center font-medium rounded-md
-    ${variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}
-    ${variant === 'secondary' ? 'bg-gray-200 text-gray-800 hover:bg-gray-300' : ''}
-    ${variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : ''}
-    ${size === 'sm' ? 'px-2 py-1 text-sm' : ''}
-    ${size === 'md' ? 'px-4 py-2 text-base' : ''}
-    ${size === 'lg' ? 'px-6 py-3 text-lg' : ''}
-    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-    ${className}`}
-  disabled={disabled}>
-  <slot />
-</button>
+<script lang="ts">
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let disabled: boolean = false;
+  export let className: string = ''; // Allow extra classes
+</script>
+
+<button
+  type={type}
+  class={`inline-flex items-center justify-center font-medium rounded-md
+    ${variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700' : ''}
+    ${variant === 'secondary' ? 'bg-gray-200 text-gray-800 hover:bg-gray-300' : ''}
+    ${variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : ''}
+    ${size === 'sm' ? 'px-2 py-1 text-sm' : ''}
+    ${size === 'md' ? 'px-4 py-2 text-base' : ''}
+    ${size === 'lg' ? 'px-6 py-3 text-lg' : ''}
+    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+    ${className}`}
+  disabled={disabled}>
+  <slot />
+</button>

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export * from './button/index.js';
-export * from './text-box/index.js';
+export * from './text-input/index.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 // Reexport your entry components here
 // lib/index.js
 export * from './button/index.js';
-export * from './text-box/index.js';
+export * from './text-input/index.js';
 // Add more components here...

package/dist/text-input/TextInput.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+
+    /**
+     * Predefined size classes for the TextBox input.
+     * - "sm": h-[2.05rem] text-sm placeholder:text-sm
+     * - "md": h-[2.375rem] text-sm placeholder:text-sm
+     * - "lg": h-[2.8rem] text-lg placeholder:text-lg
+    */
+    export type TextInputSize = "sm" | "md" | "lg";
+    export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url";
+
+    /**
+     * Props for the TextBox component.
+     *
+     * @prop {string} id - The unique ID of the input field.
+     * @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} [inputStyle] - 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
+     *        - "lg": h-[2.8rem] text-lg placeholder:text-lg
+     * @prop {() => void} [onchange] - Event handler for change events.
+     * @prop {() => void} [onmouseup] - Event handler for mouseup events.
+     * @prop {Snippet} [label] - Custom label snippet.
+     */
+    export type TextInputProps = {
+        id: string;        
+        name?: string;
+        value?: string;
+        type?: TextInputType;
+        placeholder?: string;
+        labelText?: string;        
+        inputStyle?: ClassNameValue;
+        size?: TextInputSize;
+        disabled?: boolean;
+        required?: boolean;
+        error?: string;
+        onchange?: () => void;
+        onmouseup?: () => void;
+        label?: Snippet;
+        icon?: Snippet;
+    };
+    
+
+</script>
+
+<script lang="ts">
+    import { twMerge } from 'tailwind-merge';
+    
+    let { id, type="text", name="", value="", placeholder="", labelText, size="md", inputStyle="", disabled=false, required=false, error, onchange, onmouseup, label, icon}: TextInputProps = $props();
+
+    /**
+     * Predefined size classes for the TextBox input.
+     * - "sm": h-[2.05rem] text-sm placeholder:text-sm
+     * - "md": h-[2.375rem] text-sm placeholder:text-sm
+     * - "lg": h-[2.8rem] text-lg placeholder:text-lg
+     */
+    let sizeStyle: Record<TextInputSize, string> = {
+        sm: "h-[2.05rem] text-sm placeholder:text-sm",
+        md: "h-[2.375rem] text-sm placeholder:text-sm",
+        lg: "h-[2.8rem] text-lg placeholder:text-lg"
+    };
+
+</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}
+    <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} {placeholder} {onchange} {onmouseup} bind:value 
+            class={twMerge("rounded-primary border-neutral-300 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], inputStyle)}
+        />
+    </div>
+    {#if error}
+    <p class="text-sm text-red-500 mt-0.5 bg-red-100/30 px-2 rounded-primary">This is a an error message that is larger and bigger.</p>
+    {/if}
+</div>

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+/**
+ * Predefined size classes for the TextBox input.
+ * - "sm": h-[2.05rem] text-sm placeholder:text-sm
+ * - "md": h-[2.375rem] text-sm placeholder:text-sm
+ * - "lg": h-[2.8rem] text-lg placeholder:text-lg
+*/
+export type TextInputSize = "sm" | "md" | "lg";
+export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url";
+/**
+ * Props for the TextBox component.
+ *
+ * @prop {string} id - The unique ID of the input field.
+ * @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} [inputStyle] - 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
+ *        - "lg": h-[2.8rem] text-lg placeholder:text-lg
+ * @prop {() => void} [onchange] - Event handler for change events.
+ * @prop {() => void} [onmouseup] - Event handler for mouseup events.
+ * @prop {Snippet} [label] - Custom label snippet.
+ */
+export type TextInputProps = {
+    id: string;
+    name?: string;
+    value?: string;
+    type?: TextInputType;
+    placeholder?: string;
+    labelText?: string;
+    inputStyle?: ClassNameValue;
+    size?: TextInputSize;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    onchange?: () => void;
+    onmouseup?: () => void;
+    label?: Snippet;
+    icon?: Snippet;
+};
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/text-input/index.d.ts

@@ -0,0 +1 @@
+export { default as TextInput } from './TextInput.svelte';

package/dist/text-input/index.js

@@ -0,0 +1 @@
+export { default as TextInput } from './TextInput.svelte';

package/package.json

@@ -1,101 +1,43 @@
 {
-	"name": "@hashrytech/quick-components-kit",
-	"description": "A Svelte component library and toolset",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/hashrytech/quick-components-kit.git"
-	},
-	"version": "0.1.1",
-	"license": "MIT",
-	"author": "Hashry Tech",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"package": "svelte-package"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"LICENSE",
-		"README.md",
-		"CHANGELOG.md"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"publishConfig": {
-		"access": "public",
-		"devDependencies": {},
-		"scripts": {}
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@changesets/cli": "^2.29.4",
-		"@chromatic-com/storybook": "^4.0.0",
-		"@eslint/compat": "^1.2.9",
-		"@eslint/js": "^9.27.0",
-		"@playwright/test": "^1.52.0",
-		"@storybook/addon-a11y": "^9.0.0",
-		"@storybook/addon-docs": "^9.0.0",
-		"@storybook/addon-svelte-csf": "^5.0.3",
-		"@storybook/addon-vitest": "^9.0.0",
-		"@storybook/sveltekit": "^9.0.0",
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.21.1",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/forms": "^0.5.10",
-		"@tailwindcss/vite": "^4.1.8",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/svelte": "^5.2.8",
-		"@types/node": "^22",
-		"@vitest/browser": "^3.1.4",
-		"@vitest/coverage-v8": "^3.1.4",
-		"eslint": "^9.27.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-storybook": "^9.0.0",
-		"eslint-plugin-svelte": "^3.9.0",
-		"globals": "^16.2.0",
-		"jsdom": "^26.1.0",
-		"playwright": "^1.52.0",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.12",
-		"storybook": "^9.0.0",
-		"svelte": "^5.33.5",
-		"svelte-check": "^4.2.1",
-		"tailwindcss": "^4.1.8",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.33.0",
-		"vite": "^6.3.5",
-		"vitest": "^3.1.4"
-	},
-	"keywords": [
-		"svelte"
-	]
-}
+  "name": "@hashrytech/quick-components-kit",
+  "description": "A Svelte component library and toolset",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashrytech/quick-components-kit.git"
+  },
+  "version": "0.3.0",
+  "license": "MIT",
+  "author": "Hashry Tech",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "tailwind-merge": "^3.3.0"
+  }
+}

package/dist/text-box/TextBox.svelte

@@ -1 +0,0 @@
-<p>Hello</p>

package/dist/text-box/TextBox.svelte.d.ts

@@ -1,26 +0,0 @@
-export default TextBox;
-type TextBox = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TextBox: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-}

package/dist/text-box/index.d.ts

@@ -1 +0,0 @@
-export { default as TextBox } from './TextBox.svelte';

package/dist/text-box/index.js

@@ -1 +0,0 @@
-export { default as TextBox } from './TextBox.svelte';