Bump version to 0.12.77

Author: edadma

packages/asterui/CHANGELOG.md

@@ -7,6 +7,18 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.77 (2025-12-28)
+
+### Components
+
+- **Toggle**: Updated `onChange` prop signature to `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` for better developer experience (checked state as first parameter)
+
+### Documentation
+
+- Updated Toggle documentation across all 5 languages (English, French, Chinese, Spanish, Portuguese)
+- Updated Toggle controlled example to demonstrate new onChange API
+- Updated AI-readable Toggle documentation
+
 ## v0.12.76 (2025-12-27)
 
 ### Components

packages/asterui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.76",
+  "version": "0.12.77",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {

packages/asterui/src/components/Toggle.tsx

@@ -17,12 +17,14 @@ const dToggleWarning = 'toggle-warning'
 const dToggleInfo = 'toggle-info'
 const dToggleError = 'toggle-error'
 
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'info' | 'error'
   className?: string
   /** Test ID for testing */
   'data-testid'?: string
+  /** Callback fired when the checked state changes */
+  onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
@@ -31,6 +33,7 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
       size,
       color,
       className = '',
+      onChange,
       ...props
     },
     ref
@@ -66,8 +69,12 @@ export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
       .filter(Boolean)
       .join(' ')
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.checked, event)
+    }
+
     const dataState = props.checked ? 'checked' : 'unchecked'
-    return <input ref={ref} type="checkbox" className={toggleClasses} data-state={dataState} {...props} />
+    return <input ref={ref} type="checkbox" className={toggleClasses} data-state={dataState} {...props} onChange={handleChange} />
   }
 )
 

packages/docs/public/docs/toggle.md

@@ -71,7 +71,7 @@ const App: React.FC = () => {
     <div className="flex items-center gap-4">
       <Toggle
         checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
+        onChange={(checked) => setChecked(checked)}
         color="primary"
       />
       <span>Toggle is {checked ? 'ON' : 'OFF'}</span>
@@ -131,7 +131,7 @@ export default App
 |----------|-------------|------|---------|
 | `checked` | Controlled checked state | `boolean` | `-` |
 | `defaultChecked` | Default checked state (uncontrolled) | `boolean` | `false` |
-| `onChange` | Callback when toggle state changes | `(e: ChangeEvent) => void` | `-` |
+| `onChange` | Callback when toggle state changes | `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | `size` | Toggle size | `xs' \| 'sm' \| 'md' \| 'lg` | `md` |
 | `color` | Toggle color | `primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error` | `-` |
 | `disabled` | Disable the toggle | `boolean` | `false` |

packages/docs/src/components/ToggleDemo.tsx

@@ -73,7 +73,7 @@ export function ControlledDemo() {
     <Demo>
       {/* @example-return */}
       <div className="flex items-center gap-4">
-        <Toggle checked={checked} onChange={(e) => setChecked(e.target.checked)} color="primary" />
+        <Toggle checked={checked} onChange={(checked) => setChecked(checked)} color="primary" />
         <span>Toggle is {checked ? 'ON' : 'OFF'}</span>
       </div>
       {/* @example-return-end */}

packages/docs/src/content/docs/changelog.md

@@ -7,6 +7,18 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.77 (2025-12-28)
+
+### Components
+
+- **Toggle**: Updated `onChange` prop signature to `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` for better developer experience (checked state as first parameter)
+
+### Documentation
+
+- Updated Toggle documentation across all 5 languages (English, French, Chinese, Spanish, Portuguese)
+- Updated Toggle controlled example to demonstrate new onChange API
+- Updated AI-readable Toggle documentation
+
 ## v0.12.76 (2025-12-27)
 
 ### Components

packages/docs/src/content/docs/components/toggle.mdx

@@ -61,7 +61,7 @@ import { Toggle } from 'asterui'
 |----------|-------------|------|---------|
 | `checked` | Controlled checked state | `boolean` | `-` |
 | `defaultChecked` | Default checked state (uncontrolled) | `boolean` | `false` |
-| `onChange` | Callback when toggle state changes | `(e: ChangeEvent) => void` | `-` |
+| `onChange` | Callback when toggle state changes | `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | `size` | Toggle size | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` |
 | `color` | Toggle color | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | `-` |
 | `disabled` | Disable the toggle | `boolean` | `false` |

packages/docs/src/content/docs/es/components/toggle.mdx

@@ -61,7 +61,7 @@ import { Toggle } from 'asterui'
 |----------|-------------|------|---------|
 | `checked` | Estado marcado controlado | `boolean` | `-` |
 | `defaultChecked` | Estado marcado predeterminado (no controlado) | `boolean` | `false` |
-| `onChange` | Callback cuando cambia el estado del toggle | `(e: ChangeEvent) => void` | `-` |
+| `onChange` | Callback cuando cambia el estado del toggle | `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | `size` | Tamaño del toggle | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` |
 | `color` | Color del toggle | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | `-` |
 | `disabled` | Deshabilitar el toggle | `boolean` | `false` |

packages/docs/src/content/docs/fr/components/toggle.mdx

@@ -61,7 +61,7 @@ import { Toggle } from 'asterui'
 |----------|-------------|------|---------|
 | `checked` | État coché contrôlé | `boolean` | `-` |
 | `defaultChecked` | État coché par défaut (non contrôlé) | `boolean` | `false` |
-| `onChange` | Callback lorsque l'état de l'interrupteur change | `(e: ChangeEvent) => void` | `-` |
+| `onChange` | Callback lorsque l'état de l'interrupteur change | `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | `size` | Taille de l'interrupteur | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` |
 | `color` | Couleur de l'interrupteur | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | `-` |
 | `disabled` | Désactiver l'interrupteur | `boolean` | `false` |

packages/docs/src/content/docs/pt/components/toggle.mdx

@@ -61,7 +61,7 @@ import { Toggle } from 'asterui'
 |----------|-------------|------|---------|
 | `checked` | Estado marcado controlado | `boolean` | `-` |
 | `defaultChecked` | Estado marcado padrão (não controlado) | `boolean` | `false` |
-| `onChange` | Callback quando estado do toggle muda | `(e: ChangeEvent) => void` | `-` |
+| `onChange` | Callback quando estado do toggle muda | `(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | `size` | Tamanho do toggle | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` |
 | `color` | Cor do toggle | `'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | `-` |
 | `disabled` | Desabilitar o toggle | `boolean` | `false` |