@hashrytech/quick-components-kit 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.4.0
+
+### Minor Changes
+
+- feat: adding link button
+
+## 0.3.3
+
+### Patch Changes
+
+- fix: updating button component
+
 ## 0.3.2
 
 ### Patch Changes

package/dist/button/Button.svelte

@@ -1,22 +1,26 @@
+<script lang="ts" module>
+	  import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type ButtonProps = {
+        children?: Snippet;
+        icon?: Snippet;
+        onclick?: (event: MouseEvent) => void;
+        class?: ClassNameValue;
+    };
+
+</script>
+
 <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
+  import {twMerge} from 'tailwind-merge';
+  
+  let {children, icon, onclick, ...props}: ButtonProps = $props();
+
 </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 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)}
+  {onclick}>
+  {#if icon}<span class="w-10">{@render icon()}</span>{/if}
+  {@render children?.()}
 </button>
+

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

@@ -1,33 +1,11 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    type?: "button" | "submit" | "reset";
-    variant?: "primary" | "secondary" | "danger";
-    size?: "sm" | "md" | "lg";
-    disabled?: boolean;
-    className?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ButtonProps = {
+    children?: Snippet;
+    icon?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    class?: ClassNameValue;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/link-button/LinkButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	  import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type ButtonProps = {
+      href: string;
+        children?: Snippet;
+        icon?: Snippet;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+  import {twMerge} from 'tailwind-merge';
+  
+  let {href, children, icon, ...props}: ButtonProps = $props();
+
+</script>
+
+<a {href} 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)}>
+  {#if icon}<span class="w-10">{@render icon()}</span>{/if}
+  {@render children?.()}
+</a>
+

package/dist/link-button/LinkButton.svelte.d.ts

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

package/dist/link-button/index.d.ts

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

package/dist/link-button/index.js

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

package/package.json

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