@makolabs/ripple 0.0.1-dev.1 → 0.0.1-dev.10

package/dist/button/Button.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buttonVariants } from './button.js';
+	import type { ButtonProps } from '../index.js';
+	import { Color, Size } from '../variants.js';
+
+	let {
+		variant = 'solid',
+		color = Color.DEFAULT,
+		size = Size.BASE,
+		rounded = 'base',
+		disabled = false,
+		isLoading = false,
+		class: className = '',
+		children,
+		...restProps
+	}: ButtonProps = $props();
+
+	const buttonClasses = $derived(
+		cn(
+			buttonVariants({
+				variant,
+				color,
+				size,
+				rounded,
+				isLoading
+			}),
+			{
+				'opacity-50 pointer-events-none cursor-not-allowed': disabled
+			},
+			className
+		)
+	);
+</script>
+
+{#if restProps['href']}
+	<a class={buttonClasses} {...restProps}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</a>
+{:else}
+	<button class={buttonClasses} disabled={disabled || isLoading} {...restProps}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { ButtonProps } from '../index.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/button/button.d.ts

@@ -0,0 +1,113 @@
+import { Color, Size } from '../variants.js';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    color: {
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
+    };
+    size: {
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
+    };
+    rounded: {
+        none: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "\n\t\tinline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none\n\t\tfocus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer\n\t\t", {
+    variant: {
+        solid: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    color: {
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
+    };
+    size: {
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
+    };
+    rounded: {
+        none: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    color: {
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
+    };
+    size: {
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
+    };
+    rounded: {
+        none: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "\n\t\tinline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none\n\t\tfocus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer\n\t\t", unknown, unknown, undefined>>;

package/dist/button/button.js

@@ -0,0 +1,168 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../variants.js';
+export const buttonVariants = tv({
+    base: `
+		inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none
+		focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer
+		`,
+    variants: {
+        variant: {
+            solid: '',
+            outline: 'border bg-transparent',
+            ghost: 'bg-transparent hover:bg-opacity-10',
+            link: 'bg-transparent underline-offset-4 hover:underline shadow-none'
+        },
+        color: {
+            [Color.DEFAULT]: 'bg-default-900 text-white hover:bg-default-800 focus-visible:ring-default-500',
+            [Color.PRIMARY]: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
+            [Color.SECONDARY]: 'bg-secondary-600 text-white hover:bg-secondary-700 focus-visible:ring-secondary-500',
+            [Color.INFO]: 'bg-info-600 text-white hover:bg-info-700 focus-visible:ring-info-500',
+            [Color.SUCCESS]: 'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500',
+            [Color.WARNING]: 'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500',
+            [Color.DANGER]: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
+        },
+        size: {
+            [Size.XS]: 'h-7 px-2 text-xs',
+            [Size.SM]: 'h-8 px-3 text-sm',
+            [Size.BASE]: 'h-9 px-4 text-sm',
+            [Size.LG]: 'h-10 px-5 text-base',
+            [Size.XL]: 'h-12 px-6 text-lg',
+            [Size.XXL]: 'h-14 px-8 text-xl'
+        },
+        rounded: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            base: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            '2xl': 'rounded-2xl',
+            full: 'rounded-full'
+        },
+        isLoading: {
+            true: 'animate-pulse'
+        }
+    },
+    compoundVariants: [
+        // Remove background for non-solid variants
+        {
+            variant: ['outline', 'ghost', 'link'],
+            class: 'bg-transparent hover:bg-transparent'
+        },
+        // Outline variants
+        {
+            variant: 'outline',
+            color: 'default',
+            class: 'border-default-200 text-default-700 hover:bg-default-50 hover:border-default-300 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: 'border-primary-200 text-primary-700 hover:bg-primary-50 hover:border-primary-300 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: 'border-secondary-200 text-secondary-700 hover:bg-secondary-50 hover:border-secondary-300 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: 'border-info-200 text-info-700 hover:bg-info-50 hover:border-info-300 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: 'border-success-200 text-success-700 hover:bg-success-50 hover:border-success-300 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: 'border-warning-200 text-warning-700 hover:bg-warning-50 hover:border-warning-300 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            class: 'border-danger-200 text-danger-700 hover:bg-danger-50 hover:border-danger-300 focus-visible:ring-danger-300'
+        },
+        // Ghost variants
+        {
+            variant: 'ghost',
+            color: 'default',
+            class: 'text-default-700 hover:bg-default-100 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'primary',
+            class: 'text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'secondary',
+            class: 'text-secondary-700 hover:bg-secondary-100 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'info',
+            class: 'text-info-700 hover:bg-info-100 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'success',
+            class: 'text-success-700 hover:bg-success-100 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'warning',
+            class: 'text-warning-700 hover:bg-warning-100 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'ghost',
+            color: 'danger',
+            class: 'text-danger-700 hover:bg-danger-100 focus-visible:ring-danger-300'
+        },
+        // Link variants
+        {
+            variant: 'link',
+            color: 'default',
+            class: 'text-default-700 hover:text-default-800 focus-visible:ring-default-300'
+        },
+        {
+            variant: 'link',
+            color: 'primary',
+            class: 'text-primary-700 hover:text-primary-800 focus-visible:ring-primary-300'
+        },
+        {
+            variant: 'link',
+            color: 'secondary',
+            class: 'text-secondary-700 hover:text-secondary-800 focus-visible:ring-secondary-300'
+        },
+        {
+            variant: 'link',
+            color: 'info',
+            class: 'text-info-700 hover:text-info-800 focus-visible:ring-info-300'
+        },
+        {
+            variant: 'link',
+            color: 'success',
+            class: 'text-success-700 hover:text-success-800 focus-visible:ring-success-300'
+        },
+        {
+            variant: 'link',
+            color: 'warning',
+            class: 'text-warning-700 hover:text-warning-800 focus-visible:ring-warning-300'
+        },
+        {
+            variant: 'link',
+            color: 'danger',
+            class: 'text-danger-700 hover:text-danger-800 focus-visible:ring-danger-300'
+        }
+    ],
+    defaultVariants: {
+        variant: 'solid',
+        color: 'default',
+        size: 'base',
+        rounded: 'base',
+        isLoading: false
+    }
+});