mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(Switch): new component
This commit is contained in:
Benjamin Canac
@@ -25,6 +25,7 @@ const components = [
|
||||
'popover',
|
||||
'skeleton',
|
||||
'slideover',
|
||||
'switch',
|
||||
'tabs',
|
||||
'tooltip'
|
||||
]
|
||||
|
||||
30
playground/pages/switch.vue
Normal file
30
playground/pages/switch.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import theme from '#build/ui/switch'
|
||||
|
||||
const sizes = Object.keys(theme.variants.size)
|
||||
const checked = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div>
|
||||
<USwitch v-model:checked="checked" />
|
||||
</div>
|
||||
<div>
|
||||
<USwitch v-model:checked="checked" disabled />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 ml-[-96px]">
|
||||
<USwitch v-for="size in sizes" :key="size" v-model:checked="checked" :size="(size as any)" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 ml-[-96px]">
|
||||
<USwitch
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
v-model:checked="checked"
|
||||
:size="(size as any)"
|
||||
unchecked-icon="i-heroicons-x-mark-20-solid"
|
||||
checked-icon="i-heroicons-check-20-solid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
49
src/runtime/components/Switch.vue
Normal file
49
src/runtime/components/Switch.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { tv, type VariantProps } from 'tailwind-variants'
|
||||
import type { SwitchRootProps, SwitchRootEmits } from 'radix-vue'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/switch'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
|
||||
|
||||
const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
|
||||
|
||||
type SwitchVariants = VariantProps<typeof switchTv>
|
||||
|
||||
export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
|
||||
color?: SwitchVariants['color']
|
||||
size?: SwitchVariants['size']
|
||||
checkedIcon?: string
|
||||
uncheckedIcon?: string
|
||||
class?: any
|
||||
ui?: Partial<typeof switchTv.slots>
|
||||
}
|
||||
|
||||
export interface SwitchEmits extends SwitchRootEmits {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
|
||||
const props = defineProps<SwitchProps>()
|
||||
const emits = defineEmits<SwitchEmits>()
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'disabled', 'required', 'name', 'id', 'value'), emits)
|
||||
|
||||
const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
|
||||
color: props.color,
|
||||
size: props.size
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SwitchRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
|
||||
<SwitchThumb :class="ui.thumb()">
|
||||
<UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ checked: true })" />
|
||||
<UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ checked: false })" />
|
||||
</SwitchThumb>
|
||||
</SwitchRoot>
|
||||
</template>
|
||||
@@ -17,5 +17,6 @@ export { default as navigationMenu } from './navigationMenu'
|
||||
export { default as popover } from './popover'
|
||||
export { default as skeleton } from './skeleton'
|
||||
export { default as slideover } from './slideover'
|
||||
export { default as switch } from './switch'
|
||||
export { default as tabs } from './tabs'
|
||||
export { default as tooltip } from './tooltip'
|
||||
|
||||
62
src/theme/switch.ts
Normal file
62
src/theme/switch.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
export default (config: { colors: string[] }) => ({
|
||||
slots: {
|
||||
root: 'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
|
||||
thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
|
||||
icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0'
|
||||
},
|
||||
variants: {
|
||||
color: Object.fromEntries(config.colors.map((color: string) => [color, {
|
||||
root: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
|
||||
icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
|
||||
}])),
|
||||
size: {
|
||||
'2xs': {
|
||||
root: 'h-3 w-5',
|
||||
thumb: 'size-2 data-[state=checked]:translate-x-2',
|
||||
icon: 'size-1.5'
|
||||
},
|
||||
xs: {
|
||||
root: 'h-3.5 w-6',
|
||||
thumb: 'size-2.5 data-[state=checked]:translate-x-2.5',
|
||||
icon: 'size-2'
|
||||
},
|
||||
sm: {
|
||||
root: 'h-4 w-7',
|
||||
thumb: 'size-3 data-[state=checked]:translate-x-3',
|
||||
icon: 'size-2.5'
|
||||
},
|
||||
md: {
|
||||
root: 'h-5 w-9',
|
||||
thumb: 'size-4 data-[state=checked]:translate-x-4',
|
||||
icon: 'size-3'
|
||||
},
|
||||
lg: {
|
||||
root: 'h-6 w-11',
|
||||
thumb: 'size-5 data-[state=checked]:translate-x-5',
|
||||
icon: 'size-4'
|
||||
},
|
||||
xl: {
|
||||
root: 'h-7 w-[3.25rem]',
|
||||
thumb: 'size-6 data-[state=checked]:translate-x-6',
|
||||
icon: 'size-5'
|
||||
},
|
||||
'2xl': {
|
||||
root: 'h-8 w-[3.75rem]',
|
||||
thumb: 'size-7 data-[state=checked]:translate-x-7',
|
||||
icon: 'size-6'
|
||||
}
|
||||
},
|
||||
checked: {
|
||||
true: {
|
||||
icon: 'group-data-[state=checked]:opacity-100'
|
||||
},
|
||||
false: {
|
||||
icon: 'group-data-[state=unchecked]:opacity-100'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
color: 'primary',
|
||||
size: 'md'
|
||||
}
|
||||
})
|
||||
29
test/components/Switch.spec.ts
Normal file
29
test/components/Switch.spec.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Switch, { type SwitchProps } from '../../src/runtime/components/Switch.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Switch', () => {
|
||||
it.each([
|
||||
['basic case', {}],
|
||||
['with class', { props: { class: '' } }],
|
||||
['with ui', { props: { ui: {} } }],
|
||||
['with as', { props: { as: 'section' } }],
|
||||
['with checked', { props: { checked: true } }],
|
||||
['with defaultChecked', { props: { defaultChecked: true } }],
|
||||
['with disabled', { props: { disabled: true } }],
|
||||
['with id', { props: { id: 'test' } }],
|
||||
['with name', { props: { name: 'test' } }],
|
||||
['with required', { props: { required: true } }],
|
||||
['with value', { props: { value: 'switch' } }],
|
||||
['with size 2xs', { props: { size: '2xs' as const } }],
|
||||
['with size xs', { props: { size: 'xs' as const } }],
|
||||
['with size sm', { props: { size: 'sm' as const } }],
|
||||
['with size md', { props: { size: 'md' as const } }],
|
||||
['with size lg', { props: { size: 'lg' as const } }],
|
||||
['with size xl', { props: { size: 'xl' as const } }],
|
||||
['with size 2xl', { props: { size: '2xl' as const } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SwitchProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Switch)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
91
test/components/__snapshots__/Switch.spec.ts.snap
Normal file
91
test/components/__snapshots__/Switch.spec.ts.snap
Normal file
@@ -0,0 +1,91 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Switch > renders basic case correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with as correctly 1`] = `
|
||||
"<section class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></section>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with checked correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with class correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with defaultChecked correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with disabled correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with id correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" id="test" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with name correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with required correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size 2xl correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-8 w-[3.75rem]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-7"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size 2xs correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-3 w-5" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-2"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size lg correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-6 w-11" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-5"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size md correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size sm correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-4 w-7" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-3"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size xl correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-7 w-[3.25rem]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-6"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with size xs correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-3.5 w-6" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-2.5"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with ui correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`Switch > renders with value correctly 1`] = `
|
||||
"<button class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="switch"><span data-state="unchecked" class="pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 size-4"></span></button>
|
||||
<!---->"
|
||||
`;
|
||||
Reference in New Issue
Block a user