@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.5

package/README.md

@@ -12,118 +12,251 @@ npm i @makolabs/ripple
 
 ## Usage
 
-Import ripple UI
+Import ripple UI components
 
 ```svelte
 <script lang="ts">
-	import {Card} from '@makolabs/ripple/layout';
+	import { Button, Card, Modal } from '@makolabs/ripple';
 </script>
 
 <div class="px-12 pt-12">
-  <Card title="Hello World" color="warning">
-    <p>This is a card component</p>
+	<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";
 
 @theme {
-    /* Default (Gray) */
-    --color-default-50: oklch(0.984 0.003 247.858);
-    --color-default-100: oklch(0.960 0.006 247.858);
-    --color-default-200: oklch(0.910 0.008 247.858);
-    --color-default-300: oklch(0.850 0.010 247.858);
-    --color-default-400: oklch(0.760 0.012 247.858);
-    --color-default-500: oklch(0.650 0.015 247.858);
-    --color-default-600: oklch(0.540 0.018 247.858);
-    --color-default-700: oklch(0.450 0.015 247.858);
-    --color-default-800: oklch(0.350 0.012 247.858);
-    --color-default-900: oklch(0.250 0.010 247.858);
-    --color-default-950: oklch(0.150 0.008 247.858);
-
-    /* Primary (Blue) */
-    --color-primary-50: oklch(0.970 0.025 250.0);
-    --color-primary-100: oklch(0.940 0.035 250.0);
-    --color-primary-200: oklch(0.890 0.055 250.0);
-    --color-primary-300: oklch(0.820 0.075 250.0);
-    --color-primary-400: oklch(0.740 0.095 250.0);
-    --color-primary-500: oklch(0.650 0.115 250.0);
-    --color-primary-600: oklch(0.550 0.125 250.0);
-    --color-primary-700: oklch(0.450 0.115 250.0);
-    --color-primary-800: oklch(0.350 0.095 250.0);
-    --color-primary-900: oklch(0.250 0.075 250.0);
-    --color-primary-950: oklch(0.150 0.055 250.0);
-
-    /* Secondary (Slate) */
-    --color-secondary-50: oklch(0.970 0.020 255.0);
-    --color-secondary-100: oklch(0.940 0.030 255.0);
-    --color-secondary-200: oklch(0.890 0.040 255.0);
-    --color-secondary-300: oklch(0.820 0.050 255.0);
-    --color-secondary-400: oklch(0.740 0.060 255.0);
-    --color-secondary-500: oklch(0.650 0.070 255.0);
-    --color-secondary-600: oklch(0.550 0.065 255.0);
-    --color-secondary-700: oklch(0.450 0.055 255.0);
-    --color-secondary-800: oklch(0.350 0.045 255.0);
-    --color-secondary-900: oklch(0.250 0.035 255.0);
-    --color-secondary-950: oklch(0.150 0.025 255.0);
-
-    /* Info (Sky) */
-    --color-info-50: oklch(0.970 0.025 220.0);
-    --color-info-100: oklch(0.940 0.040 220.0);
-    --color-info-200: oklch(0.890 0.060 220.0);
-    --color-info-300: oklch(0.820 0.085 220.0);
-    --color-info-400: oklch(0.740 0.105 220.0);
-    --color-info-500: oklch(0.650 0.125 220.0);
-    --color-info-600: oklch(0.550 0.115 220.0);
-    --color-info-700: oklch(0.450 0.105 220.0);
-    --color-info-800: oklch(0.350 0.085 220.0);
-    --color-info-900: oklch(0.250 0.065 220.0);
-    --color-info-950: oklch(0.150 0.045 220.0);
-
-    /* Success (Green) */
-    --color-success-50: oklch(0.970 0.025 145.0);
-    --color-success-100: oklch(0.940 0.040 145.0);
-    --color-success-200: oklch(0.890 0.060 145.0);
-    --color-success-300: oklch(0.820 0.080 145.0);
-    --color-success-400: oklch(0.740 0.100 145.0);
-    --color-success-500: oklch(0.650 0.120 145.0);
-    --color-success-600: oklch(0.550 0.110 145.0);
-    --color-success-700: oklch(0.450 0.100 145.0);
-    --color-success-800: oklch(0.350 0.080 145.0);
-    --color-success-900: oklch(0.250 0.060 145.0);
-    --color-success-950: oklch(0.150 0.040 145.0);
-
-    /* Warning (Yellow) */
-    --color-warning-50: oklch(0.970 0.025 90.0);
-    --color-warning-100: oklch(0.940 0.045 90.0);
-    --color-warning-200: oklch(0.890 0.065 90.0);
-    --color-warning-300: oklch(0.820 0.085 90.0);
-    --color-warning-400: oklch(0.740 0.105 90.0);
-    --color-warning-500: oklch(0.650 0.125 90.0);
-    --color-warning-600: oklch(0.550 0.115 90.0);
-    --color-warning-700: oklch(0.450 0.105 90.0);
-    --color-warning-800: oklch(0.350 0.085 90.0);
-    --color-warning-900: oklch(0.250 0.065 90.0);
-    --color-warning-950: oklch(0.150 0.045 90.0);
-
-    /* Danger (Red) */
-    --color-danger-50: oklch(0.970 0.025 25.0);
-    --color-danger-100: oklch(0.940 0.045 25.0);
-    --color-danger-200: oklch(0.890 0.065 25.0);
-    --color-danger-300: oklch(0.820 0.085 25.0);
-    --color-danger-400: oklch(0.740 0.105 25.0);
-    --color-danger-500: oklch(0.650 0.125 25.0);
-    --color-danger-600: oklch(0.550 0.115 25.0);
-    --color-danger-700: oklch(0.450 0.105 25.0);
-    --color-danger-800: oklch(0.350 0.085 25.0);
-    --color-danger-900: oklch(0.250 0.065 25.0);
-    --color-danger-950: oklch(0.150 0.045 25.0);
+	/* Default (Gray) */
+	--color-default-50: oklch(0.984 0.003 247.858);
+	--color-default-100: oklch(0.96 0.006 247.858);
+	--color-default-200: oklch(0.91 0.008 247.858);
+	--color-default-300: oklch(0.85 0.01 247.858);
+	--color-default-400: oklch(0.76 0.012 247.858);
+	--color-default-500: oklch(0.65 0.015 247.858);
+	--color-default-600: oklch(0.54 0.018 247.858);
+	--color-default-700: oklch(0.45 0.015 247.858);
+	--color-default-800: oklch(0.35 0.012 247.858);
+	--color-default-900: oklch(0.25 0.01 247.858);
+	--color-default-950: oklch(0.15 0.008 247.858);
+
+	/* Primary (Blue) */
+	--color-primary-50: oklch(0.97 0.025 250);
+	--color-primary-100: oklch(0.94 0.035 250);
+	--color-primary-200: oklch(0.89 0.055 250);
+	--color-primary-300: oklch(0.82 0.075 250);
+	--color-primary-400: oklch(0.74 0.095 250);
+	--color-primary-500: oklch(0.65 0.115 250);
+	--color-primary-600: oklch(0.55 0.125 250);
+	--color-primary-700: oklch(0.45 0.115 250);
+	--color-primary-800: oklch(0.35 0.095 250);
+	--color-primary-900: oklch(0.25 0.075 250);
+	--color-primary-950: oklch(0.15 0.055 250);
+
+	/* Secondary (Slate) */
+	--color-secondary-50: oklch(0.97 0.02 255);
+	--color-secondary-100: oklch(0.94 0.03 255);
+	--color-secondary-200: oklch(0.89 0.04 255);
+	--color-secondary-300: oklch(0.82 0.05 255);
+	--color-secondary-400: oklch(0.74 0.06 255);
+	--color-secondary-500: oklch(0.65 0.07 255);
+	--color-secondary-600: oklch(0.55 0.065 255);
+	--color-secondary-700: oklch(0.45 0.055 255);
+	--color-secondary-800: oklch(0.35 0.045 255);
+	--color-secondary-900: oklch(0.25 0.035 255);
+	--color-secondary-950: oklch(0.15 0.025 255);
+
+	/* Info (Sky) */
+	--color-info-50: oklch(0.97 0.025 220);
+	--color-info-100: oklch(0.94 0.04 220);
+	--color-info-200: oklch(0.89 0.06 220);
+	--color-info-300: oklch(0.82 0.085 220);
+	--color-info-400: oklch(0.74 0.105 220);
+	--color-info-500: oklch(0.65 0.125 220);
+	--color-info-600: oklch(0.55 0.115 220);
+	--color-info-700: oklch(0.45 0.105 220);
+	--color-info-800: oklch(0.35 0.085 220);
+	--color-info-900: oklch(0.25 0.065 220);
+	--color-info-950: oklch(0.15 0.045 220);
+
+	/* Success (Green) */
+	--color-success-50: oklch(0.97 0.025 145);
+	--color-success-100: oklch(0.94 0.04 145);
+	--color-success-200: oklch(0.89 0.06 145);
+	--color-success-300: oklch(0.82 0.08 145);
+	--color-success-400: oklch(0.74 0.1 145);
+	--color-success-500: oklch(0.65 0.12 145);
+	--color-success-600: oklch(0.55 0.11 145);
+	--color-success-700: oklch(0.45 0.1 145);
+	--color-success-800: oklch(0.35 0.08 145);
+	--color-success-900: oklch(0.25 0.06 145);
+	--color-success-950: oklch(0.15 0.04 145);
+
+	/* Warning (Yellow) */
+	--color-warning-50: oklch(0.97 0.025 90);
+	--color-warning-100: oklch(0.94 0.045 90);
+	--color-warning-200: oklch(0.89 0.065 90);
+	--color-warning-300: oklch(0.82 0.085 90);
+	--color-warning-400: oklch(0.74 0.105 90);
+	--color-warning-500: oklch(0.65 0.125 90);
+	--color-warning-600: oklch(0.55 0.115 90);
+	--color-warning-700: oklch(0.45 0.105 90);
+	--color-warning-800: oklch(0.35 0.085 90);
+	--color-warning-900: oklch(0.25 0.065 90);
+	--color-warning-950: oklch(0.15 0.045 90);
+
+	/* Danger (Red) */
+	--color-danger-50: oklch(0.97 0.025 25);
+	--color-danger-100: oklch(0.94 0.045 25);
+	--color-danger-200: oklch(0.89 0.065 25);
+	--color-danger-300: oklch(0.82 0.085 25);
+	--color-danger-400: oklch(0.74 0.105 25);
+	--color-danger-500: oklch(0.65 0.125 25);
+	--color-danger-600: oklch(0.55 0.115 25);
+	--color-danger-700: oklch(0.45 0.105 25);
+	--color-danger-800: oklch(0.35 0.085 25);
+	--color-danger-900: oklch(0.25 0.065 25);
+	--color-danger-950: oklch(0.15 0.045 25);
 }
 ```
 
