@r2digisolutions/ui 0.10.1 → 0.12.0

package/dist/components/index.d.ts

@@ -9,4 +9,6 @@ import CardHeader from './ui/Card/CardHeader.svelte';
 import Avatar from './ui/Avatar/Avatar.svelte';
 import Container from './ui/Container/Container.svelte';
 import Section from './ui/Section/Section.svelte';
-export { Alert, TableList, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Avatar, Container, Section, };
+import Loading from './ui/Loading/Loading.svelte';
+import Button from './ui/Button/Button.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, };

package/dist/components/index.js

@@ -9,4 +9,6 @@ import CardHeader from './ui/Card/CardHeader.svelte';
 import Avatar from './ui/Avatar/Avatar.svelte';
 import Container from './ui/Container/Container.svelte';
 import Section from './ui/Section/Section.svelte';
-export { Alert, TableList, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Avatar, Container, Section, };
+import Loading from './ui/Loading/Loading.svelte';
+import Button from './ui/Button/Button.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, };

package/dist/components/ui/Button/Button.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+	import type { Props } from './type.js';
+	import Loading from '../Loading/Loading.svelte';
+
+	const {
+		variant = 'primary',
+		size = 'md',
+		type = 'button',
+		isLoading = false,
+		children,
+		disabled,
+		...props
+	}: Props = $props();
+
+	const baseClasses =
+		'inline-flex items-center justify-center font-semibold rounded-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 transform hover:scale-[1.02] active:scale-[0.98] shadow-sm hover:shadow-md';
+
+	const variantClasses: Record<typeof variant, string> = {
+		primary:
+			'bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 focus:ring-purple-500 shadow-purple-500/25',
+		secondary:
+			'bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 focus:ring-gray-500 shadow-gray-500/25',
+		outline:
+			'border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white focus:ring-purple-500 bg-white/80 backdrop-blur-sm hover:border-purple-700',
+		ghost:
+			'text-purple-600 hover:bg-purple-50 hover:text-purple-700 focus:ring-purple-500 bg-transparent shadow-none hover:shadow-md',
+		gradient:
+			'bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 focus:ring-purple-500 shadow-purple-500/30'
+	};
+
+	const sizeClasses: Record<typeof size, string> = {
+		xs: 'px-1.5 py-0.5 text-xs gap-0.5',
+		sm: 'px-2 py-1 text-xs gap-1 text-xs',
+		md: 'px-2.5 py-1.5 text-sm gap-1.5',
+		lg: 'px-3 py-2 text-sm gap-2',
+		xl: 'px-4 py-2.5 text-base gap-2',
+		'2xl': 'px-5 py-3 text-base gap-3',
+		'3xl': 'px-6 py-3 text-base gap-3',
+		'4xl': 'px-7 py-3 text-base gap-3',
+		'5xl': 'px-8 py-3 text-base gap-3',
+		'6xl': 'px-9 py-3 text-base gap-3',
+		'7xl': 'px-10 py-3 text-base gap-3',
+		'8xl': 'px-11 py-3 text-base gap-3'
+	};
+
+	const classes: ClassValue = [
+		baseClasses,
+		variantClasses[variant],
+		sizeClasses[size],
+		disabled || isLoading ? 'opacity-50 cursor-not-allowed transform-none hover:scale-100' : '',
+		props.class
+	];
+
+	const Tag = props.href ? 'a' : 'button';
+</script>
+
+<svelte:element this={Tag} {...props} class={classes} disabled={disabled || isLoading}>
+	{#if isLoading}
+		<Loading />
+	{:else}
+		{@render children()}
+	{/if}
+</svelte:element>

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

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

package/dist/components/ui/Button/type.d.ts

@@ -0,0 +1,14 @@
+import type { IBaseProps } from "../../../types/base.type.js";
+import type { TSize } from "../../../types/sizes.type.js";
+import type { Snippet } from "svelte";
+export type TButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient';
+export type TButtonType = 'submit' | 'reset' | 'button';
+export interface Props extends IBaseProps {
+    variant?: TButtonVariant;
+    size?: TSize;
+    isLoading?: boolean;
+    children: Snippet;
+    disabled?: boolean;
+    href?: string;
+    type?: Props['href'] extends string ? never : TButtonType;
+}

package/dist/components/ui/Button/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Loading/Loading.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Loader } from 'lucide-svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	const {
+		loadingText = 'Cargando...',
+		...props
+	}: {
+		loadingText?: string;
+		class?: ClassValue;
+	} = $props();
+</script>
+
+<div class={['flex justify-center gap-2', props.class]}>
+	<Loader class="h-6 w-6 animate-spin" />
+	<span> {loadingText} </span>
+</div>

package/dist/components/ui/Loading/Loading.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    loadingText?: string;
+    class?: ClassValue;
+};
+declare const Loading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/components/ui/Section/Section.svelte

@@ -7,6 +7,3 @@
 <section class={['relative flex flex-col gap-2 py-32', props.class]}>
 	{@render children()}
 </section>
-
-<style>
-</style>

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './stores/I18n.svelte.js';
 export * from './settings/index.js';
+export * from './types/index.js';
 export * from './components/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './stores/I18n.svelte.js';
 export * from './settings/index.js';
+export * from './types/index.js';
 export * from './components/index.js';

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base.type.js';
+export * from './sizes.type.js';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export * from './base.type.js';
+export * from './sizes.type.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.10.1",
+	"version": "0.12.0",
 	"private": false,
 	"packageManager": "bun@1.2.18",
 	"publishConfig": {