diff --git a/packages/windi/package.json b/packages/windi/package.json
index 9bd6694..59b9a63 100644
--- a/packages/windi/package.json
+++ b/packages/windi/package.json
@@ -47,6 +47,7 @@
"lint:fix": "eslint . --fix"
},
"dependencies": {
+ "@headlessui/vue": "^1.7.15",
"@heroicons/vue": "^2.0.18",
"@selemondev/windi-ui": "workspace:^",
"classnames": "^2.3.2",
diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
index 763986a..0de6093 100644
--- a/packages/windi/src/App.vue
+++ b/packages/windi/src/App.vue
@@ -1,8 +1,11 @@
-
+
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index b84f6ba..188f8e7 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/packages/windi/src/Types/componentsTypes/components.ts
@@ -124,6 +124,20 @@ export interface WCheckbox extends WComponentRoot {
export interface WDivider extends WComponentRoot {
dividerVertical?: string
}
+
+export interface WSwitch extends WComponentRoot {
+ switchRounded?: string
+ switchActive?: string
+ switchInActive?: string
+ switchContainer?: string
+ switchContainerActive?: string
+ switchContainerInActive?: string
+ switchIcon?: string
+ switchIconActive?: string
+ switchIconInActive?: string
+ switchIconOn?: string
+ switchIconOff?: string
+}
export type WAccordionVariant = WithVariantProps
export type WAccordionItemVariants = WithVariantProps
@@ -151,3 +165,5 @@ export type WInputVariants = WithVariantProps
export type WCheckboxVariants = WithVariantProps
export type WDividerVariants = WithVariantProps
+
+export type WSwitchVariants = WithVariantProps
diff --git a/packages/windi/src/Types/enums/Components.ts b/packages/windi/src/Types/enums/Components.ts
index f6c1f32..1df6c7e 100644
--- a/packages/windi/src/Types/enums/Components.ts
+++ b/packages/windi/src/Types/enums/Components.ts
@@ -13,4 +13,5 @@ export enum Components {
WCheckbox = 'WCheckbox',
WKbd = 'WKbd',
WDivider = 'WDivider',
+ WSwitch = 'WSwitch',
}
diff --git a/packages/windi/src/components/Switch/WSwitch.vue b/packages/windi/src/components/Switch/WSwitch.vue
new file mode 100644
index 0000000..434b5cf
--- /dev/null
+++ b/packages/windi/src/components/Switch/WSwitch.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/windi/src/components/Switch/index.ts b/packages/windi/src/components/Switch/index.ts
new file mode 100644
index 0000000..a639981
--- /dev/null
+++ b/packages/windi/src/components/Switch/index.ts
@@ -0,0 +1,5 @@
+import Switch from './WSwitch.vue'
+
+export default {
+ Switch,
+}
diff --git a/packages/windi/src/index.ts b/packages/windi/src/index.ts
index 53461da..deb25e6 100644
--- a/packages/windi/src/index.ts
+++ b/packages/windi/src/index.ts
@@ -15,6 +15,7 @@ import Kbd from './components/Kbd/WKbd.vue'
import Input from './components/Input/WInput.vue'
import Checkbox from './components/Checkbox/WCheckbox.vue'
import Divider from './components/Divider/WDivider.vue'
+import Switch from './components/Switch/WSwitch.vue'
import windiTheme from './theme/windiTheme'
const components: Record> = {
@@ -32,6 +33,7 @@ const components: Record> = {
Input,
Checkbox,
Divider,
+ Switch,
}
function install(app: App, configuration: WindiUIConfiguration) {
@@ -56,3 +58,4 @@ export { default as Kbd } from './components/Kbd'
export { default as Input } from './components/Input'
export { default as Checkbox } from './components/Checkbox'
export { default as Divider } from './components/Divider'
+export { default as Switch } from './components/Switch'
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index c969fd5..ae59694 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/packages/windi/src/theme/windiTheme.ts
@@ -660,6 +660,31 @@ export default {
},
},
},
+
+ WSwitch: {
+ base: {
+ root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+ switchRounded: 'rounded-full',
+ switchActive: 'bg-green-500 dark:bg-green-400',
+ switchInActive: 'bg-gray-200 dark:bg-gray-700',
+ switchContainer: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
+ switchContainerActive: 'translate-x-4 rtl:-translate-x-4',
+ switchContainerInActive: 'translate-x-0 rtl:-translate-x-0',
+ switchIcon: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
+ switchIconActive: 'opacity-100 ease-in duration-200',
+ switchIconInActive: 'opacity-0 ease-out duration-100',
+ switchIconOn: 'h-3 w-3 text-green-500 dark:text-green-400',
+ switchIconOff: 'h-3 w-3 text-gray-400 dark:text-gray-500',
+ },
+
+ defaults: {
+ root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+ switchRounded: 'rounded-full',
+ switchActive: 'bg-green-500 dark:bg-green-400',
+ switchInActive: 'bg-gray-200 dark:bg-gray-700',
+ },
+ },
+
transitions: {
scale: {
'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c08aaae..fc34722 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
packages/windi:
dependencies:
+ '@headlessui/vue':
+ specifier: ^1.7.15
+ version: 1.7.15(vue@3.3.4)
'@heroicons/vue':
specifier: ^2.0.18
version: 2.0.18(vue@3.3.4)
@@ -1179,6 +1182,15 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
+ /@headlessui/vue@1.7.15(vue@3.3.4):
+ resolution: {integrity: sha512-3ozVEgQ8mw09nWvUPN+8S6C8l3SM0lVT1aEN/+oP5Y4LF0WNMM9UrVisVTN9LLQ06v/X3EFA0blyL/vg8XNZlg==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ vue: ^3.2.0
+ dependencies:
+ vue: 3.3.4
+ dev: false
+
/@heroicons/vue@2.0.18(vue@3.3.4):
resolution: {integrity: sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==}
peerDependencies: