feat: tw

docs/.vitepress/config.ts

@@ -72,8 +72,8 @@ export default defineConfig({
     ],
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('../../packages/vue/src', import.meta.url)),
-        '@zonda/vue': fileURLToPath(new URL('../../packages/vue/src/index', import.meta.url)),
+        // '@': fileURLToPath(new URL('../../packages/vue/src', import.meta.url)),
+        // '@zonda/vue': fileURLToPath(new URL('../../packages/vue/src/index', import.meta.url)),
       },
     },
     server: {

docs/.vitepress/theme/index.ts

@@ -1,3 +1,4 @@
+import '@zonda/vue/dist/style.css'
 import './index.css'
 
 import {

docs/tsconfig.json

@@ -1,9 +1,7 @@
 {
   "extends": "@jaskang/config/tsconfig.vue.json",
   "compilerOptions": {
-    "paths": {
-      "@zonda/vue": ["../packages/vue/src"]
-    }
+    "paths": {}
   },
   "include": ["env.d.ts", ".vitepress/**/*"]
 }

package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "pnpm --filter docs dev",
+    "start": "pnpm --filter docs dev",
     "docs:build": "pnpm --filter docs build",
     "docs:preview": "pnpm --filter docs preview",
     "build": "pnpm --filter @zonda/vue build"
@@ -19,7 +20,6 @@
   "devDependencies": {
     "@jaskang/config": "^2.0.0",
     "@jaskang/eslint-config": "^2.0.0",
-    "@pandacss/dev": "^0.15.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",

packages/vue/package.json

@@ -6,9 +6,20 @@
   "author": "jaskang",
   "license": "MIT",
   "type": "module",
-  "main": "index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist/index.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "scripts": {
-    "prepare": "panda codegen",
     "dev": "vite dev",
     "build": "vite build"
   },

packages/vue/src/components/Button/index.tsx

@@ -52,45 +52,6 @@ export const Button = defineComponent({
     icon: () => VNode
   }>,
   setup(props, { slots, emit }) {
-    const cssVars = useColorVars('z-btn', () => {
-      switch (props.variant) {
-        case 'solid':
-          return {
-            'text-color': 'white',
-            'bg-color': `${props.color}.500`,
-            'bg-color-hover': `${props.color}.600`,
-            'outline-color': `${props.color}.500`,
-          }
-        case 'soft':
-          return {
-            'text-color': `${props.color}.600`,
-            'bg-color': `${props.color}.100`,
-            'bg-color-hover': `${props.color}.200`,
-            'outline-color': `${props.color}.500`,
-          }
-        case 'plain':
-          return {
-            'text-color': `${props.color}.600`,
-            'bg-color-hover': `${props.color}.100`,
-            'outline-color': `${props.color}.500`,
-          }
-        case 'link':
-          return {
-            'text-color': `${props.color}.600`,
-            'outline-color': `${props.color}.500`,
-          }
-        default:
-          return {
-            'text-color': 'slate.700',
-            'bg-color': 'white',
-            'bg-color-hover': 'slate.50',
-            'border-color': 'slate.300',
-            'border-color-hover': 'slate.300',
-            'outline-color': 'primary.500',
-          }
-      }
-    })
-
     const hasIcon = computed(() => !!slots.icon || props.loading)
     const onClick = (e: MouseEvent) => {
       if (!props.disabled) {
@@ -99,26 +60,7 @@ export const Button = defineComponent({
     }
     const cls = computed(() => style(props))
     return () => (
-      <button
-        style={{
-          '--btn-size': {
-            xs: token.var('spacing.row-xs'),
-            sm: token.var('spacing.row-sm'),
-            md: token.var('spacing.row-md'),
-            lg: token.var('spacing.row-lg'),
-            xl: token.var('spacing.row-xl'),
-          }[props.size],
-        }}
-        class={cx(
-          cls.value,
-          css({
-            color: `${props.color}.500`,
-          })
-        )}
-        type="button"
-        disabled={props.disabled}
-        onClick={onClick}
-      >
+      <button class={cls.value} type="button" disabled={props.disabled} onClick={onClick}>
         {hasIcon.value && (
           <i class="z-btn_icon">
             {props.loading ? <LoadingIcon class="animate-spin" /> : slots.icon?.()}

packages/vue/src/components/Button/style.ts

@@ -96,7 +96,16 @@ export const style = (props: ButtonInnerProps) => {
       pill: props.circle || props.pill,
       square: props.circle || props.square,
     }),
-    colorStyle()
+    colorStyle(),
+    {
+      '--btn-size': {
+        xs: token.var('spacing.row-xs'),
+        sm: token.var('spacing.row-sm'),
+        md: token.var('spacing.row-md'),
+        lg: token.var('spacing.row-lg'),
+        xl: token.var('spacing.row-xl'),
+      }[props.size],
+    }
   )
   return ret
 }

packages/vue/src/index.ts

@@ -1,6 +1,5 @@
 import './styles/index.css'
 
-// import './styles/_index.scss'
 import type { Plugin } from 'vue'
 
 import { ElSlot } from './components/_pure/ElSlot'

packages/vue/src/styles/index.css

@@ -1 +1 @@
-@layer reset, base, tokens, recipes, utilities;
+@layer z-reset, z-base, z-tokens, z-recipes, z-utilities;

packages/vue/src/utils/clst.ts → packages/vue/src/utils/tw.ts

@@ -1,27 +1,27 @@
 import { clsx, type Flat } from 'kotl'
 
-type ClsvValue = string | [string, string]
+type TwValue = string | [string, string]
 
-type VariantConfig = {
-  [key: string]: { true: ClsvValue; false: ClsvValue } | { [key: string]: ClsvValue }
+type VariantsObject = {
+  [key: string]: { true: TwValue; false: TwValue } | { [key: string]: TwValue }
 }
 
 type InferVariants<T> = {
   [K in keyof T]: keyof T[K] extends 'true' | 'false' ? boolean : keyof T[K]
 }
 
-export function clsVariants<T extends VariantConfig>(
+export function tw<T extends VariantsObject>(
   base: string,
   options: {
     variants: T
-    compoundVariants?: Array<Partial<Flat<InferVariants<T>>> & { class: ClsvValue }>
+    compoundVariants?: Array<Partial<Flat<InferVariants<T>>> & { class: TwValue }>
   }
 ) {
   return (v: Flat<InferVariants<T>>) => {
     const cls = base.split(' ').map(s => s.trim())
     Object.keys(options.variants).forEach(key => {
       const value = options.variants[key]
-      let clsValue: ClsvValue = ''
+      let clsValue: TwValue = ''
       if (value) {
         const val = v[key]
         if (typeof val === 'boolean') {