@r2digisolutions/ui 0.12.0 → 0.13.0

package/dist/components/index.d.ts

@@ -11,4 +11,5 @@ import Container from './ui/Container/Container.svelte';
 import Section from './ui/Section/Section.svelte';
 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, };
+import Heading from './ui/Heading/Heading.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, Heading, };

package/dist/components/index.js

@@ -11,4 +11,5 @@ import Container from './ui/Container/Container.svelte';
 import Section from './ui/Section/Section.svelte';
 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, };
+import Heading from './ui/Heading/Heading.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, Heading, };

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

@@ -26,7 +26,14 @@
 		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'
+			'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',
+		danger:
+			'bg-gradient-to-r from-red-500 via-purple-500 to-indigo-500 text-white hover:from-red-600 hover:via-purple-600 hover:to-indigo-600 focus:ring-purple-500 shadow-purple-500/30',
+		success:
+			'bg-gradient-to-r from-green-500 via-purple-500 to-indigo-500 text-white hover:from-green-600 hover:via-purple-600 hover:to-indigo-600 focus:ring-purple-500 shadow-purple-500/30',
+		warning:
+			'bg-gradient-to-r from-yellow-500 via-purple-500 to-indigo-500 text-white hover:from-yellow-600 hover:via-purple-600 hover:to-indigo-600 focus:ring-purple-500 shadow-purple-500/30',
+		info: 'bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 text-white hover:from-blue-600 hover:via-purple-600 hover:to-indigo-600 focus:ring-purple-500 shadow-purple-500/30'
 	};
 
 	const sizeClasses: Record<typeof size, string> = {

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

@@ -1,9 +1,10 @@
 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 TButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient' | 'danger' | 'success' | 'warning' | 'info';
 export type TButtonType = 'submit' | 'reset' | 'button';
 export interface Props extends IBaseProps {
+    onclick?: () => void;
     variant?: TButtonVariant;
     size?: TSize;
     isLoading?: boolean;

package/dist/components/ui/Card/Card.svelte

@@ -13,7 +13,7 @@
 	aria-label="Card"
 	{onclick}
 	class={[
-		'overflow-hidden rounded-3xl border border-white/50 bg-white text-black shadow-sm backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-900 dark:text-white',
+		'rounded-3xl border border-white/50 bg-white text-black shadow-sm backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-900 dark:text-white',
 		props.class
 	]}
 >

package/dist/components/ui/Heading/Heading.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { title, description, ...props }: Props = $props();
+</script>
+
+<div class={['flex flex-col', props.class]}>
+	<h2 class="text-3xl font-bold text-gray-900 md:text-4xl">{title}</h2>
+	<p class="text-xl text-gray-600">{description}</p>
+</div>

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

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

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

@@ -0,0 +1,5 @@
+import type { IBaseProps } from "../../../types/base.type.js";
+export interface Props extends IBaseProps {
+    title: string;
+    description: string;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"private": false,
 	"packageManager": "bun@1.2.18",
 	"publishConfig": {
@@ -55,13 +55,13 @@
 		"@storybook/addon-interactions": "^8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.7",
 		"@storybook/blocks": "^8.6.14",
-		"@storybook/svelte": "^9.0.16",
-		"@storybook/sveltekit": "^9.0.16",
+		"@storybook/svelte": "^9.0.17",
+		"@storybook/sveltekit": "^9.0.17",
 		"@storybook/test": "^8.6.14",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.23.0",
+		"@sveltejs/kit": "^2.24.0",
 		"@sveltejs/package": "^2.4.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.1.0",
 		"@tailwindcss/postcss": "^4.1.11",
 		"@testing-library/svelte": "^5.2.8",
 		"@vitest/browser": "^3.2.4",
@@ -76,8 +76,8 @@
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"publint": "^0.3.12",
-		"storybook": "^9.0.16",
-		"svelte": "^5.36.0",
+		"storybook": "^9.0.17",
+		"svelte": "^5.36.1",
 		"svelte-check": "^4.2.2",
 		"tailwindcss": "^4.1.11",
 		"typescript": "^5.8.3",