@hashrytech/quick-components-kit 0.2.1 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.3.1
+
+### Patch Changes
+
+- fix: adding plugin to link css to components
+
+## 0.3.0
+
+### Minor Changes
+
+- feat: adding textinput component
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -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/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/quick-components-kit-plugin.d.ts

@@ -0,0 +1,2 @@
+declare const quiickComponentsKitPlugin: any;
+export default quiickComponentsKitPlugin;

package/dist/quick-components-kit-plugin.js

@@ -0,0 +1,10 @@
+import plugin from 'tailwindcss/plugin';
+import path from 'path';
+const quiickComponentsKitPlugin = plugin(function () {
+    // Optional: Add custom utilities
+}, {
+    content: [
+        path.join(__dirname, '**/*.{svelte,js,ts}')
+    ]
+});
+export default quiickComponentsKitPlugin;

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

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.2.1",
+  "version": "0.3.1",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [
@@ -36,5 +36,8 @@
   },
   "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';