@makolabs/ripple 0.0.1-dev.7 → 0.0.1-dev.8

package/README.md

@@ -1,6 +1,15 @@
-# MakoLabs Ripple UI
+# Ripple UI
 
-This is a simplistic UI library by makolabs.
+A modern, standardized Svelte 5 component library designed for simplicity, consistency, and AI-friendly usage patterns.
+
+## Key Features
+
+- **Standardized API** with consistent prop naming and patterns across components
+- **Enum-based properties** for predictable component customization
+- **Strong TypeScript support** with comprehensive type definitions
+- **Utility-first approach** built with TailwindCSS
+- **Accessible components** adhering to modern web standards
+- **Simplified component consumption** ideal for both human and AI developers
 
 ## Getting started
 
@@ -125,6 +134,43 @@ Paste the following CSS import code in `app.css`
 }
 ```
 
+## Design Philosophy
+
+Ripple UI was built with a focus on consistency and standardization. Every component follows the same patterns for customization:
+
+### Standardized Enums
+
+Components use standardized enums for colors, sizes, and variants:
+
+```typescript
+// Colors available for most components
+Color.DEFAULT    // 'default'
+Color.PRIMARY    // 'primary'
+Color.SECONDARY  // 'secondary'
+Color.INFO       // 'info'
+Color.SUCCESS    // 'success'
+Color.WARNING    // 'warning'
+Color.DANGER     // 'danger'
+
+// Sizes available for most components
+Size.XS    // 'xs'
+Size.SM    // 'sm'
+Size.BASE  // 'base'
+Size.LG    // 'lg'
+Size.XL    // 'xl'
+Size.XXL   // '2xl'
+```
+
+### Consistent Props Pattern
+
+All components follow a consistent props pattern with predictable naming:
+
+- `color`: Component color theme (using the Color enum)
+- `size`: Component size (using the Size enum)
+- `class`: Custom CSS classes for the component
+- Event handlers with `on` prefix (e.g., `onclick`, `onchange`)
+- Element-specific class props named with component + 'class' (e.g., `titleclass`, `bodyclass`)
+
 ## Component Variants
 
 Most components in Ripple UI support variants to customize their appearance. Here are some examples:
@@ -135,53 +181,157 @@ Buttons come with different variants, colors, sizes, and shapes:
 
 ```svelte
 <script lang="ts">
-	import { Button } from '@makolabs/ripple';
+	import { Button, Color, Size } 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 variant="solid" color={Color.PRIMARY}>Solid Button</Button>
+<Button variant="outline" color={Color.SECONDARY}>Outline Button</Button>
+<Button variant="ghost" color={Color.DANGER}>Ghost Button</Button>
+<Button variant="link" color={Color.INFO}>Link Button</Button>
+
+<!-- Button with onclick handler -->
+<Button 
+  color={Color.SUCCESS}
+  onclick={() => console.log('Button clicked')}
+>
+  Click Me
+</Button>
+
+<!-- Button as link -->
+<Button 
+  href="https://example.com" 
+  target="_blank"
+  color={Color.PRIMARY}
+>
+  Visit Website
+</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>
+<Button size={Size.XS}>Extra Small</Button>
+<Button size={Size.SM}>Small</Button>
+<Button size={Size.BASE}>Base</Button>
+<Button size={Size.LG}>Large</Button>
+<Button size={Size.XL}>Extra Large</Button>
+<Button size={Size.XXL}>2X Large</Button>
+
+<!-- Button variants with different colors -->
+<Button variant="solid" color={Color.PRIMARY}>Primary Solid</Button>
+<Button variant="solid" color={Color.DANGER}>Danger Solid</Button>
+<Button variant="outline" color={Color.SUCCESS}>Success Outline</Button>
+<Button variant="ghost" color={Color.WARNING}>Warning Ghost</Button>
+<Button variant="link" color={Color.INFO}>Info Link</Button>
 ```
 
 ### Modal Variants
 
-Modals can be customized with different positions:
+Modals with different sizes and custom content:
 
 ```svelte
 <script lang="ts">
