zabi-components 2.0.4 → 2.2.0

package/README.md

@@ -69,12 +69,14 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
     message: '',
   };
   
-  function handleFormSubmit(event: CustomEvent) {
-    console.log('Form submitted:', event.detail.data);
+  function handleFormSubmit(event: SubmitEvent) {
+    const formData = new FormData(event.target as HTMLFormElement);
+    const data = Object.fromEntries(formData.entries());
+    console.log('Form submitted:', data);
   }
   
-  function handleCardClick(event: CustomEvent) {
-    console.log('Card clicked:', event.detail);
+  function handleCardClick(event: MouseEvent) {
+    console.log('Card clicked:', event);
   }
   
   const navItems = [
@@ -93,19 +95,19 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
   <main class="container mx-auto p-6">
     <!-- Semantic Color Variants -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
-      <Card title="Default Card" variant="default">
+      <Card title="Default Card" variant="default" on:click={handleCardClick}>
         This is a default card with semantic colors.
       </Card>
-      <Card title="Success Card" variant="success">
+      <Card title="Success Card" variant="success" on:click={handleCardClick}>
         This card indicates a successful action.
       </Card>
-      <Card title="Warning Card" variant="warning">
+      <Card title="Warning Card" variant="warning" on:click={handleCardClick}>
         This card shows a warning state.
       </Card>
-      <Card title="Error Card" variant="error">
+      <Card title="Error Card" variant="error" on:click={handleCardClick}>
         This card indicates an error state.
       </Card>
-      <Card title="Info Card" variant="info">
+      <Card title="Info Card" variant="info" on:click={handleCardClick}>
         This card provides informational content.
       </Card>
     </div>
@@ -115,7 +117,8 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
         <Input 
           id="name" 
           name="name" 
-          bind:value={formData.name} 
+          value={formData.name}
+          on:input={(e) => formData.name = e.target.value}
           label="Name"
           placeholder="Enter your name" 
           variant="default"
@@ -127,7 +130,8 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
           id="email" 
           name="email" 
           type="email" 
-          bind:value={formData.email} 
+          value={formData.email}
+          on:input={(e) => formData.email = e.target.value}
           label="Email"
           placeholder="Enter your email" 
           variant="success"
@@ -138,7 +142,8 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
         <Textarea 
           id="message" 
           name="message" 
-          bind:value={formData.message} 
+          value={formData.message}
+          on:input={(e) => formData.message = e.target.value}
           label="Message"
           placeholder="Enter your message" 
           variant="default"
@@ -294,7 +299,7 @@ All components will automatically switch to their dark mode variants without any
   method="get" | "post"
   action={string}
   className={string}
-  on:submit={(e) => console.log(e.detail.data, e.detail.formData)}
+  on:submit={(e) => console.log('Form submitted')}
 >
   <div class="form-field">
     <label for="field" class="form-label">Label</label>
@@ -312,7 +317,7 @@ All components will automatically switch to their dark mode variants without any
 - `className`: Additional CSS classes
 
 **Events:**
-- `submit`: Fired on form submission - `{ detail: { data: Record<string, FormDataEntryValue>, formData: FormData } }`
+- `submit`: Native form submit event - use `FormData` to get form data
 
 **CSS Classes:**
 - `.form-field`: Field container
@@ -350,7 +355,7 @@ All components will automatically switch to their dark mode variants without any
   items={Array<{label: string, href: string, icon?: any}>}
   currentPath={string}
   className={string}
-  on:navigate={(e) => console.log(e.detail.item, e.detail.href)}
+  on:click={(e) => console.log('Navigation clicked')}
 />
 ```
 
@@ -361,7 +366,7 @@ All components will automatically switch to their dark mode variants without any
 - `className`: Additional CSS classes
 
 **Events:**
-- `navigate`: Fired when navigation item is clicked - `{ detail: { item: NavigationItem, href: string } }`
+- `click`: Native click event on navigation items
 
 ### Button Component
 
@@ -373,7 +378,7 @@ All components will automatically switch to their dark mode variants without any
   loading={boolean}
   type="button" | "submit" | "reset"
   className={string}
-  on:click={(e) => console.log(e.detail.value, e.detail.event)}
+  on:click={(e) => console.log('Button clicked')}
 >
   Button Content
 </Button>
@@ -388,13 +393,13 @@ All components will automatically switch to their dark mode variants without any
 - `className`: Additional CSS classes
 
 **Events:**
-- `click`: Fired when button is clicked - `{ detail: { value: true, event: MouseEvent } }`
+- `click`: Native click event - `MouseEvent`
 
 ### Input Component
 
 ```svelte
 <Input
-  bind:value={string}
+  value={string}
   type={string}
   label={string}
   placeholder={string}
@@ -402,13 +407,13 @@ All components will automatically switch to their dark mode variants without any
   size="sm" | "md" | "lg"
   variant="default" | "success" | "warning" | "error"
   className={string}
-  on:input={(e) => console.log(e.detail.value, e.detail.event)}
-  on:change={(e) => console.log(e.detail.value, e.detail.event)}
+  on:input={(e) => console.log('Input changed:', e.target.value)}
+  on:change={(e) => console.log('Input changed:', e.target.value)}
 />
 ```
 
 **Props:**
-- `value`: Input value (bindable)
+- `value`: Input value (controlled)
 - `type`: Input type (default: "text")
 - `label`: Input label
 - `placeholder`: Input placeholder
@@ -418,14 +423,14 @@ All components will automatically switch to their dark mode variants without any
 - `className`: Additional CSS classes
 
 **Events:**
-- `input`: Fired on input - `{ detail: { value: string, event: InputEvent } }`
-- `change`: Fired on change - `{ detail: { value: string, event: Event } }`
+- `input`: Native input event - `InputEvent`
+- `change`: Native change event - `Event`
 
 ### Textarea Component
 
 ```svelte
 <Textarea
-  bind:value={string}
+  value={string}
   label={string}
   placeholder={string}
   disabled={boolean}
@@ -433,13 +438,13 @@ All components will automatically switch to their dark mode variants without any
   size="sm" | "md" | "lg"
   variant="default" | "success" | "warning" | "error"
   className={string}
-  on:input={(e) => console.log(e.detail.value, e.detail.event)}
-  on:change={(e) => console.log(e.detail.value, e.detail.event)}
+  on:input={(e) => console.log('Textarea changed:', e.target.value)}
+  on:change={(e) => console.log('Textarea changed:', e.target.value)}
 />
 ```
 
 **Props:**
-- `value`: Textarea value (bindable)
+- `value`: Textarea value (controlled)
 - `label`: Textarea label
 - `placeholder`: Textarea placeholder
 - `disabled`: Disable the textarea (default: false)
@@ -449,8 +454,8 @@ All components will automatically switch to their dark mode variants without any
 - `className`: Additional CSS classes
 
 **Events:**
-- `input`: Fired on input - `{ detail: { value: string, event: InputEvent } }`
-- `change`: Fired on change - `{ detail: { value: string, event: Event } }`
+- `input`: Native input event - `InputEvent`
+- `change`: Native change event - `Event`
 
 ### Card Component
 
@@ -621,127 +626,125 @@ Dark mode is automatically supported through CSS custom properties:
 }
 ```
 
-## Event Structure
-
-All components follow a consistent event structure:
+## Event Handling
 
-```typescript
-interface BaseEventDetail<T = any> {
-  value: T;
-  event?: Event;
-}
-```
+Zabi Components now use **native DOM events** with **event forwarding** for maximum compatibility across frameworks.
 
-**Examples:**
-- Button click: `{ detail: { value: true, event: MouseEvent } }`
-- Input change: `{ detail: { value: string, event: Event } }`
-- Checkbox change: `{ detail: { value: boolean, event: Event } }`
+### Event Forwarding
 
-## TypeScript Support
+All components use `{...$$restProps}` to forward native DOM events, making them compatible with React, Vue, Svelte, and vanilla JavaScript.
 
-Full TypeScript definitions are included with comprehensive type safety:
+```svelte
+<!-- All these work the same way -->
+<Button on:click={handleClick}>Click me</Button>
+<Input on:input={handleInput} on:change={handleChange} />
+<Modal on:click={handleClose} on:keydown={handleKeydown} />
+```
 
-### Event Types
-```typescript
-import type { 
-  ButtonEvents, 
-  InputEvents, 
-  CardEvents, 
-  FormEvents,
-  NavigationEvents,
-  KeyValueFormEvents 
-} from 'zabi-components';
+### Form Components
 
-// Properly typed event handlers
-function handleButtonClick(event: CustomEvent<{ value: boolean; event?: MouseEvent }>) {
-  console.log('Button clicked:', event.detail.value);
-}
+Form components use **controlled components** pattern instead of two-way binding:
 
-function handleFormSubmit(event: CustomEvent<{ 
-  data: Record<string, FormDataEntryValue>; 
-  formData: FormData 
-}>) {
-  console.log('Form data:', event.detail.data);
-}
+```svelte
+<script lang="ts">
+  let inputValue = '';
+  let checkboxValue = false;
+  
+  function handleInput(event: Event) {
+    inputValue = (event.target as HTMLInputElement).value;
+  }
+  
+  function handleCheckbox(event: Event) {
+    checkboxValue = (event.target as HTMLInputElement).checked;
+  }
+</script>
 
-function handleNavigation(event: CustomEvent<{ 
-  item: NavigationItem; 
-  href: string 
-}>) {
-  console.log('Navigate to:', event.detail.href);
-}
+<Input 
+  value={inputValue} 
+  on:input={handleInput} 
+  label="Name" 
+/>
+<Checkbox 
+  checked={checkboxValue} 
+  on:change={handleCheckbox} 
+  label="Subscribe" 
+/>
 ```
 
-### Component Props
-```typescript
-// All components have proper prop typing
-interface CardProps {
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  image?: string;
-  variant?: "default" | "elevated";
-  interactive?: boolean;
-  className?: string;
-}
+### Migration from Previous Versions
 
-interface FormProps {
-  method?: "get" | "post";
-  action?: string;
-  className?: string;
-}
+**Before (v2.0.x):**
+```svelte
+<Input bind:value={inputValue} />
+<Button on:click={handleClick}>Click</Button>
+<Modal bind:isOpen on:close={handleClose} />
 ```
 
-### Event Dispatchers
-```typescript
-// Components use typed event dispatchers
-const dispatch = createEventDispatcher<{
-  click: { event: MouseEvent };
-  submit: { data: Record<string, FormDataEntryValue>; formData: FormData };
-  navigate: { item: NavigationItem; href: string };
-}>();
+**After (v2.1.x):**
+```svelte
+<Input value={inputValue} on:input={(e) => inputValue = e.target.value} />
+<Button on:click={handleClick}>Click</Button>
+<Modal bind:isOpen on:click={handleClose} />
 ```
 
+### Benefits
+
+- ✅ **SSR Safe**: No more hydration errors in production
+- ✅ **Cross-Framework**: Works in React, Vue, Svelte, vanilla JS
+- ✅ **Standards Compliant**: Uses native DOM events
+- ✅ **Better Performance**: Reduced JavaScript overhead
+
+## TypeScript Support
+
+Full TypeScript definitions are included with comprehensive type safety:
+
 ### Event Types
 
-All components use standardized event types:
+All components now use native DOM events with proper TypeScript typing:
 
 ```typescript
-// Base event structure
-interface BaseEventDetail<T = any> {
-  value: T;
-  event?: Event;
-}
-
-// Specific event types
-interface ClickEventDetail extends BaseEventDetail<boolean> {
-  event?: MouseEvent | KeyboardEvent;
+// Native event handlers with proper typing
+function handleButtonClick(event: MouseEvent) {
+  console.log('Button clicked:', event);
 }
 
-interface InputEventDetail extends BaseEventDetail<string> {
-  event?: InputEvent;
+function handleInputChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  console.log('Input value:', target.value);
 }
 
-interface ChangeEventDetail extends BaseEventDetail<string> {
-  event?: Event;
+function handleFormSubmit(event: SubmitEvent) {
+  const formData = new FormData(event.target as HTMLFormElement);
+  const data = Object.fromEntries(formData.entries());
+  console.log('Form data:', data);
 }
 ```
 
-### Component Event Interfaces
+### Component Props
+
+All components have proper prop typing with event forwarding:
 
 ```typescript
-interface ButtonEvents {
-  click: ClickEventDetail;
+// All components support event forwarding
+interface ButtonProps {
+  variant?: "primary" | "secondary" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  className?: string;
+  // All native button events are forwarded via {...$$restProps}
 }
 
-interface InputEvents {
-  input: InputEventDetail;
-  change: ChangeEventDetail;
-  focus: { event: FocusEvent };
-  blur: { event: FocusEvent };
-  keydown: { event: KeyboardEvent };
-  keyup: { event: KeyboardEvent };
-  clear: { event: Event };
+interface InputProps {
+  value?: string;
+  type?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "success" | "warning" | "error";
+  className?: string;
+  // All native input events are forwarded via {...$$restProps}
 }
 ```
 
@@ -754,7 +757,7 @@ interface InputEvents {
   variant="primary" 
   size="lg" 
   className="w-full shadow-lg hover:shadow-xl"
-  on:click={(e) => console.log('Clicked!', e.detail.value)}
+  on:click={(e) => console.log('Clicked!', e)}
 >
   Custom Button
 </Button>
@@ -794,7 +797,7 @@ interface InputEvents {
     return Object.keys(errors).length === 0;
   }
   
-  function handleSubmit(event: CustomEvent) {
+  function handleSubmit(event: SubmitEvent) {
     if (validateForm()) {
       showSuccess = true;
       // Submit form
@@ -810,27 +813,27 @@ interface InputEvents {
   
   <form on:submit|preventDefault={handleSubmit}>
     <Input
-      bind:value={formData.name}
+      value={formData.name}
+      on:input={(e) => formData.name = e.target.value}
       label="Name"
       placeholder="Enter your name"
       required
-      error={errors.name}
     />
     
     <Input
-      bind:value={formData.email}
+      value={formData.email}
       type="email"
+      on:input={(e) => formData.email = e.target.value}
       label="Email"
       placeholder="Enter your email"
       required
-      error={errors.email}
     />
     
     <Input
-      bind:value={formData.message}
+      value={formData.message}
+      on:input={(e) => formData.message = e.target.value}
       label="Message"
       placeholder="Enter your message"
-      helpText="Tell us what you think"
     />
     
     <Button type="submit" variant="primary">
@@ -839,9 +842,11 @@ interface InputEvents {
   </form>
   
   <div slot="footer">
-    <Alert variant="success" closable bind:show={showSuccess}>
-      Message sent successfully!
-    </Alert>
+    {#if showSuccess}
+      <Alert variant="success" closable>
+        Message sent successfully!
+      </Alert>
+    {/if}
   </div>
 </Card>
 ```
@@ -860,50 +865,32 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ## Changelog
 
-### v1.1.1 (Latest) - "Enhanced Type Safety" Edition
-
-#### 🔧 TypeScript Improvements
-- **Enhanced Type Definitions**: Updated generated TypeScript definitions for better type safety
-- **Improved Package Structure**: Enhanced package structure with improved type exports
-- **Build Consistency**: Fixed build consistency and versioning across all generated files
-- **Better Type Exports**: Improved TypeScript declaration file generation
-
-#### 🎯 Philosophy Change
-- **Clean & Simple**: Adopted "less is more" philosophy - removed unnecessary complexity
-- **Focused Components**: Streamlined to essential components that just work
-- **Clean Naming**: Removed "Simple" prefixes - it's just Card, Form, Layout, Navigation
-
-#### ✨ New Clean Components
-- **Card**: Clean, semantic card container with interactive support
-- **Form**: Simple form wrapper with FormData handling and validation
-- **Layout**: Page layout system with header, main, footer slots
-- **Navigation**: Clean navigation with header/sidebar variants
-
-#### 🐛 Bug Fixes
-- **Fixed TypeScript Errors**: Resolved all event handler type mismatches
-- **Fixed Import Paths**: Corrected .js extensions in lib exports
-- **Fixed CSS Issues**: Resolved `:global()` selector placement errors
-- **Fixed Variant Types**: Corrected component variant type mismatches
-- **Fixed Accessibility**: Resolved tabindex warnings for non-interactive elements
-
-#### 🚀 Modern CSS Features
-- **Container Queries**: Added support for container-based responsive design
-- **CSS Grid & Subgrid**: Implemented modern grid layouts
-- **CSS Logical Properties**: Added RTL support with logical properties
-- **CSS Cascade Layers**: Organized styles with cascade layers
-- **CSS Containment**: Added performance optimizations
-
-#### 📦 TypeScript Improvements
-- **Event Type Safety**: All components now have proper event typing
-- **Component Props**: Comprehensive prop type definitions
-- **Event Dispatchers**: Typed event dispatchers for all components
-- **Type Generation**: Proper TypeScript declaration generation
-
-#### 🎨 Design System
-- **Semantic HTML**: All components use proper semantic elements
-- **Accessibility**: ARIA compliant with keyboard navigation
-- **Dark Mode**: Built-in dark mode support with CSS custom properties
-- **Responsive**: Mobile-first responsive design
+### v2.1.0 (Latest) - "Cross-Framework Compatible" Edition
+
+#### 🚀 **MAJOR BREAKING CHANGES** - Event Handling Overhaul
+
+This is a **major breaking change** that affects how all components handle events. The refactoring eliminates SSR/production errors and makes components compatible with React, Vue, and vanilla JavaScript applications.
+
+#### ✅ **What's Fixed**
+- **SSR/Production Errors**: Eliminated all `createEventDispatcher` hydration errors
+- **Cross-Framework Compatibility**: Components now work in React, Vue, Svelte, and vanilla JS
+- **Event Forwarding**: All components use `{...$$restProps}` for native DOM events
+- **Standards Compliance**: Uses web standards instead of framework-specific events
+
+#### 🔄 **Migration Required**
+- **Form Components**: Replace `bind:value` with `value` prop + event handlers
+- **Event Names**: Some custom events replaced with native DOM events
+- **Event Structure**: Simplified event structures across all components
+
+#### 📋 **Breaking Changes**
+1. **Form Components**: Must use `value` prop + event handlers instead of `bind:value`
+2. **Event Names**: Some custom events replaced with native DOM events
+3. **Event Structure**: Simplified event structures across all components
+4. **SSR Compatibility**: Components now work correctly in SSR environments
+
+See the [Migration Guide](#migration-from-previous-versions) above for detailed examples.
+
+### v2.0.2 - "Less is More" Edition
 
 ## Development Setup