chore: rename onValueChange to onChange

Author: steffanek

apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value-multiple.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
       <ToggleGroup.Root
         multiple
         value={['left', 'center']}
-        onValueChange$={(v) => (valueSelected.value = v)}
+        onChange$={(v) => (valueSelected.value = v)}
         disabled
       >
         <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">

apps/website/src/routes/docs/headless/toggle-group/examples/test-disabled-value.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
     <div class="toggle-container">
       <ToggleGroup.Root
         value={'left'}
-        onValueChange$={(v: string) => {
+        onChange$={(v: string) => {
           valueSelected.value = v;
         }}
         disabled

apps/website/src/routes/docs/headless/toggle-group/examples/test-value-multiple.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
       <ToggleGroup.Root
         multiple
         value={['left', 'center']}
-        onValueChange$={(v) => (valueSelected.value = v)}
+        onChange$={(v) => (valueSelected.value = v)}
       >
         <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
           Left

apps/website/src/routes/docs/headless/toggle-group/examples/value.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
     <div class="toggle-container">
       <ToggleGroup.Root
         value={'left'}
-        onValueChange$={(v: string) => {
+        onChange$={(v: string) => {
           valueSelected.value = v;
         }}
       >

apps/website/src/routes/docs/headless/toggle-group/index.mdx

@@ -59,7 +59,7 @@ An initial, uncontrolled value can be provided using the `value` prop.
 <Showcase name="initialValue" />
 
 If you want to have some control when an item is selected, like making some side effect you can use
-the `onValueChange$`. The event is fired when the user toggle the button, and receives the new value.
+the `onChange$`. The event is fired when the user toggle the button, and receives the new value.
 
 <Showcase name="value" />
 
@@ -153,10 +153,10 @@ Pass the `direction` prop to `rtl`.
       name: 'value',
       type: 'string | string[]',
       description:
-        'Initial value to make the pressed state uncontrolled. Use in conjunction with `onValueChange$` to have some reactivity.',
+        'Initial value to make the pressed state uncontrolled. Use in conjunction with `onChange$` to have some reactivity.',
     },
     {
-      name: 'onValueChange$',
+      name: 'onChange$',
       type: 'function',
       info: 'PropFunction<() => void>',
       description: 'Called when the state changes.',

packages/kit-headless/src/components/toggle-group/toggle-group-root.tsx

@@ -42,15 +42,15 @@ export type ToggleGroupSingleProps = {
   multiple?: false;
   /**
    * The initial value of the pressed item (uncontrolled).
-   * Can be used in conjunction with onValueChange.
+   * Can be used in conjunction with onChange$.
    */
   value?: string;
 
   /**
    * The callback that fires when the value of the toggle group changes.
    * Event handler called when the pressed state of an item changes.
    */
-  onValueChange$?: QRL<(value: string) => void>;
+  onChange$?: QRL<(value: string) => void>;
   /**
    * The reactive value (a signal) of the pressed item (the signal is the controlled value).
    * Controlling the pressed state with a bounded value.
@@ -65,14 +65,14 @@ export type ToggleGroupMultipleProps = {
   multiple?: true;
   /**
    * The initial value of the pressed item (uncontrolled).
-   * Can be used in conjunction with onValueChange.
+   * Can be used in conjunction with onChange$.
    */
   value?: string[];
   /**
    * The callback that fires when the value of the toggle group changes.
    * Event handler called when the pressed state of an item changes.
    */
-  onValueChange$?: QRL<(value: string[]) => void>;
+  onChange$?: QRL<(value: string[]) => void>;
   /**
    * The reactive value (a signal) of the pressed item (the signal is the controlled value).
    * Controlling the pressed state with a bounded value.
@@ -88,7 +88,7 @@ export type ToggleGroupRootProps = PropsOf<'div'> & ToggleGroupApiProps;
 
 export const HToggleGroupRoot = component$<ToggleGroupRootProps>((props) => {
   const {
-    onValueChange$: _,
+    onChange$: _,
     disabled = false,
     orientation = 'horizontal',
     direction = 'ltr',

packages/kit-headless/src/components/toggle-group/toggle-group.test.ts

@@ -215,7 +215,7 @@ test.describe('Mouse Behavior', () => {
     await expect(centerItem).toHaveAttribute('aria-pressed', 'false');
   });
 
-  //Some control (value + onValueChange)
+  //Some control (value + onChange$)
   //single
   test(`GIVEN a toggle-group with 'value' = 'left'
     WHEN the 'center' item is clicked

packages/kit-headless/src/components/toggle-group/use-toggle.tsx

@@ -42,15 +42,15 @@ function useRootItemsRepo() {
 }
 
 function useCreateSingleToggleGroup(props: ToggleGroupSingleProps) {
-  const { multiple = false, value, onValueChange$, 'bind:value': givenValueSig } = props;
+  const { multiple = false, value, onChange$, 'bind:value': givenValueSig } = props;
 
   const pressedValuesSig = useBoundSignal(givenValueSig, value);
   const rootItemsRepo = useRootItemsRepo();
 
   const handleValueChange$ = $((newValue: string) => {
     pressedValuesSig.value = newValue;
 
-    if (onValueChange$) onValueChange$(pressedValuesSig.value);
+    if (onChange$) onChange$(pressedValuesSig.value);
   });
 
   const activateItem$ = $((itemValue: string) => handleValueChange$(itemValue));
@@ -70,7 +70,7 @@ function useCreateSingleToggleGroup(props: ToggleGroupSingleProps) {
 }
 
 function useCreateMultipleToggleGroup(props: ToggleGroupMultipleProps) {
-  const { multiple = true, 'bind:value': givenValueSig, value, onValueChange$ } = props;
+  const { multiple = true, 'bind:value': givenValueSig, value, onChange$ } = props;
 
   /*
   Need to pass an empty array if not I got: TypeError when toggle
@@ -83,7 +83,7 @@ function useCreateMultipleToggleGroup(props: ToggleGroupMultipleProps) {
   const handleValueChange$ = $((newValue: string[]) => {
     pressedValuesSig.value = newValue;
 
-    if (onValueChange$) onValueChange$(pressedValuesSig.value);
+    if (onChange$) onChange$(pressedValuesSig.value);
   });
 
   const activateItem$ = $((itemValue: string) =>