-	import { Modal } from '@makolabs/ripple';
+	import { Modal, Button, Size } from '@makolabs/ripple';
 	let isOpen = false;
 </script>
 
-<Button on:click={() => isOpen = true}>Open Modal</Button>
+<Button onclick={() => isOpen = true}>Open Modal</Button>
 
+<!-- Basic modal -->
 <Modal 
   open={isOpen} 
-  position="center" 
-  title="Modal Title"
+  title="Basic Modal"
+  size={Size.BASE}
   onClose={() => isOpen = false}
 >
   <p>Modal content goes here</p>
 </Modal>
+
+<!-- Modal with different size -->
+<Modal 
+  open={isOpen} 
+  title="Large Modal"
+  size={Size.XL}
+  onClose={() => isOpen = false}
+>
+  <p>This modal is larger and provides more content space</p>
+</Modal>
+
+<!-- Modal with custom header and footer -->
+<Modal 
+  open={isOpen} 
+  onClose={() => isOpen = false}
+  size={Size.BASE}
+>
+  <svelte:fragment slot="header">
+    <div class="flex items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <h3 class="text-lg font-medium">Custom Header</h3>
+    </div>
+  </svelte:fragment>
+  
+  <p>Modal with custom header and footer</p>
+  
+  <svelte:fragment slot="footer">
+    <div class="flex justify-end space-x-2">
+      <Button variant="outline" onclick={() => isOpen = false}>Cancel</Button>
+      <Button color={Color.PRIMARY}>Save Changes</Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<!-- TODO: Remove position prop from Modal component in future versions -->
+```
+
+### Drawer Component
+
+Drawers can slide in from different edges of the screen:
+
+```svelte
+<script lang="ts">
+	import { Drawer, Button } from '@makolabs/ripple';
+	let isDrawerOpen = false;
+</script>
+
+<Button onclick={() => isDrawerOpen = true}>Open Drawer</Button>
+
+<Drawer 
+  open={isDrawerOpen} 
+  position="right"
+  onClose={() => isDrawerOpen = false}
+>
+  <div class="p-4">
+    <h3 class="text-lg font-medium mb-4">Drawer Title</h3>
+    <p class="mb-4">This is a drawer that slides in from the side of the screen.</p>
+    <Button onclick={() => isDrawerOpen = false}>Close Drawer</Button>
+  </div>
+</Drawer>
+```
+
+### PageHeader Component
+
+A component for consistent page headers:
+
+```svelte
+<script lang="ts">
+	import { PageHeader, Button, Color } from '@makolabs/ripple';
+	
+	const breadcrumbs = [
+	  { label: 'Dashboard', href: '#' },
+	  { label: 'Projects', href: '#' },
+	  { label: 'Current Project' }
+	];
+</script>
+
+<PageHeader 
+  title="Project Dashboard"
+  description="View and manage your project details"
+  breadcrumbs={breadcrumbs}
+>
+  <svelte:fragment slot="actions">
+    <Button color={Color.PRIMARY}>New Project</Button>
+  </svelte:fragment>
+</PageHeader>
 ```
 
 ### Card Variants
@@ -190,47 +340,238 @@ Cards can be customized with different styles:
 
 ```svelte
 <script lang="ts">
-	import { Card, StatsCard } from '@makolabs/ripple';
+	import { Card, StatsCard, Color } from '@makolabs/ripple';
 </script>
 
-<Card title="Basic Card" color="primary">
+<Card title="Basic Card" color={Color.PRIMARY}>
   <p>Card content goes here</p>
 </Card>
 
 <StatsCard 
