@hashrytech/quick-components-kit 0.19.9 → 0.19.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashrytech/quick-components-kit
 
+## 0.19.10
+
+### Patch Changes
+
+- add: Adding Icon component and button support
+
 ## 0.19.9
 
 ### Patch Changes

package/dist/components/button/Button.svelte

@@ -5,6 +5,8 @@
     export type ButtonProps = {
         disabled?: boolean;
         children?: Snippet;
+        cssIcon?: string;
+        cssIconClass?: ClassNameValue;
         icon?: Snippet;
         loadingIcon?: Snippet;
         loading?: boolean;
@@ -16,15 +18,17 @@
 
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
+  import { Icon } from '../icon/index.js';
   
-  let { disabled=$bindable(), loading=$bindable(false), children, icon, loadingIcon, onclick, ...props }: ButtonProps = $props();
+  let { disabled=$bindable(), loading=$bindable(false), children, cssIcon, cssIconClass, icon, loadingIcon, onclick, ...props }: ButtonProps = $props();
 
 </script>
 
 <button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 focus:outline-primary-focus bg-primary-button hover:bg-primary-button-hover rounded-primary cursor-pointer focus:ring-primary-focus focus:ring", 
   "disabled:bg-primary-button/60 disabled:cursor-default", props.class)}
-  {onclick}>  
-  {#if loadingIcon && loading}
+  {onclick}>
+  {#if cssIcon}<Icon icon={cssIcon} class={twMerge(loading ? "animate-spin" : "", cssIconClass)} />
+  {:else if loadingIcon && loading}
   <span class="shrink-0 animate-spin font-semibold">{@render loadingIcon()}</span>
   {:else if icon}
   {@render icon()}

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

@@ -3,6 +3,8 @@ import type { ClassNameValue } from 'tailwind-merge';
 export type ButtonProps = {
     disabled?: boolean;
     children?: Snippet;
+    cssIcon?: string;
+    cssIconClass?: ClassNameValue;
     icon?: Snippet;
     loadingIcon?: Snippet;
     loading?: boolean;

package/dist/components/icon/Icon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+    /**
+     * Props for the Icon component. See instructions: https://iconify.design/docs/usage/css/tailwind/tailwind4/
+     *
+     * @prop {string} icon - The icon string to be used in the span, example: icon-[ion--add-circle]     
+     * @prop {() => void} [onclick] - Event handler for click events.
+     * @prop {Snippet} [class] - Css classes for the input element.
+     */
+    export type IconProps = {
+        icon: string;
+        onclick?: (event: MouseEvent) => void;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+  import {twMerge} from 'tailwind-merge';
+  
+  let { icon, onclick, ...restProps }: IconProps = $props();
+
+</script>
+
+<span class={twMerge("block shrink-0", icon, restProps.class)}></span>
+
+

package/dist/components/icon/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ClassNameValue } from 'tailwind-merge';
+/**
+ * Props for the Icon component. See instructions: https://iconify.design/docs/usage/css/tailwind/tailwind4/
+ *
+ * @prop {string} icon - The icon string to be used in the span, example: icon-[ion--add-circle]
+ * @prop {() => void} [onclick] - Event handler for click events.
+ * @prop {Snippet} [class] - Css classes for the input element.
+ */
+export type IconProps = {
+    icon: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: ClassNameValue;
+};
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

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

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

package/dist/components/icon/index.js

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/icon/index.js';
 export * from './components/text-input/index.js';
 export * from './components/text-area/index.js';
 export * from './components/button/index.js';

package/dist/index.js

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

package/package.json

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