switch

apps/website/src/routes/docs/styled/menu.md

@@ -38,3 +38,4 @@
 - [Textarea](/docs/styled/textarea)
 - [Toggle](/docs/styled/toggle)
 - [ToggleGroup](/docs/styled/toggle-group)
+- [Switch](/docs/styled/switch)

apps/website/src/routes/docs/styled/switch/index.mdx

@@ -1,5 +1,48 @@
 ---
-title: Qwik UI | Styled Radio Group Component
+title: Qwik UI | Styled Switch Component
 ---
 
-sdsds
+import { statusByComponent } from '~/_state/component-statuses';
+
+<StatusBanner status={statusByComponent.styled.Switch} />
+
+# Switch
+
+The Switch component allows users to toggle between two states, such as on/off or enabled/disabled. It is designed to be accessible and visually appealing, providing a smooth user experience.
+
+<Showcase name="hero" />
+
+## Installation
+
+To install the Switch component, run the following command in your terminal:
+
+```sh
+qwik-ui add switch
+```
+
+Alternatively, you can copy and paste the component code directly into your project.
+
+## Usage
+
+Here’s how to use the Switch component in your application:
+
+```tsx
+import { component$, useSignal } from '@builder.io/qwik';
+import { Switch } from '~/components/ui';
+
+export default component$(() => {
+  const checked = useSignal(false);
+  return (
+    <Switch.Root bind:checked={checked}>
+      <Switch.Input />
+      <Switch.Label>Toggle Option</Switch.Label>
+    </Switch.Root>
+  );
+});
+```
+
+## Examples
+
+### Checked
+
+<Showcase name="hero" vertical />

packages/cli/src/generators/setup-tailwind/__snapshots__/setup-tailwind-generator.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Setup Tailwind generator
+exports[`Setup Tailwind generator 
     GIVEN no options are passed
     THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radius 0 1`] = `
 "@tailwind components;
@@ -89,7 +89,7 @@ html {
 "
 `;
 
-exports[`Setup Tailwind generator
+exports[`Setup Tailwind generator 
     GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1
     THEN it should generate the correct theme 1`] = `
 "@tailwind components;
@@ -172,7 +172,7 @@ html {
 "
 `;
 
-exports[`Setup Tailwind generator
+exports[`Setup Tailwind generator 
   GIVEN global.css and tailwind config exist in commonjs format
   THEN it should generate the proper tailwind config values 1`] = `
 "const plugin = require('tailwindcss/plugin');
@@ -223,6 +223,8 @@ module.exports = {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        switchInactive: 'hsl(var(--switch-track-color-inactive))',
+        switchThumb: 'hsl(var(--switch-thumb-color-highlight))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
@@ -308,7 +310,7 @@ module.exports = {
 "
 `;
 
-exports[`Setup Tailwind generator
+exports[`Setup Tailwind generator 
   GIVEN tailwind config exist in esm format
   WHEN running the generator
   THEN it should generate the proper tailwind config values 1`] = `
@@ -358,6 +360,8 @@ export default {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        switchInactive: 'hsl(var(--switch-track-color-inactive))',
+        switchThumb: 'hsl(var(--switch-thumb-color-highlight))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
@@ -443,7 +447,7 @@ export default {
 "
 `;
 
-exports[`Setup Tailwind generator
+exports[`Setup Tailwind generator 
   GIVEN tailwind config has already a plugins array
   THEN it should add the plugin with the right plugin and import 1`] = `
 "import plugin from 'tailwindcss/plugin';
@@ -492,6 +496,8 @@ export default {
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
+        switchInactive: 'hsl(var(--switch-track-color-inactive))',
+        switchThumb: 'hsl(var(--switch-thumb-color-highlight))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',