-  title="Statistics" 
-  value="1,234" 
-  description="Total users"
-  trend="up"
-  percentage={12}
+  label="Monthly Sales"
+  value="$865,000"
+  previousValue="$750,000"
+  previousValuePrefix="vs"
+  trend={15.3}
+  color={Color.SUCCESS}
+  chartData={[20, 25, 30, 22, 35, 40, 38, 45, 50]}
+  icon={
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+      <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  }
 />
 ```
 
 ### Table Component
 
-Tables for displaying structured data:
+Tables for displaying structured data with pagination and sorting:
 
 ```svelte
 <script lang="ts">
-	import { Table, Cell } from '@makolabs/ripple';
+	import { Table, Color, Size } from '@makolabs/ripple';
+	
+	let data = [
+	  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+	  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+	  { id: 3, name: 'Robert Johnson', email: 'robert@example.com', status: 'Active' }
+	];
+	
+	const columns = [
+	  { key: 'name', label: 'Name', sortable: true },
+	  { key: 'email', label: 'Email', sortable: true },
+	  { key: 'status', label: 'Status' }
+	];
+	
+	let selected = [];
+	let sort = { column: 'name', direction: 'asc' };
 </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>
+<Table 
+  data={data} 
+  {columns}
+  color={Color.PRIMARY}
+  size={Size.BASE}
+  pageSize={10}
+  selectable={true}
+  bind:selected={selected}
+  bind:sort={sort}
+  striped={true}
+/>
+```
+
+### Tab Component
+
+Tabs for organizing content into different views:
+
+```svelte
+<script lang="ts">
+	import { TabGroup, TabContent, Color, Size } from '@makolabs/ripple';
+	
+	const tabs = [
+	  { value: 'overview', label: 'Overview' },
+	  { value: 'details', label: 'Details' },
+	  { value: 'settings', label: 'Settings' }
+	];
+	
+	let activeTab = 'overview';
+	
+	function handleTabChange(value) {
+	  console.log(`Tab changed to ${value}`);
+	}
+</script>
+
+<TabGroup 
+  tabs={tabs} 
+  bind:selected={activeTab}
+  onchange={handleTabChange}
+  color={Color.PRIMARY}
+  size={Size.BASE}
+>
+  <TabContent value="overview" persisted>
+    <p>Overview content here</p>
+  </TabContent>
+  
+  <TabContent value="details" persisted>
+    <p>Details content here</p>
+  </TabContent>
+  
+  <TabContent value="settings" persisted>
+    <p>Settings content here</p>
+  </TabContent>
+</TabGroup>
+```
+
+### Badge Component
+
+Badges for displaying statuses and counts:
+
+```svelte
+<script lang="ts">
+	import { Badge, Color, Size } from '@makolabs/ripple';
+</script>
+
+<Badge color={Color.PRIMARY} size={Size.BASE}>New</Badge>
+<Badge color={Color.SUCCESS}>Success</Badge>
+<Badge color={Color.WARNING}>Warning</Badge>
+<Badge color={Color.DANGER}>43</Badge>
+```
+
+### Select Component
+
+Dropdown selector for choosing from a list of options:
+
+```svelte
+<script lang="ts">
+	import { Select, Size } from '@makolabs/ripple';
+	
+	const items = [
+	  { label: 'Option 1', value: 'option1' },
+	  { label: 'Option 2', value: 'option2' },
+	  { label: 'Option 3', value: 'option3', disabled: true },
+	  { label: 'Option 4', value: 'option4' }
+	];
+	
+	let selected = 'option1';
+	
+	function handleSelect(event) {
+	  console.log('Selected:', event.value);
+	}
+</script>
+
+<Select 
+  {items} 
+  bind:value={selected} 
+  class="w-64"
+  size={Size.BASE}
+  onselect={handleSelect}
+/>
+```
+
+### Dropdown Component
+
+Menu dropdown for actions and navigation:
+
+```svelte
+<script lang="ts">
+	import { Dropdown, Size } from '@makolabs/ripple';
+	import FluentChevronDown16Filled from '$icons/FluentChevronDown16Filled.svelte';
+	
+	const sections = [
+	  {
+	    items: [
+	      { 
+	        label: 'Edit', 
+	        icon: FluentPen16Filled,
+	        onclick: () => console.log('Edit clicked') 
+	      },
+	      { 
+	        label: 'Duplicate', 
+	        icon: FluentPenSparkle24Filled,
+	        onclick: () => console.log('Duplicate clicked') 
+	      }
+	    ]
+	  },
+	  {
+	    items: [
+	      { 
+	        label: 'Delete', 
+	        icon: FluentDelete24Filled,
+	        onclick: () => console.log('Delete clicked') 
+	      }
+	    ]
+	  }
+	];
+</script>
+
+<Dropdown 
+  sections={sections} 
+  label="Actions"
+  size={Size.BASE}
+  icon={FluentChevronDown16Filled}
+/>
+```
+
+## Component Composition
+
+Ripple UI components are designed to work together seamlessly:
+
+```svelte
+<script lang="ts">
+  import { Card, TabGroup, TabContent, Button, Color, Size } from '@makolabs/ripple';
+  
+  const tabs = [
+    { value: 'overview', label: 'Overview' },
+    { value: 'details', label: 'Details' },
+    { value: 'settings', label: 'Settings' }
+  ];
+  
+  let activeTab = 'overview';
+</script>
+
+<Card title="Project Information" color={Color.PRIMARY}>
+  <TabGroup 
+    tabs={tabs} 
+    bind:selected={activeTab}
+    color={Color.INFO}
+    size={Size.BASE}
+  >
+    <TabContent value="overview">
+      <p>Project overview content here...</p>
+      <Button variant="solid" color={Color.SUCCESS} size={Size.SM}>
+        Take Action
+      </Button>
+    </TabContent>
+    
+    <TabContent value="details">
+      <p>Project details content here...</p>
+    </TabContent>
+    
+    <TabContent value="settings">
+      <p>Project settings content here...</p>
+    </TabContent>
+  </TabGroup>
+</Card>
 ```
 
 ## Latest Updates
@@ -259,4 +600,3 @@ You can still import specific component types when needed:
 </script>
 
 <Button {...myButton}>Custom Button</Button>
-```

