@makolabs/ripple 0.0.1-dev

package/README.md

@@ -0,0 +1,36 @@
+# MakoLabs Ripple UI
+
+This is a simplistic UI library by makolabs.
+
+## Getting started
+
+Install the project
+
+```shell
+npm i @makolabs/ripple
+```
+
+## Usage
+
+Import ripple UI
+
+```svelte
+<script lang="ts">
+	import {Card} from '@makolabs/ripple/layout';
+</script>
+
+<div class="px-12 pt-12">
+  <Card title="Hello World" color="warning">
+    <p>This is a card component</p>
+	</Card>
+</div>
+```
+
+
+Paste the following CSS import code in `app.css`
+
+```css
+@source "../node_modules/@makolabs/ripple";
+```
+
+> More coming soon!

package/dist/helper/cls.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/helper/cls.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/layout/Card.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+	import { cn } from '../helper/cls';
+	import type { Snippet } from 'svelte';
+	import { tv, type ClassValue } from 'tailwind-variants';
+
+	const cardVariants = tv({
+		variants: {
+			size: {
+				'xs': 'p-2',
+				'sm': 'p-3',
+				'base': 'p-4',
+				'lg': 'p-5',
+				'xl': 'p-6',
+				'2xl': 'p-8'
+			},
+			color: {
+				'default': 'bg-default-50 dark:bg-default-800',
+				'primary': 'bg-primary-50 dark:bg-primary-900/20',
+				'secondary': 'bg-secondary-50 dark:bg-secondary-800/20',
+				'info': 'bg-info-50 dark:bg-info-900/20',
+				'success': 'bg-success-50 dark:bg-success-900/20',
+				'warning': 'bg-warning-50 dark:bg-warning-900/20',
+				'danger': 'bg-danger-50 dark:bg-danger-900/20'
+			},
+			border: {
+				'none': 'border-0',
+				'default': 'border border-gray-200 dark:border-gray-700',
+				'colored': 'border'
+			},
+			rounded: {
+				'none': 'rounded-none',
+				'sm': 'rounded',
+				'md': 'rounded-lg',
+				'lg': 'rounded-xl',
+				'full': 'rounded-3xl'
+			},
+			shadow: {
+				'none': 'shadow-none',
+				'sm': 'shadow-sm',
+				'md': 'shadow',
+				'lg': 'shadow-lg'
+			}
+		},
+		defaultVariants: {
+			size: 'base',
+			color: 'default',
+			border: 'default',
+			rounded: 'md',
+			shadow: 'sm'
+		}
+	});
+
+	const SIZE_TEXT_VARIANTS = {
+		'xs': 'text-xs',
+		'sm': 'text-sm',
+		'base': 'text-base',
+		'lg': 'text-lg',
+		'xl': 'text-xl',
+		'2xl': 'text-2xl'
+	};
+
+	const cardTitleVariants = tv({
+		variants: {
+			color: {
+				'default': 'text-default-900 dark:text-default-100',
+				'primary': 'text-primary-900 dark:text-primary-100',
+				'secondary': 'text-secondary-900 dark:text-secondary-100',
+				'info': 'text-info-900 dark:text-info-100',
+				'success': 'text-success-900 dark:text-success-100',
+				'warning': 'text-warning-900 dark:text-warning-100',
+				'danger': 'text-danger-900 dark:text-danger-100'
+			},
+			weight: {
+				'normal': 'font-normal',
+				'medium': 'font-medium',
+				'semibold': 'font-semibold',
+				'bold': 'font-bold'
+			},
+			size: SIZE_TEXT_VARIANTS
+		},
+		defaultVariants: {
+			color: 'default',
+			weight: 'semibold',
+			size: 'base'
+		}
+	});
+
+	const cardBodyVariants = tv({
+		variants: {
+			color: {
+				'default': 'text-default-700 dark:text-default-300',
+				'primary': 'text-primary-700 dark:text-primary-300',
+				'secondary': 'text-secondary-700 dark:text-secondary-300',
+				'info': 'text-info-700 dark:text-info-300',
+				'success': 'text-success-700 dark:text-success-300',
+				'warning': 'text-warning-700 dark:text-warning-300',
+				'danger': 'text-danger-700 dark:text-danger-300'
+			},
+			size: SIZE_TEXT_VARIANTS
+		},
+		defaultVariants: {
+			color: 'default',
+			size: 'base'
+		}
+	});
+
+
+	export type BaseCardProps = {
+		class?: ClassValue
+		containerClass?: ClassValue
+		size?: keyof typeof cardVariants.variants.size
+		color?: keyof typeof cardVariants.variants.color
+		border?: keyof typeof cardVariants.variants.border
+		rounded?: keyof typeof cardVariants.variants.rounded
+		shadow?: keyof typeof cardVariants.variants.shadow;
+		titleWeight?: keyof typeof cardTitleVariants.variants.weight
+	}
+
+	type CustomCardProps = {
+		custom: Snippet
+		children?: never
+		title?: never
+	}
+
+	type CardWithChildrenProps = {
+		children: Snippet
+		custom?: never
+		title?: string
+	}
+
+	export type CardProps = BaseCardProps & (CardWithChildrenProps | CustomCardProps);
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		custom,
+		title,
+		size = 'base',
+		color = 'default',
+		border = 'default',
+		rounded = 'md',
+		shadow = 'sm',
+		class: className = '',
+		titleWeight = 'semibold'
+	}: CardProps = $props();
+
+	const cardClasses = $derived(
+		cn(
+			cardVariants({ size, color, border, rounded, shadow }),
+			className
+		)
+	);
+
+	const cardTitleClasses = $derived(
+		cn(
+			cardTitleVariants({ color: color, weight: titleWeight, size })
+		)
+	);
+
+	const cardBodyClasses = $derived(
+		cn(
+			cardBodyVariants({ color: color, size })
+		)
+	);
+</script>
+
+<div class={cardClasses}>
+	{#if children}
+		{#if title}
+			<h3 class={cardTitleClasses}>{title}</h3>
+		{/if}
+		<div class={cardBodyClasses}>
+			{@render children()}
+		</div>
+	{:else if custom}
+		{@render custom()}
+	{/if}
+</div>

package/dist/layout/Card.svelte.d.ts

@@ -0,0 +1,208 @@
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
+declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    border: {
+        none: string;
+        default: string;
+        colored: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadow: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    border: {
+        none: string;
+        default: string;
+        colored: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadow: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    border: {
+        none: string;
+        default: string;
+        colored: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadow: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+declare const cardTitleVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, undefined, {
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export type BaseCardProps = {
+    class?: ClassValue;
+    containerClass?: ClassValue;
+    size?: keyof typeof cardVariants.variants.size;
+    color?: keyof typeof cardVariants.variants.color;
+    border?: keyof typeof cardVariants.variants.border;
+    rounded?: keyof typeof cardVariants.variants.rounded;
+    shadow?: keyof typeof cardVariants.variants.shadow;
+    titleWeight?: keyof typeof cardTitleVariants.variants.weight;
+};
+type CustomCardProps = {
+    custom: Snippet;
+    children?: never;
+    title?: never;
+};
+type CardWithChildrenProps = {
+    children: Snippet;
+    custom?: never;
+    title?: string;
+};
+export type CardProps = BaseCardProps & (CardWithChildrenProps | CustomCardProps);
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/layout/index.d.ts

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

package/dist/layout/index.js

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

package/package.json

@@ -0,0 +1,78 @@
+{
+	"name": "@makolabs/ripple",
+	"version": "0.0.1-dev",
+	"description": "Simple Svelte 5 powered component library ✨",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/makolabsai/mako-ui-components.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-cloudflare": "^5.0.1",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"jsdom": "^26.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.0.0"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"tailwind-merge": "^3.0.2",
+		"tailwind-variants": "^1.0.0"
+	}
+}