-> More coming soon!
+## Component Variants
+
+Most components in Ripple UI support variants to customize their appearance. Here are some examples:
+
+### Button Variants
+
+Buttons come with different variants, colors, sizes, and shapes:
+
+```svelte
+<script lang="ts">
+	import { Button } from '@makolabs/ripple';
+</script>
+
+<!-- Different button variants -->
+<Button variant="solid" color="primary">Solid Button</Button>
+<Button variant="outline" color="secondary">Outline Button</Button>
+<Button variant="ghost" color="danger">Ghost Button</Button>
+<Button variant="link" color="info">Link Button</Button>
+
+<!-- Button sizes -->
+<Button size="xs">Extra Small</Button>
+<Button size="sm">Small</Button>
+<Button size="base">Base</Button>
+<Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
+<Button size="2xl">2X Large</Button>
+
+<!-- Button corner radius -->
+<Button rounded="none">Sharp Corners</Button>
+<Button rounded="sm">Small Radius</Button>
+<Button rounded="base">Base Radius</Button>
+<Button rounded="full">Pill Button</Button>
+
+<!-- Loading state -->
+<Button isLoading={true} color="primary">Loading...</Button>
+```
+
+### Modal Variants
+
+Modals can be customized with different positions:
+
+```svelte
+<script lang="ts">
+	import { Modal } from '@makolabs/ripple';
+	let isOpen = false;
+</script>
+
+<Button on:click={() => isOpen = true}>Open Modal</Button>
+
+<Modal 
+  open={isOpen} 
+  position="center" 
+  title="Modal Title"
+  onClose={() => isOpen = false}
+>
+  <p>Modal content goes here</p>
+</Modal>
+```
+
+### Card Variants
+
+Cards can be customized with different styles:
+
+```svelte
+<script lang="ts">
+	import { Card, StatsCard } from '@makolabs/ripple';
+</script>
+
+<Card title="Basic Card" color="primary">
+  <p>Card content goes here</p>
+</Card>
+
+<StatsCard 
+  title="Statistics" 
+  value="1,234" 
+  description="Total users"
+  trend="up"
+  percentage={12}
+/>
+```
+
+### Table Component
+
+Tables for displaying structured data:
+
+```svelte
+<script lang="ts">
+	import { Table, Cell } from '@makolabs/ripple';
+</script>
+
+<Table>
+  <thead>
+    <tr>
+      <Cell as="th">Name</Cell>
+      <Cell as="th">Email</Cell>
+      <Cell as="th">Status</Cell>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <Cell>John Doe</Cell>
+      <Cell>john@example.com</Cell>
+      <Cell>Active</Cell>
+    </tr>
+  </tbody>
+</Table>
+```
+
+## Latest Updates
+
+Ripple UI now exports all components from a central entry point, making it easier to import components:
+
+```svelte
+<script lang="ts">
+	import { Button, Modal, Card, Table, Select, Dropdown } from '@makolabs/ripple';
+</script>
+```
+
+You can still import specific component types when needed:
+
+```svelte
+<script lang="ts">
+	import { Button, type ButtonProps } from '@makolabs/ripple';
+	
+	// Create a custom button with specific props
+	const myButton: ButtonProps = {
+		variant: 'outline',
+		color: 'primary',
+		size: 'lg',
+		rounded: 'xl'
+	};
+</script>
+
+<Button {...myButton}>Custom Button</Button>
+```

package/dist/button/Button.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { type ButtonProps, buttonVariants } from './button.js';
+
+	let {
+		variant = 'solid',
+		color = 'default',
+		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 './button.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,136 @@
+import type { HTMLAttributeAnchorTarget, HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        ghost: string;
+        link: string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': 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: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': 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: {
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': 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>>;
+type ButtonHTMLProps = {
+    href?: never;
+} & HTMLButtonAttributes;
+type AnchorHTMLProps = {
+    rel?: string | undefined | null;
+    target?: HTMLAttributeAnchorTarget | undefined | null;
+    referrerpolicy?: ReferrerPolicy | undefined | null;
+    href: string;
+} & Record<string, unknown>;
+export type BaseButtonProps = {
+    class?: ClassValue;
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+    color?: keyof typeof buttonVariants.variants.color;
+    size?: keyof typeof buttonVariants.variants.size;
+    rounded?: keyof typeof buttonVariants.variants.rounded;
+    disabled?: boolean | undefined | null;
+    isLoading?: boolean;
+    children?: Snippet;
+};
+export type ButtonProps = BaseButtonProps & (ButtonHTMLProps | AnchorHTMLProps);
+export {};