package/dist/button/Button.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { type ButtonProps, buttonVariants } from './button.js';
+	import { buttonVariants } from './button.js';
+	import type { ButtonProps } from '../index.js';
+	import { Color, Size } from '../variants.js';
 
 	let {
 		variant = 'solid',
-		color = 'default',
-		size = 'base',
+		color = Color.DEFAULT,
+		size = Size.BASE,
 		rounded = 'base',
 		disabled = false,
 		isLoading = false,

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

@@ -1,4 +1,4 @@
-import { type ButtonProps } from './button.js';
+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

@@ -1,6 +1,4 @@
-import type { HTMLAttributeAnchorTarget, HTMLButtonAttributes } from 'svelte/elements';
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
+import { Color, Size } from '../variants.js';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         solid: string;
@@ -9,21 +7,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
     };
     rounded: {
         none: string;
@@ -46,21 +44,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
     };
     rounded: {
         none: string;
@@ -83,21 +81,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        default: string;
-        primary: string;
-        secondary: string;
-        info: string;
-        success: string;
-        warning: string;
-        danger: string;
+        [Color.DEFAULT]: string;
+        [Color.PRIMARY]: string;
+        [Color.SECONDARY]: string;
+        [Color.INFO]: string;
+        [Color.SUCCESS]: string;
+        [Color.WARNING]: string;
+        [Color.DANGER]: string;
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        [Size.XS]: string;
+        [Size.SM]: string;
+        [Size.BASE]: string;
+        [Size.LG]: string;
+        [Size.XL]: string;
+        [Size.XXL]: string;
     };
     rounded: {
         none: string;
@@ -113,24 +111,3 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         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 {};