switch data attrs

Author: toan-kunaico

docs/src/routes/components/switch/examples/disabled.tsx

@@ -5,9 +5,9 @@ import styles from "./switch-custom.css?inline";
 export default component$(() => {
   useStyles$(styles);
   return (
-    <Switch.Root class="switch-root" disabled>
-      <Switch.Trigger class="switch-trigger">
-        <Switch.Thumb class="switch-thumb" />
+    <Switch.Root class="ml-4 gap-2 ui-disabled:opacity-50" disabled>
+      <Switch.Trigger class="w-10 h-6 rounded-full bg-gray-300 transition-colors duration-200 border-none p-0 relative cursor-pointer ui-checked:bg-[#045c88] focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-[#045c88]">
+        <Switch.Thumb class="w-5 h-5 rounded-full bg-white top-0.5 left-0.5 transition-transform duration-200 absolute transform translate-x-0 ui-checked:translate-x-full ui-checked:left-[-2px]" />
       </Switch.Trigger>
       <Switch.Label>Disabled switch</Switch.Label>
     </Switch.Root>

docs/src/routes/components/switch/examples/hero.tsx

@@ -5,9 +5,9 @@ import styles from "./switch-custom.css?inline";
 export default component$(() => {
   useStyles$(styles);
   return (
-    <Switch.Root class="switch-root">
-      <Switch.Trigger class="switch-trigger">
-        <Switch.Thumb class="switch-thumb" />
+    <Switch.Root class="ml-4 gap-2 ui-disabled:opacity-50">
+      <Switch.Trigger class="w-10 h-6 rounded-full bg-gray-300 transition-colors duration-200 border-none p-0 relative cursor-pointer ui-checked:bg-[#045c88] focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-[#045c88]">
+        <Switch.Thumb class="w-5 h-5 rounded-full bg-white top-0.5 left-0.5 transition-transform duration-200 absolute transform translate-x-0 ui-checked:translate-x-full ui-checked:left-[-2px]" />
       </Switch.Trigger>
       <Switch.Label>Enable notifications</Switch.Label>
     </Switch.Root>

docs/src/routes/components/switch/index.mdx

@@ -0,0 +1,17 @@
+import Hero from "./examples/hero";
+import Disabled from "./examples/disabled";
+
+# Switch
+
+A Switch is an interactive button that works like a modern light switch - it smoothly slides between two states: ON and OFF.
+When interacting with it, the switch's thumb (the moving part) slides from one side to the other, giving clear
+visual feedback about whether something is enabled or disabled. It provides a visual representation similar to a
+physical switch and is commonly used for enabling/disabling settings or features.
+
+## Basic Usage
+
+<Hero />
+
+## Disabled
+
+<Disabled />