feat(checkbox): add touch ripple to Checkbox

src/react/components/Checkbox.jsx

@@ -7,7 +7,9 @@ import React, {
 import { CheckboxClasses } from '../../shared/classes/CheckboxClasses.js';
 import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
+import { useTheme } from '../shared/use-theme.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
 import CheckboxIcon from './icons/CheckboxIcon.jsx';
 
@@ -29,6 +31,8 @@ const Checkbox = forwardRef((props, ref) => {
     ios,
     material,
 
+    touchRipple = true,
+
     // Children
     children,
 
@@ -50,9 +54,12 @@ const Checkbox = forwardRef((props, ref) => {
     ...rest,
   };
 
+  const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
+  useTouchRipple(elRef, theme === 'material' && touchRipple);
+
   const colors = CheckboxColors(colorsProp, dark);
 
   const state =

src/shared/classes/CheckboxClasses.js

@@ -3,10 +3,11 @@ import { positionClass } from '../position-class.js';
 
 export const CheckboxClasses = (props, colors, classes, darkClasses) => {
   return {
-    base: `cursor-pointer inline-block align-middle ${positionClass(
-      'relative',
+    base: cls(
+      `cursor-pointer inline-flex align-middle ${positionClass('relative')}`,
+      darkClasses('dark:touch-ripple-white'),
       classes
-    )}`,
+    ),
     iconWrap: {
       common: cls(
         `flex items-center justify-center text-white`,

src/svelte/components/Checkbox.svelte

@@ -3,6 +3,7 @@
   import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
   import CheckboxIcon from './icons/CheckboxIcon.svelte';
 
@@ -21,11 +22,15 @@
   export let disabled = false;
   export let readonly = false;
   export let onChange = undefined;
+  export let touchRipple = true;
 
   let inputEl;
+  const rippleEl = { current: null };
 
   const dark = useDarkClasses();
 
+  $: useTouchRipple(rippleEl, touchRipple);
+
   $: colors = CheckboxColors(colorsProp, dark);
 
   $: state = checked || indeterminate ? 'checked' : 'notChecked';
@@ -46,7 +51,12 @@
   $: watchIndeterminate(indeterminate);
 </script>
 
-<svelte:element this={component} class={c.base} {...$$restProps}>
+<svelte:element
+  this={component}
+  bind:this={rippleEl.current}
+  class={c.base}
+  {...$$restProps}
+>
   <input
     bind:this={inputEl}
     type="checkbox"

src/vue/components/Checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="component" :class="c.base">
+  <component :is="component" :class="c.base" ref="elRef">
     <input
       ref="inputElRef"
       type="checkbox"
@@ -29,6 +29,7 @@
   import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
 
   export default {
@@ -50,6 +51,10 @@
         type: Boolean,
         default: undefined,
       },
+      touchRipple: {
+        type: Boolean,
+        default: true,
+      },
       checked: { type: Boolean, default: false },
       indeterminate: { type: Boolean, default: false },
       name: { type: String, default: undefined },
@@ -59,8 +64,11 @@
     },
     emits: ['change'],
     setup(props, ctx) {
+      const elRef = ref(null);
       const inputElRef = ref(null);
 
+      useTouchRipple(elRef, props);
+
       const colors = computed(() =>
         CheckboxColors(props.colors || {}, useDarkClasses)
       );
@@ -90,6 +98,7 @@
       };
 
       return {
+        elRef,
         inputElRef,
         c,
         state,