vechaiui

src-tauri/tauri.conf.json

@@ -54,7 +54,6 @@
         "fullscreen": false,
         "alwaysOnTop": false,
         "focus": true,
-        "transparent": true,
         "fileDropEnabled": false,
         "decorations": false,
         "center": true

src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Button, colors, ColorScheme, extendTheme, Input } from '@vechaiui/react';
+import { Button, colors, ColorScheme, extendTheme, Icon, Input, Switch } from '@vechaiui/react';
 import { VechaiProvider } from '@vechaiui/react';
+import { CookingPot } from 'phosphor-react';
 
 export const pale: ColorScheme = {
   id: 'pale',
@@ -29,15 +30,38 @@ const theme = extendTheme({
 export default function App() {
   return (
     <VechaiProvider theme={theme} colorScheme="pale">
-      <div className="p-8">
-        <div className="flex flex-wrap w-full p-8 space-x-2">
+      <div className="p-2">
+        <div className="flex flex-wrap w-full py-2 space-x-2">
           <Button>Button</Button>
           <Button variant="solid">Button</Button>
           <Button variant="light">Button</Button>
           <Button variant="ghost">Button</Button>
           <Button variant="link">Button</Button>
         </div>
-        <Input />
+        <div className="max-w">
+          <Input />
+        </div>
+        <div className="flex flex-wrap w-full py-2 space-x-2">
+          <Button
+            variant="solid"
+            color="primary"
+            leftIcon={<Icon as={CookingPot} label="gift" className="w-4 h-4 mr-1" />}
+          >
+            Button
+          </Button>
+          <Button
+            color="primary"
+            rightIcon={<Icon as={CookingPot} label="gift" className="w-4 h-4 ml-1" />}
+          >
+            Button
+          </Button>
+        </div>
+        <div className="flex flex-wrap w-full py-2 space-x-4">
+          <Switch size="sm" />
+          <Switch size="md" />
+          <Switch size="lg" />
+          <Switch size="xl" />
+        </div>
       </div>
     </VechaiProvider>
   );

tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
     './src/**/*.{vue,js,ts,jsx,tsx}',
     './node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}'
   ],
-  darkMode: 'media',
+  darkMode: 'class',
   mode: 'jit',
   theme: {
     colors: {
@@ -20,9 +20,7 @@ module.exports = {
     }
   },
   variants: {
-    extend: {
-      // bg: { transparent: 'transparent' }
-    }
+    extend: {}
   },
   plugins: [require('@tailwindcss/forms'), require('@vechaiui/core')]
 };