diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts index 4441c32..d661fad 100644 --- a/docs/docs/.vitepress/config.ts +++ b/docs/docs/.vitepress/config.ts @@ -2,6 +2,22 @@ import { defineConfig } from 'vitepress' import { version } from '../../../package.json' import { SearchPlugin } from "vitepress-plugin-search"; import { applyPlugins } from './plugins/code' + +const components = [ + { text: 'Accordion', link: '/guide/components/accordion.md' }, + { text: 'Alert', link: '/guide/components/alert.md' }, + { text: 'Avatar', link: '/guide/components/avatar.md'}, + { text: 'Badge', link: '/guide/components/badge.md'}, + { text: 'Button', link: '/guide/components/button.md'}, + { text: 'Checkbox', link: '/guide/components/checkbox.md'}, + { text: 'Divider', link: '/guide/components/divider.md'}, + { text: 'Icon', link: '/guide/components/icon.md'}, + { text: 'Input', link: '/guide/components/input.md'}, + { text: 'Kbd', link: '/guide/components/kbd.md'}, + { text: 'Modal', link: '/guide/components/modal.md'}, + { text: 'Switch', link: '/guide/components/switch.md'}, + { text: 'Tag', link: '/guide/components/tag.md'}, +] // https://vitepress.dev/reference/site-config export default defineConfig({ vite: { plugins: [SearchPlugin()] }, @@ -26,11 +42,15 @@ export default defineConfig({ logo: '../public/windi.png', // https://vitepress.dev/reference/default-theme-config nav: [ - { text: 'Guide', items: [] }, - { text: 'Components', items: [] }, - { text: 'Windi UI', items: [] }, - { text: 'Playground', link: 'http://localhost:5173/play/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPSd0cyc+XG4gIFxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cblxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiUGxheWdyb3VuZE1haW4udnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IG9uTW91bnRlZCB9IGZyb20gJ3Z1ZSdcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvYmFuLXRzLWNvbW1lbnRcbi8vIEB0cy1leHBlY3QtZXJyb3JcbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgZ2V0VW5vY3NzQ29tcGlsZVJlcywgaW5pdCwgbGliSW5zdGFsbCwgc2VuZEh0bWwgfSBmcm9tICcuL2xpYi1pbnN0YWxsLmpzJ1xuXG5saWJJbnN0YWxsKClcbm9uTW91bnRlZChhc3luYyAoKSA9PiB7XG4gIGF3YWl0IGluaXQoKVxuICBzZW5kSHRtbCgpXG4gIGdldFVub2Nzc0NvbXBpbGVSZXMoKVxufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLWRldi1wcm94eVwiLFxuICAgIFwiQHZ1ZS9jb21waWxlci1zZmNcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLXNmYy1kZXYtcHJveHlcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cDovL2xvY2FsaG9zdDo1MTczL3BsYXkvc3JjL3Z1ZS1zaGFyZWQtZGV2LXByb3h5XCIsXG4gICAgXCJ2dWUtdWktbmV4dFwiOiBcImh0dHA6Ly9sb2NhbGhvc3Q6NTE3My9wbGF5L3NyYy92dWUtdWktbmV4dC1kZXYtcHJveHlcIlxuICB9LFxuICBcInNjb3Blc1wiOiB7fVxufSIsImxpYi1pbnN0YWxsLmpzIjoiaW1wb3J0IHsgZ2V0Q3VycmVudEluc3RhbmNlIH0gZnJvbSAndnVlJ1xuLy8gaW1wb3J0IFVub1VJIGZyb20gJ29udS11aSdcbmltcG9ydCB7IHVpIH0gZnJvbSBcInZ1ZS11aS1uZXh0XCI7XG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuXG5leHBvcnQgZnVuY3Rpb24gbGliSW5zdGFsbCgpIHtcbiAgaWYgKGluc3RhbGxlZClcbiAgICByZXR1cm5cbiAgY29uc3QgaW5zdGFuY2UgPSBnZXRDdXJyZW50SW5zdGFuY2UoKVxuICBcbiAgLy8gaW5zdGFuY2UuYXBwQ29udGV4dC5hcHAudXNlKHVpKVxuICBpbnN0YWxsZWQgPSB0cnVlXG59XG5cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBpbml0KCkge1xuICBhd2FpdCBsb2FkU3R5bGUoKVxuICBhd2FpdCBjcmVhdGVJbmplY3RVbm9jc3MoKVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgIGxpbmsuaHJlZiA9ICd1bmRlZmluZWQnXG4gICAgbGluay5pZCA9ICdsaWJfc3R5bGUnXG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKGxpbmspXG4gIH0pXG59XG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVJbmplY3RVbm9jc3MoKSB7XG4gIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgY29uc3Qgc3R5bGUgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzdHlsZScpXG4gICAgc3R5bGUuaWQgPSAndW5vY3NzX3N0eWxlJ1xuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCByZXNvbHZlKVxuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKHN0eWxlKVxuICB9KVxufVxuXG4vLyDlj5HpgIFkb23kv6Hmga/liLAg54i26aG16Z2iXG5leHBvcnQgZnVuY3Rpb24gc2VuZEh0bWwoKSB7XG4gIGNvbnN0IGRpdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKS5pbm5lckhUTUxcbiAgdG9wLnBvc3RNZXNzYWdlKGRpdiwgbG9jYXRpb24uYW5jZXN0b3JPcmlnaW5zWzBdKVxufVxuXG4vLyDmlLbniLbpobXpnaLkvKDmnaXliLAgY3NzXG5leHBvcnQgZnVuY3Rpb24gZ2V0VW5vY3NzQ29tcGlsZVJlcygpIHtcbiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCAoZXZlbnQpID0+IHtcbiAgICBjb25zdCBzdHlsZUVsbSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyN1bm9jc3Nfc3R5bGUnKVxuICAgIGlmIChzdHlsZUVsbSlcbiAgICAgIHN0eWxlRWxtLmlubmVySFRNTCA9IGV2ZW50LmRhdGFcbiAgfSlcbn0iLCJfbyI6e319' }, - { text: "Showcase", link: '' }, + { text: 'Guide', items: [ + { text: 'Introduction', link: '/guide/getting-started/index.md' }, + { text: 'Installation', link: '/guide/getting-started/installation.md' }, + { text: 'Theme', link: '/guide/getting-started/theme.md' } + ] }, + { text: 'Components', items: components }, + // { text: 'Windi UI', items: [] }, + // { text: 'Playground', link: 'http://localhost:5173/play/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPSd0cyc+XG4gIFxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cblxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiUGxheWdyb3VuZE1haW4udnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IG9uTW91bnRlZCB9IGZyb20gJ3Z1ZSdcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvYmFuLXRzLWNvbW1lbnRcbi8vIEB0cy1leHBlY3QtZXJyb3JcbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgZ2V0VW5vY3NzQ29tcGlsZVJlcywgaW5pdCwgbGliSW5zdGFsbCwgc2VuZEh0bWwgfSBmcm9tICcuL2xpYi1pbnN0YWxsLmpzJ1xuXG5saWJJbnN0YWxsKClcbm9uTW91bnRlZChhc3luYyAoKSA9PiB7XG4gIGF3YWl0IGluaXQoKVxuICBzZW5kSHRtbCgpXG4gIGdldFVub2Nzc0NvbXBpbGVSZXMoKVxufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLWRldi1wcm94eVwiLFxuICAgIFwiQHZ1ZS9jb21waWxlci1zZmNcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLXNmYy1kZXYtcHJveHlcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cDovL2xvY2FsaG9zdDo1MTczL3BsYXkvc3JjL3Z1ZS1zaGFyZWQtZGV2LXByb3h5XCIsXG4gICAgXCJ2dWUtdWktbmV4dFwiOiBcImh0dHA6Ly9sb2NhbGhvc3Q6NTE3My9wbGF5L3NyYy92dWUtdWktbmV4dC1kZXYtcHJveHlcIlxuICB9LFxuICBcInNjb3Blc1wiOiB7fVxufSIsImxpYi1pbnN0YWxsLmpzIjoiaW1wb3J0IHsgZ2V0Q3VycmVudEluc3RhbmNlIH0gZnJvbSAndnVlJ1xuLy8gaW1wb3J0IFVub1VJIGZyb20gJ29udS11aSdcbmltcG9ydCB7IHVpIH0gZnJvbSBcInZ1ZS11aS1uZXh0XCI7XG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuXG5leHBvcnQgZnVuY3Rpb24gbGliSW5zdGFsbCgpIHtcbiAgaWYgKGluc3RhbGxlZClcbiAgICByZXR1cm5cbiAgY29uc3QgaW5zdGFuY2UgPSBnZXRDdXJyZW50SW5zdGFuY2UoKVxuICBcbiAgLy8gaW5zdGFuY2UuYXBwQ29udGV4dC5hcHAudXNlKHVpKVxuICBpbnN0YWxsZWQgPSB0cnVlXG59XG5cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBpbml0KCkge1xuICBhd2FpdCBsb2FkU3R5bGUoKVxuICBhd2FpdCBjcmVhdGVJbmplY3RVbm9jc3MoKVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgIGxpbmsuaHJlZiA9ICd1bmRlZmluZWQnXG4gICAgbGluay5pZCA9ICdsaWJfc3R5bGUnXG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKGxpbmspXG4gIH0pXG59XG5cbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVJbmplY3RVbm9jc3MoKSB7XG4gIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgY29uc3Qgc3R5bGUgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzdHlsZScpXG4gICAgc3R5bGUuaWQgPSAndW5vY3NzX3N0eWxlJ1xuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCByZXNvbHZlKVxuICAgIHN0eWxlLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kKHN0eWxlKVxuICB9KVxufVxuXG4vLyDlj5HpgIFkb23kv6Hmga/liLAg54i26aG16Z2iXG5leHBvcnQgZnVuY3Rpb24gc2VuZEh0bWwoKSB7XG4gIGNvbnN0IGRpdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKS5pbm5lckhUTUxcbiAgdG9wLnBvc3RNZXNzYWdlKGRpdiwgbG9jYXRpb24uYW5jZXN0b3JPcmlnaW5zWzBdKVxufVxuXG4vLyDmlLbniLbpobXpnaLkvKDmnaXliLAgY3NzXG5leHBvcnQgZnVuY3Rpb24gZ2V0VW5vY3NzQ29tcGlsZVJlcygpIHtcbiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCAoZXZlbnQpID0+IHtcbiAgICBjb25zdCBzdHlsZUVsbSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyN1bm9jc3Nfc3R5bGUnKVxuICAgIGlmIChzdHlsZUVsbSlcbiAgICAgIHN0eWxlRWxtLmlubmVySFRNTCA9IGV2ZW50LmRhdGFcbiAgfSlcbn0iLCJfbyI6e319' }, + // { text: "Showcase", link: '' }, { text: `v${version}`, link: '' } ], @@ -49,21 +69,7 @@ export default defineConfig({ { text: "📦   Components", collapsed: true, - items: [ - { text: 'Accordion', link: '/guide/components/accordion.md' }, - { text: 'Alert', link: '/guide/components/alert.md' }, - { text: 'Avatar', link: '/guide/components/avatar.md'}, - { text: 'Badge', link: '/guide/components/badge.md'}, - { text: 'Button', link: '/guide/components/button.md'}, - { text: 'Checkbox', link: '/guide/components/checkbox.md'}, - { text: 'Divider', link: '/guide/components/divider.md'}, - { text: 'Icon', link: '/guide/components/icon.md'}, - { text: 'Input', link: '/guide/components/input.md'}, - { text: 'Kbd', link: '/guide/components/kbd.md'}, - { text: 'Modal', link: '/guide/components/modal.md'}, - { text: 'Switch', link: '/guide/components/switch.md'}, - { text: 'Tag', link: '/guide/components/tag.md'}, - ] + items: components } ], }, diff --git a/docs/docs/components/Icon/iconBasic.vue b/docs/docs/components/Icon/iconBasic.vue index 1a30c04..b093a31 100644 --- a/docs/docs/components/Icon/iconBasic.vue +++ b/docs/docs/components/Icon/iconBasic.vue @@ -1,12 +1,31 @@ \ No newline at end of file diff --git a/docs/docs/index.md b/docs/docs/index.md index 7c8740b..c43ae83 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -11,13 +11,13 @@ hero: actions: - theme: brand text: Get Started - link: /markdown-examples + link: /guide/getting-started/#introduction - theme: alt text: Why Windi? link: /guide/getting-started/#why-windi-ui - theme: alt text: View Components - link: /api-examples + link: /guide/components/accordion.html features: - icon: 🦾 diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts index ab0e783..f1da6a8 100644 --- a/packages/windi/src/theme/windiTheme.ts +++ b/packages/windi/src/theme/windiTheme.ts @@ -1,4 +1,52 @@ export default { + + WAccordion: { + base: { + root: 'w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-900 flex flex-col', + }, + + variants: {}, + }, + + WAccordionItem: { + base: { + root: 'border-t dark:bg-black dark:border-gray-900 transition duration-500 hover:bg-gray-100 dark:hover:bg-gray-900', + accordionItemActiveBackgroundColor: 'bg-gray-200 dark:bg-gray-800', + accordionItemActiveTitleColor: 'text-black dark:text-white', + accordionItemActiveLeadingIconColor: 'text-xl text-black dark:text-white', + accordionItemActiveTrailingIconColor: 'text-xl text-black dark:text-white', + accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg', + accordionItemTitle: 'font-medium dark:text-white text-black', + accordionIsDisabled: 'bg-gray-100 dark:bg-gray-900 dark:text-gray-700', + accordionItemIcon: 'relative ml-auto dark:text-white h-5 w-5 text-black transition-transform duration-500 md:h-6 md:w-6', + accordionItemIconIsDisabled: 'dark:text-gray-800 text-gray-300', + accordionItemButton: 'flex justify-between items-center cursor-pointer p-2', + accordionItemIconIsLeading: 'space-x-2.5', + accordionItemIconIsNotLeading: 'space-x-2', + accordionItemLeadingClass: 'absolute left-2.5 cursor-pointer flex items-center overflow-hidden', + accordionItemTrailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden', + accordionItembody: 'overflow-hidden px-5 transition-[height] duration-500 text-black will-change-[height] md:px-6', + accordionItemContent: 'py-2 font-light leading-relaxed tracking-wide text-black dark:text-white', + }, + variants: { + default: { + root: 'border-b dark:bg-black border-gray-300 dark:border-gray-900 transition duration-500 hover:bg-gray-100 dark:hover:bg-gray-900', + accordionItemActiveBackgroundColor: 'bg-gray-200 dark:bg-gray-800', + accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg', + accordionItemTitle: 'font-medium dark:text-white text-black', + accordionIsDisabled: 'text-gray-400 bg-gray-100', + accordionItemIcon: 'relative ml-auto dark:text-white h-5 w-5 text-black transition-transform duration-500 md:h-6 md:w-6', + accordionItemIconIsLeading: 'space-x-2.5', + accordionItemIconIsNotLeading: 'space-x-2', + accordionItemButton: 'flex justify-between items-center cursor-pointer p-2', + accordionItemLeadingClass: 'absolute left-2.5 cursor-pointer flex items-center overflow-hidden', + accordionItemTrailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden', + accordionItembody: 'overflow-hidden px-5 transition-[height] duration-500 text-black will-change-[height] md:px-6', + accordionItemContent: 'py-2 font-light leading-relaxed tracking-wide text-black dark:text-white', + }, + }, + }, + WAlert: { base: { root: 'w-full relative overflow-hidden rounded-md px-3 py-2.5', @@ -193,28 +241,6 @@ export default { avatarGroupMargin: '-mx-2.5', }, }, - WIcon: { - base: { - 'root': 'block cursor-pointer', - 'normal': 'text-base', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'base': 'text-base', - 'lg': 'text-lg', - 'xl': 'text-xl', - '2xl': 'text-2xl', - '3xl': 'text-3xl', - '4xl': 'text-4xl', - '6xl': 'text-6xl', - '8xl': 'text-8xl', - }, - - variants: { - default: { - root: 'block cursor-pointer', - }, - }, - }, WBadge: { base: { @@ -252,18 +278,6 @@ export default { }, }, - WDivider: { - base: { - root: 'w-full h-px', - dividerVertical: 'relative !w-px !h-4 !inline-block', - }, - variants: { - default: { - root: 'bg-gray-400 dark:bg-zinc-600', - }, - }, - }, - WButton: { base: { root: 'focus:outline-none text-white block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in', @@ -423,6 +437,7 @@ export default { }, }, }, + WButtonGroup: { base: { root: 'flex [&>:not(:first-child):not(:last-child)]:rounded-none', @@ -437,6 +452,95 @@ export default { }, }, + WCheckbox: { + base: { + root: 'relative flex items-start cursor-pointer', + checkbox: [ + 'relative dark:border-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex bg-white items-center justify-center transition-all select-none !h-4 !w-4 overflow-hidden border shadow-sm shadow-slate-600/10 border-slate-300 rounded', + 'active:peer-checked:pt-1.5 peer-focus-visible:shadow-[0_1px_1px_0,0_0_0_3px]', + ], + checkboxIconSize: 'text-sm', + checkboxDisplay: 'flex items-center h-5', + checkboxInput: 'peer absolute inset-0 m-0 h-full w-full cursor-pointer !opacity-0', + checkboxSpace: 'ms-2 text-sm', + checkIcon: 'flex justify-center items-center opacity-0 h-full w-full', + checkIconActive: '!mt-0 opacity-100 text-blue-600 drop-shadow-sm [text-shadow:0_1px_0_rgba(0,0,0,0.07)]', + checkboxLabel: 'font-medium text-gray-700 dark:text-gray-200', + checkboxRequired: 'text-red-500 dark:text-red-400', + checkboxHelp: 'text-gray-500 dark:text-gray-400', + checkboxHelpDisabled: 'text-gray-300 dark:text-gray-700', + }, + variants: { + default: { + checkbox: + 'hover:!border-yellow-600 active:!bg-yellow-600/30 peer-checked:!bg-yellow-600 peer-checked:border-yellow-600 active:peer-checked:bg-yellow-600 peer-focus-visible:border-yellow-600 peer-focus-visible:shadow-yellow-600/30', + checkIcon: '!text-white', + }, + primary: { + checkbox: + 'hover:!border-blue-600 active:!bg-blue-600/30 peer-checked:!bg-blue-600 peer-checked:border-blue-600 active:peer-checked:bg-blue-600 peer-focus-visible:border-blue-600 peer-focus-visible:shadow-blue-600/30', + checkIcon: '!text-white', + }, + success: { + checkbox: + 'active:!bg-green-500/30 active:!border-green-500 hover:!border-green-500 active:peer-checked:bg-green-500 peer-checked:!bg-green-500 peer-checked:border-green-500 peer-focus-visible:border-green-500 peer-focus-visible:shadow-green-500/30', + checkIcon: '!text-white', + }, + warning: { + checkbox: + 'active:!bg-orange-500/30 active:!border-orange-500 hover:!border-orange-500 active:peer-checked:bg-orange-500 peer-checked:!bg-orange-500 peer-checked:border-orange-500 peer-focus-visible:border-orange-500 peer-focus-visible:shadow-orange-500/30', + checkIcon: '!text-white', + }, + danger: { + checkbox: + 'active:!bg-red-500/30 active:!border-red-500 hover:!border-red-500 peer-checked:!bg-red-500 active:peer-checked:bg-red-500 peer-checked:border-red-500 peer-focus-visible:border-red-500 peer-focus-visible:shadow-red-500/30', + checkIcon: '!text-white', + }, + disabled: { + checkbox: + 'cursor-not-allowed !border-gray-300 active:!border-gray-300 !bg-gray-100 active:!bg-gray-100 peer-checked:!border-gray-300 hover:!border-gray-300 active:!pt-0 dark:!text-zinc-500 dark:!bg-neutral-700 dark:!border-neutral-700 peer-checked:!bg-gray-100 dark:peer-checked:!bg-neutral-700 dark:peer-checked:!border-gray-700', + checkIcon: '!text-gray-300 dark:!text-gray-500 [text-shadow:none]', + checkboxLabel: 'text-gray-300 dark:text-gray-500', + checkboxRequired: 'pointer-events-none text-red-100', + }, + }, + }, + + WDivider: { + base: { + root: 'w-full h-px', + dividerVertical: 'relative !w-px !h-4 !inline-block', + }, + variants: { + default: { + root: 'bg-gray-400 dark:bg-zinc-600', + }, + }, + }, + + WIcon: { + base: { + 'root': 'block cursor-pointer', + 'normal': 'text-base', + 'xs': 'text-xs', + 'sm': 'text-sm', + 'base': 'text-base', + 'lg': 'text-lg', + 'xl': 'text-xl', + '2xl': 'text-2xl', + '3xl': 'text-3xl', + '4xl': 'text-4xl', + '6xl': 'text-6xl', + '8xl': 'text-8xl', + }, + + variants: { + default: { + root: 'block cursor-pointer', + }, + }, + }, + WInput: { base: { root: 'relative', @@ -536,104 +640,6 @@ export default { }, }, - WCheckbox: { - base: { - root: 'relative flex items-start cursor-pointer', - checkbox: [ - 'relative dark:border-zinc-600 dark:bg-zinc-700 dark:hover:bg-zinc-600 flex bg-white items-center justify-center transition-all select-none !h-4 !w-4 overflow-hidden border shadow-sm shadow-slate-600/10 border-slate-300 rounded', - 'active:peer-checked:pt-1.5 peer-focus-visible:shadow-[0_1px_1px_0,0_0_0_3px]', - ], - checkboxIconSize: 'text-sm', - checkboxDisplay: 'flex items-center h-5', - checkboxInput: 'peer absolute inset-0 m-0 h-full w-full cursor-pointer !opacity-0', - checkboxSpace: 'ms-2 text-sm', - checkIcon: 'flex justify-center items-center opacity-0 h-full w-full', - checkIconActive: '!mt-0 opacity-100 text-blue-600 drop-shadow-sm [text-shadow:0_1px_0_rgba(0,0,0,0.07)]', - checkboxLabel: 'font-medium text-gray-700 dark:text-gray-200', - checkboxRequired: 'text-red-500 dark:text-red-400', - checkboxHelp: 'text-gray-500 dark:text-gray-400', - checkboxHelpDisabled: 'text-gray-300 dark:text-gray-700', - }, - variants: { - default: { - checkbox: - 'hover:!border-yellow-600 active:!bg-yellow-600/30 peer-checked:!bg-yellow-600 peer-checked:border-yellow-600 active:peer-checked:bg-yellow-600 peer-focus-visible:border-yellow-600 peer-focus-visible:shadow-yellow-600/30', - checkIcon: '!text-white', - }, - primary: { - checkbox: - 'hover:!border-blue-600 active:!bg-blue-600/30 peer-checked:!bg-blue-600 peer-checked:border-blue-600 active:peer-checked:bg-blue-600 peer-focus-visible:border-blue-600 peer-focus-visible:shadow-blue-600/30', - checkIcon: '!text-white', - }, - success: { - checkbox: - 'active:!bg-green-500/30 active:!border-green-500 hover:!border-green-500 active:peer-checked:bg-green-500 peer-checked:!bg-green-500 peer-checked:border-green-500 peer-focus-visible:border-green-500 peer-focus-visible:shadow-green-500/30', - checkIcon: '!text-white', - }, - warning: { - checkbox: - 'active:!bg-orange-500/30 active:!border-orange-500 hover:!border-orange-500 active:peer-checked:bg-orange-500 peer-checked:!bg-orange-500 peer-checked:border-orange-500 peer-focus-visible:border-orange-500 peer-focus-visible:shadow-orange-500/30', - checkIcon: '!text-white', - }, - danger: { - checkbox: - 'active:!bg-red-500/30 active:!border-red-500 hover:!border-red-500 peer-checked:!bg-red-500 active:peer-checked:bg-red-500 peer-checked:border-red-500 peer-focus-visible:border-red-500 peer-focus-visible:shadow-red-500/30', - checkIcon: '!text-white', - }, - disabled: { - checkbox: - 'cursor-not-allowed !border-gray-300 active:!border-gray-300 !bg-gray-100 active:!bg-gray-100 peer-checked:!border-gray-300 hover:!border-gray-300 active:!pt-0 dark:!text-zinc-500 dark:!bg-neutral-700 dark:!border-neutral-700 peer-checked:!bg-gray-100 dark:peer-checked:!bg-neutral-700 dark:peer-checked:!border-gray-700', - checkIcon: '!text-gray-300 dark:!text-gray-500 [text-shadow:none]', - checkboxLabel: 'text-gray-300 dark:text-gray-500', - checkboxRequired: 'pointer-events-none text-red-100', - }, - }, - }, - WAccordion: { - base: { - root: 'w-full bg-white dark:bg-black border border-gray-300 dark:border-gray-900 flex flex-col', - }, - - variants: {}, - }, - WAccordionItem: { - base: { - root: 'border-t dark:bg-black dark:border-gray-900 transition duration-500 hover:bg-gray-100 dark:hover:bg-gray-900', - accordionItemActiveBackgroundColor: 'bg-gray-200 dark:bg-gray-800', - accordionItemActiveTitleColor: 'text-black dark:text-white', - accordionItemActiveLeadingIconColor: 'text-xl text-black dark:text-white', - accordionItemActiveTrailingIconColor: 'text-xl text-black dark:text-white', - accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg', - accordionItemTitle: 'font-medium dark:text-white text-black', - accordionIsDisabled: 'bg-gray-100 dark:bg-gray-900 dark:text-gray-700', - accordionItemIcon: 'relative ml-auto dark:text-white h-5 w-5 text-black transition-transform duration-500 md:h-6 md:w-6', - accordionItemIconIsDisabled: 'dark:text-gray-800 text-gray-300', - accordionItemButton: 'flex justify-between items-center cursor-pointer p-2', - accordionItemIconIsLeading: 'space-x-2.5', - accordionItemIconIsNotLeading: 'space-x-2', - accordionItemLeadingClass: 'absolute left-2.5 cursor-pointer flex items-center overflow-hidden', - accordionItemTrailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden', - accordionItembody: 'overflow-hidden px-5 transition-[height] duration-500 text-black will-change-[height] md:px-6', - accordionItemContent: 'py-2 font-light leading-relaxed tracking-wide text-black dark:text-white', - }, - variants: { - default: { - root: 'border-b dark:bg-black border-gray-300 dark:border-gray-900 transition duration-500 hover:bg-gray-100 dark:hover:bg-gray-900', - accordionItemActiveBackgroundColor: 'bg-gray-200 dark:bg-gray-800', - accordionItemRounded: 'first:rounded-t-lg last:rounded-b-lg', - accordionItemTitle: 'font-medium dark:text-white text-black', - accordionIsDisabled: 'text-gray-400 bg-gray-100', - accordionItemIcon: 'relative ml-auto dark:text-white h-5 w-5 text-black transition-transform duration-500 md:h-6 md:w-6', - accordionItemIconIsLeading: 'space-x-2.5', - accordionItemIconIsNotLeading: 'space-x-2', - accordionItemButton: 'flex justify-between items-center cursor-pointer p-2', - accordionItemLeadingClass: 'absolute left-2.5 cursor-pointer flex items-center overflow-hidden', - accordionItemTrailingClass: 'absolute right-4 inset-y-0 cursor-pointer flex items-center overflow-hidden', - accordionItembody: 'overflow-hidden px-5 transition-[height] duration-500 text-black will-change-[height] md:px-6', - accordionItemContent: 'py-2 font-light leading-relaxed tracking-wide text-black dark:text-white', - }, - }, - }, WKbd: { base: { root: 'inline-flex items-center justify-center text-gray-900 px-1 dark:text-white', @@ -661,6 +667,46 @@ export default { }, }, + WModal: { + base: { + root: 'relative z-50', + modalInner: 'fixed inset-0 overflow-y-auto', + modalContainer: 'flex min-h-full items-center justify-center text-center', + modalPadding: 'p-4', + modalBase: 'relative text-left rtl:text-right overflow-hidden sm:my-8 w-full flex flex-col', + modalShadow: 'shadow-xl', + modalWidth: 'sm:max-w-lg', + modalBackground: 'bg-white border dark:border-gray-600/40 dark:bg-black', + modalRing: '', + modalRounded: 'rounded-lg', + modalHeight: 'h-96', + modalOverlayBase: 'fixed inset-0 transition-opacity', + modalOverlayBackground: 'bg-gray-200/75 dark:bg-[#09090B] dark:bg-opacity-90', + modalOverlayTransition: { + enter: 'ease-out duration-300', + enterFrom: 'opacity-0', + enterTo: 'opacity-100', + leave: 'ease-in duration-200', + leaveFrom: 'opacity-100', + leaveTo: 'opacity-0', + }, + modalTransition: { + enter: 'ease-out duration-300', + enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', + enterTo: 'opacity-100 translate-y-0 sm:scale-100', + leave: 'ease-in duration-200', + leaveFrom: 'opacity-100 translate-y-0 sm:scale-100', + leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', + }, + + variants: { + default: { + modalBackground: 'bg-white border dark:border-gray-600/40 dark:bg-black', + }, + }, + }, + }, + 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', @@ -798,46 +844,6 @@ export default { }, }, - WModal: { - base: { - root: 'relative z-50', - modalInner: 'fixed inset-0 overflow-y-auto', - modalContainer: 'flex min-h-full items-center justify-center text-center', - modalPadding: 'p-4', - modalBase: 'relative text-left rtl:text-right overflow-hidden sm:my-8 w-full flex flex-col', - modalShadow: 'shadow-xl', - modalWidth: 'sm:max-w-lg', - modalBackground: 'bg-white border dark:border-gray-600/40 dark:bg-black', - modalRing: '', - modalRounded: 'rounded-lg', - modalHeight: 'h-96', - modalOverlayBase: 'fixed inset-0 transition-opacity', - modalOverlayBackground: 'bg-gray-200/75 dark:bg-[#09090B] dark:bg-opacity-90', - modalOverlayTransition: { - enter: 'ease-out duration-300', - enterFrom: 'opacity-0', - enterTo: 'opacity-100', - leave: 'ease-in duration-200', - leaveFrom: 'opacity-100', - leaveTo: 'opacity-0', - }, - modalTransition: { - enter: 'ease-out duration-300', - enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', - enterTo: 'opacity-100 translate-y-0 sm:scale-100', - leave: 'ease-in duration-200', - leaveFrom: 'opacity-100 translate-y-0 sm:scale-100', - leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', - }, - - variants: { - default: { - modalBackground: 'bg-white border dark:border-gray-600/40 dark:bg-black', - }, - }, - }, - }, - transitions: { scale: { 'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',